From cbb8df413254bb71ee0b16a7e8e79cab3d167da7 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 29 Mar 2023 14:36:42 -0700 Subject: [PATCH] Update tests for MUI 5 --- .../src/components/IIIFAuthentication.test.js | 15 +++++++------- .../src/components/LanguageSettings.test.js | 7 ------- __tests__/src/components/SearchPanel.test.js | 2 +- .../components/SearchPanelControls.test.js | 14 ++++++------- .../WindowAuthenticationBar.test.js | 20 +++++++++---------- src/components/ErrorDialog.js | 2 +- src/components/LanguageSettings.js | 1 - src/components/MinimalWindow.js | 2 +- src/components/ScrollTo.js | 2 +- src/components/SidebarIndexTableOfContents.js | 10 +--------- src/components/WindowThumbnailSettings.js | 2 +- src/components/WindowTopMenu.js | 2 +- src/components/WindowViewSettings.js | 2 +- src/containers/ManifestListItem.js | 7 ++++++- src/containers/WorkspaceAdd.js | 7 ++++++- 15 files changed, 43 insertions(+), 52 deletions(-) diff --git a/__tests__/src/components/IIIFAuthentication.test.js b/__tests__/src/components/IIIFAuthentication.test.js index d9be920ac9..d49d5e712d 100644 --- a/__tests__/src/components/IIIFAuthentication.test.js +++ b/__tests__/src/components/IIIFAuthentication.test.js @@ -33,7 +33,7 @@ describe('IIIFAuthentication', () => { describe('without an auth service', () => { it('renders nothing', () => { createWrapper({ authServiceId: null }); - expect(screen.queryByText('login', { selector: 'span' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'login' })).not.toBeInTheDocument(); expect(screen.queryByRole('button')).not.toBeInTheDocument(); }); }); @@ -41,9 +41,7 @@ describe('IIIFAuthentication', () => { it('renders a login bar', async () => { const handleAuthInteraction = jest.fn(); createWrapper({ handleAuthInteraction }); - const confirmBtn = screen.getByText('login', { selector: 'span' }); - expect(confirmBtn).toBeInTheDocument(); - await user.click(confirmBtn); + await user.click(screen.getByRole('button', { name: 'login' })); expect(handleAuthInteraction).toHaveBeenCalledWith('w', 'http://example.com/auth'); }); it('renders nothing for a non-interactive login', () => { @@ -55,7 +53,8 @@ describe('IIIFAuthentication', () => { it('renders with an error message', async () => { const handleAuthInteraction = jest.fn(); createWrapper({ handleAuthInteraction, status: 'failed' }); - const confirmBtn = await screen.findByText('retry', { selector: 'span' }); + await user.click(screen.getByRole('button', { name: 'continue' })); + const confirmBtn = screen.getByRole('button', { name: /retry/ }); expect(screen.getByText('Login failed')).toBeInTheDocument(); expect(screen.getByText('cancel')).toBeInTheDocument(); expect(screen.getByText('... and this is why.')).toBeInTheDocument(); @@ -71,7 +70,7 @@ describe('IIIFAuthentication', () => { window.open = mockWindowOpen; const resolveCookieMock = jest.fn(); createWrapper({ resolveAuthenticationRequest: resolveCookieMock, status: 'cookie' }); - expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument(); expect(mockWindowOpen).toHaveBeenCalledWith(`http://example.com/auth?origin=${window.origin}`, 'IiifLoginSender', 'centerscreen'); mockWindow.closed = true; jest.runOnlyPendingTimers(); @@ -81,7 +80,7 @@ describe('IIIFAuthentication', () => { it('does the IIIF access token behavior', async () => { const resolveTokenMock = jest.fn(); createWrapper({ resolveAccessTokenRequest: resolveTokenMock, status: 'token' }); - expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument(); window.dispatchEvent(new MessageEvent('message', { data: { messageId: 'http://example.com/token' }, })); @@ -100,7 +99,7 @@ describe('IIIFAuthentication', () => { resetAuthenticationState, status: 'ok', }); - const confirmBtn = await screen.findByText('exit', { selector: 'span' }); + const confirmBtn = await screen.findByRole('button', { name: 'exit' }); await user.click(confirmBtn); await waitFor(() => expect(resetAuthenticationState).toHaveBeenCalledWith({ authServiceId: 'http://example.com/auth', tokenServiceId: 'http://example.com/token', diff --git a/__tests__/src/components/LanguageSettings.test.js b/__tests__/src/components/LanguageSettings.test.js index 0cddf8b5db..98b0a82f6d 100644 --- a/__tests__/src/components/LanguageSettings.test.js +++ b/__tests__/src/components/LanguageSettings.test.js @@ -35,13 +35,6 @@ describe('LanguageSettings', () => { expect(screen.getAllByRole('menuitem')).toHaveLength(2); }); - it('non-active list items are buttons (and active are not)', () => { - createWrapper({ languages }); - - expect(screen.getByRole('menuitem', { name: 'Deutsch' })).not.toHaveClass('MuiButtonBase-root'); - expect(screen.getByRole('menuitem', { name: 'English' })).toHaveClass('MuiButtonBase-root'); - }); - it('renders the check icon when the active prop returns true', () => { createWrapper({ languages }); diff --git a/__tests__/src/components/SearchPanel.test.js b/__tests__/src/components/SearchPanel.test.js index 8b4fb3a304..cd7b50ee01 100644 --- a/__tests__/src/components/SearchPanel.test.js +++ b/__tests__/src/components/SearchPanel.test.js @@ -54,7 +54,7 @@ describe('SearchPanel', () => { it('has the SearchPanelControls component', () => { createWrapper(); - expect(screen.getByRole('textbox', { name: 'searchInputLabel' })).toBeInTheDocument(); + expect(screen.getByRole('combobox', { name: 'searchInputLabel' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'searchSubmitAria' })).toBeInTheDocument(); }); diff --git a/__tests__/src/components/SearchPanelControls.test.js b/__tests__/src/components/SearchPanelControls.test.js index e2ab065c27..0b01891240 100644 --- a/__tests__/src/components/SearchPanelControls.test.js +++ b/__tests__/src/components/SearchPanelControls.test.js @@ -33,7 +33,7 @@ describe('SearchPanelControls', () => { searchService: { id: 'http://example.com/search', options: { resource: { id: 'abc' } } }, }); - await user.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('combobox')); await user.keyboard('somestring'); await user.click(await screen.findByText('somestring 12345')); expect(fetchSearch).toHaveBeenCalledWith('window', 'cw', 'http://example.com/search?q=somestring+12345', 'somestring 12345'); @@ -44,7 +44,7 @@ describe('SearchPanelControls', () => { it('renders a text input through the renderInput prop', () => { createWrapper(); - expect(screen.getByRole('textbox')).toHaveAttribute('id', 'search-cw'); + expect(screen.getByRole('combobox')).toHaveAttribute('id', 'search-cw'); }); it('endAdornment is a SearchIcon (with no CircularProgress indicator)', () => { createWrapper(); @@ -67,7 +67,7 @@ describe('SearchPanelControls', () => { }; createWrapper({ fetchSearch, query: 'asdf', searchService }); - await user.clear(screen.getByRole('textbox')); + await user.clear(screen.getByRole('combobox')); await user.keyboard('yolo'); await user.click(screen.getByRole('button')); @@ -84,7 +84,7 @@ describe('SearchPanelControls', () => { createWrapper({ fetchSearch, query: '', searchService }); - await user.clear(screen.getByRole('textbox')); + await user.clear(screen.getByRole('combobox')); await user.click(screen.getByRole('button', { name: 'searchSubmitAria' })); expect(fetchSearch).not.toHaveBeenCalled(); }); @@ -92,12 +92,12 @@ describe('SearchPanelControls', () => { describe('input', () => { it('has the query prop has the input value on intial render', () => { createWrapper({ query: 'Wolpertinger' }); - expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger'); + expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger'); }); it('clears the local search state/input when the incoming query prop has been cleared', () => { const wrapper = createWrapper({ query: 'Wolpertinger' }); - expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger'); + expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger'); wrapper.rerender(( { /> )); - expect(screen.getByRole('textbox')).toHaveValue(''); + expect(screen.getByRole('combobox')).toHaveValue(''); }); }); }); diff --git a/__tests__/src/components/WindowAuthenticationBar.test.js b/__tests__/src/components/WindowAuthenticationBar.test.js index b47771b1d0..c4368b8113 100644 --- a/__tests__/src/components/WindowAuthenticationBar.test.js +++ b/__tests__/src/components/WindowAuthenticationBar.test.js @@ -37,38 +37,36 @@ describe('AuthenticationControl', () => { it('renders a non-collapsing version if there is no description', () => { createWrapper({ description: undefined, header: undefined }); expect(screen.getByText('Log in to see more', { selector: 'span' })).toBeInTheDocument(); - expect(screen.getByText('Login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button')).toHaveTextContent('Login'); }); it('renders a collapsable version if there is a description', async () => { createWrapper({ description: 'long description', header: 'Login to Example Institution' }); const continueBtn = document.querySelectorAll('.MuiButtonBase-root')[0]; - const cancelBtn = screen.getByText('cancel', { selector: 'span' }).closest('button'); - const loginBtn = screen.getByText('Login', { selector: 'span' }); const collapseEl = document.querySelector('.MuiCollapse-hidden'); // disable transition animations for easier testing of the Mui Collapse open/close state config.disabled = true; // initial collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description expect(screen.getByText('continue')).toBeInTheDocument(); - expect(cancelBtn).not.toBeVisible(); - expect(loginBtn).not.toBeVisible(); + expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument(); expect(within(collapseEl).getByText('long description')).not.toBeVisible(); // click to expand await user.click(continueBtn); // expanded state: Removal of continue button text from DOM. Visible cancelBtn, loginBtn, and description expect(screen.queryByText('continue')).not.toBeInTheDocument(); - expect(cancelBtn).toBeVisible(); - expect(loginBtn).toBeVisible(); + expect(screen.getByRole('button', { name: 'cancel' })).toBeVisible(); + expect(screen.getByRole('button', { name: 'Login' })).toBeVisible(); expect(within(collapseEl).getByText('long description')).toBeVisible(); expect(collapseEl).toHaveClass('MuiCollapse-entered'); // click the cancel button to collapse - await user.click(cancelBtn); + await user.click(screen.getByRole('button', { name: 'cancel' })); // collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description expect(screen.getByText('continue')).toBeInTheDocument(); - expect(cancelBtn).not.toBeVisible(); - expect(loginBtn).not.toBeVisible(); + expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument(); expect(within(collapseEl).getByText('long description')).not.toBeVisible(); // re-enable transition animation config.disabled = false; @@ -77,7 +75,7 @@ describe('AuthenticationControl', () => { it('triggers an action when the confirm button is clicked', async () => { const onConfirm = jest.fn(); createWrapper({ onConfirm }); - await user.click(screen.getByText('Login', { selector: 'span' }).closest('button')); + await user.click(screen.getByRole('button', { name: 'Login' })); expect(onConfirm).toHaveBeenCalled(); }); diff --git a/src/components/ErrorDialog.js b/src/components/ErrorDialog.js index 182a1b256d..5a71ff1ec7 100644 --- a/src/components/ErrorDialog.js +++ b/src/components/ErrorDialog.js @@ -29,7 +29,7 @@ export class ErrorDialog extends Component { open={hasError} > - {t('errorDialogTitle')} + {t('errorDialogTitle')} diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js index 1affbeffc0..f0048c4788 100644 --- a/src/components/LanguageSettings.js +++ b/src/components/LanguageSettings.js @@ -23,7 +23,6 @@ export class LanguageSettings extends Component { { languages.map(language => ( { handleClick(language.locale); }} > diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js index 188cdbe95e..89d16f7766 100644 --- a/src/components/MinimalWindow.js +++ b/src/components/MinimalWindow.js @@ -62,7 +62,7 @@ export class MinimalWindow extends Component { className={cn(classes.button, ns('window-close'))} onClick={removeWindow} TooltipProps={{ - tabIndex: ariaLabel ? '0' : '-1', + tabIndex: ariaLabel ? 0 : -1, }} > diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js index e73d602cf9..4427f0f360 100644 --- a/src/components/ScrollTo.js +++ b/src/components/ScrollTo.js @@ -104,7 +104,7 @@ export class ScrollTo extends Component { */ render() { const { - children, containerRef, offsetTop, scrollTo, ...otherProps + children, containerRef, offsetTop, scrollTo, nodeId, ...otherProps } = this.props; if (!scrollTo) return children; diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js index 90beb505d3..f23b67deb9 100644 --- a/src/components/SidebarIndexTableOfContents.js +++ b/src/components/SidebarIndexTableOfContents.js @@ -51,20 +51,13 @@ export class SidebarIndexTableOfContents extends Component { } /** */ - handleKeyPressed(event, nodeId) { + handleNodeSelect(event, nodeId) { const { toggleNode } = this.props; - if (event.key === 'Enter') { - this.selectTreeItem(nodeId); - } - if (event.key === ' ' || event.key === 'Spacebar') { toggleNode(nodeId); } - } - /** */ - handleNodeSelect(_event, nodeId) { this.selectTreeItem(nodeId); } @@ -120,7 +113,6 @@ export class SidebarIndexTableOfContents extends Component { root: classes.treeItemRoot, selected: classes.selected, }} - onKeyDown={e => this.handleKeyPressed(e, node.id)} label={(
- {t('thumbnails')} + {t('thumbnails')} { this.handleChange('off'); handleClose(); }}> - {t('windowPluginButtons')} + {t('windowPluginButtons')} ) : null; diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js index 8b751fc222..ff4b4c7dc5 100644 --- a/src/components/WindowViewSettings.js +++ b/src/components/WindowViewSettings.js @@ -68,7 +68,7 @@ export class WindowViewSettings extends Component { if (viewTypes.length === 0) return null; return ( <> - {t('view')} + {t('view')} { viewTypes.map(value => menuItem({ Icon: iconMap[value], value })) } ); diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js index 5aac59b6a9..69d3d42f8b 100644 --- a/src/containers/ManifestListItem.js +++ b/src/containers/ManifestListItem.js @@ -73,7 +73,12 @@ const styles = theme => ({ backgroundColor: theme.palette.grey[300], }, root: { - ...theme.mixins.gutters(), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + }, '&$active': { borderLeft: `4px solid ${theme.palette.primary.main}`, }, diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js index 5f926789d1..c35d6d1c44 100644 --- a/src/containers/WorkspaceAdd.js +++ b/src/containers/WorkspaceAdd.js @@ -42,7 +42,12 @@ const styles = theme => ({ right: theme.spacing(2), }, form: { - ...theme.mixins.gutters(), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + }, left: '0', marginTop: 48, paddingBottom: theme.spacing(2),