Skip to content

Commit e370985

Browse files
tanemtanem
committed
Improve test assertions
1 parent 00d8c74 commit e370985

5 files changed

Lines changed: 142 additions & 54 deletions

File tree

‎test/data-url.test.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,16 @@ test.describe('data URL support', () => {
113113
selectorAll: true,
114114
})
115115

116+
const actualFirst = formatHtml(result.afterEachCalls[0]!.svg ?? '')
117+
const actualSecond = formatHtml(result.afterEachCalls[1]!.svg ?? '')
118+
const expectedEncoded = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" class="injected-svg inject-me" data-src="${encodedDataUrl}" xmlns:xlink="http://www.w3.org/1999/xlink">${thumbUpPathElement}</svg>`
119+
const expectedBase64 = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" class="injected-svg inject-me" data-src="${base64DataUrl}" xmlns:xlink="http://www.w3.org/1999/xlink">${thumbUpPathElement}</svg>`
120+
116121
expect(result.afterEachCalls).toHaveLength(2)
117122
expect(result.afterEachCalls[0]!.error).toBe(null)
123+
expect(actualFirst).toBe(expectedEncoded)
118124
expect(result.afterEachCalls[1]!.error).toBe(null)
125+
expect(actualSecond).toBe(expectedBase64)
119126
expect(result.elementsLoaded).toBe(2)
120127
})
121128

@@ -161,6 +168,7 @@ test.describe('data URL support', () => {
161168
expect(result.afterEachCalls[0]!.error).toContain(
162169
'Symbol "nonexistent" not found',
163170
)
171+
expect(result.afterEachCalls[0]!.svg).toBe(null)
164172
expect(result.elementsLoaded).toBe(1)
165173
})
166174

@@ -183,6 +191,7 @@ test.describe('data URL support', () => {
183191
expect(result.afterEachCalls[0]!.error).toContain(
184192
'Data URL did not contain a valid SVG element',
185193
)
194+
expect(result.afterEachCalls[0]!.svg).toBe(null)
186195
expect(result.elementsLoaded).toBe(1)
187196
})
188197

@@ -202,7 +211,8 @@ test.describe('data URL support', () => {
202211
})
203212

204213
expect(result.afterEachCalls).toHaveLength(1)
205-
expect(result.afterEachCalls[0]!.error).toBeTruthy()
214+
expect(result.afterEachCalls[0]!.error).toBe('Invalid base64 in data URL')
215+
expect(result.afterEachCalls[0]!.svg).toBe(null)
206216
expect(result.elementsLoaded).toBe(1)
207217
})
208218

@@ -225,6 +235,7 @@ test.describe('data URL support', () => {
225235
expect(result.afterEachCalls[0]!.error).toContain(
226236
'Unsupported data URL format',
227237
)
238+
expect(result.afterEachCalls[0]!.svg).toBe(null)
228239
expect(result.elementsLoaded).toBe(1)
229240
})
230241

@@ -297,6 +308,7 @@ test.describe('data URL support', () => {
297308
expect(result.afterEachCalls[0]!.error).toContain(
298309
'Invalid encoding in data URL',
299310
)
311+
expect(result.afterEachCalls[0]!.svg).toBe(null)
300312
expect(result.elementsLoaded).toBe(1)
301313
})
302314

@@ -319,6 +331,7 @@ test.describe('data URL support', () => {
319331
expect(result.afterEachCalls[0]!.error).toContain(
320332
'Invalid encoding in data URL',
321333
)
334+
expect(result.afterEachCalls[0]!.svg).toBe(null)
322335
expect(result.elementsLoaded).toBe(1)
323336
})
324337

@@ -343,6 +356,7 @@ test.describe('data URL support', () => {
343356
expect(result.afterEachCalls[0]!.error).toContain(
344357
'Data URL SVG parse error',
345358
)
359+
expect(result.afterEachCalls[0]!.svg).toBe(null)
346360
expect(result.elementsLoaded).toBe(1)
347361
})
348362
})

‎test/local.test.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,11 @@ test.describe('local', () => {
3535
})
3636

3737
expect(result.elementsLoaded).toBe(1)
38-
expect(result.afterEachCalls[0]?.error).toBe(
38+
expect(result.afterEachCalls).toHaveLength(1)
39+
expect(result.afterEachCalls[0]!.error).toBe(
3940
'Note: SVG injection ajax calls do not work locally without adjusting security settings in your browser. Or consider using a local webserver.',
4041
)
42+
expect(result.afterEachCalls[0]!.svg).toBe(null)
4143
})
4244

4345
// Playwright browsers enforce cross-origin restrictions on file:// pages, so

‎test/no-extension.test.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ test.describe('no extension', () => {
2020
// no error is returned. Chromium and Firefox surface the missing header.
2121
const expectedError =
2222
browserName === 'webkit' ? null : 'Content type not found'
23-
expect(result.afterEachCalls[0]?.error ?? null).toBe(expectedError)
23+
expect(result.afterEachCalls).toHaveLength(1)
24+
expect(result.afterEachCalls[0]!.error ?? null).toBe(expectedError)
25+
if (browserName !== 'webkit') {
26+
expect(result.afterEachCalls[0]!.svg).toBe(null)
27+
}
28+
expect(result.elementsLoaded).toBe(1)
2429
})
2530

2631
test('invalid media type', async ({ page }) => {
@@ -36,7 +41,10 @@ test.describe('no extension', () => {
3641
selector: '.inject-me',
3742
})
3843

39-
expect(result.afterEachCalls[0]?.error).toBe('invalid media type')
44+
expect(result.afterEachCalls).toHaveLength(1)
45+
expect(result.afterEachCalls[0]!.error).toBe('invalid media type')
46+
expect(result.afterEachCalls[0]!.svg).toBe(null)
47+
expect(result.elementsLoaded).toBe(1)
4048
})
4149

4250
test('invalid content type', async ({ page }) => {
@@ -52,9 +60,12 @@ test.describe('no extension', () => {
5260
selector: '.inject-me',
5361
})
5462

55-
expect(result.afterEachCalls[0]?.error).toBe(
63+
expect(result.afterEachCalls).toHaveLength(1)
64+
expect(result.afterEachCalls[0]!.error).toBe(
5665
'Invalid content type: text/html',
5766
)
67+
expect(result.afterEachCalls[0]!.svg).toBe(null)
68+
expect(result.elementsLoaded).toBe(1)
5869
})
5970

6071
test('image/svg+xml', async ({ page }) => {

‎test/sprite.test.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ test.describe('sprite support', () => {
106106
expect(result.afterEachCalls[0]!.error).toBe(
107107
'Symbol "nonexistent" not found in /fixtures/sprite.svg',
108108
)
109+
expect(result.afterEachCalls[0]!.svg).toBe(null)
109110
expect(result.elementsLoaded).toBe(1)
110111
})
111112

@@ -171,7 +172,10 @@ test.describe('sprite support', () => {
171172
})
172173

173174
expect(result.afterEachCalls).toHaveLength(1)
174-
expect(result.afterEachCalls[0]!.error).toBeTruthy()
175+
expect(result.afterEachCalls[0]!.error).toBe(
176+
'Unable to load SVG file: /fixtures/nonexistent-sprite.svg',
177+
)
178+
expect(result.afterEachCalls[0]!.svg).toBe(null)
175179
expect(result.elementsLoaded).toBe(1)
176180
})
177181
})

‎test/svg-injector.test.ts‎

Lines changed: 105 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -77,27 +77,49 @@ test.describe('SVGInjector', () => {
7777

7878
expect(result.elementsLoaded).toBe(0)
7979
expect(result.afterEachCalls).toHaveLength(0)
80+
expect(result.html).toBe('')
8081
})
8182

8283
test('injection in progress', async ({ page }) => {
8384
await setupPage(page)
8485

85-
await page.evaluate(() => {
86-
document.body.innerHTML = ''
87-
const container = document.createElement('div')
88-
container.innerHTML = `
89-
<div
90-
class="inject-me"
91-
data-src="/fixtures/in-progress.svg"
92-
></div>
93-
`
94-
document.body.appendChild(container)
95-
const { SVGInjector } = (window as unknown as SvgInjectorWindow)
96-
.SVGInjector
97-
const element = container.querySelector('.inject-me')
98-
SVGInjector(element)
99-
SVGInjector(element)
86+
const result = await page.evaluate(() => {
87+
return new Promise<{
88+
html: string
89+
afterEachCallCount: number
90+
}>((resolve) => {
91+
document.body.innerHTML = ''
92+
const container = document.createElement('div')
93+
container.innerHTML = `
94+
<div
95+
class="inject-me"
96+
data-src="/fixtures/thumb-up.svg"
97+
></div>
98+
`
99+
document.body.appendChild(container)
100+
101+
let afterEachCallCount = 0
102+
const { SVGInjector } = (window as unknown as SvgInjectorWindow)
103+
.SVGInjector
104+
const element = container.querySelector('.inject-me')
105+
SVGInjector(element, {
106+
afterEach: () => {
107+
afterEachCallCount++
108+
},
109+
afterAll: () => {
110+
resolve({
111+
html: container.innerHTML,
112+
afterEachCallCount,
113+
})
114+
},
115+
})
116+
SVGInjector(element)
117+
})
100118
})
119+
120+
const actual = formatHtml(result.html)
121+
expect(actual).toBe(thumbUpSvg)
122+
expect(result.afterEachCallCount).toBe(1)
101123
})
102124

103125
test('attributes', async ({ page }) => {
@@ -175,6 +197,12 @@ test.describe('SVGInjector', () => {
175197
test('cached success', async ({ page }) => {
176198
await setupPage(page)
177199

200+
let requestCount = 0
201+
await page.route('**/fixtures/thumb-up.svg', async (route) => {
202+
requestCount++
203+
await route.fallback()
204+
})
205+
178206
const result = await page.evaluate(() => {
179207
return new Promise<{
180208
html: string
@@ -252,6 +280,7 @@ test.describe('SVGInjector', () => {
252280
expect(formatHtml(result.afterEachCalls[1]!.svg ?? '')).toBe(
253281
formatHtml(result.containerTwoHtml),
254282
)
283+
expect(requestCount).toBe(1)
255284
})
256285

257286
test('uncached requests fetch fresh data', async ({ page }) => {
@@ -317,52 +346,70 @@ test.describe('SVGInjector', () => {
317346
test('errors should not be cached', async ({ page }) => {
318347
await setupPage(page)
319348

349+
let requestCount = 0
350+
await page.unroute('**/fixtures/**')
351+
await page.route('**/fixtures/flaky.svg', async (route) => {
352+
requestCount += 1
353+
if (requestCount === 1) {
354+
await route.fulfill({ status: 404, body: '' })
355+
} else {
356+
await route.fulfill({
357+
status: 200,
358+
body: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"></svg>',
359+
headers: { 'content-type': 'image/svg+xml' },
360+
})
361+
}
362+
})
363+
320364
const result = await page.evaluate(() => {
321-
return new Promise<{ errors: Array<string | null> }>((resolve) => {
365+
return new Promise<{
366+
afterEachCalls: Array<{ error: string | null; svg: string | null }>
367+
}>((resolve) => {
322368
document.body.innerHTML = ''
323369

324-
const errors: Array<string | null> = []
370+
const afterEachCalls: Array<{
371+
error: string | null
372+
svg: string | null
373+
}> = []
325374
const { SVGInjector } = (window as unknown as SvgInjectorWindow)
326375
.SVGInjector
327376

328-
const inject = (html: string, done: () => void) => {
377+
const inject = (done: () => void) => {
329378
const container = document.createElement('div')
330-
container.innerHTML = html
379+
container.innerHTML = `
380+
<div
381+
class="inject-me"
382+
data-src="/fixtures/flaky.svg"
383+
></div>
384+
`
331385
document.body.appendChild(container)
332386
SVGInjector(container.querySelector('.inject-me'), {
333-
afterEach: (error: Error | null) => {
334-
errors.push(error ? error.message : null)
387+
afterEach: (error: Error | null, svg?: Element | null) => {
388+
afterEachCalls.push({
389+
error: error ? error.message : null,
390+
svg: svg
391+
? svg.outerHTML || new XMLSerializer().serializeToString(svg)
392+
: null,
393+
})
335394
},
336395
afterAll: () => done(),
337396
})
338397
}
339398

340-
inject(
341-
`
342-
<div
343-
class="inject-me"
344-
data-src="/fixtures/not-found.svg"
345-
></div>
346-
`,
347-
() => {
348-
inject(
349-
`
350-
<div
351-
class="inject-me"
352-
data-src="/fixtures/still-not-found.svg"
353-
></div>
354-
`,
355-
() => resolve({ errors }),
356-
)
357-
},
358-
)
399+
inject(() => {
400+
inject(() => resolve({ afterEachCalls }))
401+
})
359402
})
360403
})
361404

362-
expect(result.errors).toHaveLength(2)
363-
expect(result.errors[1]).toBe(
364-
'Unable to load SVG file: /fixtures/still-not-found.svg',
405+
expect(requestCount).toBe(2)
406+
expect(result.afterEachCalls).toHaveLength(2)
407+
expect(result.afterEachCalls[0]!.error).toBe(
408+
'Unable to load SVG file: /fixtures/flaky.svg',
365409
)
410+
expect(result.afterEachCalls[0]!.svg).toBe(null)
411+
expect(result.afterEachCalls[1]!.error).toBe(null)
412+
expect(result.afterEachCalls[1]!.svg).toContain('viewBox="0 0 10 10"')
366413
})
367414

368415
test('svg not found error', async ({ page }) => {
@@ -379,9 +426,11 @@ test.describe('SVGInjector', () => {
379426
})
380427

381428
expect(result.elementsLoaded).toBe(1)
382-
expect(result.afterEachCalls[0]?.error).toBe(
429+
expect(result.afterEachCalls).toHaveLength(1)
430+
expect(result.afterEachCalls[0]!.error).toBe(
383431
'Unable to load SVG file: /fixtures/not-found.svg',
384432
)
433+
expect(result.afterEachCalls[0]!.svg).toBe(null)
385434
})
386435

387436
test('invalid src error', async ({ page }) => {
@@ -397,9 +446,11 @@ test.describe('SVGInjector', () => {
397446
})
398447

399448
expect(result.elementsLoaded).toBe(1)
400-
expect(result.afterEachCalls[0]?.error).toBe(
449+
expect(result.afterEachCalls).toHaveLength(1)
450+
expect(result.afterEachCalls[0]!.error).toBe(
401451
'Invalid data-src or src attribute',
402452
)
453+
expect(result.afterEachCalls[0]!.svg).toBe(null)
403454
})
404455

405456
test('unknown exception', async ({ page }) => {
@@ -422,12 +473,15 @@ test.describe('SVGInjector', () => {
422473
selector: '.inject-me',
423474
})
424475

425-
expect(result.afterEachCalls[0]?.error).toBe(
476+
expect(result.elementsLoaded).toBe(1)
477+
expect(result.afterEachCalls).toHaveLength(1)
478+
expect(result.afterEachCalls[0]!.error).toBe(
426479
'There was a problem injecting the SVG: 500 Internal Server Error',
427480
)
481+
expect(result.afterEachCalls[0]!.svg).toBe(null)
428482
})
429483

430-
test('default `afterAll` callback', async ({ page }) => {
484+
test('completes without explicit `afterAll`', async ({ page }) => {
431485
await setupPage(page)
432486

433487
const result = await page.evaluate(() => {
@@ -535,9 +589,12 @@ test.describe('SVGInjector', () => {
535589
options: { cacheRequests: false },
536590
})
537591

538-
expect(result.afterEachCalls[0]?.error).toBe(
592+
expect(result.elementsLoaded).toBe(1)
593+
expect(result.afterEachCalls).toHaveLength(1)
594+
expect(result.afterEachCalls[0]!.error).toBe(
539595
'There was a problem injecting the SVG: 500 Internal Server Error',
540596
)
597+
expect(result.afterEachCalls[0]!.svg).toBe(null)
541598
})
542599

543600
test('returns an error when parent node is null', async ({ page }) => {

0 commit comments

Comments
 (0)