diff --git a/packages/fxa-settings/src/pages/ResetPassword/index.test.tsx b/packages/fxa-settings/src/pages/ResetPassword/index.test.tsx index ab5cc0d9bd8..2993eacbc44 100644 --- a/packages/fxa-settings/src/pages/ResetPassword/index.test.tsx +++ b/packages/fxa-settings/src/pages/ResetPassword/index.test.tsx @@ -7,6 +7,8 @@ import { act, fireEvent, screen, waitFor } from '@testing-library/react'; // import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils'; // import { FluentBundle } from '@fluent/bundle'; +import GleanMetrics from '../../lib/glean'; + import { usePageViewEvent } from '../../lib/metrics'; import ResetPassword, { viewName } from '.'; import { REACT_ENTRYPOINT } from '../../constants'; @@ -25,7 +27,7 @@ import { createMockResetPasswordOAuthIntegration, createMockResetPasswordWebIntegration, } from './mocks'; -import { MOCK_REDIRECT_URI, MOCK_SERVICE } from '../mocks'; +import { MOCK_SERVICE } from '../mocks'; const mockLogViewEvent = jest.fn(); const mockLogPageViewEvent = jest.fn(); @@ -45,6 +47,11 @@ jest.mock('@reach/router', () => ({ useNavigate: () => mockNavigate, })); +jest.mock('../../lib/glean', () => ({ + __esModule: true, + default: { resetPassword: { view: jest.fn(), submit: jest.fn() } }, +})); + const route = '/reset_password'; const render = (ui: any, account?: Account) => { const history = createHistoryWithQuery(route); @@ -73,6 +80,11 @@ describe('PageResetPassword', () => { // bundle = await getFtlBundle('settings'); // }); + beforeEach(() => { + (GleanMetrics.resetPassword.view as jest.Mock).mockClear(); + (GleanMetrics.resetPassword.submit as jest.Mock).mockClear(); + }); + it('renders as expected', async () => { render(); // testAllL10n(screen, bundle); @@ -112,6 +124,7 @@ describe('PageResetPassword', () => { render(); await screen.findByText('Reset password'); expect(usePageViewEvent).toHaveBeenCalledWith(viewName, REACT_ENTRYPOINT); + expect(GleanMetrics.resetPassword.view).toHaveBeenCalledTimes(1); }); it('submit success with OAuth integration', async () => { @@ -139,6 +152,8 @@ describe('PageResetPassword', () => { fireEvent.click(await screen.findByText('Begin reset')); }); + expect(GleanMetrics.resetPassword.submit).toHaveBeenCalledTimes(1); + expect(account.resetPassword).toHaveBeenCalled(); expect(account.resetPassword).toHaveBeenCalledWith( @@ -277,6 +292,8 @@ describe('PageResetPassword', () => { fireEvent.click(screen.getByRole('button', { name: 'Begin reset' })); await screen.findByText('Unknown account'); + + expect(GleanMetrics.resetPassword.view).toHaveBeenCalledTimes(1); }); it('displays an error when rate limiting kicks in', async () => { @@ -313,6 +330,8 @@ describe('PageResetPassword', () => { await screen.findByText( 'You’ve tried too many times. Please try again in 15 minutes.' ); + + expect(GleanMetrics.resetPassword.view).toHaveBeenCalledTimes(1); }); it('handles unexpected errors on submit', async () => { diff --git a/packages/fxa-settings/src/pages/ResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/index.tsx index 6bcbdff2f88..8daceada5e1 100644 --- a/packages/fxa-settings/src/pages/ResetPassword/index.tsx +++ b/packages/fxa-settings/src/pages/ResetPassword/index.tsx @@ -28,6 +28,7 @@ import { setOriginalTabMarker } from '../../lib/storage-utils'; import { ResetPasswordFormData, ResetPasswordProps } from './interfaces'; import { ConfirmResetPasswordLocationState } from './ConfirmResetPassword/interfaces'; import { BrandMessagingPortal } from '../../components/BrandMessaging'; +import GleanMetrics from '../../lib/glean'; export const viewName = 'reset-password'; @@ -56,6 +57,10 @@ const ResetPassword = ({ })(); }, [integration]); + useEffect(() => { + GleanMetrics.resetPassword.view(); + }, []); + const { control, getValues, handleSubmit, register } = useForm({ mode: 'onTouched', @@ -143,6 +148,7 @@ const ResetPassword = ({ ftlMsgResolver.getMsg('auth-error-1011', 'Valid email required') ); } else { + GleanMetrics.resetPassword.submit(); submitEmail(sanitizedEmail); } }, [ftlMsgResolver, getValues, submitEmail]); diff --git a/packages/fxa-shared/metrics/glean/web/index.ts b/packages/fxa-shared/metrics/glean/web/index.ts index 6c517c192c6..c1405eaafc8 100644 --- a/packages/fxa-shared/metrics/glean/web/index.ts +++ b/packages/fxa-shared/metrics/glean/web/index.ts @@ -54,4 +54,9 @@ export const eventsMap = { submit: 'login_totp_code_submit', success: 'login_totp_code_success_view', }, + + resetPassword: { + view: 'password_reset_view', + submit: 'password_reset_submit', + }, };