test(e2e): move css-modules test cases to builder (#4016)

Co-authored-by: Asuka109 <chenwenjie.asuka@bytedance.com>
web-infra-dev · Jun 20, 2023 · 1ebbbb7 · 1ebbbb7
1 parent 7073297
commit 1ebbbb7
Show file tree

Hide file tree

Showing 33 changed files with 78 additions and 429 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/e2e/builder/cases/css/css-modules-composes/index.test.ts b/tests/e2e/builder/cases/css/css-modules-composes/index.test.ts
@@ -0,0 +1,45 @@
+import path from 'path';
+import { expect, test } from '@modern-js/e2e/playwright';
+import { build } from '@scripts/shared';
+
+test('should compile CSS modules composes correctly', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: { index: path.resolve(__dirname, './src/index.js') },
+  });
+  const files = await builder.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find(file => file.endsWith('.css'))!];
+
+  if (builder.providerType === 'rspack') {
+    expect(content).toMatch(
+      /.*\{background:red;color:yellow\}.*\{background:blue\}/,
+    );
+  } else {
+    expect(content).toMatch(
+      /.*\{background:red;color:#ff0\}.*\{background:blue\}/,
+    );
+  }
+});
+
+test('should compile CSS modules composes with external correctly', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: { external: path.resolve(__dirname, './src/external.js') },
+  });
+  const files = await builder.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find(file => file.endsWith('.css'))!];
+
+  if (builder.providerType === 'rspack') {
+    expect(content).toMatch(
+      /.*\{background:cyan;color:black\}.*\{background:green\}/,
+    );
+  } else {
+    expect(content).toMatch(
+      /.*\{background:cyan;color:#000\}.*\{background:green\}/,
+    );
+  }
+});
diff --git a/tests/e2e/builder/cases/css/css-modules-composes/src/external.js b/tests/e2e/builder/cases/css/css-modules-composes/src/external.js
@@ -0,0 +1,3 @@
+import styles from './external.module.css';
+
+console.log(styles);
diff --git a/tests/e2e/builder/cases/css/css-modules-composes/src/external.module.css b/tests/e2e/builder/cases/css/css-modules-composes/src/external.module.css
@@ -0,0 +1,4 @@
+.subClass2 {
+  composes: className from './other.module.css';
+  background: green;
+}
diff --git a/tests/e2e/builder/cases/css/css-modules-composes/src/index.js b/tests/e2e/builder/cases/css/css-modules-composes/src/index.js
@@ -0,0 +1,3 @@
+import styles from './index.module.css';
+
+console.log(styles);
diff --git a/...tures/composes-basic/src/index.module.css → ...css-modules-composes/src/index.module.css b/...tures/composes-basic/src/index.module.css → ...css-modules-composes/src/index.module.css
diff --git a/tests/e2e/builder/cases/css/css-modules-composes/src/other.module.css b/tests/e2e/builder/cases/css/css-modules-composes/src/other.module.css
@@ -0,0 +1,4 @@
+.className {
+  background: cyan;
+  color: black;
+}
diff --git a/tests/e2e/builder/cases/css/css-modules-global/index.test.ts b/tests/e2e/builder/cases/css/css-modules-global/index.test.ts
@@ -0,0 +1,18 @@
+import path from 'path';
+import { expect, test } from '@modern-js/e2e/playwright';
+import { build } from '@scripts/shared';
+
+test('should compile CSS modules with :global() correctly', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: { index: path.resolve(__dirname, './src/index.js') },
+  });
+  const files = await builder.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find(file => file.endsWith('.css'))!];
+
+  expect(content).toMatch(
+    /.*\{position:relative\}.* \.bar,.* \.baz\{height:100%;overflow:hidden\}.* \.lol{width:80%}/,
+  );
+});
diff --git a/...xtures/global-module/src/index.module.css → ...s/css/css-modules-global/src/a.module.css b/...xtures/global-module/src/index.module.css → ...s/css/css-modules-global/src/a.module.css
diff --git a/tests/e2e/builder/cases/css/css-modules-global/src/index.js b/tests/e2e/builder/cases/css/css-modules-global/src/index.js
@@ -0,0 +1 @@
+import './a.module.css';
diff --git a/tests/integration/css-modules/fixtures/composes-basic/modern.config.ts b/tests/integration/css-modules/fixtures/composes-basic/modern.config.ts
diff --git a/tests/integration/css-modules/fixtures/composes-basic/package.json b/tests/integration/css-modules/fixtures/composes-basic/package.json
diff --git a/tests/integration/css-modules/fixtures/composes-basic/src/App.jsx b/tests/integration/css-modules/fixtures/composes-basic/src/App.jsx
diff --git a/tests/integration/css-modules/fixtures/composes-external/modern.config.ts b/tests/integration/css-modules/fixtures/composes-external/modern.config.ts
diff --git a/tests/integration/css-modules/fixtures/composes-external/package.json b/tests/integration/css-modules/fixtures/composes-external/package.json
diff --git a/tests/integration/css-modules/fixtures/composes-external/src/App.jsx b/tests/integration/css-modules/fixtures/composes-external/src/App.jsx
diff --git a/tests/integration/css-modules/fixtures/composes-external/src/index.module.css b/tests/integration/css-modules/fixtures/composes-external/src/index.module.css
diff --git a/tests/integration/css-modules/fixtures/composes-external/src/other.css b/tests/integration/css-modules/fixtures/composes-external/src/other.css
diff --git a/tests/integration/css-modules/fixtures/dev-module/modern.config.ts b/tests/integration/css-modules/fixtures/dev-module/modern.config.ts
diff --git a/tests/integration/css-modules/fixtures/dev-module/package.json b/tests/integration/css-modules/fixtures/dev-module/package.json
diff --git a/tests/integration/css-modules/fixtures/dev-module/src/App.jsx b/tests/integration/css-modules/fixtures/dev-module/src/App.jsx
diff --git a/tests/integration/css-modules/fixtures/dev-module/src/index.module.css b/tests/integration/css-modules/fixtures/dev-module/src/index.module.css
diff --git a/tests/integration/css-modules/fixtures/global-module/modern.config.ts b/tests/integration/css-modules/fixtures/global-module/modern.config.ts
diff --git a/tests/integration/css-modules/fixtures/global-module/package.json b/tests/integration/css-modules/fixtures/global-module/package.json
diff --git a/tests/integration/css-modules/fixtures/global-module/src/App.jsx b/tests/integration/css-modules/fixtures/global-module/src/App.jsx
diff --git a/tests/integration/css-modules/fixtures/prod-module/modern.config.ts b/tests/integration/css-modules/fixtures/prod-module/modern.config.ts
diff --git a/tests/integration/css-modules/fixtures/prod-module/package.json b/tests/integration/css-modules/fixtures/prod-module/package.json
diff --git a/tests/integration/css-modules/fixtures/prod-module/src/App.jsx b/tests/integration/css-modules/fixtures/prod-module/src/App.jsx
diff --git a/tests/integration/css-modules/fixtures/prod-module/src/index.module.css b/tests/integration/css-modules/fixtures/prod-module/src/index.module.css
diff --git a/tests/integration/css-modules/modern.config.js b/tests/integration/css-modules/modern.config.js
diff --git a/tests/integration/css-modules/package.json b/tests/integration/css-modules/package.json
diff --git a/tests/integration/css-modules/readme.md b/tests/integration/css-modules/readme.md