1- import { awaitPromise , closePages , loadAndWait } from "./test_utils.mjs" ;
1+ import {
2+ awaitPromise ,
3+ closePages ,
4+ kbFocusNext ,
5+ loadAndWait ,
6+ } from "./test_utils.mjs" ;
7+
8+ function waitForThumbnailVisible ( page , pageNum ) {
9+ return page . waitForSelector (
10+ `.thumbnailImage[data-l10n-args='{"page":${ pageNum } ,
11+ { visible : true }
12+ ) ;
13+ }
214
315describe ( "PDF Thumbnail View" , ( ) => {
416 describe ( "Works without errors" , ( ) => {
517 let pages ;
618
719 beforeEach ( async ( ) => {
8- pages = await loadAndWait ( "tracemonkey.pdf" , "#sidebarToggleButton " ) ;
20+ pages = await loadAndWait ( "tracemonkey.pdf" , "#viewsManagerToggleButton " ) ;
921 } ) ;
1022
1123 afterEach ( async ( ) => {
@@ -15,14 +27,12 @@ describe("PDF Thumbnail View", () => {
1527 it ( "should render thumbnails without errors" , async ( ) => {
1628 await Promise . all (
1729 pages . map ( async ( [ browserName , page ] ) => {
18- await page . click ( "#sidebarToggleButton " ) ;
30+ await page . click ( "#viewsManagerToggleButton " ) ;
1931
20- const thumbSelector = "#thumbnailView .thumbnailImage" ;
32+ const thumbSelector = "#thumbnailsView .thumbnailImage" ;
2133 await page . waitForSelector ( thumbSelector , { visible : true } ) ;
2234
23- await page . waitForSelector (
24- "#thumbnailView .thumbnail:not(.missingThumbnailImage)"
25- ) ;
35+ await waitForThumbnailVisible ( page , 1 ) ;
2636
2737 const src = await page . $eval ( thumbSelector , el => el . src ) ;
2838 expect ( src )
@@ -37,7 +47,7 @@ describe("PDF Thumbnail View", () => {
3747 let pages ;
3848
3949 beforeEach ( async ( ) => {
40- pages = await loadAndWait ( "tracemonkey.pdf" , "#sidebarToggleButton " ) ;
50+ pages = await loadAndWait ( "tracemonkey.pdf" , "#viewsManagerToggleButton " ) ;
4151 } ) ;
4252
4353 afterEach ( async ( ) => {
@@ -48,7 +58,7 @@ describe("PDF Thumbnail View", () => {
4858 const handle = await page . evaluateHandle (
4959 num => [
5060 new Promise ( resolve => {
51- const container = document . getElementById ( "thumbnailView " ) ;
61+ const container = document . getElementById ( "viewsManagerContent " ) ;
5262 container . addEventListener ( "scrollend" , resolve , { once : true } ) ;
5363 // eslint-disable-next-line no-undef
5464 PDFViewerApplication . pdfLinkService . goToPage ( num ) ;
@@ -62,13 +72,15 @@ describe("PDF Thumbnail View", () => {
6272 it ( "should scroll the view" , async ( ) => {
6373 await Promise . all (
6474 pages . map ( async ( [ browserName , page ] ) => {
65- await page . click ( "#sidebarToggleButton" ) ;
75+ await page . click ( "#viewsManagerToggleButton" ) ;
76+
77+ await waitForThumbnailVisible ( page , 1 ) ;
6678
6779 for ( const pageNum of [ 14 , 1 , 13 , 2 ] ) {
6880 await goToPage ( page , pageNum ) ;
6981 const thumbSelector = `.thumbnailImage[data-l10n-args='{"page":${ pageNum } ;
7082 await page . waitForSelector (
71- `.thumbnail:has( ${ thumbSelector } ).selected ` ,
83+ `.thumbnail ${ thumbSelector } [aria-current="page"] ` ,
7284 { visible : true }
7385 ) ;
7486 const src = await page . $eval ( thumbSelector , el => el . src ) ;
@@ -80,4 +92,106 @@ describe("PDF Thumbnail View", () => {
8092 ) ;
8193 } ) ;
8294 } ) ;
95+
96+ describe ( "The view is accessible with the keyboard" , ( ) => {
97+ let pages ;
98+
99+ beforeEach ( async ( ) => {
100+ pages = await loadAndWait ( "tracemonkey.pdf" , "#viewsManagerToggleButton" ) ;
101+ } ) ;
102+
103+ afterEach ( async ( ) => {
104+ await closePages ( pages ) ;
105+ } ) ;
106+
107+ async function isElementFocused ( page , selector ) {
108+ await page . waitForSelector ( selector , { visible : true } ) ;
109+
110+ return page . $eval ( selector , el => el === document . activeElement ) ;
111+ }
112+
113+ it ( "should navigate with the keyboard" , async ( ) => {
114+ await Promise . all (
115+ pages . map ( async ( [ browserName , page ] ) => {
116+ await page . click ( "#viewsManagerToggleButton" ) ;
117+
118+ await waitForThumbnailVisible ( page , 1 ) ;
119+ await waitForThumbnailVisible ( page , 2 ) ;
120+ await waitForThumbnailVisible ( page , 3 ) ;
121+
122+ await kbFocusNext ( page ) ;
123+ expect ( await isElementFocused ( page , "#viewsManagerSelectorButton" ) )
124+ . withContext ( `In ${ browserName } )
125+ . toBe ( true ) ;
126+
127+ await kbFocusNext ( page ) ;
128+ expect (
129+ await isElementFocused (
130+ page ,
131+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":1}']`
132+ )
133+ )
134+ . withContext ( `In ${ browserName } )
135+ . toBe ( true ) ;
136+
137+ await page . keyboard . press ( "ArrowDown" ) ;
138+ expect (
139+ await isElementFocused (
140+ page ,
141+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":2}']`
142+ )
143+ )
144+ . withContext ( `In ${ browserName } )
145+ . toBe ( true ) ;
146+
147+ await page . keyboard . press ( "ArrowUp" ) ;
148+ expect (
149+ await isElementFocused (
150+ page ,
151+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":1}']`
152+ )
153+ )
154+ . withContext ( `In ${ browserName } )
155+ . toBe ( true ) ;
156+
157+ await page . keyboard . press ( "ArrowDown" ) ;
158+ await page . keyboard . press ( "ArrowDown" ) ;
159+ expect (
160+ await isElementFocused (
161+ page ,
162+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":3}']`
163+ )
164+ )
165+ . withContext ( `In ${ browserName } )
166+ . toBe ( true ) ;
167+ await page . keyboard . press ( "Enter" ) ;
168+ const currentPage = await page . $eval (
169+ "#pageNumber" ,
170+ el => el . valueAsNumber
171+ ) ;
172+ expect ( currentPage ) . withContext ( `In ${ browserName } ) . toBe ( 3 ) ;
173+
174+ await page . keyboard . press ( "End" ) ;
175+ expect (
176+ await isElementFocused (
177+ page ,
178+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":14}']`
179+ )
180+ )
181+ . withContext ( `In ${ browserName } )
182+ . toBe ( true ) ;
183+
184+ await page . keyboard . press ( "Home" ) ;
185+ expect (
186+ await isElementFocused (
187+ page ,
188+ `#thumbnailsView .thumbnailImage[data-l10n-args='{"page":1}']`
189+ )
190+ )
191+ . withContext ( `In ${ browserName } )
192+ . toBe ( true ) ;
193+ } )
194+ ) ;
195+ } ) ;
196+ } ) ;
83197} ) ;
0 commit comments