forked from vercel/next.js
/
index.test.js
121 lines (96 loc) · 3.86 KB
/
index.test.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
/* eslint-env jest */
import {
findPort,
killApp,
launchApp,
renderViaHTTP,
} from '../../../lib/next-test-utils'
import webdriver from 'next-webdriver'
import { join } from 'path'
const context = {}
const appDir = join(__dirname, '../')
const nodeArgs = ['-r', join(appDir, '../../lib/react-17-require-hook.js')]
const navigateTo = async (browser, selector) =>
await browser
.waitForElementByCss('#' + selector + '-link')
.click()
.waitForElementByCss('#' + selector)
const getAnnouncedTitle = async (browser) =>
await browser.waitForElementByCss('#__next-route-announcer__').text()
const getDocumentTitle = async (browser) => await browser.eval('document.title')
const getMainHeadingTitle = async (browser) =>
await browser.elementByCss('h1').text()
describe('Client Navigation accessibility', () => {
beforeAll(async () => {
context.appPort = await findPort()
context.server = await launchApp(appDir, context.appPort, {
env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
nodeArgs,
})
const prerender = [
'/page-with-h1-and-title, /page-with-h1, /page-with-title, /page-without-h1-or-title',
]
await Promise.all(
prerender.map((route) => renderViaHTTP(context.appPort, route))
)
})
afterAll(() => killApp(context.server))
describe('<RouteAnnouncer />', () => {
it('should not have the initial route announced', async () => {
const browser = await webdriver(context.appPort, '/')
const title = await getAnnouncedTitle(browser)
expect(title).toBe('')
})
it('has aria-live="assertive" and role="alert"', async () => {
const browser = await webdriver(context.appPort, '/')
const routeAnnouncer = await browser.waitForElementByCss(
'#__next-route-announcer__'
)
const ariaLiveValue = await routeAnnouncer.getAttribute('aria-live')
const roleValue = await routeAnnouncer.getAttribute('role')
expect(ariaLiveValue).toBe('assertive')
expect(roleValue).toBe('alert')
await browser.close()
})
describe('There is a title but no h1 tag', () => {
it('has the innerText equal to the value of document.title', async () => {
const browser = await webdriver(context.appPort, '/')
await navigateTo(browser, 'page-with-title')
const routeAnnouncerValue = await getAnnouncedTitle(browser)
const title = await getDocumentTitle(browser)
expect(routeAnnouncerValue).toBe(title)
await browser.close()
})
})
describe('There is no title but a h1 tag', () => {
it('has the innerText equal to the value of h1', async () => {
const browser = await webdriver(context.appPort, '/')
await navigateTo(browser, 'page-with-h1')
const routeAnnouncerValue = await getAnnouncedTitle(browser)
const h1Value = await getMainHeadingTitle(browser)
expect(routeAnnouncerValue).toBe(h1Value)
await browser.close()
})
})
describe('There is a title and a h1 tag', () => {
it('has the innerText equal to the value of h1', async () => {
const browser = await webdriver(context.appPort, '/')
await navigateTo(browser, 'page-with-h1-and-title')
const routeAnnouncerValue = await getAnnouncedTitle(browser)
const title = await getDocumentTitle(browser)
expect(routeAnnouncerValue).toBe(title)
await browser.close()
})
})
describe('There is no title and no h1 tag', () => {
it('has the innerText equal to the value of the pathname', async () => {
const browser = await webdriver(context.appPort, '/')
await navigateTo(browser, 'page-without-h1-or-title')
const routeAnnouncerValue = await getAnnouncedTitle(browser)
const pathname = '/page-without-h1-or-title'
expect(routeAnnouncerValue).toBe(pathname)
await browser.close()
})
})
})
})