Merge pull request #15969 from mozilla/FXA-8493-password-reset-view-g…

…lean

feat(metrics): add view and submit events for password reset

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(<ResetPasswordWithWebIntegration />);
     // testAllL10n(screen, bundle);
@@ -112,6 +124,7 @@ describe('PageResetPassword', () => {
     render(<ResetPasswordWithWebIntegration />);
     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 () => {

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<ResetPasswordFormData>({
       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]);

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