-
Notifications
You must be signed in to change notification settings - Fork 57
Expand file tree
/
Copy pathRenderableComponent.test.js
More file actions
142 lines (116 loc) · 4.44 KB
/
RenderableComponent.test.js
File metadata and controls
142 lines (116 loc) · 4.44 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
describe('RenderableComponent', () => {
beforeAll(async () => {
await page.goto('http://localhost:6969/renderable-component')
})
test('elements are being rendered', async () => {
const element = await page.$('.RenderableComponent')
expect(element).toBeTruthy()
})
test('elements to accept normal html attributes', async () => {
const element = await page.$('label[for="input"]')
expect(element).toBeTruthy()
})
test('elements accept boolean attributes', async () => {
const element = await page.$('button[disabled]')
expect(element).toBeTruthy()
})
test('false boolean attributes are not rendered', async () => {
const element = await page.$('.conditionally-disabled[disabled]')
expect(element).toBeFalsy()
})
test('inner components are being rendered', async () => {
const element = await page.$('.InnerComponent')
expect(element).toBeTruthy()
})
test('inner components can be nested', async () => {
const element = await page.$('[data-nested]')
expect(element).toBeTruthy()
})
test('lists are being rendered', async () => {
const element = await page.$$('li')
expect(element.length).toBe(6)
})
test('elements are being conditionally hidden', async () => {
const element = await page.$('.condition')
expect(element).toBeFalsy()
})
test('elements accept an html attribute', async () => {
const element = await page.$('a[href="/"]')
expect(element).toBeTruthy()
})
test('children are being rendered', async () => {
const element = await page.$('.children')
expect(element).toBeTruthy()
})
test('head tag child elements are rendered in the head', async () => {
const element = await page.$('head [as="fetch"]')
expect(element).toBeTruthy()
})
test('head tag child elements are not rendered in the body', async () => {
const element = await page.$('body [as="fetch"]')
expect(element).toBeFalsy()
})
test('element tag is being conditionally rendered', async () => {
const element = await page.$('span.element')
expect(element).toBeTruthy()
})
test('headless components are allocated with a comment', async () => {
const type = await page.$eval('.RenderableComponent', (element) => element.childNodes[0].nodeType)
expect(type).toBe(8)
})
test('attributes with object values should not be rendered', async () => {
const element = await page.$('[data-object]')
expect(element).toBeFalsy()
})
test('attributes with function values should not be rendered', async () => {
const element = await page.$('[data-function]')
expect(element).toBeFalsy()
})
test('inner components can be referenced and receive props', async () => {
const element = await page.$('[data-reference]')
expect(element).toBeTruthy()
})
test('inner components can be repeated', async () => {
const first = await page.$('[data-repeated="1"]')
const second = await page.$('[data-repeated="2"]')
expect(first && second).toBeTruthy()
})
})
describe('RenderableComponent ?condition=true', () => {
beforeAll(async () => {
await page.goto('http://localhost:6969/renderable-component')
await page.click('.true-condition')
await page.waitForSelector('[data-condition]')
})
test('boolean attributes that have a true value should be empty', async () => {
const value = await page.$eval('[data-condition]', (element) => element.getAttribute('data-condition'))
expect(value).toBeFalsy()
})
test('elements are being conditionally rendered', async () => {
const element = await page.$('.condition')
expect(element).toBeTruthy()
})
test('true boolean attributes are rendered', async () => {
const element = await page.$('.conditionally-disabled[disabled]')
expect(element).toBeTruthy()
})
test('element tag is being conditionally updated', async () => {
const element = await page.$('div.element')
expect(element).toBeTruthy()
})
test('elements can spread props and have named attributes', async () => {
const element = await page.$('[disabled][aria-label="props"]')
expect(element).toBeTruthy()
})
})
describe('RenderableComponent ?shortList=true', () => {
beforeAll(async () => {
await page.goto('http://localhost:6969/renderable-component')
await page.click('.short-list')
await page.waitForSelector('[data-short-list]')
})
test('lists are being updated', async () => {
const element = await page.$$('li')
expect(element.length).toBe(3)
})
})