From e249cff36740874cf579dfad19bec26e008115b9 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Tue, 8 Oct 2024 09:11:55 -0400 Subject: [PATCH] additional nested and recursive test cases --- .../cases/build.default/build.default.spec.js | 17 ++++++++++++++-- .../src/components/header/header.js | 2 ++ .../build.default/src/components/logo/logo.js | 13 ++++++++++++ .../src/components/logo/logo.module.css | 8 ++++++++ .../develop.default/develop.default.spec.js | 20 ++++++++++++++++--- .../src/components/header/header.js | 1 + .../src/components/logo/logo.js | 13 ++++++++++++ .../src/components/logo/logo.module.css | 8 ++++++++ .../loaders-build.prerender.spec.js | 7 +++++-- 9 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.js create mode 100644 packages/plugin-css-modules/test/cases/build.default/src/components/logo/logo.module.css create mode 100644 packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.js create mode 100644 packages/plugin-css-modules/test/cases/develop.default/src/components/logo/logo.module.css 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 index 3c8e08800..9800f9f16 100644 --- 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 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 index 33f506253..acd1fe56d 100644 --- 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 = `
+
  • About 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 new file mode 100644 index 000000000..4c3d649b9 --- /dev/null +++ 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 = ` +
    + +
    + `; + } +} + +customElements.define('app-logo', Logo); \ No newline at end of file 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 new file mode 100644 index 000000000..254f4f2af --- /dev/null +++ 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%; +} \ No newline at end of file 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 index e60f93522..1db4d1ffa 100644 --- 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 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 index 33f506253..890529177 100644 --- 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 new file mode 100644 index 000000000..4c3d649b9 --- /dev/null +++ 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 = ` +
    + +
    + `; + } +} + +customElements.define('app-logo', Logo); \ No newline at end of file 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 new file mode 100644 index 000000000..254f4f2af --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/packages/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js b/packages/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js index daa7e0805..337fa8e52 100644 --- a/packages/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js +++ b/packages/plugin-css-modules/test/cases/loaders-build.prerender/loaders-build.prerender.spec.js @@ -19,7 +19,7 @@ * } * * User Workspace - * src/ + * src/ * components/ * footer/ * footer.js @@ -27,7 +27,10 @@ * header/ * header.js * header.module.css - * index.html + * logo/ + * logo.js + * logo.module.css + * index.html */ import chai from 'chai'; import { JSDOM } from 'jsdom';