-
-
Notifications
You must be signed in to change notification settings - Fork 882
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement StructTree, improve accessibility (#1498)
Closes #1494 Co-authored-by: Wojciech Maj <[email protected]>
- Loading branch information
Showing
13 changed files
with
545 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { beforeAll, describe, expect, it } from 'vitest'; | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| import { pdfjs } from './index.test'; | ||
|
|
||
| import StructTree from './StructTree'; | ||
|
|
||
| import failingPage from '../__mocks__/_failing_page'; | ||
| import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../test-utils'; | ||
|
|
||
| import PageContext from './PageContext'; | ||
|
|
||
| import type { PDFPageProxy } from 'pdfjs-dist'; | ||
| import type { PageContextType } from './shared/types'; | ||
| import { StructTreeNode } from 'pdfjs-dist/types/src/display/api'; | ||
|
|
||
| const pdfFile = loadPDF('./__mocks__/_pdf.pdf'); | ||
|
|
||
| function renderWithContext(children: React.ReactNode, context: Partial<PageContextType>) { | ||
| const { rerender, ...otherResult } = render( | ||
| <PageContext.Provider value={context as PageContextType}>{children}</PageContext.Provider>, | ||
| ); | ||
|
|
||
| return { | ||
| ...otherResult, | ||
| rerender: (nextChildren: React.ReactNode, nextContext: Partial<PageContextType> = context) => | ||
| rerender( | ||
| <PageContext.Provider value={nextContext as PageContextType}> | ||
| {nextChildren} | ||
| </PageContext.Provider>, | ||
| ), | ||
| }; | ||
| } | ||
|
|
||
| describe('StructTree', () => { | ||
| // Loaded page | ||
| let page: PDFPageProxy; | ||
| let page2: PDFPageProxy; | ||
|
|
||
| // Loaded structure tree | ||
| let desiredStructTree: StructTreeNode; | ||
| let desiredStructTree2: StructTreeNode; | ||
|
|
||
| beforeAll(async () => { | ||
| const pdf = await pdfjs.getDocument({ data: pdfFile.arrayBuffer }).promise; | ||
|
|
||
| page = await pdf.getPage(1); | ||
| desiredStructTree = await page.getStructTree(); | ||
|
|
||
| page2 = await pdf.getPage(2); | ||
| desiredStructTree2 = await page2.getStructTree(); | ||
| }); | ||
|
|
||
| describe('loading', () => { | ||
| it('loads structure tree and calls onGetStructTreeSuccess callback properly', async () => { | ||
| const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } = | ||
| makeAsyncCallback(); | ||
|
|
||
| renderWithContext(<StructTree />, { | ||
| onGetStructTreeSuccess, | ||
| page, | ||
| }); | ||
|
|
||
| expect.assertions(1); | ||
|
|
||
| await expect(onGetStructTreeSuccessPromise).resolves.toMatchObject([desiredStructTree]); | ||
| }); | ||
|
|
||
| it('calls onGetStructTreeError when failed to load annotations', async () => { | ||
| const { func: onGetStructTreeError, promise: onGetStructTreeErrorPromise } = | ||
| makeAsyncCallback(); | ||
|
|
||
| muteConsole(); | ||
|
|
||
| renderWithContext(<StructTree />, { | ||
| onGetStructTreeError, | ||
| page: failingPage, | ||
| }); | ||
|
|
||
| expect.assertions(1); | ||
|
|
||
| await expect(onGetStructTreeErrorPromise).resolves.toMatchObject([expect.any(Error)]); | ||
|
|
||
| restoreConsole(); | ||
| }); | ||
|
|
||
| it('replaces structure tree properly when page is changed', async () => { | ||
| const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } = | ||
| makeAsyncCallback(); | ||
|
|
||
| const { rerender } = renderWithContext(<StructTree />, { | ||
| onGetStructTreeSuccess, | ||
| page, | ||
| }); | ||
|
|
||
| expect.assertions(2); | ||
|
|
||
| await expect(onGetStructTreeSuccessPromise).resolves.toMatchObject([desiredStructTree]); | ||
|
|
||
| const { func: onGetStructTreeSuccess2, promise: onGetStructTreeSuccessPromise2 } = | ||
| makeAsyncCallback(); | ||
|
|
||
| rerender(<StructTree />, { | ||
| onGetStructTreeSuccess: onGetStructTreeSuccess2, | ||
| page: page2, | ||
| }); | ||
|
|
||
| await expect(onGetStructTreeSuccessPromise2).resolves.toMatchObject([desiredStructTree2]); | ||
| }); | ||
|
|
||
| it('throws an error when placed outside Page', () => { | ||
| muteConsole(); | ||
|
|
||
| expect(() => render(<StructTree />)).toThrow(); | ||
|
|
||
| restoreConsole(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('rendering', () => { | ||
| it('renders structure tree properly', async () => { | ||
| const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } = | ||
| makeAsyncCallback(); | ||
|
|
||
| const { container } = renderWithContext(<StructTree />, { | ||
| onGetStructTreeSuccess, | ||
| page, | ||
| }); | ||
|
|
||
| expect.assertions(1); | ||
|
|
||
| await onGetStructTreeSuccessPromise; | ||
|
|
||
| const wrapper = container.firstElementChild as HTMLSpanElement; | ||
|
|
||
| expect(wrapper.outerHTML).toBe( | ||
| '<span class="react-pdf__Page__structTree structTree"><span><span role="heading" aria-level="1" aria-owns="page3R_mcid0"></span><span aria-owns="page3R_mcid1"></span><span aria-owns="page3R_mcid2"></span><span role="figure" aria-owns="page3R_mcid12"></span><span aria-owns="page3R_mcid3"></span><span aria-owns="page3R_mcid4"></span><span role="heading" aria-level="2" aria-owns="page3R_mcid5"></span><span aria-owns="page3R_mcid6"></span><span><span aria-owns="page3R_mcid7"></span><span role="link"><span aria-owns="13R"></span><span aria-owns="page3R_mcid8"></span></span><span aria-owns="page3R_mcid9"></span></span><span aria-owns="page3R_mcid10"></span><span aria-owns="page3R_mcid11"></span></span></span>', | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.