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

feat(metrics): add glean event for click on forgot password link
This commit is contained in:
Barry Chen 2023-11-17 13:26:55 -06:00 коммит произвёл GitHub
Родитель d85f095e07 294ece9b4e
Коммит 8f71a2696a
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
3 изменённых файлов: 39 добавлений и 2 удалений

Просмотреть файл

@ -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);
});
});
});

Просмотреть файл

@ -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>

Просмотреть файл

@ -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: {