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 = ( <>