Merge pull request #3648 from ProjectMirador/mui5

Upgrade from MUI4 to MUI5

__tests__/integration/mirador/thumbnail-navigation.test.js

@@ -6,7 +6,8 @@ describe('Thumbnail navigation', () => {
     await expect(page).toMatchElement('.mirador-window', { polling: 'mutation', timeout: 5000 });
   });
 
-  it('navigates a manifest using thumbnail navigation', async () => {
+  // TODO: pick a new url; this Harvard one is 404
+  xit('navigates a manifest using thumbnail navigation', async () => {
     await expect(page).toMatchElement('.mirador-thumb-navigation');
     let windows = await page.evaluate(() => (
       miradorInstance.store.getState().windows
@@ -20,7 +21,7 @@ describe('Thumbnail navigation', () => {
     ));
     expect(Object.values(windows)[0].canvasId).toBe('https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-18737483'); // canvas @ index 1
   });
-  it('displays on right side', async () => {
+  xit('displays on right side', async () => {
     await expect(page).toMatchElement('.mirador-thumb-navigation');
     await expect(page).toMatchElement('.mirador-companion-area-far-bottom .mirador-thumb-navigation');
     const windowId = await page.evaluate(() => {

__tests__/src/components/AppProviders.test.js

-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { render, screen } from 'test-utils';
 import { useTranslation } from 'react-i18next';
 import { useDrop } from 'react-dnd';

__tests__/src/components/CollapsibleSection.test.js

@@ -34,9 +34,9 @@ describe('CollapsibleSection', () => {
     expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'expandSection');
   });
 
-  it('renders children based on the open state', async () => {
-    expect(screen.getByTestId('child')).toBeInTheDocument();
+  it('displays children based on the open state', async () => {
+    expect(screen.getByTestId('child')).toBeVisible();
     await userEvent.click(screen.getByRole('button'));
-    expect(screen.queryByTestId('child')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('child')).not.toBeVisible();
   });
 });

__tests__/src/components/CompanionArea.test.js

@@ -30,7 +30,7 @@ describe('CompanionArea', () => {
   it('should add the appropriate classes when the companion area fills the full width', () => {
     const { container } = createWrapper({ position: 'bottom' });
 
-    expect(container.querySelector('.mirador-companion-area-bottom')).toHaveClass('horizontal'); // eslint-disable-line testing-library/no-node-access, testing-library/no-container
+    expect(container.querySelector('.mirador-companion-area-bottom')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access, testing-library/no-container
   });
 
   it('renders the appropriate <CompanionWindow> components', () => {

__tests__/src/components/CompanionWindow.test.js

@@ -11,7 +11,6 @@ function createWrapper(props) {
       isDisplayed
       direction="ltr"
       windowId="x"
-      classes={{ horizontal: 'horizontal', small: 'small', vertical: 'vertical' }}
       companionWindow={{}}
       position="right"
       {...props}
@@ -96,9 +95,10 @@ describe('CompanionWindow', () => {
         updateCompanionWindow,
       });
 
-      expect(screen.getByRole('complementary')).toHaveClass('vertical');
+      expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-right');
 
       await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToBottom' }));
+
       expect(updateCompanionWindow).toHaveBeenCalledWith({ position: 'bottom' });
     });
   });
@@ -113,7 +113,7 @@ describe('CompanionWindow', () => {
         updateCompanionWindow,
       });
 
-      expect(screen.getByRole('complementary')).toHaveClass('horizontal');
+      expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-bottom ');
 
       await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToRight' }));
 
@@ -127,12 +127,6 @@ describe('CompanionWindow', () => {
     expect(screen.getByTestId('xyz')).toBeInTheDocument();
   });
 
-  it('adds a small class when the component width is small', () => {
-    const { container } = createWrapper({ size: { width: 369 } });
-
-    expect(container.querySelector('.MuiToolbar-root')).toHaveClass('small'); // eslint-disable-line testing-library/no-node-access, testing-library/no-container
-  });
-
   it('has a resize handler', () => {
     const { container } = createWrapper();
 

__tests__/src/components/GalleryViewThumbnail.test.js

@@ -11,7 +11,6 @@ function createWrapper(props) {
   return render(
     <GalleryViewThumbnail
       canvas={Utils.parseManifest(manifestJson).getSequences()[0].getCanvases()[0]}
-      classes={{ selected: 'selected' }}
       focusOnCanvas={() => {}}
       setCanvas={() => {}}
       {...props}
@@ -23,26 +22,6 @@ describe('GalleryView', () => {
   beforeEach(() => {
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
   });
-  it('sets a mirador-current-canvas-grouping class when the canvas is selected', () => {
-    createWrapper({ selected: true });
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveClass('selected');
-  });
-  it('does not set a mirador-current-canvas-grouping class when the canvas is not selected', () => {
-    createWrapper({ selected: false });
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).not.toHaveClass('selected');
-  });
-  it('sets a mirador-current-canvas-grouping class when the canvas is selected', () => {
-    createWrapper({ selected: true });
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveClass('selected');
-  });
-  it('does not set a mirador-current-canvas-grouping class when the canvas is not selected', () => {
-    createWrapper({ selected: false });
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).not.toHaveClass('selected');
-  });
   it('renders the thumbnail', () => {
     createWrapper({ config: { height: 55 } });
     expect(screen.getByRole('presentation')).toBeInTheDocument();

__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',

__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 });
 

__tests__/src/components/LocalePicker.test.js

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { LocalePicker } from '../../../src/components/LocalePicker';
 
 /**
- * Helper function to create a shallow wrapper around LanguageSettings
+ * Helper function to create a shallow wrapper around LocalePicker
  */
 function createWrapper(props) {
   return render(
@@ -24,36 +24,42 @@ describe('LocalePicker', () => {
   });
 
   it('renders a select with the current value', () => {
-    createWrapper({ availableLocales: ['en', 'de'], locale: 'en' });
-
-    expect(screen.getByRole('button')).toHaveTextContent('en');
+    createWrapper({ availableLocales: ['en', 'de'], locale: 'de' });
+    // The option to expand the dropdown menu is rendered by a CompanionWindow titleControls prop in WindowSideBarInfoPanel, which is a combobox
+    const dropdownTitle = screen.getByRole('combobox');
+    expect(dropdownTitle).toHaveTextContent('de');
   });
 
-  it('renders a select with a list item for each language passed in props', async () => {
+  it('renders a select with both options and sets the current value', async () => {
     const user = userEvent.setup();
-
-    createWrapper({ availableLocales: ['en', 'de'], locale: 'en' });
-
-    await user.click(screen.getByRole('button'));
-
-    expect(screen.getAllByRole('option')).toHaveLength(2);
+    createWrapper({ availableLocales: ['en', 'de'], locale: 'de' });
+    const dropdownTitle = screen.getByRole('combobox');
+    // Open the menu
+    await user.click(dropdownTitle);
+    // The dropddown menu is not nested within the combobox, it is a sibling in the DOM, an MuiMenu
+    const menu = screen.getByRole('listbox');
+    // Assert that the menu element has 2 children (2 options)
+    expect(menu.children).toHaveLength(2); // eslint-disable-line testing-library/no-node-access
+    // Verify that the select element has the correct value ('de')
+    const deOption = screen.getByRole('option', { name: 'de' });
+    expect(deOption).toHaveAttribute('aria-selected', 'true');
+    // Verify en is also an option
     expect(screen.getByRole('option', { name: 'en' })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: 'de' })).toBeInTheDocument();
   });
 
   it('triggers setLocale prop when clicking a list item', async () => {
     const user = userEvent.setup();
     const setLocale = jest.fn();
-
     createWrapper({
       availableLocales: ['en', 'de'],
       locale: 'en',
       setLocale,
     });
-
-    await user.click(screen.getByRole('button'));
+    const dropdownTitle = screen.getByRole('combobox');
+    // Open the Select component
+    await user.click(dropdownTitle);
+    // Change the locale to 'de'
     await user.click(screen.getByRole('option', { name: 'de' }));
-
     expect(setLocale).toHaveBeenCalledTimes(1);
     expect(setLocale).toHaveBeenCalledWith('de');
   });

__tests__/src/components/ManifestListItem.test.js

@@ -23,18 +23,23 @@ describe('ManifestListItem', () => {
     createWrapper({ buttonRef: 'ref' });
 
     expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com');
+    expect(screen.getByRole('listitem')).toHaveClass('MuiListItem-root');
     expect(screen.getByRole('button')).toHaveTextContent('xyz');
   });
   it('adds a class when the item is active', () => {
     createWrapper({ active: true, classes: { active: 'active' } });
 
+    // If this is true, we can assume the proper styling classes are being applied
+    expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true');
+
     expect(screen.getByRole('listitem')).toHaveClass('active');
+    expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
   });
   it('renders a placeholder element until real data is available', () => {
     const { container } = createWrapper({ ready: false });
 
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    expect(container.querySelectorAll('.MuiSkeleton-rect').length).toBeGreaterThan(0); // eslint-disable-line testing-library/no-node-access, testing-library/no-container
+    expect(container.querySelectorAll('.MuiSkeleton-rectangular').length).toBeGreaterThan(0); // eslint-disable-line testing-library/no-node-access, testing-library/no-container
   });
   it('renders an error message if fetching the manifest failed', () => {
     createWrapper({ error: 'This is an error message' });

__tests__/src/components/PrimaryWindow.test.js

@@ -16,7 +16,7 @@ function createWrapper(props) {
 describe('PrimaryWindow', () => {
   it('should render expected elements', async () => {
     createWrapper({ isFetching: false });
-    await screen.findByRole('region', { accessibleName: 'item' });
+    await screen.findByTestId('test-window');
     expect(document.querySelector('.mirador-primary-window')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
     expect(document.querySelector('.mirador-companion-area-left')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
   });
@@ -30,7 +30,7 @@ describe('PrimaryWindow', () => {
   });
   it('should render <GalleryView> if fetching is complete and view is gallery', async () => {
     createWrapper({ isFetching: false, view: 'gallery' });
-    await screen.findByRole('region', { accessibleName: 'gallery section' });
+    await screen.findByTestId('test-window');
     expect(document.querySelector('#xyz-gallery')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
   });
   it('should render <CollectionDialog> and <SelectCollection> if manifest is collection and isCollectionDialogVisible', async () => {

__tests__/src/components/SanitizedHtml.test.js

@@ -6,7 +6,6 @@ describe('SanitizedHtml', () => {
     render(
       <SanitizedHtml
         data-testid="subject"
-        classes={{ root: 'root' }}
         htmlString="<script>doBadThings()</script><b>Don't worry!</b><a>Some link</a>"
         ruleSet="iiif"
       />,
@@ -18,7 +17,6 @@ describe('SanitizedHtml', () => {
   });
 
   it('should pass correct class name to root element', () => {
-    expect(screen.getByTestId('subject')).toHaveClass('root');
     expect(screen.getByTestId('subject')).toHaveClass('mirador-third-party-html');
   });
 

__tests__/src/components/ScrollIndicatedDialogContent.test.js

@@ -6,7 +6,6 @@ function createWrapper(props) {
   return render(
     <ScrollIndicatedDialogContent
       data-testid="subject"
-      classes={{ shadowScrollDialog: 'shadowScrollDialog' }}
       {...props}
     />,
   );
@@ -19,16 +18,8 @@ describe('ScrollIndicatedDialogContent', () => {
     expect(screen.getByTestId('subject')).toHaveAttribute('randomprop', 'randomPropValue');
   });
 
-  it('provides a className to the DialogContent prop to style it', () => {
-    createWrapper();
-
-    expect(screen.getByTestId('subject')).toHaveClass('shadowScrollDialog');
-  });
-
   it('joins an incoming className prop with our className', () => {
     createWrapper({ className: 'upstreamClassName' });
-
-    expect(screen.getByTestId('subject')).toHaveClass('shadowScrollDialog');
     expect(screen.getByTestId('subject')).toHaveClass('upstreamClassName');
   });
 });

__tests__/src/components/ScrollTo.test.js

-import { render, screen } from 'test-utils';
+import { render } from 'test-utils';
 import { createRef } from 'react';
 import { ScrollTo } from '../../../src/components/ScrollTo';
 
@@ -12,7 +12,7 @@ describe('ScrollTo', () => {
     containerRef = createRef();
     render(<div data-testid="container" ref={containerRef} />);
 
-    containerRef.current.domEl = {
+    containerRef.current = {
       getBoundingClientRect: () => containerBoundingRect,
       getElementsByClassName: () => [{ scrollTo }],
     };
@@ -22,12 +22,6 @@ describe('ScrollTo', () => {
   const scrollToElBelowBoundingRect = { bottom: 601, top: 501 };
   const visibleScrollToElBoundingRect = { bottom: 300, top: 200 };
 
-  it('wraps the given children in a div element', () => {
-    render(<ScrollTo data-testid="subject" scrollTo>Child Prop</ScrollTo>);
-
-    expect(screen.getByTestId('subject')).toHaveTextContent('Child Prop');
-  });
-
   describe('when updating the scrollTo prop', () => {
     beforeEach(() => {
       jest.spyOn(ScrollTo.prototype, 'elementToScrollTo').mockImplementation(() => ({ offsetTop: 450 }));
@@ -38,13 +32,13 @@ describe('ScrollTo', () => {
           ...scrollToElAboveBoundingRect,
         }));
 
-        const { rerender } = render(<ScrollTo scrollTo containerRef={containerRef}>Child</ScrollTo>);
+        const { rerender } = render(<ScrollTo scrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
         // It is called once when initially rendered w/ true
         expect(scrollTo).toHaveBeenCalled();
         scrollTo.mockReset();
 
-        rerender(<ScrollTo containerRef={containerRef}>Child</ScrollTo>);
+        rerender(<ScrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
         // But it is not called on the re-render w/ false
         expect(scrollTo).not.toHaveBeenCalled();
@@ -56,9 +50,9 @@ describe('ScrollTo', () => {
         jest.spyOn(ScrollTo.prototype, 'scrollToBoundingRect').mockImplementation(() => ({
           ...scrollToElAboveBoundingRect,
         }));
-        const { rerender } = render(<ScrollTo containerRef={containerRef}>Child</ScrollTo>);
+        const { rerender } = render(<ScrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
-        rerender(<ScrollTo scrollTo containerRef={containerRef}>Child</ScrollTo>);
+        rerender(<ScrollTo scrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
         expect(scrollTo).toHaveBeenCalledWith(0, 230);
       });
@@ -68,9 +62,9 @@ describe('ScrollTo', () => {
           ...scrollToElBelowBoundingRect,
         }));
 
-        const { rerender } = render(<ScrollTo containerRef={containerRef}>Child</ScrollTo>);
+        const { rerender } = render(<ScrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
-        rerender(<ScrollTo scrollTo containerRef={containerRef}>Child</ScrollTo>);
+        rerender(<ScrollTo scrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
         expect(scrollTo).toHaveBeenCalledWith(0, 230);
       });
@@ -80,9 +74,9 @@ describe('ScrollTo', () => {
           ...visibleScrollToElBoundingRect,
         }));
 
-        const { rerender } = render(<ScrollTo containerRef={containerRef}>Child</ScrollTo>);
+        const { rerender } = render(<ScrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
-        rerender(<ScrollTo scrollTo containerRef={containerRef}>Child</ScrollTo>);
+        rerender(<ScrollTo scrollTo containerRef={containerRef}><div>Child</div></ScrollTo>);
 
         expect(scrollTo).not.toHaveBeenCalled();
       });

__tests__/src/components/SearchHit.test.js

@@ -24,7 +24,6 @@ const Subject = (props) => (
     announcer={() => {}}
     annotation={{ targetId: 'x' }}
     annotationId="foo"
-    classes={{ windowSelected: 'windowSelected' }}
     hit={{
       after: ', and start the chainsaw',
       annotations: ['foo'],
@@ -46,7 +45,6 @@ describe('SearchHit', () => {
     render(<Subject selectAnnotation={selectAnnotation} />);
 
     expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
-    expect(screen.getByRole('listitem')).toHaveClass('windowSelected');
     expect(screen.getByRole('listitem')).toHaveTextContent('1Light up the moose , and start the chai more');
 
     await user.click(screen.getByRole('button'));
@@ -69,14 +67,13 @@ describe('SearchHit', () => {
     it('renders the annotationLabel if present', () => {
       render(<Subject annotationLabel="The Anno Label" />);
 
-      expect(screen.getAllByRole('heading', { level: 6 })).toHaveLength(2);
-      expect(screen.getByRole('heading', { level: 6, name: 'The Anno Label' })).toHaveClass('MuiTypography-subtitle2');
+      expect(screen.getByRole('heading', { level: 4, name: 'The Anno Label' })).toBeInTheDocument();
     });
 
     it('does not render the typography if no annotation label is present', () => {
       render(<Subject />);
 
-      expect(screen.getByRole('heading', { level: 6 })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 4 })).toBeInTheDocument();
     });
   });
 

__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();
   });
 

__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((
         <SearchPanelControls
@@ -107,7 +107,7 @@ describe('SearchPanelControls', () => {
         />
       ));
 
-      expect(screen.getByRole('textbox')).toHaveValue('');
+      expect(screen.getByRole('combobox')).toHaveValue('');
     });
   });
 });

__tests__/src/components/SearchResults.test.js

@@ -95,8 +95,8 @@ describe('SearchResults', () => {
         searchHits: [],
       });
 
-      expect(screen.getByRole('heading', { level: 6, name: 'The Anno Label' })).toBeInTheDocument();
-      expect(screen.getByRole('heading', { level: 6, name: 'Annother Anno Label' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 4, name: 'The Anno Label' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 4, name: 'Annother Anno Label' })).toBeInTheDocument();
     });
   });
 

__tests__/src/components/ThumbnailCanvasGrouping.test.js

@@ -36,12 +36,13 @@ describe('ThumbnailCanvasGrouping', () => {
     setCanvas = jest.fn();
     wrapper = createWrapper({ data, setCanvas });
   });
+  const spyCurrentCanvasClass = jest.spyOn(ThumbnailCanvasGrouping.prototype, 'currentCanvasClass');
+  afterEach(() => {
+    spyCurrentCanvasClass.mockClear();
+  });
   it('renders', () => {
     expect(screen.getByRole('gridcell')).toBeInTheDocument();
   });
-  it('sets a mirador-current-canvas-grouping class on current canvas', () => {
-    expect(screen.getByRole('button')).toHaveClass('mirador-current-canvas-grouping');
-  });
   it('renders a CaptionedIIIFThumbnail', () => {
     expect(screen.getByText('Image 1')).toBeInTheDocument();
   });
@@ -49,9 +50,9 @@ describe('ThumbnailCanvasGrouping', () => {
     wrapper.unmount();
     const user = userEvent.setup();
     wrapper = createWrapper({ data, index: 0, setCanvas });
-
     await user.click(wrapper.container.querySelector('.mirador-thumbnail-nav-canvas-0')); // eslint-disable-line testing-library/no-node-access
-
+    expect(spyCurrentCanvasClass).toHaveBeenCalledWith([0]);
+    expect(spyCurrentCanvasClass).toHaveReturnedWith('current-canvas-grouping');
     expect(setCanvas).toHaveBeenCalledWith('http://iiif.io/api/presentation/2.0/example/fixtures/canvas/24/c1.json');
   });
   describe('attributes based off far-bottom position', () => {

__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();
   });