feat: add style option

Author: bahmutov

README.md

@@ -63,6 +63,47 @@ describe('HelloState component', () => {
 
 ![Unit testing React components](images/demo.png)
 
+### styles
+
+You can add individual style to the mounted component by passing its text as an option
+
+```js
+it('can be passed as an option', () => {
+  const style = `
+    .component-button {
+      display: inline-flex;
+      width: 25%;
+      flex: 1 0 auto;
+    }
+
+    .component-button.orange button {
+      background-color: #F5923E;
+      color: white;
+    }
+  `
+  cy.mount(<Button name='Orange' orange />, null, { style })
+  cy.get('.orange button')
+    .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+})
+```
+
+Often your component rely on global CSS style imported from the root `index.js` or `app.js` file
+
+```js
+// index.js
+import './styles.css'
+// bootstrap application
+```
+
+You can read the CSS file and pass it as `style` option yourself
+
+```js
+cy.readFile('cypress/integration/Button.css')
+  .then(style => {
+    cy.mount(<Button name='Orange' orange />, null, { style })
+  })
+```
+
 ## Configuration
 
 If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:

cypress/integration/inject-style-spec.js

@@ -0,0 +1,78 @@
+/// <reference types="cypress" />
+import React from 'react'
+
+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('Injecting style', () => {
+  it('can be passed as an option', () => {
+    const style = `
+      .component-button {
+        display: inline-flex;
+        width: 25%;
+        flex: 1 0 auto;
+      }
+
+      .component-button.orange button {
+        background-color: #F5923E;
+        color: white;
+      }
+    `
+    cy.mount(<Button name='Orange' orange />, null, { style })
+    cy.get('.orange button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+
+  it('read CSS file and pass as style', () => {
+    cy.readFile('cypress/integration/Button.css')
+    .then(style => {
+      cy.mount(<Button name='Orange' orange />, null, { style })
+    })
+
+    cy.get('.component-button')
+      .should('have.class', 'orange')
+      .find('button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+
+  context('read CSS file once', () => {
+    before(() => {
+      // .as('style') will save the loaded CSS text
+      // in the text context property "style"
+      cy.readFile('cypress/integration/Button.css').as('style')
+    })
+
+    it('is orange', function () {
+      // notice we use "function () {}" callback
+      // to get the test context "this" to be able to use "this.style"
+      cy.mount(<Button name='Orange' orange />, null, { style: this.style })
+
+      cy.get('.orange button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+    })
+
+    it('is orange again', function () {
+      cy.mount(<Button name='Orange' orange />, null, { style: this.style })
+
+      cy.get('.orange button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+    })
+  })
+})

lib/index.d.ts

@@ -24,6 +24,10 @@ interface JSXElement {
   props: object
 }
 
+interface MountOptions {
+  style: string
+}
+
 declare namespace Cypress {
   interface Cypress {
     stylesCache: any
@@ -58,7 +62,7 @@ declare namespace Cypress {
     cy.get(Hello)
     ```
     **/
-    mount: (component: JSXElement, alias?: string) => Chainable<void>
+    mount: (component: JSXElement, alias?: string, options?: Partial<MountOptions>) => Chainable<void>
     get<S = any>(alias: string | symbol | Function, options?: Partial<Loggable & Timeoutable>): Chainable<any>
   }
 }

lib/index.ts

@@ -87,6 +87,14 @@ Cypress.Commands.add('copyComponentStyles', component => {
   })
 })
 
+const injectStyle = (options?: Partial<MountOptions>) => (w: Window) => {
+  if (options && options.style) {
+    const style = w.document.createElement('style')
+    style.appendChild(document.createTextNode(options.style))
+    w.document.body.appendChild(style)
+ }
+}
+
 /**
  * Mount a React component in a blank document; register it as an alias
  * To access: use an alias or original component reference
@@ -106,7 +114,7 @@ Cypress.Commands.add('copyComponentStyles', component => {
  cy.get(Hello)
  ```
  **/
-export const mount = (jsx: JSXElement, alias?: string) => {
+export const mount = (jsx: JSXElement, alias?: string, options?: Partial<MountOptions>) => {
   // Get the display name property via the component constructor
   const jsxType = typeof jsx.type === 'string' ? jsx as unknown as JSX : jsx.type
   const displayname = getDisplayName(jsxType, alias)
@@ -127,6 +135,7 @@ export const mount = (jsx: JSXElement, alias?: string) => {
         }
       })
     })
+    .then(injectStyle(options))
     .then(setXMLHttpRequest)
     .then(setAlert)
     .then(win => {