test: add IntlProvider

openedx · May 21, 2024 · 5367fa8 · 5367fa8
1 parent 0fc3bed
commit 5367fa8
Show file tree

Hide file tree

Showing 18 changed files with 131 additions and 75 deletions.
diff --git a/src/components/Admin/AdminSearchForm.test.jsx b/src/components/Admin/AdminSearchForm.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { FormControl } from '@edx/paragon';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import AdminSearchForm from './AdminSearchForm';
 import SearchBar from '../SearchBar';
@@ -17,9 +18,17 @@ const DEFAULT_PROPS = {
   tableData: [],
 };
 
+const AdminSearchFormWrapper = props => (
+  <IntlProvider locale="en">
+    <AdminSearchForm {...props} />
+  </IntlProvider>
+);
+
 describe('<AdminSearchForm />', () => {
   it('displays three filters', () => {
-    const wrapper = mount(<AdminSearchForm {...DEFAULT_PROPS} />);
+    const wrapper = mount(
+      <AdminSearchFormWrapper {...DEFAULT_PROPS} />,
+    );
     expect(wrapper.find(FormControl)).toHaveLength(2);
     expect(wrapper.find(SearchBar)).toHaveLength(1);
     expect(wrapper.find(FormControl).at(1).text()).toContain('Choose a course');
@@ -32,7 +41,9 @@ describe('<AdminSearchForm />', () => {
     it(`calls searchEnrollmentsList when ${Object.keys(searchParams)[0]} changes`, () => {
       const spy = jest.fn();
       const props = { ...DEFAULT_PROPS, searchEnrollmentsList: spy };
-      const wrapper = mount(<AdminSearchForm {...props} />);
+      const wrapper = mount(
+        <AdminSearchFormWrapper {...props} />,
+      );
       wrapper.setProps({ searchParams });
       expect(spy).toHaveBeenCalledTimes(1);
     });

diff --git a/src/components/Admin/EmbeddedSubscription.jsx b/src/components/Admin/EmbeddedSubscription.jsx
@@ -44,7 +44,7 @@ const EmbeddedSubscription = () => {
                   description="Heading for the embedded subscription section on lpr page."
                 />
               </h2>
-              {activeSubscriptions.length > 0
+              {activeSubscriptions.length > 1
                 ? (
                   <>
                     <p className="ml-4 mt-3">
@@ -96,7 +96,7 @@ const EmbeddedSubscription = () => {
                         </Link>
                       ),
                     }}
-                    /* eslint-disable react/no-unstable-nested-components */
+                    /* eslint-disable react/no-unstable-nested-components */a
                   />
                 </span>
                 <span>

diff --git a/src/components/Admin/SubscriptionDetails.jsx b/src/components/Admin/SubscriptionDetails.jsx
@@ -36,7 +36,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
   return (
     <>
       <SubscriptionExpirationBanner isSubscriptionPlanDetails />
-      <Row className="ml-2" style={{ border: '1px solid red' }}>
+      <Row className="ml-2">
         <Col>
           <div className="mt-3 d-flex align-items-center">
             <div className="mr-5">

diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -9860,8 +9860,7 @@ exports[`<Admin /> renders correctly with error state 1`] = `
                 Hey, nice to see you
               </div>
               <p>
-                Try refreshing your screen 
-                Network Error
+                Try refreshing your screen Network Error
               </p>
             </div>
           </div>

diff --git a/src/components/Admin/licenses/LicenseAllocationDetails.jsx b/src/components/Admin/licenses/LicenseAllocationDetails.jsx
@@ -4,7 +4,7 @@ import LicenseAllocationHeader from './LicenseAllocationHeader';
 import LicenseManagementTable from './LicenseManagementTable';
 
 const LicenseAllocationDetails = ({ subscriptionUUID }) => (
-  <div className="row mb-3" key={subscriptionUUID} style={{ border: '1px solid green' }}>
+  <div className="row mb-3" key={subscriptionUUID}>
     <div className="col">
       <div className="mb-3">
         <LicenseAllocationHeader />

diff --git a/src/components/Admin/licenses/LicenseAllocationHeader.jsx b/src/components/Admin/licenses/LicenseAllocationHeader.jsx
@@ -19,7 +19,7 @@ const LicenseAllocationHeader = () => {
   return (
     <>
       {isBrowseAndRequestFeatureAlertShown && <NewFeatureAlertBrowseAndRequest />}
-      <div className="ml-4" style={{ border: '1px solid black' }}>
+      <div className="ml-4">
         <h4 style={{ display: 'inline-block' }}>
           <FormattedMessage
             id="admin.portal.lpr.embedded.subscription.licenses.header"

diff --git a/src/components/Admin/licenses/LicenseAllocationHeader.test.jsx b/src/components/Admin/licenses/LicenseAllocationHeader.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import LicenseAllocationHeader from './LicenseAllocationHeader';
 import { SubscriptionDetailContext } from '../../subscriptions/SubscriptionDetailContextProvider';
@@ -60,15 +61,17 @@ describe('LicenseAllocationHeader', () => {
   );
 
   const LicenseAllocationHeaderWrapper = () => (
-    <Provider store={mockStore({})}>
-      <MemoryRouter>
-        <SubscriptionDetailContextWrapper>
-          <SubsidyRequestsContextWrapper>
-            <LicenseAllocationHeader />
-          </SubsidyRequestsContextWrapper>
-        </SubscriptionDetailContextWrapper>
-      </MemoryRouter>
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={mockStore({})}>
+        <MemoryRouter>
+          <SubscriptionDetailContextWrapper>
+            <SubsidyRequestsContextWrapper>
+              <LicenseAllocationHeader />
+            </SubsidyRequestsContextWrapper>
+          </SubscriptionDetailContextWrapper>
+        </MemoryRouter>
+      </Provider>
+    </IntlProvider>
   );
 
   it('renders without crashing', () => {

diff --git a/src/components/Admin/licenses/LicenseManagementTable/index.jsx b/src/components/Admin/licenses/LicenseManagementTable/index.jsx
@@ -50,9 +50,9 @@ const userRecentAction = (user, intl) => {
     case ASSIGNED: {
       return intl.formatMessage({
         id: 'admin.portal.lpr.embedded.subscription.license.management.table.user.recent.action.invited',
-        defaultMessage: 'Invited: {revokedDate}',
+        defaultMessage: 'Invited: {lastRemindDate}',
         description: 'Invited action date for a user in the license management table.',
-      }, { revokedDate: i18nFormatTimestamp({ intl, timestamp: user.lastRemindDate }) });
+      }, { lastRemindDate: i18nFormatTimestamp({ intl, timestamp: user.lastRemindDate }) });
     }
     default: {
       return null;
@@ -226,7 +226,7 @@ const LicenseManagementTable = ({ subscriptionUUID }) => {
   const showSubscriptionZeroStateMessage = subscription.licenses.total === subscription.licenses.unassigned;
 
   return (
-    <div key={subscriptionUUID} style={{ border: '1px solid blue' }}>
+    <div key={subscriptionUUID}>
       {showSubscriptionZeroStateMessage && <SubscriptionZeroStateMessage /> }
       <DataTable
         isSortable

diff --git a/src/components/Admin/licenses/__snapshots__/LicenseAllocationHeader.test.jsx.snap b/src/components/Admin/licenses/__snapshots__/LicenseAllocationHeader.test.jsx.snap
@@ -16,20 +16,12 @@ exports[`LicenseAllocationHeader renders without crashing 1`] = `
   <span
     className="mr-2 ml-2 badge badge-light"
   >
-    Unassigned: 
-    1
-     of 
-    2
-     total
+    Unassigned: 1 of 2 total
   </span>
   <span
     className="badge badge-light"
   >
-    Activated: 
-    1
-     of 
-    2
-     assigned
+    Activated: 1 of 2 assigned
   </span>
 </div>
 `;
diff --git a/src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx b/src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
@@ -29,11 +30,13 @@ const store = mockStore({
 
 const CompletedLearnersWrapper = props => (
   <MemoryRouter>
-    <Provider store={store}>
-      <CompletedLearnersTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <CompletedLearnersTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/.../EnrolledLearnersForInactiveCoursesTable/EnrolledLearnersForInactiveCoursesTable.test.jsx b/.../EnrolledLearnersForInactiveCoursesTable/EnrolledLearnersForInactiveCoursesTable.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
@@ -94,21 +95,25 @@ const enrolledLearnersForInactiveCoursesStore = mockStore({
 
 const EnrolledLearnersForInactiveCoursesEmptyTableWrapper = props => (
   <MemoryRouter>
-    <Provider store={enrolledLearnersForInactiveCoursesEmptyStore}>
-      <EnrolledLearnersForInactiveCoursesTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={enrolledLearnersForInactiveCoursesEmptyStore}>
+        <EnrolledLearnersForInactiveCoursesTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 
 const EnrolledLearnersForInactiveCoursesWrapper = props => (
   <MemoryRouter>
-    <Provider store={enrolledLearnersForInactiveCoursesStore}>
-      <EnrolledLearnersForInactiveCoursesTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={enrolledLearnersForInactiveCoursesStore}>
+        <EnrolledLearnersForInactiveCoursesTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/src/components/EnrolledLearnersTable/EnrolledLearnersTable.test.jsx b/src/components/EnrolledLearnersTable/EnrolledLearnersTable.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
@@ -29,11 +30,13 @@ const store = mockStore({
 
 const EnrolledLearnersWrapper = props => (
   <MemoryRouter>
-    <Provider store={store}>
-      <EnrolledLearnersTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <EnrolledLearnersTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx b/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -83,21 +84,25 @@ const learnerActivityStore = mockStore({
 
 const LearnerActivityEmptyTableWrapper = props => (
   <MemoryRouter>
-    <Provider store={learnerActivityEmptyStore}>
-      <LearnerActivityTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={learnerActivityEmptyStore}>
+        <LearnerActivityTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 
 const LearnerActivityTableWrapper = props => (
   <MemoryRouter>
-    <Provider store={learnerActivityStore}>
-      <LearnerActivityTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={learnerActivityStore}>
+        <LearnerActivityTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/src/components/LearnerActivityTable/index.jsx b/src/components/LearnerActivityTable/index.jsx
@@ -115,7 +115,7 @@ class LearnerActivityTable extends React.Component {
     user_account_creation_date: i18nFormatTimestamp({
       intl: this.props.intl, timestamp: enrollment.user_account_creation_date,
     }),
-    progress_status: i18nFormatProgressStatus({ intl: this.props.intl, timestamp: enrollment.progress_status }),
+    progress_status: i18nFormatProgressStatus({ intl: this.props.intl, progressStatus: enrollment.progress_status }),
     course_list_price: enrollment.course_list_price ? `$${enrollment.course_list_price}` : '',
     current_grade: formatPercentage({ decimal: enrollment.current_grade }),
   }));

diff --git a/src/components/PastWeekPassedLearnersTable/PastWeekPassedLearnersTable.test.jsx b/src/components/PastWeekPassedLearnersTable/PastWeekPassedLearnersTable.test.jsx
@@ -4,6 +4,7 @@ import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 
 import PastWeekPassedLearnersTable from '.';
@@ -50,11 +51,13 @@ const store = mockStore({
 
 const PastWeekPassedLearnersWrapper = props => (
   <MemoryRouter>
-    <Provider store={store}>
-      <PastWeekPassedLearnersTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <PastWeekPassedLearnersTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/src/components/RegisteredLearnersTable/RegisteredLearnersTable.test.jsx b/src/components/RegisteredLearnersTable/RegisteredLearnersTable.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
@@ -29,11 +30,13 @@ const store = mockStore({
 
 const RegisteredLearnersWrapper = props => (
   <MemoryRouter>
-    <Provider store={store}>
-      <RegisteredLearnersTable
-        {...props}
-      />
-    </Provider>
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <RegisteredLearnersTable
+          {...props}
+        />
+      </Provider>
+    </IntlProvider>
   </MemoryRouter>
 );
 

diff --git a/src/utils.js b/src/utils.js
@@ -73,9 +73,9 @@ function i18nFormatProgressStatus({ intl, progressStatus }) {
   switch (progressStatus) {
     case 'In Progress':
       return intl.formatMessage({
-        id: 'admin.portal.lpr.progress.status.has.not.passed',
-        defaultMessage: 'Has not passed',
-        description: 'Text to display when the learner has not passed the course',
+        id: 'admin.portal.lpr.progress.status.in.progress',
+        defaultMessage: 'In Progress',
+        description: 'Text to display when the learner is in progress of the course',
       });
     case 'Passed':
       return intl.formatMessage({