/
accessibility.js
88 lines (71 loc) · 3.11 KB
/
accessibility.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
describe(`focus management`, () => {
it(`Focus router wrapper after navigation to regular page (from index)`, () => {
cy.visit(`/`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/page-2/`)
cy.assertRouterWrapperFocus(true)
})
it(`Focus router wrapper after navigation to regular page (to index)`, () => {
cy.visit(`/page-2/`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/`)
cy.assertRouterWrapperFocus(true)
})
// Navigating to 404 and from 404 doesn't properly trigger focusing
// router wrapper. That's because dev 404 is special case and new router
// is being used when transitioning to/from 404 page and @reach/router
// doesn't meddle with focus on initial router component mount.
it.skip(`Focus router wrapper after navigation to 404`, () => {
cy.visit(`/`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/broken-path/`)
cy.assertRouterWrapperFocus(true)
})
it.skip(`Focus router wrapper after navigation from 404`, () => {
cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/`)
cy.assertRouterWrapperFocus(true)
})
it(`Focus router wrapper after navigation from one 404 path to another 404 path`, () => {
cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
// navigating to different not existing page should also trigger
// router wrapper focus as this is different page
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/another-broken-path/`)
cy.assertRouterWrapperFocus(true)
})
it(`Focus router wrapper after navigation to client-only page`, () => {
cy.visit(`/`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/client-only-paths/`)
cy.assertRouterWrapperFocus(true)
})
it(`Focus router wrapper after navigation from client-only page`, () => {
cy.visit(`/client-only-paths/`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/`)
cy.assertRouterWrapperFocus(true)
})
// TODO: un-skip this tests when this is figured out
// this failure doesn't seem to be reproducable locally,
// but it does fail consistenly in CI
it.skip(`Focus subrouter inside client-only page`, () => {
cy.visit(`/client-only-paths`).waitForRouteChange()
cy.changeFocus()
cy.assertRouterWrapperFocus(false)
cy.navigateAndWaitForRouteChange(`/client-only-paths/page/profile`)
// inner paths are handled by router instance defined in client-only-paths page
// which means that navigating inside those should be handled by that router
// (not main router provided by gatsby)
cy.assertRouterWrapperFocus(false)
cy.focused().should(`have.attr`, `id`, `client-only-paths-sub-router`)
})
})