-
+
{props.intl.formatMessage(messages['id.verification.camera.access.success'])}
-
+
{props.intl.formatMessage(messages['id.verification.next'])}
@@ -81,7 +81,7 @@ function RequestCameraAccessPanel(props) {
{[MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess) && (
-
+
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx
index 7ed7ae0..1a64c94 100644
--- a/src/id-verification/panels/ReviewRequirementsPanel.jsx
+++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx
@@ -74,7 +74,7 @@ function ReviewRequirementsPanel(props) {
-
+
{props.intl.formatMessage(messages['id.verification.next'])}
diff --git a/src/id-verification/panels/SubmittedPanel.jsx b/src/id-verification/panels/SubmittedPanel.jsx
index 21bd168..9476cf8 100644
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -35,7 +35,11 @@ function SubmittedPanel(props) {
{props.intl.formatMessage(messages['id.verification.submitted.text'])}
-
+
{props.intl.formatMessage(messages[returnText])}
diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx
index 6917754..ac0b506 100644
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -39,7 +39,13 @@ function SummaryPanel(props) {
}
}
return (
-
-
+
{props.intl.formatMessage(messages['id.verification.next'])}
diff --git a/src/id-verification/panels/TakePortraitPhotoPanel.jsx b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
index 3947047..f042a87 100644
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -45,7 +45,7 @@ function TakePortraitPhotoPanel(props) {
)}
-
+
{props.intl.formatMessage(messages['id.verification.next'])}
diff --git a/src/id-verification/tests/Camera.test.jsx b/src/id-verification/tests/Camera.test.jsx
new file mode 100644
index 0000000..8c5f7dc
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByRole('button');
+ expect(button).toHaveTextContent('Take Photo');
+ fireEvent.click(button);
+ expect(defaultProps.onImageCapture).toHaveBeenCalled();
+ });
+});
diff --git a/src/id-verification/tests/ExistingRequest.test.jsx b/src/id-verification/tests/ExistingRequest.test.jsx
new file mode 100644
index 0000000..cee4323
--- /dev/null
+++ b/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((
+
+
+
+
+
+ )));
+
+ 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((
+
+
+
+
+
+ )));
+
+ 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((
+
+
+
+
+
+ )));
+
+ const text = screen.getByText(/You cannot verify your identity at this time./);
+
+ expect(text).toBeInTheDocument();
+ });
+});
diff --git a/src/id-verification/tests/IdVerificationContext.test.jsx b/src/id-verification/tests/IdVerificationContext.test.jsx
new file mode 100644
index 0000000..87f9b83
--- /dev/null
+++ b/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:
,
+ intl: {},
+ };
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ it('renders correctly and calls getExistingIdVerification', async () => {
+ await act(async () => render((
+
+
+
+
+
+ )));
+ expect(getExistingIdVerification).toHaveBeenCalled();
+ });
+});
diff --git a/src/id-verification/tests/panels/GetNameIdPanel.test.jsx b/src/id-verification/tests/panels/GetNameIdPanel.test.jsx
new file mode 100644
index 0000000..10e41b7
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/summary');
+ });
+});
diff --git a/src/id-verification/tests/panels/IdContextPanel.test.jsx b/src/id-verification/tests/panels/IdContextPanel.test.jsx
new file mode 100644
index 0000000..703536a
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/take-id-photo');
+ });
+});
diff --git a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx b/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx
new file mode 100644
index 0000000..4af4e99
--- /dev/null
+++ b/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((
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/take-portrait-photo');
+ });
+});
diff --git a/src/id-verification/tests/panels/RequestCameraAccessPanel.test.jsx b/src/id-verification/tests/panels/RequestCameraAccessPanel.test.jsx
new file mode 100644
index 0000000..17d36ee
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ const text = await screen.findByTestId('camera-access-failure');
+ expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+ });
+});
diff --git a/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx b/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx
new file mode 100644
index 0000000..27929b7
--- /dev/null
+++ b/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((
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/request-camera-access');
+ });
+});
diff --git a/src/id-verification/tests/panels/SubmittedPanel.test.jsx b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
new file mode 100644
index 0000000..cf4ef06
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('return-button');
+ expect(button).toHaveTextContent(/Return to Course/);
+ });
+});
diff --git a/src/id-verification/tests/panels/SummaryPanel.test.jsx b/src/id-verification/tests/panels/SummaryPanel.test.jsx
new file mode 100644
index 0000000..b06d871
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('submit-button');
+ fireEvent.click(button);
+ expect(submitIdVerification).toHaveBeenCalled();
+ });
+});
diff --git a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
new file mode 100644
index 0000000..bb5bc60
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ expect(button).toBeVisible();
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/get-name-id');
+ });
+});
diff --git a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
new file mode 100644
index 0000000..f510fc2
--- /dev/null
+++ b/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((
+
+
+
+
+
+
+
+ )));
+ 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((
+
+
+
+
+
+
+
+ )));
+ const button = await screen.findByTestId('next-button');
+ expect(button).toBeVisible();
+ fireEvent.click(button);
+ expect(history.location.pathname).toEqual('/id-context');
+ });
+});