diff --git a/packages/functional-tests/pages/settings/layout.ts b/packages/functional-tests/pages/settings/layout.ts
index cf8c87b4eb..30b6e66f1e 100644
--- a/packages/functional-tests/pages/settings/layout.ts
+++ b/packages/functional-tests/pages/settings/layout.ts
@@ -11,7 +11,7 @@ export abstract class SettingsLayout extends BaseLayout {
}
get helpLink() {
- return this.page.getByTestId('header-sumo-link');
+ return this.page.getByRole('link', { name: 'Help' });
}
get bentoDropDownMenu() {
diff --git a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx
index cc652db6ca..cfce9c6598 100644
--- a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx
@@ -7,25 +7,25 @@ import { screen } from '@testing-library/react';
import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
import HeaderLockup from '.';
import { createMockSettingsIntegration } from '../mocks';
+import { userEvent } from '@testing-library/user-event';
+import GleanMetrics from '../../../lib/glean';
-// TODO: functional test for `data-testid="header-menu"` to be visible in
-// mobile & tablet but hidden at desktop
+jest.mock('../../../lib/glean', () => ({
+ __esModule: true,
+ default: {
+ accountPref: {
+ help: jest.fn(),
+ },
+ },
+}));
describe('HeaderLockup', () => {
it('renders as expected', () => {
renderWithLocalizationProvider(
);
- const headerHelp = screen.getByTestId('header-help');
const headerMenu = screen.getByTestId('header-menu');
- expect(screen.getByTestId('header-sumo-link')).toHaveAttribute(
- 'href',
- 'https://support.mozilla.org'
- );
- expect(headerHelp).toBeInTheDocument();
- expect(headerHelp).toHaveAttribute('title', 'Help');
-
expect(
screen.getByTestId('drop-down-bento-menu-toggle')
).toBeInTheDocument();
@@ -34,9 +34,21 @@ describe('HeaderLockup', () => {
expect(headerMenu).toBeInTheDocument();
expect(headerMenu).toHaveAttribute('title', 'Site navigation menu');
+ expect(screen.getByRole('link', { name: 'Help' })).toHaveAttribute(
+ 'href',
+ 'https://support.mozilla.org/products/mozilla-account'
+ );
expect(screen.getByTestId('back-to-top')).toHaveAttribute(
'title',
'Back to top'
);
});
+
+ it('emits Glean event on help link click', async () => {
+ renderWithLocalizationProvider(
+
+ );
+ await userEvent.click(screen.getByRole('link', { name: 'Help' }));
+ expect(GleanMetrics.accountPref.help).toHaveBeenCalled();
+ });
});
diff --git a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx
index 844d8193b1..a2bf6fbaed 100644
--- a/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx
@@ -14,6 +14,7 @@ import { ReactComponent as Menu } from './menu.svg';
import { ReactComponent as Close } from './close.svg';
import { SettingsIntegration } from '../interfaces';
import Sidebar from '../Sidebar';
+import GleanMetrics from '../../../lib/glean';
export const HeaderLockup = ({
integration,
@@ -27,6 +28,10 @@ export const HeaderLockup = ({
? l10n.getString('header-menu-open', null, 'Close menu')
: l10n.getString('header-menu-closed', null, 'Site navigation menu');
+ const handleHelpLinkClick = () => {
+ GleanMetrics.accountPref.help();
+ };
+
const left = (
<>