Skip to content

Commit 8428759

Browse files
baiwusanyu-cbaiwusanyu-c
authored
test: updated unit test (#21)
* docs: update README.md * test: updated unit test * test: updated unit test * test: updated unit test * test: updated unit test
1 parent 88a50fd commit 8428759

36 files changed

+723
-769
lines changed

‎README.ZH-CN.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,24 @@ pnpm add unplugin-vue-cssvars -D
3333
```
3434

3535
## Usage
36+
1. 使用插件并配置
3637
<details>
3738
<summary>Vite</summary>
3839

3940
```ts
4041
// vite.config.ts
4142
import { defineConfig } from 'vite'
4243
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
43-
import type { PluginOption } from 'vite'
4444
import vue from '@vitejs/plugin-vue'
45+
import type { PluginOption } from 'vite'
4546
export default defineConfig({
4647
plugins: [
47-
vue(),
48-
viteVueCSSVars({
49-
include: [/.vue/],
50-
includeCompile: ['**/**.scss'],
51-
server: false,
52-
}) as PluginOption,
48+
vue(),
49+
viteVueCSSVars({
50+
include: [/.vue/],
51+
includeCompile: ['**/**.scss'],
52+
server: false,
53+
}) as PluginOption,
5354
],
5455
})
5556
```
@@ -115,6 +116,14 @@ build({
115116
```
116117
</details>
117118

119+
2. 使用 `v-bind-m`
120+
```
121+
// foo.css
122+
.foo{
123+
color: v-bind-m(fontColor)
124+
}
125+
```
126+
118127
## Option
119128

120129
```typescript

‎README.md‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,24 @@ pnpm add unplugin-vue-cssvars -D
3333
```
3434

3535
## Usage
36+
1. use plugin and set options
3637
<details>
3738
<summary>Vite</summary>
3839

3940
```ts
4041
// vite.config.ts
4142
import { defineConfig } from 'vite'
4243
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
43-
import type { PluginOption } from 'vite'
4444
import vue from '@vitejs/plugin-vue'
45+
import type { PluginOption } from 'vite'
4546
export default defineConfig({
4647
plugins: [
47-
vue(),
48-
viteVueCSSVars({
49-
include: [/.vue/],
50-
includeCompile: ['**/**.scss'],
51-
server: false,
52-
}) as PluginOption,
48+
vue(),
49+
viteVueCSSVars({
50+
include: [/.vue/],
51+
includeCompile: ['**/**.scss'],
52+
server: false,
53+
}) as PluginOption,
5354
],
5455
})
5556
```
@@ -63,9 +64,9 @@ export default defineConfig({
6364
// rollup.config.js
6465
import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
6566
export default {
66-
plugins: [
67-
rollupVueCSSVars(/* options */),
68-
],
67+
plugins: [
68+
rollupVueCSSVars(/* options */),
69+
],
6970
}
7071
```
7172

@@ -114,6 +115,13 @@ build({
114115
})
115116
```
116117
</details>
118+
2. use `v-bind-m`
119+
````
120+
// foo.css
121+
.foo{
122+
color: v-bind-m(fontColor)
123+
}
124+
````
117125

118126
## Option
119127

‎packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`inject-css > injectCssOnBuild: basic 1`] = `
4+
"
5+
6+
<style lang=\\"scss\\">/* foo.scss -> test2.css -> test.css */
7+
/* foo.scss -> test.scss -> test2.css */
8+
9+
/*@import \\"./assets/less/less-foo\\";*/
10+
div {
11+
color: v-bind(color)
12+
}
13+
</style>
14+
<style lang=\\"scss\\">
15+
body { background-color: black; }</style>"
16+
`;
17+
18+
exports[`inject-css > injectCssOnBuild: no lang 1`] = `
19+
"
20+
21+
<style lang=\\"css\\">/* foo.scss -> test2.css -> test.css */
22+
/* foo.scss -> test.scss -> test2.css */
23+
24+
/*@import \\"./assets/less/less-foo\\";*/
25+
div {
26+
color: v-bind(color)
27+
}
28+
</style>
29+
<style lang=\\"scss\\">
30+
body { background-color: black; }</style>"
31+
`;
32+
33+
exports[`inject-css > injectCssOnBuild: no styles 1`] = `
34+
"test
35+
36+
<style lang=\\"scss\\">
37+
body { background-color: black; }</style>"
38+
`;

‎packages/core/inject/__test__/inject-css.spec.ts‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { injectCssOnBuild, injectCssOnServer, removeStyleTagsAndContent } from '../inject-css'
3+
describe('inject-css', () => {
4+
test('injectCssOnServer: basic', () => {
5+
const code = 'v-bind-m(foo)'
6+
const vbindVariableList = [{ value: 'foo', hash: 'hash' }]
7+
expect(injectCssOnServer(code, vbindVariableList as any)).toBe('var(--hash)')
8+
})
9+
10+
test('injectCssOnServer: vbindVariableList is undefined', () => {
11+
const code = 'v-bind-m(foo)'
12+
expect(injectCssOnServer(code, undefined)).toBe(code)
13+
})
14+
15+
test('removeStyleTagsAndContent: basic', () => {
16+
const html = `
17+
<html>
18+
<head>
19+
<title>Test</title>
20+
<style>
21+
body {
22+
background-color: red;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<h1>Hello, world!</h1>
28+
<p>This is a test.</p>
29+
<style type="text/css">
30+
p {
31+
font-size: 16px;
32+
}
33+
</style>
34+
</body>
35+
</html>
36+
`
37+
38+
const expectedHtml = `
39+
<html>
40+
<head>
41+
<title>Test</title>
42+
43+
</head>
44+
<body>
45+
<h1>Hello, world!</h1>
46+
<p>This is a test.</p>
47+
48+
</body>
49+
</html>
50+
`
51+
52+
expect(removeStyleTagsAndContent(html)).toEqual(expectedHtml)
53+
})
54+
55+
test('removeStyleTagsAndContent: empty HTML', () => {
56+
expect(removeStyleTagsAndContent('')).toEqual('')
57+
})
58+
59+
test('removeStyleTagsAndContent: not modify HTML without style tags', () => {
60+
const html = `
61+
<html>
62+
<head>
63+
<title>Test</title>
64+
</head>
65+
<body>
66+
<h1>Hello, world!</h1>
67+
<p>This is a test.</p>
68+
</body>
69+
</html>
70+
`
71+
72+
expect(removeStyleTagsAndContent(html)).toEqual(html)
73+
})
74+
75+
test('injectCssOnBuild: basic', () => {
76+
const code = '<style lang="scss">\n'
77+
+ '/* foo.scss -> test2.css -> test.css */\n'
78+
+ '/* foo.scss -> test.scss -> test2.css */\n'
79+
+ '\n'
80+
+ '/*@import "./assets/less/less-foo";*/\n'
81+
+ 'div {\n'
82+
+ ' color: v-bind(color)\n'
83+
+ '}\n'
84+
+ "@import './assets/scss/foo.scss';\n"
85+
+ '</style>'
86+
const injectCSSContent = new Set([{ content: '@import \'./assets/scss/foo.scss\';\nbody { background-color: black; }', lang: 'scss' }])
87+
const descriptor = {
88+
styles: [
89+
{
90+
lang: 'scss',
91+
content: '/* foo.scss -> test2.css -> test.css */\n'
92+
+ '/* foo.scss -> test.scss -> test2.css */\n'
93+
+ '\n'
94+
+ '/*@import "./assets/less/less-foo";*/\n'
95+
+ 'div {\n'
96+
+ ' color: v-bind(color)\n'
97+
+ '}\n'
98+
+ "@import './assets/scss/foo.scss';",
99+
},
100+
],
101+
}
102+
const result = injectCssOnBuild(code, injectCSSContent, descriptor as any)
103+
expect(result).toMatchSnapshot()
104+
})
105+
106+
test('injectCssOnBuild: no styles', () => {
107+
const code = 'test'
108+
const injectCSSContent = new Set([{ content: '@import \'./assets/scss/foo.scss\';\nbody { background-color: black; }', lang: 'scss' }])
109+
const descriptor = {
110+
styles: null,
111+
}
112+
const result = injectCssOnBuild(code, injectCSSContent, descriptor as any)
113+
expect(result).toMatchSnapshot()
114+
})
115+
116+
test('injectCssOnBuild: no lang', () => {
117+
const code = '<style lang="scss">\n'
118+
+ '/* foo.scss -> test2.css -> test.css */\n'
119+
+ '/* foo.scss -> test.scss -> test2.css */\n'
120+
+ '\n'
121+
+ '/*@import "./assets/less/less-foo";*/\n'
122+
+ 'div {\n'
123+
+ ' color: v-bind(color)\n'
124+
+ '}\n'
125+
+ "@import './assets/scss/foo.scss';\n"
126+
+ '</style>'
127+
const injectCSSContent = new Set([{ content: '@import \'./assets/scss/foo.scss\';\nbody { background-color: black; }', lang: 'scss' }])
128+
const descriptor = {
129+
styles: [
130+
{
131+
lang: null,
132+
content: '/* foo.scss -> test2.css -> test.css */\n'
133+
+ '/* foo.scss -> test.scss -> test2.css */\n'
134+
+ '\n'
135+
+ '/*@import "./assets/less/less-foo";*/\n'
136+
+ 'div {\n'
137+
+ ' color: v-bind(color)\n'
138+
+ '}\n'
139+
+ "@import './assets/scss/foo.scss';",
140+
},
141+
],
142+
}
143+
const result = injectCssOnBuild(code, injectCSSContent, descriptor as any)
144+
expect(result).toMatchSnapshot()
145+
})
146+
})

0 commit comments

Comments
 (0)