-
Notifications
You must be signed in to change notification settings - Fork 57
Expand file tree
/
Copy pathDynamicHead.test.js
More file actions
144 lines (127 loc) · 5.75 KB
/
DynamicHead.test.js
File metadata and controls
144 lines (127 loc) · 5.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
beforeEach(async () => {
await page.goto('http://localhost:6969/dynamic-head')
await page.waitForSelector('[data-hydrated]')
})
describe('DynamicHead', () => {
test('styles can be added inline to the head tag during ssr', async () => {
const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
expect(color).toEqual('rgb(255, 0, 0)')
})
test('head styles can be updated dynamicly', async () => {
await page.click('[data-increment]')
await page.waitForSelector('[data-red-blue][data-count="1"]')
const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
expect(color).toEqual('rgb(0, 0, 255)')
})
test('styles can be added from inner components to the head tag', async () => {
await page.waitForSelector('[data-inner-component]')
const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-inner-component]")).color')
expect(color).toEqual('rgb(0, 0, 255)')
})
test('styles can be added from fragments to the head tag', async () => {
await page.waitForSelector('[data-fragment]')
const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-fragment]")).color')
expect(color).toEqual('rgb(0, 0, 255)')
})
test('styles can be conditionaly prerendered inside the head tag', async () => {
const color = await page.evaluate(
'getComputedStyle(document.body.querySelector("[data-prerender-conditional]")).color',
)
expect(color).toEqual('rgb(0, 0, 255)')
})
test('styles can be conditionaly rerendered inside the head tag', async () => {
await page.click('[data-increment]')
await page.waitForSelector('head [data-rerender-conditional]')
const color = await page.evaluate(
'getComputedStyle(document.body.querySelector("[data-rerender-conditional]")).color',
)
expect(color).toEqual('rgb(0, 0, 255)')
})
test('styles can be rendered inside a conditionaly rendered head tag', async () => {
await page.click('[data-increment]')
await page.waitForSelector('head [data-conditional-head]')
const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-conditional-head]")).color')
expect(color).toEqual('rgb(0, 0, 255)')
})
test('heads can be replaced by ternaries', async () => {
await page.click('[data-increment]')
await page.waitForSelector('[data-ternary-span]')
const element = await page.$('[data-ternary-span]')
expect(element).toBeTruthy()
})
test('heads can be inserted by ternaries', async () => {
await page.click('[data-increment]')
await page.waitForSelector('[data-ternary-span]')
await page.click('[data-increment]')
await page.waitForSelector('[data-ternary-head]')
const element = await page.$('[data-ternary-head]')
expect(element).toBeTruthy()
})
test('head elements can have custom ids', async () => {
const element = await page.$('#ternary-head')
expect(element).toBeTruthy()
})
test('the head tag accepts dynamic lists of increasing size', async () => {
for (let i = 1; i < 3; i++) {
await page.click('[data-increment]')
await page.waitForSelector(`[data-dynamic-length="${i}"]`)
}
const elements = await page.$$('[data-dynamic-length]')
expect(elements.length).toEqual(3)
})
test('the head tag accepts dynamic lists of decreasing size', async () => {
for (let i = 1; i < 3; i++) {
await page.click('[data-increment]')
await page.waitForSelector(`[data-dynamic-length="${i}"]`)
}
await page.click('[data-decrement]')
await page.waitForSelector('[data-negative-count]')
const elements = await page.$$('[data-negative-count]')
expect(elements.length).toEqual(2)
})
test('dynamic head elements can update attributes', async () => {
for (let i = 1; i < 3; i++) {
await page.click('[data-increment]')
await page.waitForSelector(`[data-dynamic-length="${i}"]`)
}
await page.click('[data-decrement]')
await page.waitForSelector('[data-negative-count]')
await page.click('[data-decrement]')
await page.waitForSelector('[data-dynamic-length]:not([data-negative-count])')
const element = await page.$('[data-dynamic-length]:not([data-negative-count])')
expect(element).toBeTruthy()
})
test('heads can be replaced in ternaries by heads with a highter children length', async () => {
await page.click('[data-increment]')
await page.waitForSelector('[data-b2]')
await page.waitForSelector('[data-b1]')
const a1 = await page.$('[data-a1]')
const b1 = await page.$('[data-b1]')
const b2 = await page.$('[data-b2]')
expect(!a1 && b1 && b2).toBeTruthy()
})
test('heads can be replaced in ternaries by heads with a highter children length', async () => {
await page.click('[data-increment]')
await page.waitForSelector('[data-b2]')
await page.waitForSelector('[data-b1]')
await page.click('[data-increment]')
await page.waitForSelector('[data-a1]')
const a1 = await page.$('[data-a1]')
const b1 = await page.$('[data-b1]')
const b2 = await page.$('[data-b2]')
expect(a1 && !b1 && !b2).toBeTruthy()
})
test('head children can be ternaries', async () => {
await page.click('[data-increment]')
await page.waitForSelector('meta[data-ternary-head-children]')
await page.click('[data-increment]')
await page.waitForSelector('style[data-ternary-head-children]')
const element = await page.$('style[data-ternary-head-children]')
expect(element).toBeTruthy()
})
test('empty script tags in head should have no children', async () => {
await page.waitForSelector('[data-script-is-empty]')
const element = await page.$('[data-script-is-empty]')
expect(element).toBeTruthy()
})
})