chore: fix unit test problems and deprecation warnings

jwplayer · Dec 4, 2024 · d00edb1 · d00edb1
1 parent 32cf75f
commit d00edb1
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 27 deletions.
diff --git a/packages/ui-react/src/components/Alert/Alert.test.tsx b/packages/ui-react/src/components/Alert/Alert.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { axe } from 'vitest-axe';
 import { render } from '@testing-library/react';
 
@@ -15,6 +15,8 @@ describe('<Alert>', () => {
   test('WCAG 2.2 (AA) compliant', async () => {
     const { container } = render(<Alert message="Body" open={true} onClose={vi.fn()} />);
 
-    expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    await act(async () => {
+      expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    });
   });
 });
diff --git a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { axe } from 'vitest-axe';
 import { render } from '@testing-library/react';
 
@@ -16,6 +16,8 @@ describe('<ConfirmationDialog>', () => {
   test('WCAG 2.2 (AA) compliant', async () => {
     const { container } = render(<ConfirmationDialog body="Body" title="Title" open={true} onConfirm={vi.fn()} onClose={vi.fn()} />);
 
-    expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    await act(async () => {
+      expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    });
   });
 });
diff --git a/packages/ui-react/src/components/Dialog/Dialog.test.tsx b/packages/ui-react/src/components/Dialog/Dialog.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { axe } from 'vitest-axe';
 import { render } from '@testing-library/react';
 
@@ -28,6 +28,8 @@ describe('<Dialog>', () => {
       </Dialog>,
     );
 
-    expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    await act(async () => {
+      expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    });
   });
 });
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { createWrapper, waitForWithFakeTimers } from '../../../test/utils';
 

diff --git a/packages/ui-react/src/components/Modal/Modal.test.tsx b/packages/ui-react/src/components/Modal/Modal.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
 import { axe } from 'vitest-axe';
 
 import { renderWithRouter } from '../../../test/utils';
@@ -43,6 +43,8 @@ describe('<Modal>', () => {
       </Modal>,
     );
 
-    expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    await act(async () => {
+      expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    });
   });
 });
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -60,13 +60,13 @@ const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields,
     // Dropdown  <- when there are more than 2 options
 
     if (values.length === 1 && values[0].value === '') {
-      return <TextField value={questionValues[key]} label={question} {...props} />;
+      return <TextField value={questionValues[key]} label={question} key={key} {...props} />;
     } else if (values.length === 1) {
-      return <Checkbox checked={!!questionValues[key]} value={values[0].value} label={question} checkboxLabel={values[0].label} {...props} />;
+      return <Checkbox checked={!!questionValues[key]} value={values[0].value} label={question} checkboxLabel={values[0].label} key={key} {...props} />;
     } else if (values.length === 2) {
-      return <Radio values={values} value={questionValues[key]} label={question} {...props} />;
+      return <Radio values={values} value={questionValues[key]} label={question} key={key} {...props} />;
     } else if (values.length > 2) {
-      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} />;
+      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} key={key} {...props} />;
     }
 
     return null;

diff --git a/packages/ui-react/src/components/Popover/Popover.test.tsx b/packages/ui-react/src/components/Popover/Popover.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { axe } from 'vitest-axe';
 
 import { renderWithRouter } from '../../../test/utils';
@@ -26,6 +26,8 @@ describe('<Popover>', () => {
       </Popover>,
     );
 
-    expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    await act(async () => {
+      expect(await axe(container, { runOnly: ['wcag21a', 'wcag21aa', 'wcag22aa'] })).toHaveNoViolations();
+    });
   });
 });
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { act } from '@testing-library/react';
+import React, { act } from 'react';
 import { axe } from 'vitest-axe';
 
 import { renderWithRouter } from '../../../test/utils';

diff --git a/packages/ui-react/src/components/Welcome/Welcome.test.tsx b/packages/ui-react/src/components/Welcome/Welcome.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
+import React, { act } from 'react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Welcome from './Welcome';
 

diff --git a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { beforeEach } from 'vitest';
 import { mockService } from '@jwp/ott-common/test/mockService';
@@ -7,7 +7,6 @@ import AccessController from '@jwp/ott-common/src/controllers/AccessController';
 import GenericEntitlementService from '@jwp/ott-common/src/services/GenericEntitlementService';
 import JWPEntitlementService from '@jwp/ott-common/src/services/JWPEntitlementService';
 import WatchHistoryController from '@jwp/ott-common/src/controllers/WatchHistoryController';
-import { act } from '@testing-library/react';
 
 import { renderWithRouter } from '../../../test/utils';
 

diff --git a/packages/ui-react/src/pages/User/User.test.tsx b/packages/ui-react/src/pages/User/User.test.tsx
@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react';
+import React, { act } from 'react';
 import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
 import type { Config } from '@jwp/ott-common/types/config';
 import type { PaymentDetail, Subscription, Transaction } from '@jwp/ott-common/types/subscription';
@@ -12,7 +12,6 @@ import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesContro
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { ACCESS_MODEL, DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 import { Route, Routes } from 'react-router-dom';
-import React from 'react';
 
 import { mockWindowLocation, renderWithRouter } from '../../../test/utils';
 

diff --git a/packages/ui-react/test/utils.tsx b/packages/ui-react/test/utils.tsx
@@ -1,7 +1,7 @@
+import React, { act, type ReactElement, type ReactNode } from 'react';
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
-import React, { type ReactElement, type ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { act, render, type RenderOptions } from '@testing-library/react';
+import { render, type RenderOptions } from '@testing-library/react';
 
 import QueryProvider from '../src/containers/QueryProvider/QueryProvider';
 import { AriaAnnouncerProvider } from '../src/containers/AnnouncementProvider/AnnoucementProvider';

diff --git a/platforms/web/test/vitest.setup.ts b/platforms/web/test/vitest.setup.ts
@@ -2,6 +2,7 @@ import 'react-app-polyfill/stable';
 import '@testing-library/jest-dom/vitest'; // Including this for the expect extensions
 import 'vi-fetch/setup';
 import 'reflect-metadata';
+import type { ComponentType } from 'react';
 import * as matchers from 'vitest-axe/matchers';
 import { expect } from 'vitest';
 import { mockService } from '@jwp/ott-common/test/mockService';
@@ -54,3 +55,42 @@ vi.mock('#src/i18n/config', () => ({
     t: (str: string) => str,
   },
 }));
+
+const country = {
+  af: 'Afghanistan',
+  ax: 'Åland Islands',
+  al: 'Albania',
+};
+
+const usStates = {
+  al: 'Alabama',
+  ak: 'Alaska',
+  az: 'Arizona',
+};
+
+// Mock the translation infra
+// noinspection JSUnusedGlobalSymbols
+vi.mock('react-i18next', () => ({
+  default: () => ({
+    t: (str: string) => str,
+  }),
+  // this mock makes sure any components using the translate HoC receive the t function as a prop
+  withTranslation: () => (Component: ComponentType) => {
+    Component.defaultProps = { ...Component.defaultProps, t: () => '' };
+    return Component;
+  },
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  useTranslation: () => {
+    // noinspection JSUnusedGlobalSymbols
+    return {
+      t: (str: string) => str,
+      i18n: {
+        changeLanguage: () =>
+          new Promise(() => {
+            /* */
+          }),
+        getResourceBundle: (_: string, ns: string) => ({ country, us_state: usStates }[ns]),
+      },
+    };
+  },
+}));