Upgrade from MUI4 to MUI5 [breaking changes]

.github/workflows/node.js.yml

@@ -7,14 +7,14 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, mui5 ]
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 19.x]
+        node-version: [18.x, 20.x]
 
     steps:
     - uses: actions/checkout@v3

__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

@@ -1,4 +1,4 @@
-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,17 +33,15 @@ 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();
     });
   });
   describe('with an available auth service', () => {
     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');
   });
 });