test: fix render issues

dcoa · dcoa · commit 7cd6894b78bf · 2025-03-26T23:42:33.000+11:00
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx
@@ -4,6 +4,7 @@ import {
   render,
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   EnterpriseCustomerUserDetail,
   AdministratorCell,
@@ -20,7 +21,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         },
       },
     };
-    render(<EnterpriseCustomerUserDetail row={enterpriseCustomerUser} />);
+    render(<IntlProvider locale="en"><EnterpriseCustomerUserDetail row={enterpriseCustomerUser} /></IntlProvider>);
     expect(screen.getByText('ash ketchum')).toBeInTheDocument();
     expect(screen.getByText('ash@ketchum.org')).toBeInTheDocument();
     expect(screen.getByTestId('icon-hyperlink')).toHaveAttribute('href', '/learner-information/?email=ash@ketchum.org');
@@ -35,7 +36,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         },
       },
     };
-    render(<EnterpriseCustomerUserDetail row={pendingEnterpriseCustomerUser} />);
+    render(<IntlProvider locale="en"><EnterpriseCustomerUserDetail row={pendingEnterpriseCustomerUser} /></IntlProvider>);
     expect(screen.getByText('pending@customer.org')).toBeInTheDocument();
     expect(screen.queryByTestId('icon-hyperlink')).not.toBeInTheDocument();
     expect(screen.queryByTestId('username-email-hyperlink')).not.toBeInTheDocument();
@@ -50,7 +51,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         roleAssignments: ['enterprise_learner'],
       },
     };
-    render(<AdministratorCell row={pendingAdmin} />);
+    render(<IntlProvider locale="en"><AdministratorCell row={pendingAdmin} /></IntlProvider>);
     expect(screen.getByText('Pending')).toBeInTheDocument();
   });
 
@@ -63,7 +64,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         roleAssignments: ['enterprise_admin'],
       },
     };
-    render(<AdministratorCell row={adminRow} />);
+    render(<IntlProvider locale="en"><AdministratorCell row={adminRow} /></IntlProvider>);
     expect(screen.queryByText('Pending')).not.toBeInTheDocument();
   });
 
@@ -78,7 +79,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         roleAssignments: ['enterprise_learner'],
       },
     };
-    render(<LearnerCell row={learnerRow} />);
+    render(<IntlProvider locale="en"><LearnerCell row={learnerRow} /></IntlProvider>);
     expect(screen.queryByText('Pending')).not.toBeInTheDocument();
   });
 
@@ -92,7 +93,7 @@ describe('EnterpriseCustomerUserDetail', () => {
         enterpriseCustomerUser: null,
       },
     };
-    render(<LearnerCell row={pendingLearnerRow} />);
+    render(<IntlProvider locale="en"><LearnerCell row={pendingLearnerRow} /></IntlProvider>);
     expect(screen.queryByText('Pending')).toBeInTheDocument();
   });
 });
diff --git a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx
@@ -3,6 +3,7 @@ import { renderWithRouter } from '@edx/frontend-enterprise-utils';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { camelCaseObject } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { DashboardContext, initialStateValue } from '../../../testData/Dashboard';
 import DashboardDataTable from '../DashboardDataTable';
 import { sampleDataTableData } from '../../../testData/constants';
@@ -31,9 +32,11 @@ jest.mock('../../../../data/services/EnterpriseApiService', () => ({
 const DashboardDatatableWrapper = ({
   value = initialStateValue,
 }) => (
-  <DashboardContext value={value}>
-    <DashboardDataTable />
-  </DashboardContext>
+  <IntlProvider locale="en">
+    <DashboardContext value={value}>
+      <DashboardDataTable />
+    </DashboardContext>
+  </IntlProvider>
 );
 
 describe('DashboardDatatable', () => {
diff --git a/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardTableLinks.test.jsx b/src/Configuration/Provisioning/DashboardDataTable/tests/DashboardTableLinks.test.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import { screen, render } from '@testing-library/react';
 import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   CustomerNameHyperlink,
   DjangoIconHyperlink,
@@ -31,13 +32,13 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<PlanIdHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanIdHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: '123456789' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
     it('does not render hyperlink if FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION is false', () => {
       getConfig.mockReturnValue({ FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: false });
-      render(<PlanIdHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanIdHyperlink row={row} /></IntlProvider>);
       expect(screen.queryByRole('link', { name: '123456789' })).toBeNull();
     });
   });
@@ -51,13 +52,13 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<PlanTitleHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanTitleHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: 'Pikachu' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
     it('does not render hyperlink if FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION is false', () => {
       getConfig.mockReturnValue({ FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: false });
-      render(<PlanTitleHyperlink row={row} />);
+      render(<IntlProvider locale="en"><PlanTitleHyperlink row={row} /></IntlProvider>);
       expect(screen.queryByRole('link', { name: 'Pikachu' })).toBeNull();
     });
   });
@@ -71,13 +72,13 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: 'true',
       }));
-      render(<CustomerNameHyperlink row={row} />);
+      render(<IntlProvider locale="en"><CustomerNameHyperlink row={row} /></IntlProvider>);
       expect(screen.getByRole('link', { name: 'Ash Ketchum' })).toHaveAttribute('href', '/enterprise-configuration/learner-credit/123456789/view');
     });
 
     it('does not render hyperlink if FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION is false', () => {
       getConfig.mockReturnValue({ FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: false });
-      render(<CustomerNameHyperlink row={row} />);
+      render(<IntlProvider locale="en"><CustomerNameHyperlink row={row} /></IntlProvider>);
       expect(screen.queryByRole('link', { name: 'Ash Ketchum' })).toBeNull();
     });
   });
@@ -91,7 +92,7 @@ describe('DashboardTableLinks', () => {
       getConfig.mockImplementation(() => ({
         DJANGO_ADMIN_SUBSIDY_BASE_URL: 'https://pokemons.com',
       }));
-      render(<DjangoIconHyperlink row={row} />);
+      render(<IntlProvider locale="en"><DjangoIconHyperlink row={row} /></IntlProvider>);
       expect(screen.getByTestId('django-admin-link')).toHaveAttribute('href', 'https://pokemons.com/admin/subsidy/subsidy/123456789/change/');
     });
   });
diff --git a/src/Configuration/Provisioning/ErrorPage/tests/ErrorPageContainer.test.jsx b/src/Configuration/Provisioning/ErrorPage/tests/ErrorPageContainer.test.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, cleanup } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import ErrorPageContainer from '../ErrorPageContainer';
 import { ERROR_PAGE_TEXT } from '../data/constants';
 
@@ -16,12 +17,13 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('<ErrorPageContainerWrapper>', () => {
+  afterEach(cleanup);
   it('Displays the passed error message', () => {
-    renderWithRouter(<ErrorPageContainer to="/" />);
+    renderWithRouter(<IntlProvider locale="en"><ErrorPageContainer to="/" /></IntlProvider>);
     expect(screen.getByText('Test Error Message', { exact: false })).toBeTruthy();
   });
   it('Redirects on button click', () => {
-    renderWithRouter(<ErrorPageContainer to="/" />);
+    renderWithRouter(<IntlProvider locale="en"><ErrorPageContainer to="/" /></IntlProvider>);
     const button = screen.getByText(ERROR_PAGE_TEXT.BUTTON);
     expect(button).toBeTruthy();
     fireEvent.click(button);
diff --git a/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/CustomCatalogDetail.test.jsx b/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/CustomCatalogDetail.test.jsx
@@ -2,14 +2,16 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
 import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
 import CustomCatalogDetail from '../CustomCatalogDetail';
 
 const mockCatalogTitle = 'Foo Bar Catalog';
 
 describe('CustomCatalogDetail', () => {
   it('renders the component with content', () => {
     renderWithRouter(
-      <CustomCatalogDetail catalogTitle={mockCatalogTitle} />,
+      <IntlProvider locale="en"><CustomCatalogDetail catalogTitle={mockCatalogTitle} /></IntlProvider>,
     );
     expect(screen.getByText(mockCatalogTitle)).toBeInTheDocument();
   });
diff --git a/src/Configuration/test/ConfigurationPage.test.jsx b/src/Configuration/test/ConfigurationPage.test.jsx
@@ -1,18 +1,27 @@
-import { render, screen } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import ConfigurationPage from '../ConfigurationPage';
 import ROUTES from '../../data/constants/routes';
 import { titleCase } from '../../utils';
 import CONFIGURATION_PAGE_TEXT from '../data/constants';
 
 const { CONFIGURATION: { SUB_DIRECTORY } } = ROUTES;
 
+const ConfigurationPageWrapper = () => (
+  <IntlProvider locale="en">
+    <ConfigurationPage />
+  </IntlProvider>
+);
+
 describe('ConfigurationPage', () => {
+  afterEach(cleanup);
+
   it('renders', () => {
-    render(<ConfigurationPage />);
+    render(<ConfigurationPageWrapper />);
     expect(screen.getByText(CONFIGURATION_PAGE_TEXT.HEADER)).toBeTruthy();
   });
   it('renders links to subdirectories', () => {
-    render(<ConfigurationPage />);
+    render(<ConfigurationPageWrapper />);
     Object.keys(SUB_DIRECTORY).forEach((route) => {
       expect(screen.getByText(titleCase(route))).toBeTruthy();
     });
diff --git a/src/ProgramEnrollments/ProgramInspector/EnrollmentDetails.test.jsx b/src/ProgramEnrollments/ProgramInspector/EnrollmentDetails.test.jsx
@@ -1,16 +1,19 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import UserMessagesProvider from '../../userMessages/UserMessagesProvider';
 import EnrollmentDetails from './EnrollmentDetails';
 import { programInspectorSuccessResponse } from './data/test/programInspector';
 
 const EnrollmentDetailsWrapper = (props) => (
-  <MemoryRouter>
-    <UserMessagesProvider>
-      <EnrollmentDetails {...props} />
-    </UserMessagesProvider>
-  </MemoryRouter>
+  <IntlProvider locale="en">
+    <MemoryRouter>
+      <UserMessagesProvider>
+        <EnrollmentDetails {...props} />
+      </UserMessagesProvider>
+    </MemoryRouter>
+  </IntlProvider>
 );
 
 describe('Enrollment Details', () => {
diff --git a/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx b/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx
@@ -140,10 +140,11 @@ export default function ProgramInspector() {
                   defaultValue={activeOrgKey}
                   onChange={(e) => setActiveOrgKey(e.target.value)}
                 >
-                  {
-                    getOrgKeyList() && getOrgKeyList()
-                      .map(({ label, value, disabled }) => <option key={value} value={value} disabled={disabled}>{label}</option>)
-                  }
+                  { getOrgKeyList() && getOrgKeyList().map(
+                    (
+                      { label, value, disabled },
+                    ) => <option key={value} value={value} disabled={disabled}>{label}</option>,
+                  )}
                 </Form.Control>
               </Form.Group>
             </div>
diff --git a/src/users/CopyShowHyperLinks.test.jsx b/src/users/CopyShowHyperLinks.test.jsx
@@ -1,5 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import CopyShowHyperlinks from './CopyShowHyperLinks';
 
 describe('Copy Show Hyperlinks', () => {
@@ -11,7 +12,7 @@ describe('Copy Show Hyperlinks', () => {
     props = {
       text,
     };
-    wrapper = mount(<CopyShowHyperlinks {...props} />);
+    wrapper = mount(<IntlProvider locale="en"><CopyShowHyperlinks {...props} /></IntlProvider>);
   });
   it('Text Value', () => {
     const copy = wrapper.find('a').at(0);
diff --git a/src/users/SingleSignOnRecordCard.test.jsx b/src/users/SingleSignOnRecordCard.test.jsx
@@ -1,10 +1,17 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { camelCaseObject } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import ssoRecordsData from './data/test/ssoRecords';
 import SingleSignOnRecordCard from './SingleSignOnRecordCard';
 import { formatDate, formatUnixTimestamp } from '../utils';
 
+const SingleSignOnRecordCardWrapper = (props) => (
+  <IntlProvider locale="en">
+    <SingleSignOnRecordCard {...props} />
+  </IntlProvider>
+);
+
 describe.each(ssoRecordsData)('Single Sign On Record Card', (ssoRecordData) => {
   // prepare data
   const ssoRecordProp = camelCaseObject({
@@ -19,7 +26,7 @@ describe.each(ssoRecordsData)('Single Sign On Record Card', (ssoRecordData) => {
     props = {
       ssoRecord: ssoRecordProp,
     };
-    wrapper = mount(<SingleSignOnRecordCard {...props} />);
+    wrapper = mount(<SingleSignOnRecordCardWrapper {...props} />);
   });
 
   it('SSO props', () => {
@@ -31,7 +38,7 @@ describe.each(ssoRecordsData)('Single Sign On Record Card', (ssoRecordData) => {
     props = {
       ssoRecord: null,
     };
-    wrapper = mount(<SingleSignOnRecordCard {...props} />);
+    wrapper = mount(<SingleSignOnRecordCardWrapper {...props} />);
 
     expect(wrapper.isEmptyRender()).toBeTruthy();
   });
diff --git a/src/users/__snapshots__/UserSearch.test.jsx.snap b/src/users/__snapshots__/UserSearch.test.jsx.snap
@@ -12,12 +12,17 @@ exports[`User Search Page renders correctly matches snapshot 1`] = `
     >
       Username, Email or LMS User ID
     </label>
-    <input
-      className="form-control flex-grow-1 ml-1 mr-1"
-      defaultValue=""
-      name="userIdentifier"
-      type="text"
-    />
+    <div
+      className="pgn__form-control-decorator-group flex-grow-1 ml-1 mr-1"
+    >
+      <input
+        className="form-control"
+        defaultValue=""
+        name="userIdentifier"
+        onBlur={[Function]}
+        onChange={[Function]}
+      />
+    </div>
     <button
       className="btn btn-primary"
       disabled={false}
diff --git a/src/users/entitlements/Entitlements.test.jsx b/src/users/entitlements/Entitlements.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import Entitlements from './Entitlements';
 import { entitlementsData, entitlementsErrors } from '../data/test/entitlements';
@@ -9,9 +10,11 @@ import UserMessagesProvider from '../../userMessages/UserMessagesProvider';
 import * as api from '../data/api';
 
 const EntitlementsPageWrapper = (props) => (
-  <UserMessagesProvider>
-    <Entitlements {...props} />
-  </UserMessagesProvider>
+  <IntlProvider locale="en">
+    <UserMessagesProvider>
+      <Entitlements {...props} />
+    </UserMessagesProvider>
+  </IntlProvider>
 );
 
 jest.mock('@edx/frontend-platform', () => ({
diff --git a/src/users/orderHistory/OrderHistory.test.jsx b/src/users/orderHistory/OrderHistory.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   render, waitFor, act, fireEvent,
 } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import OrderHistory from './OrderHistory';
 import { getOrderHistory } from '../data/api';
 import '@testing-library/jest-dom/extend-expect';
@@ -10,9 +11,11 @@ import UserMessagesProvider from '../../userMessages/UserMessagesProvider';
 jest.mock('../data/api');
 
 const OrderHistoryWrapper = (props) => (
-  <UserMessagesProvider>
-    <OrderHistory {...props} />
-  </UserMessagesProvider>
+  <IntlProvider locale="en">
+    <UserMessagesProvider>
+      <OrderHistory {...props} />
+    </UserMessagesProvider>
+  </IntlProvider>
 );
 
 describe('OrderHistory', () => {
