feat: reset the styles better

Author: bahmutov

cypress/component/basic/styles/css-file/css-file-spec.js

@@ -6,7 +6,7 @@ describe('cssFile', () => {
   it('is loaded', () => {
     const Component = () => <button className="green">Green button</button>
     mount(<Component />, {
-      cssFiles: 'cypress/component/basic/css-file/index.css',
+      cssFiles: 'cypress/component/basic/styles/css-file/index.css',
     })
 
     cy.get('button')
@@ -17,7 +17,7 @@ describe('cssFile', () => {
   it('cssFile is for loading a single file', () => {
     const Component = () => <button className="green">Green button</button>
     mount(<Component />, {
-      cssFile: 'cypress/component/basic/css-file/index.css',
+      cssFile: 'cypress/component/basic/styles/css-file/index.css',
     })
 
     cy.get('button')
@@ -31,8 +31,8 @@ describe('cssFile', () => {
     )
     mount(<Component />, {
       cssFiles: [
-        'cypress/component/basic/css-file/base.css',
-        'cypress/component/basic/css-file/index.css',
+        'cypress/component/basic/styles/css-file/base.css',
+        'cypress/component/basic/styles/css-file/index.css',
       ],
     })
 

cypress/component/basic/styles/style/style-spec.js

@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+describe('style', () => {
+  let baseStyle
+  let indexStyle
+
+  before(() => {
+    cy.readFile('cypress/component/basic/styles/css-file/base.css').then(
+      css => {
+        baseStyle = css
+      },
+    )
+    cy.readFile('cypress/component/basic/styles/css-file/index.css').then(
+      css => {
+        indexStyle = css
+      },
+    )
+  })
+
+  context('options.style', () => {
+    it('string', () => {
+      const Component = () => <button className="green">Green button</button>
+      mount(<Component />, {
+        style: indexStyle,
+      })
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+
+    it('string[]', () => {
+      const Component = () => <button className="green">Green button</button>
+      mount(<Component />, {
+        style: [indexStyle],
+      })
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+  })
+
+  context('options.styles', () => {
+    it('string', () => {
+      const Component = () => <button className="green">Green button</button>
+      mount(<Component />, {
+        styles: indexStyle,
+      })
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+
+    it('sets several', () => {
+      const Component = () => (
+        <button className="green">Large green button</button>
+      )
+      mount(<Component />, {
+        styles: [baseStyle, indexStyle],
+      })
+
+      // check the style from the first css file
+      cy.get('button')
+        .should('have.class', 'green')
+        .invoke('css', 'height')
+        .should(value => {
+          // round the height, since in real browser it is never exactly 50
+          expect(parseFloat(value), 'height is 50px').to.be.closeTo(50, 1)
+        })
+
+      // and should have style from the second css file
+      cy.get('button').and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+
+    it('resets the style', () => {
+      const Component = () => (
+        <button className="green">Large green button</button>
+      )
+      mount(<Component />)
+      // the component should NOT have CSS styles
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .invoke('css', 'height')
+        .should(value => {
+          expect(parseFloat(value), 'height is < 20px').to.be.lessThan(20)
+        })
+    })
+  })
+})

cypress/component/basic/styles/stylesheets/stylesheets-spec.js

@@ -0,0 +1,70 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+describe('stylesheets', () => {
+  const baseUrl = '/__root/cypress/component/basic/styles/css-file/base.css'
+  const indexUrl = '/__root/cypress/component/basic/styles/css-file/index.css'
+
+  context('options.stylesheet', () => {
+    it('options.stylesheet string', () => {
+      const Component = () => <button className="green">Green button</button>
+      mount(<Component />, {
+        stylesheet: indexUrl,
+      })
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+
+    it('options.stylesheet []', () => {
+      const Component = () => <button className="green">Green button</button>
+      mount(<Component />, {
+        stylesheet: [indexUrl],
+      })
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+  })
+
+  context('options.stylesheets', () => {
+    it('allows loading several CSS files', () => {
+      const Component = () => (
+        <button className="green">Large green button</button>
+      )
+      mount(<Component />, {
+        stylesheets: [baseUrl, indexUrl],
+      })
+
+      // check the style from the first css file
+      cy.get('button')
+        .should('have.class', 'green')
+        .invoke('css', 'height')
+        .should(value => {
+          // round the height, since in real browser it is never exactly 50
+          expect(parseFloat(value), 'height is 50px').to.be.closeTo(50, 1)
+        })
+
+      // and should have style from the second css file
+      cy.get('button').and('have.css', 'background-color', 'rgb(0, 255, 0)')
+    })
+
+    it('resets the style', () => {
+      const Component = () => (
+        <button className="green">Large green button</button>
+      )
+      mount(<Component />)
+      // the component should NOT have CSS styles
+
+      cy.get('button')
+        .should('have.class', 'green')
+        .invoke('css', 'height')
+        .should(value => {
+          expect(parseFloat(value), 'height is < 20px').to.be.lessThan(20)
+        })
+    })
+  })
+})

lib/hooks.ts

@@ -25,10 +25,16 @@ before(() => {
  */
 function cleanupStyles() {
   const document = cy.state('document') as Document
+
   const styles = document.body.querySelectorAll('style')
   styles.forEach(styleElement => {
     document.body.removeChild(styleElement)
   })
+
+  const links = document.body.querySelectorAll('link[rel=stylesheet]')
+  links.forEach(link => {
+    document.body.removeChild(link)
+  })
 }
 
 beforeEach(cleanupStyles)

lib/index.d.ts

@@ -17,29 +17,35 @@ interface ReactModule {
 interface StyleOptions {
   /**
    * Creates <link href="..." /> element for each stylesheet
+   * @alias stylesheet
    */
   stylesheets: string | string[]
   /**
-   * Single CSS stylesheet URL
+   * Creates <link href="..." /> element for each stylesheet
+   * @alias stylesheets
    */
-  stylesheet: string
+  stylesheet: string | string[]
   /**
-   * Creates <style>...</style> element and inserts given CSS
+   * Creates <style>...</style> element and inserts given CSS.
+   * @alias styles
    */
-  style: string
+  style: string | string[]
   /**
-   * Creates <style>...</style> element for each given CSS text
+   * Creates <style>...</style> element for each given CSS text.
+   * @alias style
    */
   styles: string | string[]
   /**
    * Loads each file and creates a <style>...</style> element
    * with the loaded CSS
+   * @alias cssFile
    */
   cssFiles: string | string[]
   /**
    * Single CSS file to load into a <style></style> element
+   * @alias cssFile
    */
-  cssFile: string
+  cssFile: string | string[]
 }
 
 interface MountReactComponentOptions {

lib/utils.ts

@@ -62,7 +62,13 @@ export const injectStylesBeforeElement = (
   el: HTMLElement,
 ) => {
   // first insert all stylesheets as Link elements
-  let stylesheets = options.stylesheet ? [options.stylesheet] : []
+  let stylesheets: string[] = []
+
+  if (typeof options.stylesheet === 'string') {
+    stylesheets.push(options.stylesheet)
+  } else if (Array.isArray(options.stylesheet)) {
+    stylesheets = stylesheets.concat(options.stylesheet)
+  }
 
   if (typeof options.stylesheets === 'string') {
     options.stylesheets = [options.stylesheets]
@@ -74,9 +80,11 @@ export const injectStylesBeforeElement = (
   insertStylesheets(stylesheets, document, el)
 
   // insert any styles as <style>...</style> elements
-  let styles = []
+  let styles: string[] = []
   if (typeof options.style === 'string') {
     styles.push(options.style)
+  } else if (Array.isArray(options.style)) {
+    styles = styles.concat(options.style)
   }
   if (typeof options.styles === 'string') {
     styles.push(options.styles)
@@ -88,10 +96,12 @@ export const injectStylesBeforeElement = (
 
   // now load any css files by path and add their content
   // as <style>...</style> elements
-  let cssFiles = []
+  let cssFiles: string[] = []
 
   if (typeof options.cssFile === 'string') {
     cssFiles.push(options.cssFile)
+  } else if (Array.isArray(options.cssFile)) {
+    cssFiles = cssFiles.concat(options.cssFile)
   }
 
   if (typeof options.cssFiles === 'string') {