test(e2e-development-runtime): add test cases for various edge cases …

…related to css HMR

e2e-tests/development-runtime/cypress/integration/styling/plain-css.js

@@ -7,29 +7,179 @@ after(() => {
 })
 
 describe(`styling: plain css`, () => {
-  beforeEach(() => {
+  it(`initial styling is correct`, () => {
     cy.visit(`/styling/plain-css`).waitForRouteChange()
-  })
 
-  it(`initial styling is correct`, () => {
     cy.getTestElement(`styled-element`).should(
       `have.css`,
       `color`,
       `rgb(255, 0, 0)`
     )
-  })
 
-  it(`updates on change`, () => {
-    cy.exec(
-      `npm run update -- --file src/pages/styling/plain-css.css --replacements "red:blue" --exact`
+    cy.getTestElement(`styled-element-that-is-not-styled-initially`).should(
+      `have.css`,
+      `color`,
+      `rgb(0, 0, 0)`
     )
 
-    cy.waitForHmr()
-
-    cy.getTestElement(`styled-element`).should(
+    cy.getTestElement(`styled-element-by-not-visited-template`).should(
       `have.css`,
       `color`,
-      `rgb(0, 0, 255)`
+      `rgb(255, 0, 0)`
     )
+
+    cy.getTestElement(
+      `styled-element-that-is-not-styled-initially-by-not-visited-template`
+    ).should(`have.css`, `color`, `rgb(0, 0, 0)`)
+  })
+
+  describe(`changing styles/imports imported by visited template`, () => {
+    it(`updates on already imported css file change`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/plain-css.css --replacements "red:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`styled-element`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+
+    it(`importing new css file result in styles being applied`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/plain-css.js --replacements "// UNCOMMENT-IN-TEST:/* IMPORT-TO-COMMENT-OUT-AGAIN */" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`styled-element-that-is-not-styled-initially`).should(
+        `have.css`,
+        `color`,
+        `rgb(255, 0, 0)`
+      )
+    })
+
+    it(`updating newly imported css file result in styles being applied`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/plain-css-not-imported-initially.css --replacements "red:green" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`styled-element-that-is-not-styled-initially`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 128, 0)`
+      )
+    })
+
+    it(`removing css import results in styles being removed`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/plain-css.js --replacements "/* IMPORT-TO-COMMENT-OUT-AGAIN */:// COMMENTED-AGAIN" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`styled-element-that-is-not-styled-initially`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 0)`
+      )
+    })
+  })
+
+  describe(`changing styles/imports imported by NOT visited template`, () => {
+    it(`updates on already imported css file change by not visited template`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/not-visited-plain-css.css --replacements "red:blue" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(`styled-element-by-not-visited-template`).should(
+        `have.css`,
+        `color`,
+        `rgb(0, 0, 255)`
+      )
+    })
+
+    it(`importing new css file result in styles being applied`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/not-visited-plain-css.js --replacements "// UNCOMMENT-IN-TEST:/* IMPORT-TO-COMMENT-OUT-AGAIN */" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(
+        `styled-element-that-is-not-styled-initially-by-not-visited-template`
+      ).should(`have.css`, `color`, `rgb(255, 0, 0)`)
+    })
+
+    it(`updating newly imported css file result in styles being applied`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/not-visited-plain-css-not-imported-initially.css --replacements "red:green" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(
+        `styled-element-that-is-not-styled-initially-by-not-visited-template`
+      ).should(`have.css`, `color`, `rgb(0, 128, 0)`)
+    })
+
+    it(`removing css import results in styles being removed`, () => {
+      // we don't want to visit page for each test - we want to visit once and then test HMR
+      cy.window().then(win => {
+        cy.spy(win.console, `log`).as(`hmrConsoleLog`)
+      })
+
+      cy.exec(
+        `npm run update -- --file src/pages/styling/not-visited-plain-css.js --replacements "/* IMPORT-TO-COMMENT-OUT-AGAIN */:// COMMENTED-AGAIN" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(
+        `styled-element-that-is-not-styled-initially-by-not-visited-template`
+      ).should(`have.css`, `color`, `rgb(0, 0, 0)`)
+    })
   })
 })

e2e-tests/development-runtime/src/pages/styling/not-visited-plain-css-not-imported-initially.css

@@ -0,0 +1,3 @@
+.not-visited-plain-css-not-imported-initially {
+  color: red;
+}

e2e-tests/development-runtime/src/pages/styling/not-visited-plain-css.css

@@ -0,0 +1,3 @@
+.not-visited-plain-css-test {
+  color: red;
+}

e2e-tests/development-runtime/src/pages/styling/not-visited-plain-css.js

@@ -0,0 +1,17 @@
+import * as React from "react"
+
+import "./not-visited-plain-css.css"
+// UNCOMMENT-IN-TEST import "./not-visited-plain-css-not-imported-initially.css"
+
+export default function PlainCss() {
+  return (
+    <>
+      <p>
+        This content doesn't matter - we never visit this page in tests - but
+        because we generate single global .css file, we want to test changing
+        css files imported by this module (and also adding new css imports).css
+      </p>
+      <p>css imported by this template is tested in `./plain-css.js` page</p>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/styling/plain-css-not-imported-initially.css

@@ -0,0 +1,3 @@
+.plain-css-not-imported-initially {
+  color: red;
+}

e2e-tests/development-runtime/src/pages/styling/plain-css.js

@@ -1,11 +1,32 @@
 import * as React from "react"
 
 import "./plain-css.css"
+// UNCOMMENT-IN-TEST import "./plain-css-not-imported-initially.css"
 
 export default function PlainCss() {
   return (
-    <div data-testid="styled-element" className="plain-css-test">
-      test
+    <div style={{ color: `black` }}>
+      <div data-testid="styled-element" className="plain-css-test">
+        test
+      </div>
+      <div
+        data-testid="styled-element-that-is-not-styled-initially"
+        className="plain-css-not-imported-initially"
+      >
+        test
+      </div>
+      <div
+        data-testid="styled-element-by-not-visited-template"
+        className="not-visited-plain-css-test"
+      >
+        test
+      </div>
+      <div
+        data-testid="styled-element-that-is-not-styled-initially-by-not-visited-template"
+        className="not-visited-plain-css-not-imported-initially "
+      >
+        test
+      </div>
     </div>
   )
 }