From 41cad92e15e9df8d8adf6ff7cb95767b5451f29d Mon Sep 17 00:00:00 2001 From: VincentHan12 Date: Thu, 5 Feb 2026 01:08:18 +0000 Subject: [PATCH 1/2] fix: language filter doesn't cause flicker --- .../HeaderAndLanguageFilter.spec.tsx | 20 +++++++++---------- .../HeaderAndLanguageFilter.tsx | 8 +------- .../LanguagesFilterPopper.tsx | 1 - 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx index 71123ba307f..027282a28d3 100644 --- a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx +++ b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx @@ -8,6 +8,7 @@ import { getLanguagesMock } from '../data' import { HeaderAndLanguageFilter } from '.' import '../../../../test/i18n' +import { setBeaconPageViewed } from '../../../libs/beaconHooks' jest.mock('@mui/material/useMediaQuery', () => ({ __esModule: true, @@ -19,6 +20,10 @@ jest.mock('next/router', () => ({ useRouter: jest.fn(() => ({ query: { tab: 'active' } })) })) +jest.mock('../../../libs/beaconHooks', () => ({ + setBeaconPageViewed: jest.fn() +})) + const mockedUseRouter = useRouter as jest.MockedFunction describe('HeaderAndLanguageFilter', () => { @@ -56,16 +61,11 @@ describe('HeaderAndLanguageFilter', () => { fireEvent.click(screen.getByRole('button', { name: 'French Français' })) await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2)) fireEvent.click(screen.getByTestId('PresentationLayer')) - await waitFor(() => expect(onChange).toHaveBeenCalledTimes(3)) - await waitFor(() => { - expect(push).toHaveBeenCalledWith( - { - query: { param: 'template-language' } - }, - undefined, - { shallow: true } - ) - }) + await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2)) + fireEvent.click( + screen.getAllByRole('heading', { name: 'All Languages' })[0] + ) + expect(setBeaconPageViewed).toHaveBeenCalledWith('template-language') }) it('should show loading', () => { diff --git a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx index 5e4acf0509b..2cf3af4ed10 100644 --- a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx +++ b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx @@ -223,13 +223,7 @@ export function HeaderAndLanguageFilter({ const localButtonProps: LocalButtonProps = { loading: loading || selectedLanguageIds == null, onClick: () => { - const param = 'template-language' - void router.push({ query: { ...router.query, param } }, undefined, { - shallow: true - }) - router.events.on('routeChangeComplete', () => { - setBeaconPageViewed(param) - }) + setBeaconPageViewed('template-language') setOpen(!open) } } diff --git a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/LanguagesFilterPopper/LanguagesFilterPopper.tsx b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/LanguagesFilterPopper/LanguagesFilterPopper.tsx index 2681a3e5aff..86779740eb7 100644 --- a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/LanguagesFilterPopper/LanguagesFilterPopper.tsx +++ b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/LanguagesFilterPopper/LanguagesFilterPopper.tsx @@ -60,7 +60,6 @@ export function LanguagesFilterPopper({ { - handleSubmit() setOpen(!open) }} sx={{ From e944c383e33d3642055ef1dbe24b8bb92c3ad3c0 Mon Sep 17 00:00:00 2001 From: VincentHan12 Date: Thu, 5 Feb 2026 02:11:38 +0000 Subject: [PATCH 2/2] fix: updated tests --- .../HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx | 2 +- .../ui/src/components/TemplateGallery/TemplateGallery.spec.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx index 027282a28d3..085efee8cc2 100644 --- a/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx +++ b/libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx @@ -3,12 +3,12 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react' import noop from 'lodash/noop' import { NextRouter, useRouter } from 'next/router' +import { setBeaconPageViewed } from '../../../libs/beaconHooks' import { getLanguagesMock } from '../data' import { HeaderAndLanguageFilter } from '.' import '../../../../test/i18n' -import { setBeaconPageViewed } from '../../../libs/beaconHooks' jest.mock('@mui/material/useMediaQuery', () => ({ __esModule: true, diff --git a/libs/journeys/ui/src/components/TemplateGallery/TemplateGallery.spec.tsx b/libs/journeys/ui/src/components/TemplateGallery/TemplateGallery.spec.tsx index b7890464388..4ac9767de1d 100644 --- a/libs/journeys/ui/src/components/TemplateGallery/TemplateGallery.spec.tsx +++ b/libs/journeys/ui/src/components/TemplateGallery/TemplateGallery.spec.tsx @@ -157,8 +157,7 @@ describe('TemplateGallery', () => { expect(push).toHaveBeenCalledWith( { query: { - languageIds: [], - param: 'template-language' + languageIds: ['496'] } }, undefined,