diff --git a/src/id-verification/CameraHelp.jsx b/src/id-verification/CameraHelp.jsx index b5e6c3a..d797493 100644 --- a/src/id-verification/CameraHelp.jsx +++ b/src/id-verification/CameraHelp.jsx @@ -1,13 +1,29 @@ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { Collapsible } from '@edx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import messages from './IdVerification.messages'; +import IdVerificationContext from './IdVerificationContext'; function CameraHelp(props) { + const { optimizelyExperimentName } = useContext(IdVerificationContext); + return (
+ { optimizelyExperimentName + && ( + +

+ {props.intl.formatMessage(messages['id.verification.camera.help.upload.answer'])} +

+
+ )} { }; const contextValue = { + optimizelyExperimentName: '', facePhotoFile: 'test.jpg', }; @@ -44,4 +46,33 @@ describe('IdContextPanel', () => { fireEvent.click(button); expect(history.location.pathname).toEqual('/take-id-photo'); }); + + it('does not show help text for photo upload if not part of experiment', async () => { + await act(async () => render(( + + + + + + + + ))); + const title = await screen.queryByText('What if I want to upload a photo instead?'); + expect(title).not.toBeInTheDocument(); + }); + + it('shows help text for photo upload if part of experiment', async () => { + contextValue.optimizelyExperimentName = 'test'; + await act(async () => render(( + + + + + + + + ))); + const title = await screen.queryByText('What if I want to upload a photo instead?'); + expect(title).toBeInTheDocument(); + }); }); diff --git a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx b/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx index ba083a5..8a7c958 100644 --- a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx +++ b/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx @@ -4,9 +4,11 @@ import { createMemoryHistory } from 'history'; import { render, cleanup, act, screen, fireEvent, } 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 PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel'; +import IdVerificationContext from '../../IdVerificationContext'; jest.mock('@edx/frontend-platform/analytics', () => ({ sendTrackEvent: jest.fn(), @@ -21,6 +23,10 @@ describe('PortraitPhotoContextPanel', () => { intl: {}, }; + const contextValue = { + optimizelyExperimentName: '', + }; + afterEach(() => { cleanup(); }); @@ -29,7 +35,9 @@ describe('PortraitPhotoContextPanel', () => { await act(async () => render(( - + + + ))); @@ -37,4 +45,33 @@ describe('PortraitPhotoContextPanel', () => { fireEvent.click(button); expect(history.location.pathname).toEqual('/take-portrait-photo'); }); + + it('does not show help text for photo upload if not part of experiment', async () => { + await act(async () => render(( + + + + + + + + ))); + const title = await screen.queryByText('What if I want to upload a photo instead?'); + expect(title).not.toBeInTheDocument(); + }); + + it('shows help text for photo upload if part of experiment', async () => { + contextValue.optimizelyExperimentName = 'test'; + await act(async () => render(( + + + + + + + + ))); + const title = await screen.queryByText('What if I want to upload a photo instead?'); + expect(title).toBeInTheDocument(); + }); });