Skip to content

Commit 5285779

Browse files
haoqunjianghaoqunjiang
committed
test: add style tests
1 parent 54a5155 commit 5285779

File tree

6 files changed

+216
-17
lines changed

6 files changed

+216
-17
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,15 @@
5858
"mini-css-extract-plugin": "^0.11.2",
5959
"normalize-newline": "^3.0.0",
6060
"null-loader": "^4.0.1",
61+
"postcss-loader": "^4.0.4",
6162
"prettier": "^2.1.1",
6263
"pug": "^2.0.0",
6364
"pug-plain-loader": "^1.0.0",
6465
"source-map": "^0.6.1",
65-
"style-loader": "^1.2.1",
66+
"style-loader": "^2.0.0",
6667
"stylus": "^0.54.7",
6768
"stylus-loader": "^3.0.2",
69+
"sugarss": "^3.0.1",
6870
"ts-jest": "^26.2.0",
6971
"ts-loader": "^8.0.6",
7072
"typescript": "^4.0.2",

‎test/fixtures/postcss.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<style lang="postcss" scoped>
2+
h1
3+
color: red
4+
font-size: 14px
5+
</style>

‎test/fixtures/scoped-css.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<style scoped>
2+
.test {
3+
color: yellow;
4+
}
5+
.test:after {
6+
content: 'bye!';
7+
}
8+
h1 {
9+
color: green;
10+
}
11+
.anim {
12+
animation: color 5s infinite, other 5s;
13+
}
14+
.anim-2 {
15+
animation-name: color;
16+
animation-duration: 5s;
17+
}
18+
.anim-3 {
19+
animation: 5s color infinite, 5s other;
20+
}
21+
.anim-multiple {
22+
animation: color 5s infinite, opacity 2s;
23+
}
24+
.anim-multiple-2 {
25+
animation-name: color, opacity;
26+
animation-duration: 5s, 2s;
27+
}
28+
@keyframes color {
29+
from { color: red; }
30+
to { color: green; }
31+
}
32+
@-webkit-keyframes color {
33+
from { color: red; }
34+
to { color: green; }
35+
}
36+
@keyframes opacity {
37+
from { opacity: 0; }
38+
to { opacity: 1; }
39+
}
40+
@-webkit-keyframes opacity {
41+
from { opacity: 0; }
42+
to { opacity: 1; }
43+
}
44+
.foo p ::v-deep(.bar) {
45+
color: red;
46+
}
47+
</style>
48+
49+
<template>
50+
<div>
51+
<div><h1>hi</h1></div>
52+
<p class="abc def">hi</p>
53+
<template v-if="ok"><p class="test">yo</p></template>
54+
<svg><template><p></p></template></svg>
55+
</div>
56+
</template>
57+
58+
<script>
59+
export default {
60+
data () {
61+
return { ok: true }
62+
}
63+
}
64+
</script>

‎test/style.spec.ts

+86-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,90 @@
1-
test.todo('scoped style')
1+
import { mockBundleAndRun, genId, normalizeNewline } from './utils'
22

3-
test.todo('postcss')
3+
test('scoped style', async () => {
4+
const { window, instance, componentModule } = await mockBundleAndRun({
5+
entry: 'scoped-css.vue',
6+
})
7+
8+
const shortId = genId('scoped-css.vue')
9+
const scopeId = 'data-v-' + shortId
10+
expect(componentModule.__scopeId).toBe(scopeId)
11+
12+
// <div>
13+
// <div><h1>hi</h1></div>
14+
// <p class="abc def">hi</p>
15+
// <template v-if="ok"><p class="test">yo</p></template>
16+
// <svg><template><p></p></template></svg>
17+
// </div>
18+
expect(instance.$el.children[0].tagName).toBe('DIV')
19+
expect(instance.$el.children[1].tagName).toBe('P')
20+
expect(instance.$el.children[1].className).toBe('abc def')
21+
expect(instance.$el.children[2].tagName).toBe('P')
22+
expect(instance.$el.children[2].className).toBe('test')
23+
24+
const style = normalizeNewline(
25+
window.document.querySelector('style')!.textContent!
26+
)
27+
28+
expect(style).toContain(`.test[${scopeId}] {\n color: yellow;\n}`)
29+
expect(style).toContain(`.test[${scopeId}]:after {\n content: \'bye!\';\n}`)
30+
expect(style).toContain(`h1[${scopeId}] {\n color: green;\n}`)
31+
// scoped keyframes
32+
// note: vue 3 uses short ids for keyframes
33+
// see https://github.com/vuejs/vue-next/commit/5f271515cf17e541a2a085d23854dac7e45e074e
34+
expect(style).toContain(
35+
`.anim[${scopeId}] {\n animation: color-${shortId} 5s infinite, other 5s;`
36+
)
37+
expect(style).toContain(
38+
`.anim-2[${scopeId}] {\n animation-name: color-${shortId}`
39+
)
40+
expect(style).toContain(
41+
`.anim-3[${scopeId}] {\n animation: 5s color-${shortId} infinite, 5s other;`
42+
)
43+
expect(style).toContain(`@keyframes color-${shortId} {`)
44+
expect(style).toContain(`@-webkit-keyframes color-${shortId} {`)
45+
46+
expect(style).toContain(
47+
`.anim-multiple[${scopeId}] {\n animation: color-${shortId} 5s infinite,opacity-${shortId} 2s;`
48+
)
49+
expect(style).toContain(
50+
`.anim-multiple-2[${scopeId}] {\n animation-name: color-${shortId},opacity-${shortId};`
51+
)
52+
expect(style).toContain(`@keyframes opacity-${shortId} {`)
53+
expect(style).toContain(`@-webkit-keyframes opacity-${shortId} {`)
54+
// >>> combinator
55+
expect(style).toContain(`.foo p[${scopeId}] .bar {\n color: red;\n}`)
56+
})
57+
58+
test('postcss', async () => {
59+
const { window } = await mockBundleAndRun({
60+
entry: 'postcss.vue',
61+
module: {
62+
rules: [
63+
{
64+
test: /\.postcss$/,
65+
use: [
66+
'style-loader',
67+
'css-loader',
68+
{
69+
loader: 'postcss-loader',
70+
options: {
71+
postcssOptions: {
72+
parser: require('sugarss'),
73+
},
74+
},
75+
},
76+
],
77+
},
78+
],
79+
},
80+
})
81+
82+
const id = 'data-v-' + genId('postcss.vue')
83+
const style = normalizeNewline(
84+
window.document.querySelector('style')!.textContent!
85+
)
86+
expect(style).toContain(`h1[${id}] {\n color: red;\n font-size: 14px\n}`)
87+
})
488

589
test.todo('CSS Modules')
690

‎test/utils.ts

+1-8
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,7 @@ const baseConfig: webpack.Configuration = {
3030
},
3131
{
3232
test: /\.css$/,
33-
use: [
34-
// {
35-
// loader: MiniCssExtractPlugin.loader,
36-
// options: { hmr: true },
37-
// },
38-
'style-loader',
39-
'css-loader',
40-
],
33+
use: ['style-loader', 'css-loader'],
4134
},
4235
],
4336
},

‎yarn.lock

+57-6
Original file line numberDiff line numberDiff line change
@@ -2524,6 +2524,11 @@ color-name@~1.1.4:
25242524
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
25252525
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
25262526

2527+
colorette@^1.2.1:
2528+
version "1.2.1"
2529+
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
2530+
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
2531+
25272532
combined-stream@^1.0.6, combined-stream@~1.0.6:
25282533
version "1.0.8"
25292534
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -5103,6 +5108,11 @@ kleur@^3.0.3:
51035108
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
51045109
integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
51055110

5111+
klona@^2.0.4:
5112+
version "2.0.4"
5113+
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
5114+
integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
5115+
51065116
lazy-cache@^1.0.3:
51075117
version "1.0.4"
51085118
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -5128,6 +5138,14 @@ levn@~0.3.0:
51285138
prelude-ls "~1.1.2"
51295139
type-check "~0.3.2"
51305140

5141+
line-column@^1.0.2:
5142+
version "1.0.2"
5143+
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
5144+
integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
5145+
dependencies:
5146+
isarray "^1.0.0"
5147+
isobject "^2.0.0"
5148+
51315149
lines-and-columns@^1.1.6:
51325150
version "1.1.6"
51335151
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -5573,6 +5591,11 @@ nan@^2.12.1:
55735591
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
55745592
integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
55755593

5594+
nanoid@^3.1.15:
5595+
version "3.1.16"
5596+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64"
5597+
integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==
5598+
55765599
nanomatch@^1.2.9:
55775600
version "1.2.13"
55785601
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6120,6 +6143,17 @@ posix-character-classes@^0.1.0:
61206143
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
61216144
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
61226145

6146+
postcss-loader@^4.0.4:
6147+
version "4.0.4"
6148+
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.4.tgz#b2d005b52e008a44991cf8123bee207e635eb53e"
6149+
integrity sha512-pntA9zIR14drQo84yGTjQJg1m7T0DkXR4vXYHBngiRZdJtEeCrojL6lOpqUanMzG375lIJbT4Yug85zC/AJWGw==
6150+
dependencies:
6151+
cosmiconfig "^7.0.0"
6152+
klona "^2.0.4"
6153+
loader-utils "^2.0.0"
6154+
schema-utils "^3.0.0"
6155+
semver "^7.3.2"
6156+
61236157
postcss-modules-extract-imports@^2.0.0:
61246158
version "2.0.0"
61256159
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -6191,6 +6225,16 @@ postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.
61916225
source-map "^0.6.1"
61926226
supports-color "^6.1.0"
61936227

6228+
postcss@^8.1.0:
6229+
version "8.1.4"
6230+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.4.tgz#356dfef367a70f3d04347f74560c85846e20e4c1"
6231+
integrity sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==
6232+
dependencies:
6233+
colorette "^1.2.1"
6234+
line-column "^1.0.2"
6235+
nanoid "^3.1.15"
6236+
source-map "^0.6.1"
6237+
61946238
prelude-ls@~1.1.2:
61956239
version "1.1.2"
61966240
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -6882,7 +6926,7 @@ schema-utils@^1.0.0:
68826926
ajv-errors "^1.0.0"
68836927
ajv-keywords "^3.1.0"
68846928

6885-
schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.1:
6929+
schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.7.1:
68866930
version "2.7.1"
68876931
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
68886932
integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -7461,13 +7505,13 @@ strip-indent@^2.0.0:
74617505
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
74627506
integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
74637507

7464-
style-loader@^1.2.1:
7465-
version "1.2.1"
7466-
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
7467-
integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
7508+
style-loader@^2.0.0:
7509+
version "2.0.0"
7510+
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
7511+
integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==
74687512
dependencies:
74697513
loader-utils "^2.0.0"
7470-
schema-utils "^2.6.6"
7514+
schema-utils "^3.0.0"
74717515

74727516
stylus-loader@^3.0.2:
74737517
version "3.0.2"
@@ -7492,6 +7536,13 @@ stylus@^0.54.7:
74927536
semver "^6.3.0"
74937537
source-map "^0.7.3"
74947538

7539+
sugarss@^3.0.1:
7540+
version "3.0.1"
7541+
resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-3.0.1.tgz#1e4e315b3b321eec477ef9617c8964bcf3833b0c"
7542+
integrity sha512-xW0tTjuJdd3VSsPH2dLgNDzESka1+Ul3GYVziyhX7GyXQboOARDaeEU++IjhOZPnoKoMENsU0tvtrCKr1sJwlw==
7543+
dependencies:
7544+
postcss "^8.1.0"
7545+
74957546
supports-color@^5.3.0:
74967547
version "5.5.0"
74977548
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"

0 commit comments

Comments
 (0)