From 8c5c753c3f66e402b17cc81325c7db2a7cd878ac Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 5 May 2022 09:34:54 -0400 Subject: [PATCH 1/3] Show IdV app alert message relevant for current step **Why**: So that the personal key success alert message won't be shown for all steps, as we continue to expand the flow. changelog: Upcoming Features, Identity Verification, Add password confirmation step --- app/javascript/packages/verify-flow/index.tsx | 2 +- .../verify-flow/verify-flow-alert.tsx | 30 +++++++++++++++++++ .../{index.spec.tsx => verify-flow.spec.tsx} | 7 ++++- .../packages/verify-flow/verify-flow.tsx | 14 ++++----- 4 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 app/javascript/packages/verify-flow/verify-flow-alert.tsx rename app/javascript/packages/verify-flow/{index.spec.tsx => verify-flow.spec.tsx} (89%) diff --git a/app/javascript/packages/verify-flow/index.tsx b/app/javascript/packages/verify-flow/index.tsx index 9cb8593ad02..d98e4e84e5d 100644 --- a/app/javascript/packages/verify-flow/index.tsx +++ b/app/javascript/packages/verify-flow/index.tsx @@ -1,2 +1,2 @@ export { SecretsContextProvider } from './context/secrets-context'; -export { VerifyFlow } from './verify-flow'; +export { default as VerifyFlow } from './verify-flow'; diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.tsx new file mode 100644 index 00000000000..66eaaf3f364 --- /dev/null +++ b/app/javascript/packages/verify-flow/verify-flow-alert.tsx @@ -0,0 +1,30 @@ +import { t } from '@18f/identity-i18n'; +import { Alert } from '@18f/identity-components'; + +interface VerifyFlowAlertProps { + /** + * Current step name. + */ + currentStep: string; +} + +function VerifyFlowAlert({ currentStep }: VerifyFlowAlertProps) { + let message; + switch (currentStep) { + case 'personal_key': + case 'personal_key_confirm': + message = t('idv.messages.confirm'); + break; + + default: + return null; + } + + return ( + + {message} + + ); +} + +export default VerifyFlowAlert; diff --git a/app/javascript/packages/verify-flow/index.spec.tsx b/app/javascript/packages/verify-flow/verify-flow.spec.tsx similarity index 89% rename from app/javascript/packages/verify-flow/index.spec.tsx rename to app/javascript/packages/verify-flow/verify-flow.spec.tsx index c5252cdd08f..423112dadb1 100644 --- a/app/javascript/packages/verify-flow/index.spec.tsx +++ b/app/javascript/packages/verify-flow/verify-flow.spec.tsx @@ -2,7 +2,7 @@ import sinon from 'sinon'; import { render } from '@testing-library/react'; import * as analytics from '@18f/identity-analytics'; import userEvent from '@testing-library/user-event'; -import { VerifyFlow } from './index'; +import VerifyFlow from './verify-flow'; describe('VerifyFlow', () => { const sandbox = sinon.createSandbox(); @@ -23,7 +23,12 @@ describe('VerifyFlow', () => { , ); + // Personal key + expect(getByText('idv.messages.confirm')).to.be.ok(); await userEvent.click(getByText('forms.buttons.continue')); + + // Personal key confirm + expect(getByText('idv.messages.confirm')).to.be.ok(); await userEvent.type(getByLabelText('forms.personal_key.confirmation_label'), personalKey); await userEvent.keyboard('{Enter}'); diff --git a/app/javascript/packages/verify-flow/verify-flow.tsx b/app/javascript/packages/verify-flow/verify-flow.tsx index 54623ebdde7..dec7d4d2989 100644 --- a/app/javascript/packages/verify-flow/verify-flow.tsx +++ b/app/javascript/packages/verify-flow/verify-flow.tsx @@ -1,10 +1,9 @@ import { useEffect, useState } from 'react'; import { FormSteps } from '@18f/identity-form-steps'; -import { t } from '@18f/identity-i18n'; -import { Alert } from '@18f/identity-components'; import { trackEvent } from '@18f/identity-analytics'; -import VerifyFlowStepIndicator from './verify-flow-step-indicator'; import { STEPS } from './steps'; +import VerifyFlowStepIndicator from './verify-flow-step-indicator'; +import VerifyFlowAlert from './verify-flow-alert'; export interface VerifyFlowValues { personalKey?: string; @@ -60,7 +59,7 @@ const logStepVisited = (stepName: string) => const logStepSubmitted = (stepName: string) => trackEvent(`IdV: ${getEventStepName(stepName)} submitted`); -export function VerifyFlow({ +function VerifyFlow({ initialValues = {}, enabledStepNames, basePath, @@ -68,7 +67,6 @@ export function VerifyFlow({ onComplete, }: VerifyFlowProps) { const [currentStep, setCurrentStep] = useState(STEPS[0].name); - useEffect(() => { logStepVisited(currentStep); }, [currentStep]); @@ -81,9 +79,7 @@ export function VerifyFlow({ return ( <> - - {t('idv.messages.confirm')} - + ); } + +export default VerifyFlow; From c60b70295ce60327fb3d869f40f794c169f9522a Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 5 May 2022 15:36:24 -0400 Subject: [PATCH 2/3] Add specs --- .../verify-flow/verify-flow-alert.spec.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx new file mode 100644 index 00000000000..2e29e25af29 --- /dev/null +++ b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx @@ -0,0 +1,25 @@ +import { render } from '@testing-library/react'; +import VerifyFlowAlert from './verify-flow-alert'; + +describe('VerifyFlowAlert', () => { + context('step with a status message', () => { + [ + ['personal_key', 'idv.messages.confirm'], + ['personal_key_confirm', 'idv.messages.confirm'], + ].forEach(([step, expected]) => { + it('renders status message', () => { + const { getByRole } = render(); + + expect(getByRole('status').textContent).equal(expected); + }); + }); + }); + + context('step without a status message', () => { + it('renders nothing', () => { + const { container } = render(); + + expect(container.innerHTML).to.be.empty(); + }); + }); +}); From 86bc1d820e1a0994e4db340284638fd2ec3236c8 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 5 May 2022 15:37:18 -0400 Subject: [PATCH 3/3] Extract getStepMessage Avoid clunky switch assignment See: https://github.com/18F/identity-idp/pull/6311#discussion_r866194479 --- .../verify-flow/verify-flow-alert.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.tsx index 66eaaf3f364..29a8f670d8f 100644 --- a/app/javascript/packages/verify-flow/verify-flow-alert.tsx +++ b/app/javascript/packages/verify-flow/verify-flow-alert.tsx @@ -8,16 +8,21 @@ interface VerifyFlowAlertProps { currentStep: string; } -function VerifyFlowAlert({ currentStep }: VerifyFlowAlertProps) { - let message; - switch (currentStep) { - case 'personal_key': - case 'personal_key_confirm': - message = t('idv.messages.confirm'); - break; +/** + * Returns the status message to show for a given step, if applicable. + * + * @param stepName Step name. + */ +function getStepMessage(stepName: string): string | undefined { + if (stepName === 'personal_key' || stepName === 'personal_key_confirm') { + return t('idv.messages.confirm'); + } +} - default: - return null; +function VerifyFlowAlert({ currentStep }: VerifyFlowAlertProps) { + const message = getStepMessage(currentStep); + if (!message) { + return null; } return (