-
Notifications
You must be signed in to change notification settings - Fork 166
LG 6201 audit/implement logs #6257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| import { useEffect } from 'react'; | ||
| import { FormSteps } from '@18f/identity-form-steps'; | ||
| import { StepIndicator, StepIndicatorStep, StepStatus } from '@18f/identity-step-indicator'; | ||
| import { t } from '@18f/identity-i18n'; | ||
| import { Alert } from '@18f/identity-components'; | ||
| import { trackEvent } from '@18f/identity-analytics'; | ||
| import { STEPS } from './steps'; | ||
|
|
||
| export interface VerifyFlowValues { | ||
|
|
@@ -19,7 +21,7 @@ interface VerifyFlowProps { | |
| /** | ||
| * The path to which the current step is appended to create the current step URL. | ||
| */ | ||
| basePath: string; | ||
| basePath?: string; | ||
|
|
||
| /** | ||
| * Application name, used in generating page titles for current step. | ||
|
|
@@ -33,6 +35,19 @@ interface VerifyFlowProps { | |
| } | ||
|
|
||
| export function VerifyFlow({ initialValues = {}, basePath, appName, onComplete }: VerifyFlowProps) { | ||
| function trackVisitedStepEvent(stepName) { | ||
| if (stepName === 'personal_key') { | ||
| trackEvent('IdV: personal key visited'); | ||
|
||
| } | ||
| if (stepName === 'personal_key_confirm') { | ||
| trackEvent('IdV: show personal key modal'); | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| trackVisitedStepEvent(STEPS[0].name); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <StepIndicator className="margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4"> | ||
|
|
@@ -51,6 +66,14 @@ export function VerifyFlow({ initialValues = {}, basePath, appName, onComplete } | |
| promptOnNavigate={false} | ||
| basePath={basePath} | ||
| titleFormat={`%{step} - ${appName}`} | ||
| onStepSubmit={(submittedStepName) => { | ||
| if (submittedStepName === 'personal_key_confirm') { | ||
| trackEvent('IdV: personal key submitted'); | ||
nprimak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| }} | ||
| onStepChange={(stepName) => { | ||
| trackVisitedStepEvent(stepName); | ||
| }} | ||
| onComplete={onComplete} | ||
| /> | ||
| </> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import sinon from 'sinon'; | ||
| import * as analytics from '@18f/identity-analytics'; | ||
| import { render } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import PersonalKeyStep from './personal-key-step'; | ||
|
|
||
| describe('PersonalKeyStep', () => { | ||
| const sandbox = sinon.createSandbox(); | ||
| const DEFAULT_PROPS = { | ||
| onChange() {}, | ||
| onError() {}, | ||
| errors: [], | ||
| toPreviousStep() {}, | ||
| registerField: () => () => {}, | ||
| unknownFieldErrors: [], | ||
| value: { personalKey: '' }, | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| sandbox.spy(analytics, 'trackEvent'); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| sandbox.restore(); | ||
| }); | ||
|
|
||
| it('calls trackEvent when user clicks on "Download" button', async () => { | ||
| const { getByText } = render(<PersonalKeyStep {...DEFAULT_PROPS} />); | ||
|
|
||
| const button = getByText('forms.backup_code.download'); | ||
| button.addEventListener('click', (event) => event.preventDefault()); | ||
| await userEvent.click(button); | ||
| expect(analytics.trackEvent).to.have.been.calledWith('IdV: download personal key'); | ||
| }); | ||
|
|
||
| it('calls trackEvent when user clicks on "Clipboard" button', async () => { | ||
| const { getByText } = render(<PersonalKeyStep {...DEFAULT_PROPS} />); | ||
|
|
||
| await userEvent.click(getByText('components.clipboard_button.label')); | ||
| expect(analytics.trackEvent).to.have.been.calledWith('IdV: copy personal key'); | ||
| }); | ||
|
|
||
| it('calls trackEvent when user clicks on "Print" button', async () => { | ||
| window.print = () => {}; | ||
|
|
||
| const { getByText } = render(<PersonalKeyStep {...DEFAULT_PROPS} />); | ||
|
|
||
| await userEvent.click(getByText('components.print_button.label')); | ||
| expect(analytics.trackEvent).to.have.been.calledWith('IdV: print personal key'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For some reason removing the
basePathwas the only thing I could figure out to do to finally get this test to pass (it would get stuck on thepersonal_keystep and fail to get the continue button element, so it was unable proceed to the next step) . Of course once I removedbasePathI got atypecheckerror so I had to update the type definition as well.