Add React Testing Library and write unit tests for IDV

package.json

@@ -77,11 +77,14 @@
   },
   "devDependencies": {
     "@edx/frontend-build": "2.0.6",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/react": "^10.4.7",
     "codecov": "3.7.2",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.2",
     "es-check": "5.0.0",
     "husky": "3.0.9",
+    "jest": "^26.1.0",
     "react-test-renderer": "16.8.6",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

src/id-verification/panels/GetNameIdPanel.jsx

@@ -70,11 +70,13 @@ function GetNameIdPanel(props) {
             readOnly={!isEditing}
             value={idPhotoName || nameOnAccountValue}
             onChange={e => setIdPhotoName(e.target.value)}
+            data-testid="name-input"
           />
           {!isEditing && (
             <Button
               className="btn-link px-0 ml-3"
               onClick={handleClick}
+              data-testid="edit-button"
             >
               {props.intl.formatMessage(messages['id.verification.account.name.edit'])}
             </Button>
@@ -88,7 +90,7 @@ function GetNameIdPanel(props) {
       />
 
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {isEditing ? props.intl.formatMessage(messages['id.verification.account.name.save']) : props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/panels/IdContextPanel.jsx

@@ -35,7 +35,7 @@ function IdContextPanel(props) {
         </div>
       </div>
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/panels/PortraitPhotoContextPanel.jsx

@@ -37,7 +37,7 @@ function PortraitPhotoContextPanel(props) {
         </div>
       </div>
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/panels/RequestCameraAccessPanel.jsx

@@ -68,11 +68,11 @@ function RequestCameraAccessPanel(props) {
 
       {mediaAccess === MEDIA_ACCESS.GRANTED && (
         <div>
-          <p>
+          <p data-testid="camera-access-success">
             {props.intl.formatMessage(messages['id.verification.camera.access.success'])}
           </p>
           <div className="action-row">
-            <Link to={nextPanelSlug} className="btn btn-primary">
+            <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
               {props.intl.formatMessage(messages['id.verification.next'])}
             </Link>
           </div>
@@ -81,7 +81,7 @@ function RequestCameraAccessPanel(props) {
 
       {[MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess) && (
         <div>
-          <p>
+          <p data-testid="camera-access-failure">
             {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
           </p>
           <div className="action-row">

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -74,7 +74,7 @@ function ReviewRequirementsPanel(props) {
       </p>
 
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/panels/SubmittedPanel.jsx

@@ -35,7 +35,11 @@ function SubmittedPanel(props) {
       <p>
         {props.intl.formatMessage(messages['id.verification.submitted.text'])}
       </p>
-      <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
+      <a
+        className="btn btn-primary"
+        href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
+        data-testid="return-button"
+      >
         {props.intl.formatMessage(messages[returnText])}
       </a>
     </BasePanel>

src/id-verification/panels/SummaryPanel.jsx

@@ -39,7 +39,13 @@ function SummaryPanel(props) {
       }
     }
     return (
-      <Button className="btn btn-primary" title="Confirmation" disabled={isSubmitting} onClick={handleClick}>
+      <Button
+        className="btn btn-primary"
+        title="Confirmation"
+        disabled={isSubmitting}
+        onClick={handleClick}
+        data-testid="submit-button"
+      >
         {props.intl.formatMessage(messages['id.verification.review.confirm'])}
       </Button>
     );

src/id-verification/panels/TakeIdPhotoPanel.jsx

@@ -45,7 +45,7 @@ function TakeIdPhotoPanel(props) {
         )}
       </div>
       <div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/panels/TakePortraitPhotoPanel.jsx

@@ -45,7 +45,7 @@ function TakePortraitPhotoPanel(props) {
         )}
       </div>
       <div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
-        <Link to={nextPanelSlug} className="btn btn-primary">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

src/id-verification/tests/Camera.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, screen, act, fireEvent } from '@testing-library/react';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../IdVerificationContext';
+import Camera from '../Camera';
+
+jest.mock('jslib-html5-camera-photo');
+
+window.HTMLMediaElement.prototype.play = () => {};
+
+const IntlCamera = injectIntl(Camera);
+
+const history = createMemoryHistory();
+
+describe('SubmittedPanel', () => {
+  const defaultProps = {
+    intl: {},
+    onImageCapture: jest.fn(),
+  };
+
+  const contextValue = {};
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('takes photo', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByRole('button');
+    expect(button).toHaveTextContent('Take Photo');
+    fireEvent.click(button);
+    expect(defaultProps.onImageCapture).toHaveBeenCalled();
+  });
+});

src/id-verification/tests/ExistingRequest.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import ExistingRequest from '../ExistingRequest';
+
+const IntlExistingRequest = injectIntl(ExistingRequest);
+
+const history = createMemoryHistory();
+
+describe('ExistingRequest', () => {
+  const defaultProps = {
+    intl: {},
+    status: '',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly when status is pending', async () => {
+    defaultProps.status = 'pending';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You have already submitted your verification information./);
+
+    expect(text).toBeInTheDocument();
+  });
+
+  it('renders correctly when status is approved', async () => {
+    defaultProps.status = 'approved';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You have already submitted your verification information./);
+
+    expect(text).toBeInTheDocument();
+  });
+
+  it('renders correctly when status is denied', async () => {
+    defaultProps.status = 'denied';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You cannot verify your identity at this time./);
+
+    expect(text).toBeInTheDocument();
+  });
+});

src/id-verification/tests/IdVerificationContext.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, cleanup, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import { getExistingIdVerification } from '../data/service';
+import { IdVerificationContextProvider } from '../IdVerificationContext';
+
+jest.mock('../data/service', () => ({
+  getExistingIdVerification: jest.fn(),
+}));
+
+describe('IdVerificationContext', () => {
+  const defaultProps = {
+    children: <div />,
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly and calls getExistingIdVerification', async () => {
+    await act(async () => render((
+      <AppContext.Provider value={{ authenticatedUser: { userId: 3 } }}>
+        <IntlProvider locale="en">
+          <IdVerificationContextProvider {...defaultProps} />
+        </IntlProvider>
+      </AppContext.Provider>
+    )));
+    expect(getExistingIdVerification).toHaveBeenCalled();
+  });
+});

src/id-verification/tests/panels/GetNameIdPanel.test.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import GetNameIdPanel from '../../panels/GetNameIdPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlGetNameIdPanel = injectIntl(GetNameIdPanel);
+
+const history = createMemoryHistory();
+
+describe('GetNameIdPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    nameOnAccount: 'test',
+    userId: 3,
+    idPhotoName: '',
+    setIdPhotoName: jest.fn(),
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('edits', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlGetNameIdPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('edit-button');
+    const input = await screen.findByTestId('name-input');
+    expect(input).toHaveProperty('disabled', true);
+    fireEvent.click(button);
+    expect(input).toHaveProperty('disabled', false);
+    fireEvent.change(input, { target: { value: 'test change' } });
+    expect(contextValue.setIdPhotoName).toHaveBeenCalled();
+  });
+
+  it('routes to SummaryPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlGetNameIdPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/summary');
+  });
+});

src/id-verification/tests/panels/IdContextPanel.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import IdContextPanel from '../../panels/IdContextPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlIdContextPanel = injectIntl(IdContextPanel);
+
+const history = createMemoryHistory();
+
+describe('IdContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to TakeIdPhotoPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-id-photo');
+  });
+});

src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlPortraitPhotoContextPanel = injectIntl(PortraitPhotoContextPanel);
+
+const history = createMemoryHistory();
+
+describe('PortraitPhotoContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to TakePortraitPhotoPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlPortraitPhotoContextPanel {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+  });
+});

src/id-verification/tests/panels/RequestCameraAccessPanel.test.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, screen, cleanup, act, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import RequestCameraAccessPanel from '../../panels/RequestCameraAccessPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const history = createMemoryHistory();
+
+const IntlRequestCameraAccessPanel = injectIntl(RequestCameraAccessPanel);
+
+describe('RequestCameraAccessPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    tryGetUserMedia: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly with media access pending', async () => {
+    contextValue.mediaAccess = 'pending';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.getByRole('button');
+    expect(button).toHaveTextContent(/Enable Camera/);
+  });
+
+  it('renders correctly with media access granted and routes to PortraitPhotoContextPanel', async () => {
+    contextValue.mediaAccess = 'granted';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-success');
+    expect(text).toHaveTextContent(/Looks like your camera is working and ready./);
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/portrait-photo-context');
+  });
+
+  it('renders correctly with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-failure');
+    expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+  });
+
+  it('renders correctly with media access unsupported', async () => {
+    contextValue.mediaAccess = 'unsupported';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-failure');
+    expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+  });
+});

src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import ReviewRequirementsPanel from '../../panels/ReviewRequirementsPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlReviewRequirementsPanel = injectIntl(ReviewRequirementsPanel);
+
+const history = createMemoryHistory();
+
+describe('ReviewRequirementsPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to RequestCameraAccessPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlReviewRequirementsPanel {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/request-camera-access');
+  });
+});

src/id-verification/tests/panels/SubmittedPanel.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, act, screen } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import SubmittedPanel from '../../panels/SubmittedPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlSubmittedPanel = injectIntl(SubmittedPanel);
+
+const history = createMemoryHistory();
+
+describe('SubmittedPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+  };
+
+  beforeEach(() => {
+    global.sessionStorage.getItem = jest.fn();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('links to dashboard without courseRunKey', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSubmittedPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('return-button');
+    expect(button).toHaveTextContent(/Return to Your Dashboard/);
+  });
+
+  it('links to course with courseRunKey', async () => {
+    Storage.prototype.getItem = jest.fn(() => 'courseRunKey');
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSubmittedPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('return-button');
+    expect(button).toHaveTextContent(/Return to Course/);
+  });
+});

src/id-verification/tests/panels/SummaryPanel.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { submitIdVerification } from '../../data/service';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import SummaryPanel from '../../panels/SummaryPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../data/service', () => ({
+  submitIdVerification: jest.fn(() => ({ success: true, message: null })),
+}));
+
+const IntlSummaryPanel = injectIntl(SummaryPanel);
+
+const history = createMemoryHistory();
+
+describe('SummaryPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+    nameOnAccount: '',
+    idPhotoName: '',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('submits', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSummaryPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('submit-button');
+    fireEvent.click(button);
+    expect(submitIdVerification).toHaveBeenCalled();
+  });
+});

src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../Camera');
+
+const history = createMemoryHistory();
+
+const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
+
+describe('TakeIdPhotoPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: null,
+    setIdPhotoFile: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('doesn\'t show next button before photo is taken', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakeIdPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).not.toBeVisible();
+  });
+
+  it('shows next button after photo is taken and routes to GetNameIdPanel', async () => {
+    contextValue.idPhotoFile = 'test.jpg';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakeIdPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).toBeVisible();
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/get-name-id');
+  });
+});

src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../Camera');
+
+const history = createMemoryHistory();
+
+const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
+
+describe('TakePortraitPhotoPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: null,
+    setFacePhotoFile: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('doesn\'t show next button before photo is taken', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakePortraitPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).not.toBeVisible();
+  });
+
+  it('shows next button after photo is taken and routes to IdContextPanel', async () => {
+    contextValue.facePhotoFile = 'test.jpg';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakePortraitPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).toBeVisible();
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/id-context');
+  });
+});