test: fix

webpack-contrib · Apr 8, 2024 · 48c37d6 · 48c37d6
1 parent e21605a
commit 48c37d6
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 102 deletions.
diff --git a/test/__snapshots__/esModule-option.test.js.snap b/test/__snapshots__/esModule-option.test.js.snap
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -923,6 +923,118 @@ exports[`loader should work when the "injectType" option is "styleTag": errors 1
 
 exports[`loader should work when the "injectType" option is "styleTag": warnings 1`] = `[]`;
 
+exports[`loader should work with css modules when the "injectType" option is "autoStyleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+</style><style>.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "autoStyleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "autoStyleTag": warnings 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyAutoStyleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+</style><style>.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyAutoStyleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyAutoStyleTag": warnings 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazySingletonStyleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazySingletonStyleTag": warnings 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyStyleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+</style><style>.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyStyleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "lazyStyleTag": warnings 1`] = `[]`;
+
 exports[`loader should work with css modules when the "injectType" option is "linkTag": DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>
@@ -934,13 +1046,69 @@ exports[`loader should work with css modules when the "injectType" option is "li
   <iframe class="iframeTarget"></iframe>
 
 
-<div class="undefined">Water</div><div class="undefined">Ground</div></body></html>"
+<div>Water</div><div>Ground</div></body></html>"
 `;
 
 exports[`loader should work with css modules when the "injectType" option is "linkTag": errors 1`] = `[]`;
 
 exports[`loader should work with css modules when the "injectType" option is "linkTag": warnings 1`] = `[]`;
 
+exports[`loader should work with css modules when the "injectType" option is "singletonStyleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "singletonStyleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "singletonStyleTag": warnings 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "styleTag": DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id="existing-style">.existing { color: yellow }</style>
+<style>.css-modules-local-scoped-className_B_X8gxt {
+  background: red;
+}
+</style><style>.css-modules-myClassName_ll2xYwU {
+  background: red;
+}
+
+.css-modules-myComposingClass__qO4CWd {
+  color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class="target"></div>
+  <iframe class="iframeTarget"></iframe>
+
+
+<div class="css-modules-myClassName_ll2xYwU">Water</div><div class="css-modules-myComposingClass__qO4CWd css-modules-local-scoped-className_B_X8gxt">Ground</div></body></html>"
+`;
+
+exports[`loader should work with css modules when the "injectType" option is "styleTag": errors 1`] = `[]`;
+
+exports[`loader should work with css modules when the "injectType" option is "styleTag": warnings 1`] = `[]`;
+
 exports[`loader should work: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>

diff --git a/test/esModule-option.test.js b/test/esModule-option.test.js
@@ -96,6 +96,15 @@ describe('"esModule" option', () => {
             {},
             {
               module: {
+                parser: {
+                  javascript: {
+                    exportsPresence:
+                      esModuleValue.cssLoader.modules &&
+                      esModuleValue.cssLoader.modules.exportOnlyLocals
+                        ? false
+                        : "error",
+                  },
+                },
                 rules: [
                   {
                     test: /\.css$/i,

diff --git a/test/fixtures/css-modules-link.js b/test/fixtures/css-modules-link.js
@@ -0,0 +1,15 @@
+import './css-modules.css';
+
+const node1 = document.createElement("DIV");
+const textNode1 = document.createTextNode("Water");
+
+node1.appendChild(textNode1);
+
+document.body.appendChild(node1);
+
+const node2 = document.createElement("DIV");
+const textNode2 = document.createTextNode("Ground");
+
+node2.appendChild(textNode2);
+
+document.body.appendChild(node2);
diff --git a/test/fixtures/css-modules.js b/test/fixtures/css-modules.js
@@ -1,4 +1,4 @@
-import styles from './css-modules.css';
+import * as styles from './css-modules.css';
 
 const node1 = document.createElement("DIV");
 const textNode1 = document.createTextNode("Water");

diff --git a/test/fixtures/lazy-css-modules.js b/test/fixtures/lazy-css-modules.js
@@ -1,19 +1,19 @@
-import styles from './css-modules.css';
+import styles, { myClassName, myComposingClass } from './css-modules.css';
 
 styles.use();
 
 const node1 = document.createElement("DIV");
 const textNode1 = document.createTextNode("Water");
 
 node1.appendChild(textNode1);
-node1.className = styles.locals.myClassName;
+node1.className = myClassName;
 
 document.body.appendChild(node1);
 
 const node2 = document.createElement("DIV");
 const textNode2 = document.createTextNode("Ground");
 
 node2.appendChild(textNode2);
-node2.className = styles.locals.myComposingClass;
+node2.className = myComposingClass;
 
 document.body.appendChild(node2);
diff --git a/test/loader.test.js b/test/loader.test.js
@@ -74,7 +74,10 @@ describe("loader", () => {
     it(`should work with css modules when the "injectType" option is "${injectType}"`, async () => {
       expect.assertions(3);
 
-      const entry = getEntryByInjectType("css-modules.js", injectType);
+      const entry = getEntryByInjectType(
+        injectType === "linkTag" ? "css-modules-link.js" : "css-modules.js",
+        injectType,
+      );
       const compiler = getCompiler(
         entry,
         {},