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',
+ },
};