From 212d0b86891e7a2c8de248711fef7416d52b06a1 Mon Sep 17 00:00:00 2001 From: Fabian Stoehr Date: Mon, 29 Jul 2024 16:12:19 +0200 Subject: [PATCH 1/3] fix:viewer not scrolling to toc entry correctly --- src/components/SidebarIndexTableOfContents.js | 37 +++++++++++++++---- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js index 296555e8c4..6ffe02b8b0 100644 --- a/src/components/SidebarIndexTableOfContents.js +++ b/src/components/SidebarIndexTableOfContents.js @@ -1,4 +1,4 @@ -import { Component } from 'react'; +import { Component, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { alpha, styled } from '@mui/material/styles'; import { TreeView } from '@mui/x-tree-view/TreeView'; @@ -45,16 +45,37 @@ function deepFind(treeNode, id) { } /** Wrap to remove the nodeId prop required for MUI's TreeView */ -const ScrollToForTreeItem = ({ children, nodeId, ...props }) => ( - - { children } - -); +function ScrollToForTreeItem( + { + children, nodeId, containerRef, ...props + }, +) { + const [containerReady, setContainerReady] = useState(false); + + useEffect(() => { + if (containerRef && containerRef.current) { + setContainerReady(true); + } + }, [containerRef]); + if (containerReady) { + return ( + + {children} + + ); + } + return null; +} ScrollToForTreeItem.propTypes = { children: PropTypes.node.isRequired, + containerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ current: PropTypes.instanceOf(Element) }), + ]).isRequired, nodeId: PropTypes.string.isRequired, }; From 5325c994364809f8e40149c6a2c8cda6ebbfb29b Mon Sep 17 00:00:00 2001 From: Fabian Stoehr Date: Thu, 1 Aug 2024 12:26:05 +0200 Subject: [PATCH 2/3] test: fix sidebartoc test --- .../SidebarIndexTableOfContents.test.js | 51 ++++++++++--------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/__tests__/src/components/SidebarIndexTableOfContents.test.js b/__tests__/src/components/SidebarIndexTableOfContents.test.js index af3f9885db..7368013855 100644 --- a/__tests__/src/components/SidebarIndexTableOfContents.test.js +++ b/__tests__/src/components/SidebarIndexTableOfContents.test.js @@ -1,7 +1,6 @@ import { render, screen, waitFor } from 'test-utils'; import userEvent from '@testing-library/user-event'; import { Utils } from 'manifesto.js'; - import { SidebarIndexTableOfContents } from '../../../src/components/SidebarIndexTableOfContents'; import ConnectedSidebarIndexTableOfContents from '../../../src/containers/SidebarIndexTableOfContents'; import manifestVersion2 from '../../fixtures/version-2/structures.json'; @@ -13,6 +12,8 @@ import manifestVersion3 from '../../fixtures/version-3/structures.json'; */ function createWrapper(props) { const manifest = Utils.parseManifest(props.manifest ? props.manifest : manifestVersion2); + const containerElement = document.createElement('div'); + const mockRef = { current: containerElement }; return render( , @@ -33,10 +34,13 @@ function createWrapper(props) { * write a reasonable test for it) */ function createInteractiveWrapper({ manifest = manifestVersion3, ...props }) { + const containerElement = document.createElement('div'); + const mockRef = { current: containerElement }; return render( , { @@ -100,6 +104,7 @@ describe('SidebarIndexTableOfContents', () => { }, }); expect(screen.getByRole('treeitem')).toBeInTheDocument(); + unmount(); }); it('accepts missing nodes property for tree structure and tree nodes', () => { @@ -203,30 +208,30 @@ describe('SidebarIndexTableOfContents', () => { expect(setCanvas).toHaveBeenLastCalledWith('a', 'http://foo.test/1/canvas/c11'); }); - it('sets the canvas to a start canvas if present (IIIF v3)', async () => { - const user = userEvent.setup(); + // it('sets the canvas to a start canvas if present (IIIF v3)', async () => { + // const user = userEvent.setup(); - const { store } = createInteractiveWrapper({ - manifest: manifestVersion3, - }); + // const { store } = createInteractiveWrapper({ + // manifest: manifestVersion3, + // }); - const root = screen.getByRole('treeitem'); - root.focus(); - await user.keyboard('{Enter}'); + // const root = screen.getByRole('treeitem'); + // root.focus(); + // await user.keyboard('{Enter}'); - const leafNode1 = screen.getAllByRole('treeitem')[2]; - leafNode1.focus(); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c7'); + // const leafNode1 = screen.getAllByRole('treeitem')[2]; + // leafNode1.focus(); + // await user.keyboard('{Enter}'); + // expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c7'); - const leafNode2 = screen.getAllByRole('treeitem')[3]; - leafNode2.focus(); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9'); + // const leafNode2 = screen.getAllByRole('treeitem')[3]; + // leafNode2.focus(); + // await user.keyboard('{Enter}'); + // expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9'); - const leafNode3 = screen.getAllByRole('treeitem')[4]; - leafNode3.focus(); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10'); - }); + // const leafNode3 = screen.getAllByRole('treeitem')[4]; + // leafNode3.focus(); + // await user.keyboard('{Enter}'); + // expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10'); + // }); }); From ee5eae36f99cd3640ebbf76ec00ef2dcb41e3b87 Mon Sep 17 00:00:00 2001 From: Fabian Stoehr Date: Thu, 19 Dec 2024 15:08:32 +0100 Subject: [PATCH 3/3] test: fix SidebarIndexToC test --- .../SidebarIndexTableOfContents.test.js | 53 ++++++++++--------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/__tests__/src/components/SidebarIndexTableOfContents.test.js b/__tests__/src/components/SidebarIndexTableOfContents.test.js index 727e9fbac2..2a2a668a7c 100644 --- a/__tests__/src/components/SidebarIndexTableOfContents.test.js +++ b/__tests__/src/components/SidebarIndexTableOfContents.test.js @@ -220,35 +220,36 @@ describe('SidebarIndexTableOfContents', async () => { expect(setCanvas).toHaveBeenLastCalledWith('a', 'http://foo.test/1/canvas/c11'); }); - // it('sets the canvas to a start canvas if present (IIIF v3)', async () => { - // const user = userEvent.setup(); + it('sets the canvas to a start canvas if present (IIIF v3)', async () => { + const user = userEvent.setup(); - // const { store } = createInteractiveWrapper({ - // manifest: manifestVersion3, - // }); + const { store } = createInteractiveWrapper({ + manifest: manifestVersion3, + }); - const root = screen.getByRole('treeitem'); - act(() => { - root.focus(); - }); - await user.keyboard('{Enter}'); + const root = screen.getByRole('treeitem'); + act(() => { + root.focus(); + }); + await user.keyboard('{Enter}'); - const leafNode1 = screen.getAllByRole('treeitem')[2]; - act(() => { - leafNode1.focus(); - }); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c7'); + const leafNode1 = screen.getAllByRole('treeitem')[2]; + act(() => { + leafNode1.focus(); + }); + await user.keyboard('{Enter}'); + expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c7'); - const leafNode2 = screen.getAllByRole('treeitem')[3]; - act(() => { - leafNode2.focus(); - }); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9'); + const leafNode2 = screen.getAllByRole('treeitem')[3]; + act(() => { + leafNode2.focus(); + }); + await user.keyboard('{Enter}'); + expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9'); - const leafNode3 = screen.getAllByRole('treeitem')[4]; - leafNode3.focus(); - await user.keyboard('{Enter}'); - expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10'); + const leafNode3 = screen.getAllByRole('treeitem')[4]; + leafNode3.focus(); + await user.keyboard('{Enter}'); + expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10'); + }); });