Skip to content

Commit ea5df68

Browse files
chenjiahanchenjiahan
committed
test: add e2e cases
1 parent 126997e commit ea5df68

18 files changed

+1163
-79
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@
3636
"devDependencies": {
3737
"@biomejs/biome": "^1.8.3",
3838
"@playwright/test": "^1.44.1",
39-
"@rsbuild/core": "^0.7.10",
39+
"@rsbuild/core": "^1.0.1-beta.1",
40+
"@rsbuild/plugin-less": "^1.0.1-beta.1",
41+
"@rsbuild/plugin-sass": "^1.0.1-beta.1",
42+
"@rsbuild/plugin-stylus": "^1.0.1-beta.1",
4043
"@types/node": "^20.14.1",
4144
"line-diff": "2.1.1",
4245
"nano-staged": "^0.8.0",

‎pnpm-lock.yaml

Lines changed: 683 additions & 60 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/basic/index.test.ts

Lines changed: 185 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,212 @@
1-
import { dirname } from 'node:path';
1+
import fs from 'node:fs';
2+
import { dirname, join, resolve } from 'node:path';
23
import { fileURLToPath } from 'node:url';
34
import { expect, test } from '@playwright/test';
45
import { createRsbuild } from '@rsbuild/core';
5-
import { pluginTypedCSSModules } from '../../src';
6-
import { getRandomPort } from '../helper';
6+
import { pluginLess } from '@rsbuild/plugin-less';
7+
import { pluginSass } from '@rsbuild/plugin-sass';
8+
import { pluginStylus } from '@rsbuild/plugin-stylus';
9+
import { pluginTypedCSSModules } from '../../dist';
710

811
const __dirname = dirname(fileURLToPath(import.meta.url));
912

10-
test('should render page as expected', async ({ page }) => {
13+
const generatorTempDir = async (testDir: string) => {
14+
fs.rmSync(testDir, { recursive: true, force: true });
15+
await fs.promises.cp(join(__dirname, 'src'), testDir, { recursive: true });
16+
17+
return () => fs.promises.rm(testDir, { force: true, recursive: true });
18+
};
19+
20+
test('generator TS declaration for cssModules.auto true', async () => {
21+
const testDir = join(__dirname, 'test-temp-src-1');
22+
const clear = await generatorTempDir(testDir);
23+
24+
const rsbuild = await createRsbuild({
25+
cwd: __dirname,
26+
rsbuildConfig: {
27+
plugins: [
28+
pluginLess(),
29+
pluginSass(),
30+
pluginStylus(),
31+
pluginTypedCSSModules(),
32+
],
33+
source: {
34+
entry: { index: resolve(testDir, 'index.js') },
35+
},
36+
},
37+
});
38+
39+
await rsbuild.build();
40+
41+
expect(fs.existsSync(join(testDir, './a.css.d.ts'))).toBeFalsy();
42+
expect(fs.existsSync(join(testDir, './b.module.scss.d.ts'))).toBeTruthy();
43+
expect(fs.existsSync(join(testDir, './c.module.less.d.ts'))).toBeTruthy();
44+
expect(fs.existsSync(join(testDir, './d.global.less.d.ts'))).toBeFalsy();
45+
expect(fs.existsSync(join(testDir, './e.module.styl.d.ts'))).toBeTruthy();
46+
47+
const bContent = fs.readFileSync(join(testDir, './b.module.scss.d.ts'), {
48+
encoding: 'utf-8',
49+
});
50+
51+
expect(bContent).toEqual(`// This file is automatically generated.
52+
// Please do not change this file!
53+
interface CssExports {
54+
_underline: string;
55+
btn: string;
56+
default: string;
57+
primary: string;
58+
'the-b-class': string;
59+
theBClass: string;
60+
underline: string;
61+
}
62+
declare const cssExports: CssExports;
63+
export default cssExports;
64+
`);
65+
66+
const cContent = fs.readFileSync(join(testDir, './c.module.less.d.ts'), {
67+
encoding: 'utf-8',
68+
});
69+
70+
expect(cContent).toEqual(`// This file is automatically generated.
71+
// Please do not change this file!
72+
interface CssExports {
73+
'the-c-class': string;
74+
theCClass: string;
75+
}
76+
declare const cssExports: CssExports;
77+
export default cssExports;
78+
`);
79+
80+
await clear();
81+
});
82+
83+
test('generator TS declaration for cssModules.auto function', async () => {
84+
const testDir = join(__dirname, 'test-temp-src-2');
85+
const clear = await generatorTempDir(testDir);
86+
87+
const rsbuild = await createRsbuild({
88+
cwd: __dirname,
89+
rsbuildConfig: {
90+
plugins: [
91+
pluginLess(),
92+
pluginSass(),
93+
pluginStylus(),
94+
pluginTypedCSSModules(),
95+
],
96+
source: {
97+
entry: { index: resolve(testDir, 'index.js') },
98+
},
99+
output: {
100+
cssModules: {
101+
auto: (path) => {
102+
return path.endsWith('.scss');
103+
},
104+
},
105+
},
106+
},
107+
});
108+
109+
await rsbuild.build();
110+
111+
expect(fs.existsSync(join(testDir, './a.css.d.ts'))).toBeFalsy();
112+
expect(fs.existsSync(join(testDir, './b.module.scss.d.ts'))).toBeTruthy();
113+
expect(fs.existsSync(join(testDir, './c.module.less.d.ts'))).toBeFalsy();
114+
expect(fs.existsSync(join(testDir, './d.global.less.d.ts'))).toBeFalsy();
115+
116+
await clear();
117+
});
118+
119+
test('generator TS declaration for cssModules.auto Regexp', async () => {
120+
const testDir = join(__dirname, 'test-temp-src-3');
121+
const clear = await generatorTempDir(testDir);
122+
11123
const rsbuild = await createRsbuild({
12124
cwd: __dirname,
13125
rsbuildConfig: {
14-
plugins: [pluginTypedCSSModules()],
15-
server: {
16-
port: getRandomPort(),
126+
plugins: [
127+
pluginLess(),
128+
pluginSass(),
129+
pluginStylus(),
130+
pluginTypedCSSModules(),
131+
],
132+
source: {
133+
entry: { index: resolve(testDir, 'index.js') },
134+
},
135+
output: {
136+
cssModules: {
137+
auto: /\.module\./i,
138+
},
17139
},
18140
},
19141
});
20142

21-
const { server, urls } = await rsbuild.startDevServer();
143+
await rsbuild.build();
22144

23-
await page.goto(urls[0]);
24-
expect(await page.evaluate('window.test')).toBe(1);
145+
expect(fs.existsSync(join(testDir, './a.css.d.ts'))).toBeFalsy();
146+
expect(fs.existsSync(join(testDir, './b.module.scss.d.ts'))).toBeTruthy();
147+
expect(fs.existsSync(join(testDir, './c.module.less.d.ts'))).toBeTruthy();
148+
expect(fs.existsSync(join(testDir, './d.global.less.d.ts'))).toBeFalsy();
25149

26-
await server.close();
150+
await clear();
27151
});
28152

29-
test('should build succeed', async ({ page }) => {
153+
test('generator TS declaration for `asIs` convention', async () => {
154+
const testDir = join(__dirname, 'test-temp-src-4');
155+
const clear = await generatorTempDir(testDir);
156+
30157
const rsbuild = await createRsbuild({
31158
cwd: __dirname,
32159
rsbuildConfig: {
33-
plugins: [pluginTypedCSSModules()],
160+
plugins: [
161+
pluginLess(),
162+
pluginSass(),
163+
pluginStylus(),
164+
pluginTypedCSSModules(),
165+
],
166+
source: {
167+
entry: { index: resolve(testDir, 'index.js') },
168+
},
169+
output: {
170+
cssModules: {
171+
exportLocalsConvention: 'asIs',
172+
},
173+
},
34174
},
35175
});
36176

37177
await rsbuild.build();
38-
const { server, urls } = await rsbuild.preview();
39178

40-
await page.goto(urls[0]);
41-
expect(await page.evaluate('window.test')).toBe(1);
179+
expect(fs.existsSync(join(testDir, './b.module.scss.d.ts'))).toBeTruthy();
180+
expect(fs.existsSync(join(testDir, './c.module.less.d.ts'))).toBeTruthy();
181+
182+
const bContent = fs.readFileSync(join(testDir, './b.module.scss.d.ts'), {
183+
encoding: 'utf-8',
184+
});
185+
const cContent = fs.readFileSync(join(testDir, './c.module.less.d.ts'), {
186+
encoding: 'utf-8',
187+
});
188+
189+
expect(bContent).toEqual(`// This file is automatically generated.
190+
// Please do not change this file!
191+
interface CssExports {
192+
_underline: string;
193+
btn: string;
194+
default: string;
195+
primary: string;
196+
'the-b-class': string;
197+
}
198+
declare const cssExports: CssExports;
199+
export default cssExports;
200+
`);
201+
202+
expect(cContent).toEqual(`// This file is automatically generated.
203+
// Please do not change this file!
204+
interface CssExports {
205+
'the-c-class': string;
206+
}
207+
declare const cssExports: CssExports;
208+
export default cssExports;
209+
`);
42210

43-
await server.close();
211+
await clear();
44212
});

‎test/basic/src/a.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.the-a-class {
2+
color: red;
3+
}

‎test/basic/src/a.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.a {
2+
font-size: 14px;
3+
}

‎test/basic/src/b.module.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@value primary: blue;
2+
3+
.btn {
4+
padding: 20px;
5+
border: 1px solid #000;
6+
}
7+
8+
.the-b-class {
9+
composes: btn;
10+
composes: a from './a.module.scss';
11+
color: primary;
12+
}
13+
14+
.default {
15+
color: red;
16+
}
17+
18+
._underline {
19+
color: blue;
20+
}

‎test/basic/src/c.module.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.the-c-class {
2+
color: yellow;
3+
}

‎test/basic/src/d.global.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.the-d-class {
2+
color: green;
3+
}

‎test/basic/src/e.module.styl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.title-class
2+
font-size: 14px;

‎test/basic/src/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
window.test = 1;
1+
import './a.css';
2+
import './b.module.scss';
3+
import './c.module.less';
4+
import './d.global.less';
5+
import './e.module.styl';

0 commit comments

Comments
 (0)