additional nested and recursive test cases

ProjectEvergreen · Oct 8, 2024 · e249cff · e249cff
1 parent b71af39
commit e249cff
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 7 deletions.
diff --git a/packages/plugin-css-modules/test/cases/build.default/build.default.spec.js b/packages/plugin-css-modules/test/cases/build.default/build.default.spec.js
@@ -18,12 +18,15 @@
  * }
  *
  * User Workspace
- *  src/
+ * src/
  *   components/
  *     header/
  *       header.js
  *       header.module.css
- *     index.html
+ *     logo/
+ *       logo.js
+ *       logo.module.css
+ *   index.html
  */
 import chai from 'chai';
 import { JSDOM } from 'jsdom';
@@ -187,6 +190,16 @@ describe('Build Greenwood With: ', function() {
           });
         });
       });
+
+      describe('Logo component nested in <app-header> component', () => {
+        it('should have the expected logo CSS inlined into the style tag', () => {
+          const styles = dom.window.document.querySelectorAll('head style');
+          const styleText = styles[0].textContent;
+          const expectedStyles = '.logo-1501575137-container{display:flex}.logo-1501575137-logo{display:inline-block;width:100%;}';
+
+          expect(styleText).to.contain(expectedStyles);
+        });
+      });
     });
   });
 

diff --git a/packages/plugin-css-modules/test/cases/build.default/src/components/header/header.js b/packages/plugin-css-modules/test/cases/build.default/src/components/header/header.js
@@ -1,9 +1,11 @@
 import styles from './header.module.css';
+import '../logo/logo.js';
 
 export default class Header extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       <header class="${styles.container}">
+        <app-logo></app-logo>
         <ul class="${styles.navBarMenu}">
           <li class="${styles.navBarMenuItem}">
             <a href="/about/" title="Documentation">About</a>

diff --git a/packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.js b/packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.js
@@ -0,0 +1,13 @@
+import styles from './logo.module.css';
+
+export default class Logo extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="${styles.container}">
+        <img class="${styles.logo}">
+      </div>
+    `;
+  }
+}
+
+customElements.define('app-logo', Logo);
diff --git a/packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.module.css b/packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.module.css
@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+}
+
+.logo {
+  display: inline-block;
+  width: 100%;
+}
diff --git a/packages/plugin-css-modules/test/cases/develop.default/develop.default.spec.js b/packages/plugin-css-modules/test/cases/develop.default/develop.default.spec.js
@@ -18,12 +18,15 @@
  * }
  *
  * User Workspace
- *  src/
+ * src/
  *   components/
  *     header/
  *       header.js
  *       header.module.css
- *     index.html
+ *     logo/
+ *       logo.js
+ *       logo.module.css
+ *   index.html
  */
 import chai from 'chai';
 import { JSDOM } from 'jsdom';
@@ -202,11 +205,22 @@ describe('Develop Greenwood With: ', function() {
           });
 
           it('the served content should be untouched', function() {
-            expect(contents.replace(/ /g, '').replace('\n', '').replace(/;/g, ''))
+            expect(contents.replace(/ /g, '').replace(/\n/g, '').replace(/;/g, ''))
               .to.equal(expectedHeaderCss.replace(/\.header-\[placeholder\]-/g, '.').replace(/ /g, '').replace(/\n/g, '').replace(/;/g, ''));
           });
         });
       });
+
+      describe('Logo component nested in <app-header> component', () => {
+        it('should have the expected logo CSS inlined into the style tag', () => {
+          const styles = dom.window.document.querySelectorAll('head style');
+          const styleText = styles[0].textContent;
+          const expectedStyles = '.logo-1501575137-container{display:flex}.logo-1501575137-logo{display:inline-block;width:100%;}';
+
+          expect(styleText.replace(/ /g, '').replace(/\n/g, '').replace(/;/g, ''))
+            .to.contain(expectedStyles.replace(/;/g, ''));
+        });
+      });
     });
   });
 

diff --git a/packages/plugin-css-modules/test/cases/develop.default/src/components/header/header.js b/packages/plugin-css-modules/test/cases/develop.default/src/components/header/header.js
@@ -1,4 +1,5 @@
 import styles from './header.module.css';
+import '../logo/logo.js';
 
 export default class Header extends HTMLElement {
   connectedCallback() {

diff --git a/packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.js b/packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.js
@@ -0,0 +1,13 @@
+import styles from './logo.module.css';
+
+export default class Logo extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="${styles.container}">
+        <img class="${styles.logo}">
+      </div>
+    `;
+  }
+}
+
+customElements.define('app-logo', Logo);
diff --git a/packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.module.css b/packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.module.css
@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+}
+
+.logo {
+  display: inline-block;
+  width: 100%;
+}
diff --git a/...ges/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js b/...ges/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js
@@ -19,15 +19,18 @@
  * }
  *
  * User Workspace
- *  src/
+ * src/
  *   components/
  *     footer/
  *       footer.js
  *       footer.module.css
  *     header/
  *       header.js
  *       header.module.css
- *     index.html
+ *     logo/
+ *       logo.js
+ *       logo.module.css
+ *   index.html
  */
 import chai from 'chai';
 import { JSDOM } from 'jsdom';