Replace of injectIntl with useIntl() 4/10 (#1299)

* refactor: Replace of injectIntl with useIntl() * fix: improve coverage
2025-08-07 14:24:46 -06:00
parent 6b740a89c6
commit 260df228fb
6 changed files with 62 additions and 71 deletions
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -1,7 +1,7 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import { useRedirect } from '../../hooks';

@@ -10,10 +10,11 @@ import messages from '../IdVerification.messages';

 import BasePanel from './BasePanel';

-const SubmittedPanel = (props) => {
+const SubmittedPanel = () => {
  const { userId } = useContext(IdVerificationContext);
  const { location: returnUrl, text: returnText } = useRedirect();
  const panelSlug = 'submitted';
+  const intl = useIntl();

  useEffect(() => {
    sendTrackEvent('edx.id_verification.submitted', {
@@ -25,24 +26,20 @@ const SubmittedPanel = (props) => {
  return (
    <BasePanel
      name={panelSlug}
-      title={props.intl.formatMessage(messages['id.verification.submitted.title'])}
+      title={intl.formatMessage(messages['id.verification.submitted.title'])}
    >
      <p>
-        {props.intl.formatMessage(messages['id.verification.submitted.text'])}
+        {intl.formatMessage(messages['id.verification.submitted.text'])}
      </p>
      <a
        className="btn btn-primary"
        href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
        data-testid="return-button"
      >
-        {props.intl.formatMessage(messages[returnText])}
+        {intl.formatMessage(messages[returnText])}
      </a>
    </BasePanel>
  );
 };

-SubmittedPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(SubmittedPanel);
+export default SubmittedPanel;
--- a/src/id-verification/panels/TakeIdPhotoPanel.jsx
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -14,11 +14,12 @@ import ImageFileUpload from '../ImageFileUpload';
 import CollapsibleImageHelp from '../CollapsibleImageHelp';
 import SupportedMediaTypes from '../SupportedMediaTypes';

-const TakeIdPhotoPanel = (props) => {
+const TakeIdPhotoPanel = () => {
  const panelSlug = 'take-id-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
  const [mounted, setMounted] = useState(false);
+  const intl = useIntl();

  useEffect(() => {
    // This prevents focus switching to the heading when taking a photo
@@ -30,31 +31,31 @@ const TakeIdPhotoPanel = (props) => {
      name={panelSlug}
      focusOnMount={!mounted}
      title={useCameraForId
-        ? props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])
-        : props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
+        ? intl.formatMessage(messages['id.verification.id.photo.title.camera'])
+        : intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
    >
      <div>
        {idPhotoFile && !useCameraForId && (
          <ImagePreview
            src={idPhotoFile}
-            alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
+            alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
          />
        )}

        {useCameraForId ? (
          <div>
            <p>
-              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+              {intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
            </p>
            <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
          </div>
        ) : (
          <div style={{ marginBottom: '1.25rem' }}>
            <p data-testid="upload-text">
-              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+              {intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
              <SupportedMediaTypes />
            </p>
-            <ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
+            <ImageFileUpload onFileChange={setIdPhotoFile} intl={intl} />
          </div>
        )}
      </div>
@@ -62,15 +63,11 @@ const TakeIdPhotoPanel = (props) => {
      <CollapsibleImageHelp />
      <div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {props.intl.formatMessage(messages['id.verification.next'])}
+          {intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-TakeIdPhotoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakeIdPhotoPanel);
+export default TakeIdPhotoPanel;
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -10,11 +10,12 @@ import IdVerificationContext from '../IdVerificationContext';

 import messages from '../IdVerification.messages';

-const TakePortraitPhotoPanel = (props) => {
+const TakePortraitPhotoPanel = () => {
  const panelSlug = 'take-portrait-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
  const [mounted, setMounted] = useState(false);
+  const intl = useIntl();

  useEffect(() => {
    // This prevents focus switching to the heading when taking a photo
@@ -25,26 +26,22 @@ const TakePortraitPhotoPanel = (props) => {
    <BasePanel
      name={panelSlug}
      focusOnMount={!mounted}
-      title={props.intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
+      title={intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
    >
      <div>
        <p>
-          {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
+          {intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
        </p>
        <Camera onImageCapture={setFacePhotoFile} isPortrait />
      </div>
      <CameraHelp isPortrait />
      <div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {props.intl.formatMessage(messages['id.verification.next'])}
+          {intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-TakePortraitPhotoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakePortraitPhotoPanel);
+export default TakePortraitPhotoPanel;
--- a/src/id-verification/tests/panels/SubmittedPanel.test.jsx
+++ b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, act, screen,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import SubmittedPanel from '../../panels/SubmittedPanel';

@@ -12,13 +11,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
 }));

-const IntlSubmittedPanel = injectIntl(SubmittedPanel);
-
 describe('SubmittedPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
  const contextValue = {
    facePhotoFile: 'test.jpg',
    idPhotoFile: 'test.jpg',
@@ -43,7 +36,7 @@ describe('SubmittedPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -59,7 +52,7 @@ describe('SubmittedPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -75,7 +68,7 @@ describe('SubmittedPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlSubmittedPanel {...defaultProps} />
+            <SubmittedPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
--- a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
+import messages from '../../IdVerification.messages';

 jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
@@ -13,13 +13,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({

 jest.mock('../../Camera');

-const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
-
 describe('TakeIdPhotoPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
  const contextValue = {
    facePhotoFile: 'test.jpg',
    idPhotoFile: null,
@@ -37,7 +31,7 @@ describe('TakeIdPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -52,7 +46,7 @@ describe('TakeIdPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -70,7 +64,7 @@ describe('TakeIdPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -85,7 +79,7 @@ describe('TakeIdPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakeIdPhotoPanel {...defaultProps} />
+            <TakeIdPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -98,4 +92,24 @@ describe('TakeIdPhotoPanel', () => {
    const text = await screen.findByTestId('upload-text');
    expect(text.textContent).toContain('Please upload a photo of your identification card');
  });
+
+  it('shows correct text if useCameraForId', async () => {
+    contextValue.useCameraForId = true;
+    await act(async () => render((
+      <Router>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <TakeIdPhotoPanel />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    // check that upload title and text are correct
+    const title = await screen.findByText(messages['id.verification.id.photo.title.camera'].defaultMessage);
+    expect(title).toBeVisible();
+
+    const text = await screen.findByText(messages['id.verification.id.photo.instructions.camera'].defaultMessage);
+    expect(text).toBeVisible();
+  });
 });
--- a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
@@ -1,10 +1,9 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';

@@ -16,13 +15,7 @@ jest.mock('../../Camera', () => function CameraMock() {
  return <></>;
 });

-const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
-
 describe('TakePortraitPhotoPanel', () => {
-  const defaultProps = {
-    intl: {},
-  };
-
  const contextValue = {
    facePhotoFile: null,
    idPhotoFile: null,
@@ -39,7 +32,7 @@ describe('TakePortraitPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -54,7 +47,7 @@ describe('TakePortraitPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -73,7 +66,7 @@ describe('TakePortraitPhotoPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IntlTakePortraitPhotoPanel {...defaultProps} />
+            <TakePortraitPhotoPanel />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>