Merge pull request #4017 from ProjectMirador/useTranslation-hook

Replace withTranslation HOC with hooks and test against actual i18n'd values

Author: cbeer

__tests__/src/components/AccessTokenSender.test.js

@@ -7,7 +7,6 @@ import { AccessTokenSender } from '../../../src/components/AccessTokenSender';
 function createWrapper(props) {
   return render(
     <AccessTokenSender
-      t={key => key}
       handleAccessTokenMessage={() => {}}
       {...props}
     />,

__tests__/src/components/AnnotationSettings.test.js

@@ -8,7 +8,6 @@ function createWrapper(props) {
     <AnnotationSettings
       displayAll={false}
       displayAllDisabled={false}
-      t={k => k}
       toggleAnnotationDisplay={() => {}}
       windowId="abc123"
       {...props}

__tests__/src/components/AnnotationsOverlay.test.js

@@ -25,7 +25,6 @@ const createWrapper = (props) => {
       windowId="base"
       config={{}}
       updateViewport={vi.fn()}
-      t={k => k}
       canvasWorld={new CanvasWorld(canvases)}
       {...props}
     />

__tests__/src/components/AttributionPanel.test.js

@@ -12,7 +12,6 @@ function createWrapper(props) {
   return render(
     <AttributionPanel
       id="xyz"
-      t={str => str}
       windowId="window"
       {...props}
     />,
@@ -34,14 +33,14 @@ describe('AttributionPanel', () => {
   it('renders the rights statement', () => {
     createWrapper({ rights: ['http://example.com', 'http://stanford.edu'] });
 
-    expect(screen.getByText('rights')).toBeInTheDocument();
+    expect(screen.getByText('License')).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'http://example.com' })).toHaveAttribute('href', 'http://example.com');
     expect(screen.getByRole('link', { name: 'http://stanford.edu' })).toHaveAttribute('href', 'http://stanford.edu');
   });
 
   it('does not render the rights statement if it is empty', () => {
     createWrapper({ rights: [] });
-    expect(screen.queryByText('rights')).not.toBeInTheDocument();
+    expect(screen.queryByText('License')).not.toBeInTheDocument();
   });
 
   // Requires canvas to handle img loading.

__tests__/src/components/Branding.test.js

@@ -12,7 +12,7 @@ describe('Branding', () => {
   it('renders additional items for the wide variant', () => {
     render(<Branding variant="wide" />);
 
-    expect(screen.getByText('mirador')).toBeInTheDocument();
+    expect(screen.getByText('Mirador')).toBeInTheDocument();
     expect(screen.getByRole('link')).toBeInTheDocument();
   });
 });

__tests__/src/components/CanvasAnnotations.test.js

@@ -1,6 +1,5 @@
 import { render, screen } from '@tests/utils/test-utils';
 import userEvent from '@testing-library/user-event';
-import { t } from 'i18next';
 
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
 import { ScrollTo } from '../../../src/components/ScrollTo';
@@ -15,7 +14,6 @@ function createWrapper(props) {
       index={0}
       label="A Canvas Label"
       selectAnnotation={() => {}}
-      t={t}
       totalSize={1}
       windowId="abc"
       {...props}

__tests__/src/components/CanvasInfo.test.js

@@ -15,13 +15,12 @@ describe('CanvasInfo', () => {
           canvasDescription="The Canvas Description"
           canvasMetadata={metadata}
           id="xyz"
-          t={str => str}
         />,
       );
     });
 
     it('renders the content in a CollapsibleSection', async () => {
-      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('currentItem');
+      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Current item');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent(/The Canvas Label/);
 
       await user.click(screen.getByRole('button'));

__tests__/src/components/CanvasLayers.test.js

@@ -14,7 +14,6 @@ function createWrapper(props) {
       label="A Canvas Label"
       layerMetadata={{}}
       layers={[]}
-      t={t => t}
       totalSize={1}
       updateLayers={() => {}}
       windowId="abc"
@@ -28,7 +27,7 @@ describe('CanvasLayers', () => {
     it('displays the canvas label', () => {
       createWrapper({ totalSize: 2 });
 
-      expect(screen.getByText('annotationCanvasLabel', { container: '.MuiTypography-overline' })).toBeInTheDocument();
+      expect(screen.getByText('Left: [A Canvas Label]', { container: '.MuiTypography-overline' })).toBeInTheDocument();
     });
   });
 
@@ -44,9 +43,9 @@ describe('CanvasLayers', () => {
     expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('1');
     expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('2');
 
-    expect(screen.getAllByRole('button', { name: 'layer_hide' }).length).toEqual(2);
-    expect(screen.getAllByRole('button', { name: 'layer_moveToTop' }).length).toEqual(2);
-    expect(screen.getAllByRole('spinbutton', { name: 'layer_opacity' }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: 'Hide layer' }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: 'Move layer to top' }).length).toEqual(2);
+    expect(screen.getAllByRole('spinbutton', { name: 'Layer opacity' }).length).toEqual(2);
   });
 
   it('handles drag + drop of layers', async () => {
@@ -99,7 +98,7 @@ describe('CanvasLayers', () => {
     });
 
     it('has a button for moving a layer to the top', async () => {
-      await user.click(screen.getAllByLabelText('layer_moveToTop')[1]);
+      await user.click(screen.getAllByLabelText('Move layer to top')[1]);
 
       expect(updateLayers).toHaveBeenCalledWith('abc', 'https://prtd.app/hamilton/canvas/p1.json', {
         'https://prtd.app/image/iiif/2/hamilton%2fHL_524_1r_00_PSC/full/862,1024/0/default.jpg': {
@@ -112,7 +111,7 @@ describe('CanvasLayers', () => {
     });
 
     it('has a button for toggling visibility', async () => {
-      await user.click(screen.getAllByLabelText('layer_hide')[1]);
+      await user.click(screen.getAllByLabelText('Hide layer')[1]);
 
       expect(updateLayers).toHaveBeenCalledWith('abc', 'https://prtd.app/hamilton/canvas/p1.json', {
         'https://prtd.app/image/iiif/2/hamilton%2fHL_524_1r_00_TS_Blue/full/862,1024/0/default.png': {

__tests__/src/components/ChangeThemeDialog.test.js

@@ -12,7 +12,6 @@ function createWrapper(props) {
       handleClose={() => {}}
       open
       setSelectedTheme={() => {}}
-      t={t => (t)}
       selectedTheme="light"
       themeIds={['light', 'dark']}
       {...props}
@@ -37,16 +36,16 @@ describe('ChangeThemeDialog', () => {
     const menuItems = screen.queryAllByRole('menuitem');
 
     expect(menuItems.length).toBe(2);
-    expect(menuItems[0]).toHaveTextContent('light');
-    expect(menuItems[1]).toHaveTextContent('dark');
+    expect(menuItems[0]).toHaveTextContent('Light theme');
+    expect(menuItems[1]).toHaveTextContent('Dark theme');
   });
 
   it('shows up theme selection properly', async () => {
     const user = userEvent.setup();
     const setSelectedTheme = vi.fn();
 
     createWrapper({ setSelectedTheme });
-    const menuItem = screen.getByRole('menuitem', { name: 'light' });
+    const menuItem = screen.getByRole('menuitem', { name: 'Light theme' });
     expect(menuItem).toBeInTheDocument();
 
     await user.click(menuItem);
@@ -58,7 +57,7 @@ describe('ChangeThemeDialog', () => {
     it('focuses the selected item', () => {
       createWrapper({ selectedTheme: 'light' });
 
-      const menuItem = screen.getByRole('menuitem', { name: 'light' });
+      const menuItem = screen.getByRole('menuitem', { name: 'Light theme' });
       expect(menuItem).toHaveFocus();
     });
   });

__tests__/src/components/CollapsibleSection.test.js

@@ -11,7 +11,6 @@ function createWrapper(props) {
       classes={{}}
       id="abc123"
       label="The Section Label"
-      t={k => k}
       {...props}
     >
       <span data-testid="child">Child content</span>
@@ -29,9 +28,9 @@ describe('CollapsibleSection', () => {
   });
 
   it('renders the appropriate i18n label based on open state', async () => {
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'collapseSection');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Collapse "The Section Label" section');
     await userEvent.click(screen.getByRole('button'));
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'expandSection');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Expand "The Section Label" section');
   });
 
   it('displays children based on the open state', async () => {