From 56e5accd1b57ce1246d0fdf10bd06a44faba9e48 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 18 Dec 2024 12:57:59 -0800 Subject: [PATCH 1/5] Stop requiring an unused prop. --- src/components/ScrollTo.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js index 62309c9dbd..ce4e239427 100644 --- a/src/components/ScrollTo.js +++ b/src/components/ScrollTo.js @@ -16,7 +16,7 @@ function usePrevious(value) { * ScrollTo ~ */ export function ScrollTo({ - children, containerRef, offsetTop = 0, scrollTo, nodeId, ...otherProps + children, containerRef, offsetTop = 0, scrollTo, ...otherProps }) { const scrollToRef = useRef(); const prevScrollTo = usePrevious(scrollTo); @@ -60,7 +60,6 @@ ScrollTo.propTypes = { PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }), ]).isRequired, - nodeId: PropTypes.string.isRequired, offsetTop: PropTypes.number, scrollTo: PropTypes.bool.isRequired, }; From ea7958829da71fa039496f152eb4a2c1a8648039 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 18 Dec 2024 12:58:18 -0800 Subject: [PATCH 2/5] Update SidebarIndexList to include required containerRef prop. --- __tests__/src/components/SidebarIndexList.test.js | 1 + src/components/SidebarIndexList.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/__tests__/src/components/SidebarIndexList.test.js b/__tests__/src/components/SidebarIndexList.test.js index b865891774..ad2dc725dc 100644 --- a/__tests__/src/components/SidebarIndexList.test.js +++ b/__tests__/src/components/SidebarIndexList.test.js @@ -16,6 +16,7 @@ function createWrapper(props) { id="asdf" canvases={canvases} classes={{}} + containerRef={{ current: null }} windowId="xyz" setCanvas={() => {}} config={{ canvasNavigation: { height: 100 } }} diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index 832c4930fb..88af73f331 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -76,7 +76,10 @@ export function SidebarIndexList({ SidebarIndexList.propTypes = { canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types - containerRef: PropTypes.oneOf([PropTypes.func, PropTypes.object]).isRequired, + containerRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ current: PropTypes.instanceOf(Element) }), + ]).isRequired, selectedCanvasIds: PropTypes.arrayOf(PropTypes.string), setCanvas: PropTypes.func.isRequired, variant: PropTypes.oneOf(['item', 'thumbnail']), From d342531612a86ea61cf87d7f42387dc10ed278ce Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 18 Dec 2024 13:07:05 -0800 Subject: [PATCH 3/5] Make searchIsFetching optional --- src/components/SearchPanelControls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js index 6c1e0d777c..1885776431 100644 --- a/src/components/SearchPanelControls.js +++ b/src/components/SearchPanelControls.js @@ -26,7 +26,7 @@ const getMatch = (option) => (isObject(option) ? option.match : option); /** */ export function SearchPanelControls({ autocompleteService = undefined, companionWindowId, fetchSearch, query = '', - searchIsFetching, searchService, windowId, + searchIsFetching = false, searchService, windowId, }) { const { t } = useTranslation(); const [input, setInput] = useState(query); @@ -157,7 +157,7 @@ SearchPanelControls.propTypes = { companionWindowId: PropTypes.string.isRequired, fetchSearch: PropTypes.func.isRequired, query: PropTypes.string, - searchIsFetching: PropTypes.bool.isRequired, + searchIsFetching: PropTypes.bool, searchService: PropTypes.shape({ id: PropTypes.string, }).isRequired, From e4e5275ac384dc3dac7d6f7195a275fdeb1f2b20 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 18 Dec 2024 13:07:20 -0800 Subject: [PATCH 4/5] Remove unused required prop searchService from SearchPanelNavigation --- src/components/SearchPanelNavigation.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/SearchPanelNavigation.js b/src/components/SearchPanelNavigation.js index dda62b236e..4a8a408d1f 100644 --- a/src/components/SearchPanelNavigation.js +++ b/src/components/SearchPanelNavigation.js @@ -74,9 +74,6 @@ SearchPanelNavigation.propTypes = { direction: PropTypes.string.isRequired, numTotal: PropTypes.number, searchHits: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types - searchService: PropTypes.shape({ - id: PropTypes.string, - }).isRequired, selectAnnotation: PropTypes.func.isRequired, selectedContentSearchAnnotation: PropTypes.arrayOf(PropTypes.string).isRequired, windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types From d85dadce9b5c7d2de7ee5c5c6fe4b8117f6baeda Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 18 Dec 2024 13:07:41 -0800 Subject: [PATCH 5/5] Update re-rendering test to make sure we're passing all required props. --- .../src/components/SearchPanelControls.test.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/__tests__/src/components/SearchPanelControls.test.js b/__tests__/src/components/SearchPanelControls.test.js index 5e83ec17c5..0c9705eff3 100644 --- a/__tests__/src/components/SearchPanelControls.test.js +++ b/__tests__/src/components/SearchPanelControls.test.js @@ -1,3 +1,4 @@ +import { cloneElement } from 'react'; import { render, screen } from '@tests/utils/test-utils'; import userEvent from '@testing-library/user-event'; @@ -7,13 +8,16 @@ import { SearchPanelControls } from '../../../src/components/SearchPanelControls * Helper function to create a shallow wrapper around AttributionPanel */ function createWrapper(props) { - return render( + const component = ( , + /> ); + return { component, ...render(component) }; } describe('SearchPanelControls', () => { @@ -110,16 +114,10 @@ describe('SearchPanelControls', () => { }); it('clears the local search state/input when the incoming query prop has been cleared', () => { - const wrapper = createWrapper({ query: 'Wolpertinger' }); + const { component, rerender } = createWrapper({ query: 'Wolpertinger' }); expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger'); - wrapper.rerender(( - - )); + rerender(cloneElement(component, { query: '' })); expect(screen.getByRole('combobox')).toHaveValue(''); });