Merge pull request #16087 from mozilla/FXA-8259-password-reset-click-glean

feat(metrics): add glean event for click on forgot password link

packages/fxa-settings/src/pages/Signin/index.test.tsx

@@ -3,10 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import Signin, { viewName } from '.';
 import { usePageViewEvent } from '../../lib/metrics';
+import GleanMetrics from '../../lib/glean';
 // import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
 // import { FluentBundle } from '@fluent/bundle';
 import { MOCK_EMAIL, MOCK_SERVICE } from './mocks';
@@ -22,6 +23,10 @@ jest.mock('../../lib/metrics', () => ({
     logViewEventOnce: jest.fn(),
   }),
 }));
+jest.mock('../../lib/glean', () => ({
+  __esModule: true,
+  default: { login: { forgotPassword: jest.fn() } },
+}));
 
 // TODO: Once https://mozilla-hub.atlassian.net/browse/FXA-6461 is resolved, we can
 // add the l10n tests back in. Right now, they can't handle embedded tags.
@@ -31,6 +36,11 @@ describe('Signin', () => {
   // beforeAll(async () => {
   //   bundle = await getFtlBundle('settings');
   // });
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('renders Signin page as expected with password required', () => {
     renderWithLocalizationProvider(
       <Signin
@@ -125,4 +135,20 @@ describe('Signin', () => {
     );
     expect(usePageViewEvent).toHaveBeenCalledWith(viewName, REACT_ENTRYPOINT);
   });
+
+  it('emits an event on forgot password link click', async () => {
+    renderWithLocalizationProvider(
+      <Signin
+        email={MOCK_EMAIL}
+        isPasswordNeeded={false}
+        serviceName={MOCK_SERVICE}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Forgot password?'));
+
+    await waitFor(() => {
+      expect(GleanMetrics.login.forgotPassword).toBeCalledTimes(1);
+    });
+  });
 });

packages/fxa-settings/src/pages/Signin/index.tsx

@@ -14,6 +14,7 @@ import { REACT_ENTRYPOINT } from '../../constants';
 import CardHeader from '../../components/CardHeader';
 import ThirdPartyAuth from '../../components/ThirdPartyAuth';
 import { BrandMessagingPortal } from '../../components/BrandMessaging';
+import GleanMetrics from '../../lib/glean';
 
 export type SigninProps = {
   email: string;
@@ -60,6 +61,11 @@ const Signin = ({
   // because it's possible for the access token to be invalidated when we display the avatar image.
   // if we get the notification of a change, we re-render the card.
 
+  const onForgotPasswordClick = () => {
+    GleanMetrics.login.forgotPassword();
+    return true;
+  };
+
   const onSubmit = useCallback(async () => {
     try {
       isPasswordNeeded
@@ -154,7 +160,11 @@ const Signin = ({
             </Link>
           </FtlMsg>
           <FtlMsg id="signin-forgot-password">
-            <Link to="/reset_password" className="text-sm link-blue">
+            <Link
+              to="/reset_password"
+              className="text-sm link-blue"
+              onClick={onForgotPasswordClick}
+            >
               Forgot password?
             </Link>
           </FtlMsg>

packages/fxa-shared/metrics/glean/web/index.ts

@@ -43,6 +43,7 @@ export const eventsMap = {
     submit: 'login_submit',
     success: 'login_submit_success',
     error: 'login_submit_frontend_error',
+    forgotPassword: 'login_forgot_pwd_submit',
   },
 
   loginConfirmation: {