/
index.js
123 lines (105 loc) · 3.38 KB
/
index.js
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
import Image from 'next/image'
import { img } from '../components/img'
import broken from '../public/broken.jpeg'
import svg from '../public/test.svg'
import brokenSvg from '../public/broken.svg'
import { useTestHarness } from '@turbo/pack-test-harness'
export default function Home() {
useTestHarness(runTests)
return (
<>
<Image
id="imported"
alt="test imported image"
src={img}
placeholder="blur"
/>
<Image id="svg" alt="test svg image" src={svg} />
<Image
id="local"
alt="test src image"
src="/triangle-black.png"
width="116"
height="100"
/>
<Image
id="broken"
alt="test imported broken image"
src={broken}
placeholder="blur"
/>
<Image
id="broken-svg"
alt="test imported broken svg image"
src={brokenSvg}
/>
</>
)
}
function runTests() {
it('should return image size', () => {
expect(img).toHaveProperty('width', 116)
expect(img).toHaveProperty('height', 100)
})
it('should return image size for svg', () => {
expect(svg).toHaveProperty('width', 400)
expect(svg).toHaveProperty('height', 400)
})
it('should return fake image size for broken images', () => {
expect(broken).toHaveProperty('width', 100)
expect(broken).toHaveProperty('height', 100)
expect(brokenSvg).toHaveProperty('width', 100)
expect(brokenSvg).toHaveProperty('height', 100)
})
it('should have blur placeholder', () => {
expect(img).toHaveProperty(
'blurDataURL',
expect.stringMatching(/^data:image\/png;base64/)
)
expect(img).toHaveProperty('blurWidth', 8)
expect(img).toHaveProperty('blurHeight', 7)
})
it('should not have blur placeholder for svg', () => {
expect(svg).toHaveProperty('blurDataURL', null)
expect(svg).toHaveProperty('blurWidth', 0)
expect(svg).toHaveProperty('blurHeight', 0)
})
it('should have fake blur placeholder for broken images', () => {
expect(broken).toHaveProperty(
'blurDataURL',
expect.stringContaining('data:')
)
expect(broken).toHaveProperty('blurWidth', 1)
expect(broken).toHaveProperty('blurHeight', 1)
})
it('should link to imported image', async () => {
const img = document.querySelector('#imported')
expect(img.src).toContain(encodeURIComponent('_next/static/assets'))
const res = await fetch(img.src)
expect(res.status).toBe(200)
})
it('should link to imported svg image', async () => {
const img = document.querySelector('#svg')
expect(img.src).toContain('_next/static/assets')
const res = await fetch(img.src)
expect(res.status).toBe(200)
})
it('should link to local src image', async () => {
const img = document.querySelector('#local')
expect(img.src).toContain('triangle-black')
const res = await fetch(img.src)
expect(res.status).toBe(200)
})
it('should link to imported broken image', async () => {
const img = document.querySelector('#broken')
expect(img.src).toContain(encodeURIComponent('_next/static/assets'))
const res = await fetch(img.src)
expect(res.status).toBe(404)
})
it('should link to imported broken svg image', async () => {
const img = document.querySelector('#broken-svg')
expect(img.src).toContain('_next/static/assets')
const res = await fetch(img.src)
expect(res.status).toBe(200)
})
}