clean up any injected styles before each test

Author: bahmutov

cypress/component/basic/full-navigation-spec.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+const Login = () => (
+  <div>
+    <div>Login by clicking below</div>
+    <a href="/foo">click me</a>
+  </div>
+)
+
+describe('full navigation', () => {
+  it('should not happen', () => {
+    mount(<Login />)
+
+    const clicked = cy.stub()
+    cy.get('a').invoke('on', 'click', e => e.preventDefault() || clicked())
+    cy.get('a').click()
+    cy.wrap(clicked).should('have.been.calledOnce')
+  })
+})

cypress/component/basic/css-file/base.css renamed to cypress/component/basic/styles/css-file/base.css

@@ -6,7 +6,18 @@ describe('cssFile', () => {
   it('is loaded', () => {
     const Component = () => <button className="green">Green button</button>
     mount(<Component />, {
-      cssFiles: 'cypress/component/component tests/basic/css-file/index.css',
+      cssFiles: 'cypress/component/basic/css-file/index.css',
+    })
+
+    cy.get('button')
+      .should('have.class', 'green')
+      .and('have.css', 'background-color', 'rgb(0, 255, 0)')
+  })
+
+  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',
     })
 
     cy.get('button')
@@ -20,8 +31,8 @@ describe('cssFile', () => {
     )
     mount(<Component />, {
       cssFiles: [
-        'cypress/component/component tests/basic/css-file/base.css',
-        'cypress/component/component tests/basic/css-file/index.css',
+        'cypress/component/basic/css-file/base.css',
+        'cypress/component/basic/css-file/index.css',
       ],
     })
 
@@ -37,4 +48,19 @@ describe('cssFile', () => {
     // 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/css-file/css-file-spec.js renamed to cypress/component/basic/styles/css-file/css-file-spec.js

@@ -17,3 +17,18 @@ function renderTestingPlatform() {
 before(() => {
   renderTestingPlatform()
 })
+
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ */
+function cleanupStyles() {
+  const document = cy.state('document') as Document
+  const styles = document.body.querySelectorAll('style')
+  styles.forEach(styleElement => {
+    document.body.removeChild(styleElement)
+  })
+}
+
+beforeEach(cleanupStyles)

cypress/component/basic/css-file/index.css renamed to cypress/component/basic/styles/css-file/index.css

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