Skip to content

Commit 22965c4

Browse files
haoqunjiangznck
haoqunjiang
authored and
znck
committed
test: migrate tests from vue-loader (#28)
1 parent bb09115 commit 22965c4

6 files changed

+222
-5
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
node_modules
33
*.log
44
dist
5+
coverage

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"typings": "dist/index.d.ts",
77
"scripts": {
88
"lint": "prettier --write \"{lib,test}/**/*.ts\"",
9-
"test": "prettier --list-different \"{lib,test}/**/*.ts\" && jest",
9+
"test": "prettier --list-different \"{lib,test}/**/*.ts\" && jest --coverage",
1010
"build": "rm -rf dist && tsc",
1111
"prepublishOnly": "yarn build && conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
1212
},
@@ -47,7 +47,8 @@
4747
"stylus": "^0.54.5",
4848
"ts-jest": "^22.4.2",
4949
"typescript": "^2.7.2",
50-
"vue-template-compiler": "^2.5.16",
50+
"vue": "^2.5.17",
51+
"vue-template-compiler": "^2.5.17",
5152
"yorkie": "^1.0.3"
5253
},
5354
"dependencies": {

‎test/compileStyle.spec.ts

+38
Original file line numberDiff line numberDiff line change
@@ -161,3 +161,41 @@ test('async postcss plugin', async () => {
161161
expect(result.errors).toHaveLength(0)
162162
expect(result.code).toEqual(expect.stringContaining('color: red'))
163163
})
164+
165+
test('media query', () => {
166+
const result = compileStyle({
167+
id: 'v-scope-xxx',
168+
scoped: true,
169+
filename: 'example.vue',
170+
source: `
171+
@media print {
172+
.foo {
173+
color: #000;
174+
}
175+
}`
176+
})
177+
178+
expect(result.errors).toHaveLength(0)
179+
expect(result.code).toContain(
180+
'@media print {\n.foo[v-scope-xxx] {\n color: #000;\n}\n}'
181+
)
182+
})
183+
184+
test('supports query', () => {
185+
const result = compileStyle({
186+
id: 'v-scope-xxx',
187+
scoped: true,
188+
filename: 'example.vue',
189+
source: `
190+
@supports ( color: #000 ) {
191+
.foo {
192+
color: #000;
193+
}
194+
}`
195+
})
196+
197+
expect(result.errors).toHaveLength(0)
198+
expect(result.code).toContain(
199+
'@supports ( color: #000 ) {\n.foo[v-scope-xxx] {\n color: #000;\n}\n}'
200+
)
201+
})

‎test/compileTemplate.spec.ts

+91
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@ import { parse } from '../lib/parse'
22
import { compileTemplate } from '../lib/compileTemplate'
33
import * as compiler from 'vue-template-compiler'
44

5+
import Vue from 'vue'
6+
7+
afterEach(() => jest.resetAllMocks().resetModules())
8+
9+
function mockRender(code, options = {}) {
10+
eval(
11+
`${code}; options.render = render; options.staticRenderFns = staticRenderFns`
12+
)
13+
const vm = new Vue(Object.assign({}, options))
14+
vm.$mount()
15+
return vm._vnode
16+
}
17+
518
test('should work', () => {
619
const source = `<div><p>{{ render }}</p></div>`
720

@@ -63,3 +76,81 @@ test('warn missing preprocessor', () => {
6376

6477
expect(result.errors.length).toBe(1)
6578
})
79+
80+
test('transform assetUrls', () => {
81+
const source = `
82+
<div>
83+
<img src="./logo.png">
84+
<img src="~fixtures/logo.png">
85+
<img src="~/fixtures/logo.png">
86+
</div>
87+
`
88+
const result = compileTemplate({
89+
compiler: compiler,
90+
filename: 'example.vue',
91+
source,
92+
transformAssetUrls: true
93+
})
94+
expect(result.errors.length).toBe(0)
95+
96+
jest.mock('./logo.png', () => 'a', { virtual: true })
97+
jest.mock('fixtures/logo.png', () => 'b', { virtual: true })
98+
99+
const vnode = mockRender(result.code)
100+
expect(vnode.children[0].data.attrs.src).toBe('a')
101+
expect(vnode.children[2].data.attrs.src).toBe('b')
102+
expect(vnode.children[4].data.attrs.src).toBe('b')
103+
})
104+
105+
test('transform srcset', () => {
106+
// TODO:
107+
const source = `
108+
<div>
109+
<img src="./logo.png">
110+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
111+
<image xlink:href="./logo.png" />
112+
</svg>
113+
<img src="./logo.png" srcset="./logo.png">
114+
<img src="./logo.png" srcset="./logo.png 2x">
115+
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x">
116+
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png">
117+
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
118+
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x">
119+
<img
120+
src="./logo.png"
121+
srcset="
122+
./logo.png 2x,
123+
./logo.png 3x
124+
">
125+
</div>
126+
`
127+
const result = compileTemplate({
128+
compiler: compiler,
129+
filename: 'example.vue',
130+
source,
131+
transformAssetUrls: true
132+
})
133+
expect(result.errors.length).toBe(0)
134+
135+
jest.mock('./logo.png', () => 'test-url', { virtual: true })
136+
const vnode = mockRender(result.code)
137+
138+
// img tag
139+
expect(vnode.children[0].data.attrs.src).toBe('test-url')
140+
// image tag (SVG)
141+
expect(vnode.children[2].children[0].data.attrs['xlink:href']).toBe(
142+
'test-url'
143+
)
144+
145+
// image tag with srcset
146+
expect(vnode.children[4].data.attrs.srcset).toBe('test-url')
147+
expect(vnode.children[6].data.attrs.srcset).toBe('test-url 2x')
148+
// image tag with multiline srcset
149+
expect(vnode.children[8].data.attrs.srcset).toBe('test-url, test-url 2x')
150+
expect(vnode.children[10].data.attrs.srcset).toBe('test-url 2x, test-url')
151+
expect(vnode.children[12].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
152+
expect(vnode.children[14].data.attrs.srcset).toBe(
153+
'test-url, test-url 2x, test-url 3x'
154+
)
155+
expect(vnode.children[16].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
156+
})

‎test/stylePluginScoped.spec.ts

+82
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,85 @@ test('leading deep selector', () => {
2020

2121
expect(code).toMatch(`[test] .foo { color: red;`)
2222
})
23+
24+
test('scoped css', () => {
25+
const { code: style } = compileStyle({
26+
id: 'v-scope-xxx',
27+
scoped: true,
28+
filename: 'example.vue',
29+
source: `
30+
.test {
31+
color: yellow;
32+
}
33+
.test:after {
34+
content: 'bye!';
35+
}
36+
h1 {
37+
color: green;
38+
}
39+
.anim {
40+
animation: color 5s infinite, other 5s;
41+
}
42+
.anim-2 {
43+
animation-name: color;
44+
animation-duration: 5s;
45+
}
46+
.anim-3 {
47+
animation: 5s color infinite, 5s other;
48+
}
49+
.anim-multiple {
50+
animation: color 5s infinite, opacity 2s;
51+
}
52+
.anim-multiple-2 {
53+
animation-name: color, opacity;
54+
animation-duration: 5s, 2s;
55+
}
56+
57+
@keyframes color {
58+
from { color: red; }
59+
to { color: green; }
60+
}
61+
@-webkit-keyframes color {
62+
from { color: red; }
63+
to { color: green; }
64+
}
65+
@keyframes opacity {
66+
from { opacity: 0; }
67+
to { opacity: 1; }
68+
}
69+
@-webkit-keyframes opacity {
70+
from { opacity: 0; }
71+
to { opacity: 1; }
72+
}
73+
.foo p >>> .bar {
74+
color: red;
75+
}`
76+
})
77+
78+
expect(style).toContain(`.test[v-scope-xxx] {\n color: yellow;\n}`)
79+
expect(style).toContain(`.test[v-scope-xxx]:after {\n content: \'bye!\';\n}`)
80+
expect(style).toContain(`h1[v-scope-xxx] {\n color: green;\n}`)
81+
// scoped keyframes
82+
expect(style).toContain(
83+
`.anim[v-scope-xxx] {\n animation: color-v-scope-xxx 5s infinite, other 5s;`
84+
)
85+
expect(style).toContain(
86+
`.anim-2[v-scope-xxx] {\n animation-name: color-v-scope-xxx`
87+
)
88+
expect(style).toContain(
89+
`.anim-3[v-scope-xxx] {\n animation: 5s color-v-scope-xxx infinite, 5s other;`
90+
)
91+
expect(style).toContain(`@keyframes color-v-scope-xxx {`)
92+
expect(style).toContain(`@-webkit-keyframes color-v-scope-xxx {`)
93+
94+
expect(style).toContain(
95+
`.anim-multiple[v-scope-xxx] {\n animation: color-v-scope-xxx 5s infinite,opacity-v-scope-xxx 2s;`
96+
)
97+
expect(style).toContain(
98+
`.anim-multiple-2[v-scope-xxx] {\n animation-name: color-v-scope-xxx,opacity-v-scope-xxx;`
99+
)
100+
expect(style).toContain(`@keyframes opacity-v-scope-xxx {`)
101+
expect(style).toContain(`@-webkit-keyframes opacity-v-scope-xxx {`)
102+
// >>> combinator
103+
expect(style).toContain(`.foo p[v-scope-xxx] .bar {\n color: red;\n}`)
104+
})

‎yarn.lock

+7-3
Original file line numberDiff line numberDiff line change
@@ -4669,9 +4669,9 @@ void-elements@^2.0.1:
46694669
version "2.0.1"
46704670
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
46714671

4672-
vue-template-compiler@^2.5.16:
4673-
version "2.5.16"
4674-
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
4672+
vue-template-compiler@^2.5.17:
4673+
version "2.5.17"
4674+
resolved "http://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.5.17.tgz#52a4a078c327deb937482a509ae85c06f346c3cb"
46754675
dependencies:
46764676
de-indent "^1.0.2"
46774677
he "^1.1.0"
@@ -4680,6 +4680,10 @@ vue-template-es2015-compiler@^1.6.0:
46804680
version "1.6.0"
46814681
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
46824682

4683+
vue@^2.5.17:
4684+
version "2.5.17"
4685+
resolved "http://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
4686+
46834687
w3c-hr-time@^1.0.1:
46844688
version "1.0.1"
46854689
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"

0 commit comments

Comments
 (0)