Skip to content

Commit 55d3b98

Browse files
committed
tests
1 parent bf2fa0b commit 55d3b98

13 files changed

+2155
-31
lines changed

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
/node_modules
1+
.DS_Store
2+
/node_modules

fixtures/a.css

-4
This file was deleted.

fixtures/b.css

-4
This file was deleted.

fixtures/base.css

-3
This file was deleted.

fixtures/c.css

-3
This file was deleted.

fixtures/entry.js

-3
This file was deleted.

fixtures/webpack.config.js

-7
This file was deleted.

lib/addStylesClient.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,10 @@ module.exports = function (parentId, list, _isProduction) {
6262
mayRemove.push(domStyle)
6363
}
6464
if (newList) {
65-
var newStyles = listToStyles(parentId, newList)
66-
addStylesToDom(newStyles)
65+
styles = listToStyles(parentId, newList)
66+
addStylesToDom(styles)
67+
} else {
68+
styles = []
6769
}
6870
for (var i = 0; i < mayRemove.length; i++) {
6971
var domStyle = mayRemove[i]
@@ -89,6 +91,9 @@ function addStylesToDom (styles /* Array<StyleObject> */) {
8991
for (; j < item.parts.length; j++) {
9092
domStyle.parts.push(addStyle(item.parts[j]))
9193
}
94+
if (domStyle.parts.length > item.parts.length) {
95+
domStyle.parts.length = item.parts.length
96+
}
9297
} else {
9398
var parts = []
9499
for (var j = 0; j < item.parts.length; j++) {

lib/addStylesServer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function renderStyles (styles) {
7474
css += `<style data-vue-ssr-id="${
7575
style.ids.join(' ')
7676
}"${
77-
style.media ? ` media=${style.mdia}` : ''
77+
style.media ? ` media="${style.media}"` : ''
7878
}>${style.css}</style>`
7979
}
8080
return css

lib/listToStyles.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@ module.exports = function listToStyles (parentId, list) {
1111
var css = item[1]
1212
var media = item[2]
1313
var sourceMap = item[3]
14-
var part = { css: css, media: media, sourceMap: sourceMap }
14+
var part = {
15+
id: parentId + ':' + i,
16+
css: css,
17+
media: media,
18+
sourceMap: sourceMap
19+
}
1520
if (!newStyles[id]) {
16-
part.id = parentId + ':0'
1721
styles.push(newStyles[id] = { id: id, parts: [part] })
1822
} else {
19-
part.id = parentId + ':' + newStyles[id].parts.length
2023
newStyles[id].parts.push(part)
2124
}
2225
}

package.json

+6
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,15 @@
77
"type": "git",
88
"url": "[email protected]:vuejs/vue-style-loader.git"
99
},
10+
"scripts": {
11+
"test": "jest"
12+
},
1013
"license": "MIT",
1114
"dependencies": {
1215
"hash-sum": "^1.0.2",
1316
"loader-utils": "^0.2.7"
17+
},
18+
"devDependencies": {
19+
"jest": "^18.1.0"
1420
}
1521
}

test/test.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const addStylesClient = require('../lib/addStylesClient')
2+
const addStylesServer = require('../lib/addStylesServer')
3+
4+
const mockedList = [
5+
[1, 'h1 { color: red; }', ''],
6+
[1, 'p { color: green; }', ''],
7+
[2, 'span { color: blue; }', ''],
8+
[2, 'span { color: blue; }', 'print']
9+
]
10+
11+
test('addStylesClient (dev)', () => {
12+
const update = addStylesClient('foo', mockedList, false)
13+
assertStylesMatch(mockedList)
14+
const mockedList2 = mockedList.slice(1, 3)
15+
update(mockedList2)
16+
assertStylesMatch(mockedList2)
17+
update()
18+
expect(document.querySelectorAll('style').length).toBe(0)
19+
})
20+
21+
test('addStylesClient (prod)', () => {
22+
const update = addStylesClient('foo', mockedList, true)
23+
assertStylesMatch(mockedList)
24+
const mockedList2 = mockedList.slice(2)
25+
update(mockedList2)
26+
assertStylesMatch(mockedList2)
27+
update()
28+
expect(document.querySelectorAll('style').length).toBe(0)
29+
})
30+
31+
test('addStylesClient (dev + ssr)', () => {
32+
mockSSRTags(mockedList, 'foo')
33+
const update = addStylesClient('foo', mockedList, false)
34+
assertStylesMatch(mockedList)
35+
update()
36+
expect(document.querySelectorAll('style').length).toBe(0)
37+
})
38+
39+
test('addStylesClient (prod + ssr)', () => {
40+
mockProdSSRTags(mockedList, 'foo')
41+
const update = addStylesClient('foo', mockedList, true)
42+
expect(document.querySelectorAll('style').length).toBe(1)
43+
})
44+
45+
test('addStylesServer (dev)', () => {
46+
const context = global.__VUE_SSR_CONTEXT__ = {}
47+
addStylesServer('foo', mockedList, false)
48+
expect(context.styles).toBe(
49+
`<style data-vue-ssr-id="foo:0">h1 { color: red; }</style>` +
50+
`<style data-vue-ssr-id="foo:1">p { color: green; }</style>` +
51+
`<style data-vue-ssr-id="foo:2">span { color: blue; }</style>` +
52+
`<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
53+
)
54+
})
55+
56+
test('addStylesServer (prod)', () => {
57+
const context = global.__VUE_SSR_CONTEXT__ = {}
58+
addStylesServer('foo', mockedList, true)
59+
expect(context.styles).toBe(
60+
`<style data-vue-ssr-id="foo:0 foo:1 foo:2">` +
61+
`h1 { color: red; }\np { color: green; }\nspan { color: blue; }` +
62+
`</style>` +
63+
`<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
64+
)
65+
})
66+
67+
// --- helpers ---
68+
69+
function assertStylesMatch (list) {
70+
const styles = document.querySelectorAll('style')
71+
expect(styles.length).toBe(list.length)
72+
;[].forEach.call(styles, (style, i) => {
73+
expect(style.textContent.indexOf(list[i][1]) > -1).toBe(true)
74+
})
75+
}
76+
77+
function mockSSRTags (list, parentId) {
78+
list.forEach((item, i) => {
79+
const style = document.createElement('style')
80+
style.setAttribute('data-vue-ssr-id', `${parentId}:${i}`)
81+
style.textContent = item[1]
82+
if (item[2]) {
83+
style.setAttribute('media', item[2])
84+
}
85+
document.head.appendChild(style)
86+
})
87+
}
88+
89+
function mockProdSSRTags (list, parentId) {
90+
const style = document.createElement('style')
91+
style.setAttribute('data-vue-ssr-id', list.map((item, i) => `${parentId}:${i}`).join(' '))
92+
style.textContent = list.map(item => item[1]).join('\n')
93+
document.head.appendChild(style)
94+
}

0 commit comments

Comments
 (0)