fix: copy styles from correct frame, close #49

Author: bahmutov

cypress.json

@@ -2,5 +2,6 @@
   "viewportWidth": 300,
   "viewportHeight": 100,
   "video": false,
-  "projectId": "z9dxah"
+  "projectId": "z9dxah",
+  "ignoreTestFiles": "*.css"
 }

cypress/integration/Button.css

@@ -0,0 +1,63 @@
+.component-button {
+  display: inline-flex;
+  width: 25%;
+  flex: 1 0 auto;
+}
+
+.component-button.wide {
+  width: 50%;
+}
+
+.component-button button {
+  background-color: #E0E0E0;
+  border: 0;
+  font-size: 12px;
+  margin: 0 1px 0 0;
+  flex: 1 0 auto;
+  padding: 0;
+}
+
+.component-button:last-child button {
+  margin-right: 0;
+}
+
+.component-button.orange button {
+  background-color: #F5923E;
+  color: white;
+}
+
+@media (min-width: 200px) and (min-height: 200px) {
+  .component-button button {
+    font-size: 25px;
+  }
+}
+
+@media (min-width: 300px) and (min-height: 300px) {
+  .component-button button {
+    font-size: 30px;
+  }
+}
+
+@media (min-width: 400px) and (min-height: 400px) {
+  .component-button button {
+    font-size: 35px;
+  }
+}
+
+@media (min-width: 500px) and (min-height: 500px) {
+  .component-button button {
+    font-size: 40px;
+  }
+}
+
+@media (min-width: 600px) and (min-height: 600px) {
+  .component-button button {
+    font-size: 60px;
+  }
+}
+
+@media (min-width: 800px) and (min-height: 800px) {
+  .component-button button {
+    font-size: 70px;
+  }
+}

cypress/integration/orange-button-spec.js

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+import React from 'react'
+import './Button.css'
+
+class Button extends React.Component {
+  handleClick () {
+    this.props.clickHandler(this.props.name)
+  }
+
+  render () {
+    const className = [
+      'component-button',
+      this.props.orange ? 'orange' : '',
+      this.props.wide ? 'wide' : ''
+    ]
+
+    return (
+      <div className={className.join(' ').trim()}>
+        <button onClick={this.handleClick.bind(this)}>{this.props.name}</button>
+      </div>
+    )
+  }
+}
+
+describe('Button', () => {
+  it('can be orange', () => {
+    cy.mount(<Button name='Orange' orange />)
+    cy.get('.component-button')
+      .should('have.class', 'orange')
+      .find('button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+})

cypress/plugins/index.js

@@ -7,8 +7,13 @@ const webpackOptions = {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env', '@babel/preset-react'],
-          plugins: ['@babel/plugin-proposal-class-properties'],
-        },
+          plugins: ['@babel/plugin-proposal-class-properties']
+        }
+      },
+      {
+        test: /\.css$/,
+        exclude: [/node_modules/],
+        use: ['style-loader', 'css-loader']
       }
     ]
   }

lib/index.ts

@@ -51,11 +51,16 @@ Cypress.Commands.add('copyComponentStyles', component => {
   // need to find same component when component is recompiled
   // by the JSX preprocessor. Thus have to use something else,
   // like component name
+  const parentDocument = window.parent.document
+  // @ts-ignore
+  const specDocument = parentDocument.querySelector('iframe.spec-iframe').contentDocument
+  // @ts-ignore
+  const appDocument = parentDocument.querySelector('iframe.aut-iframe').contentDocument
+
   const hash = component.type.name
-  const document = cy.state('document')
-  let styles = document.querySelectorAll('head style')
+  let styles = specDocument.querySelectorAll('head style')
   if (styles.length) {
-    cy.log('injected %d styles', styles.length)
+    cy.log(`injected ${styles.length} style(s)`)
     Cypress.stylesCache.set(hash, styles)
   } else {
     cy.log('No styles injected for this component, checking cache')
@@ -68,14 +73,7 @@ Cypress.Commands.add('copyComponentStyles', component => {
   if (!styles) {
     return
   }
-  const parentDocument = window.parent.document
-  // hmm, is this really project name?
-  // @ts-ignore
-  const projectName = Cypress.config('projectName')
-  const appIframeId = "Your App: '" + projectName + "'"
-  const appIframe = parentDocument.getElementById(appIframeId)
-  // @ts-ignore
-  var head = appIframe.contentDocument.querySelector('head')
+  const head = appDocument.querySelector('head')
   styles.forEach(function (style) {
     head.appendChild(style)
   })