Skip to content

Commit

Permalink
test: add style tests
Browse files Browse the repository at this point in the history
  • Loading branch information
sodatea committed Oct 28, 2020
1 parent 54a5155 commit 5285779
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 17 deletions.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,15 @@
"mini-css-extract-plugin": "^0.11.2",
"normalize-newline": "^3.0.0",
"null-loader": "^4.0.1",
"postcss-loader": "^4.0.4",
"prettier": "^2.1.1",
"pug": "^2.0.0",
"pug-plain-loader": "^1.0.0",
"source-map": "^0.6.1",
"style-loader": "^1.2.1",
"style-loader": "^2.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"sugarss": "^3.0.1",
"ts-jest": "^26.2.0",
"ts-loader": "^8.0.6",
"typescript": "^4.0.2",
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/postcss.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<style lang="postcss" scoped>
h1
color: red
font-size: 14px
</style>
64 changes: 64 additions & 0 deletions test/fixtures/scoped-css.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<style scoped>
.test {
color: yellow;
}
.test:after {
content: 'bye!';
}
h1 {
color: green;
}
.anim {
animation: color 5s infinite, other 5s;
}
.anim-2 {
animation-name: color;
animation-duration: 5s;
}
.anim-3 {
animation: 5s color infinite, 5s other;
}
.anim-multiple {
animation: color 5s infinite, opacity 2s;
}
.anim-multiple-2 {
animation-name: color, opacity;
animation-duration: 5s, 2s;
}
@keyframes color {
from { color: red; }
to { color: green; }
}
@-webkit-keyframes color {
from { color: red; }
to { color: green; }
}
@keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
.foo p ::v-deep(.bar) {
color: red;
}
</style>

<template>
<div>
<div><h1>hi</h1></div>
<p class="abc def">hi</p>
<template v-if="ok"><p class="test">yo</p></template>
<svg><template><p></p></template></svg>
</div>
</template>

<script>
export default {
data () {
return { ok: true }
}
}
</script>
88 changes: 86 additions & 2 deletions test/style.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,90 @@
test.todo('scoped style')
import { mockBundleAndRun, genId, normalizeNewline } from './utils'

test.todo('postcss')
test('scoped style', async () => {
const { window, instance, componentModule } = await mockBundleAndRun({
entry: 'scoped-css.vue',
})

const shortId = genId('scoped-css.vue')
const scopeId = 'data-v-' + shortId
expect(componentModule.__scopeId).toBe(scopeId)

// <div>
// <div><h1>hi</h1></div>
// <p class="abc def">hi</p>
// <template v-if="ok"><p class="test">yo</p></template>
// <svg><template><p></p></template></svg>
// </div>
expect(instance.$el.children[0].tagName).toBe('DIV')
expect(instance.$el.children[1].tagName).toBe('P')
expect(instance.$el.children[1].className).toBe('abc def')
expect(instance.$el.children[2].tagName).toBe('P')
expect(instance.$el.children[2].className).toBe('test')

const style = normalizeNewline(
window.document.querySelector('style')!.textContent!
)

expect(style).toContain(`.test[${scopeId}] {\n color: yellow;\n}`)
expect(style).toContain(`.test[${scopeId}]:after {\n content: \'bye!\';\n}`)
expect(style).toContain(`h1[${scopeId}] {\n color: green;\n}`)
// scoped keyframes
// note: vue 3 uses short ids for keyframes
// see https://github.com/vuejs/vue-next/commit/5f271515cf17e541a2a085d23854dac7e45e074e
expect(style).toContain(
`.anim[${scopeId}] {\n animation: color-${shortId} 5s infinite, other 5s;`
)
expect(style).toContain(
`.anim-2[${scopeId}] {\n animation-name: color-${shortId}`
)
expect(style).toContain(
`.anim-3[${scopeId}] {\n animation: 5s color-${shortId} infinite, 5s other;`
)
expect(style).toContain(`@keyframes color-${shortId} {`)
expect(style).toContain(`@-webkit-keyframes color-${shortId} {`)

expect(style).toContain(
`.anim-multiple[${scopeId}] {\n animation: color-${shortId} 5s infinite,opacity-${shortId} 2s;`
)
expect(style).toContain(
`.anim-multiple-2[${scopeId}] {\n animation-name: color-${shortId},opacity-${shortId};`
)
expect(style).toContain(`@keyframes opacity-${shortId} {`)
expect(style).toContain(`@-webkit-keyframes opacity-${shortId} {`)
// >>> combinator
expect(style).toContain(`.foo p[${scopeId}] .bar {\n color: red;\n}`)
})

test('postcss', async () => {
const { window } = await mockBundleAndRun({
entry: 'postcss.vue',
module: {
rules: [
{
test: /\.postcss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
parser: require('sugarss'),
},
},
},
],
},
],
},
})

const id = 'data-v-' + genId('postcss.vue')
const style = normalizeNewline(
window.document.querySelector('style')!.textContent!
)
expect(style).toContain(`h1[${id}] {\n color: red;\n font-size: 14px\n}`)
})

test.todo('CSS Modules')

Expand Down
9 changes: 1 addition & 8 deletions test/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,7 @@ const baseConfig: webpack.Configuration = {
},
{
test: /\.css$/,
use: [
// {
// loader: MiniCssExtractPlugin.loader,
// options: { hmr: true },
// },
'style-loader',
'css-loader',
],
use: ['style-loader', 'css-loader'],
},
],
},
Expand Down
63 changes: 57 additions & 6 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2524,6 +2524,11 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

colorette@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==

combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
Expand Down Expand Up @@ -5103,6 +5108,11 @@ kleur@^3.0.3:
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==

klona@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==

lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
Expand All @@ -5128,6 +5138,14 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"

line-column@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
dependencies:
isarray "^1.0.0"
isobject "^2.0.0"

lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
Expand Down Expand Up @@ -5573,6 +5591,11 @@ nan@^2.12.1:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==

nanoid@^3.1.15:
version "3.1.16"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64"
integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==

nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
Expand Down Expand Up @@ -6120,6 +6143,17 @@ posix-character-classes@^0.1.0:
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=

postcss-loader@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.4.tgz#b2d005b52e008a44991cf8123bee207e635eb53e"
integrity sha512-pntA9zIR14drQo84yGTjQJg1m7T0DkXR4vXYHBngiRZdJtEeCrojL6lOpqUanMzG375lIJbT4Yug85zC/AJWGw==
dependencies:
cosmiconfig "^7.0.0"
klona "^2.0.4"
loader-utils "^2.0.0"
schema-utils "^3.0.0"
semver "^7.3.2"

postcss-modules-extract-imports@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
Expand Down Expand Up @@ -6191,6 +6225,16 @@ postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.
source-map "^0.6.1"
supports-color "^6.1.0"

postcss@^8.1.0:
version "8.1.4"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.4.tgz#356dfef367a70f3d04347f74560c85846e20e4c1"
integrity sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==
dependencies:
colorette "^1.2.1"
line-column "^1.0.2"
nanoid "^3.1.15"
source-map "^0.6.1"

prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
Expand Down Expand Up @@ -6882,7 +6926,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"

schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.1:
schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
Expand Down Expand Up @@ -7461,13 +7505,13 @@ strip-indent@^2.0.0:
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=

style-loader@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
style-loader@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==
dependencies:
loader-utils "^2.0.0"
schema-utils "^2.6.6"
schema-utils "^3.0.0"

stylus-loader@^3.0.2:
version "3.0.2"
Expand All @@ -7492,6 +7536,13 @@ stylus@^0.54.7:
semver "^6.3.0"
source-map "^0.7.3"

sugarss@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-3.0.1.tgz#1e4e315b3b321eec477ef9617c8964bcf3833b0c"
integrity sha512-xW0tTjuJdd3VSsPH2dLgNDzESka1+Ul3GYVziyhX7GyXQboOARDaeEU++IjhOZPnoKoMENsU0tvtrCKr1sJwlw==
dependencies:
postcss "^8.1.0"

supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
Expand Down

0 comments on commit 5285779

Please sign in to comment.