diff --git a/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.spec.tsx b/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.spec.tsx index 328146e8de9..820532b0c6a 100644 --- a/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.spec.tsx +++ b/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.spec.tsx @@ -1,16 +1,22 @@ +import { useLocalStorage } from '@qovery/shared/util-hooks' import { renderWithProviders, screen } from '@qovery/shared/util-tests' import * as useAnnouncementBannerModule from '../hooks/use-announcement-banner/use-announcement-banner' import { AnnouncementBanner } from './announcement-banner' jest.mock('../hooks/use-announcement-banner/use-announcement-banner') +jest.mock('@qovery/shared/util-hooks', () => ({ + useLocalStorage: jest.fn(), +})) describe('AnnouncementBanner', () => { const mockUseAnnouncementBanner = useAnnouncementBannerModule.useAnnouncementBanner as jest.MockedFunction< typeof useAnnouncementBannerModule.useAnnouncementBanner > + const mockSetDismissedMessage = jest.fn() beforeEach(() => { jest.clearAllMocks() + ;(useLocalStorage as jest.Mock).mockReturnValue([null, mockSetDismissedMessage]) }) it('should render nothing when banner data is null', () => { @@ -85,17 +91,30 @@ describe('AnnouncementBanner', () => { expect(screen.queryByRole('button')).not.toBeInTheDocument() }) - it('should hide banner when dismiss button is clicked', async () => { + it('should call setDismissedMessage with banner message when dismiss button is clicked', async () => { mockUseAnnouncementBanner.mockReturnValue({ message: 'Dismissible message', variant: 'warning', dismissible: true, }) - const { userEvent, container } = renderWithProviders() + const { userEvent } = renderWithProviders() + + await userEvent.click(screen.getByRole('button', { name: 'Dismiss' })) + + expect(mockSetDismissedMessage).toHaveBeenCalledWith('Dismissible message') + }) + + it('should not show banner when already dismissed in localStorage', () => { + const localStorageMock = useLocalStorage as jest.Mock + localStorageMock.mockReturnValue(['Already dismissed message', jest.fn()]) + mockUseAnnouncementBanner.mockReturnValue({ + message: 'Already dismissed message', + variant: 'info', + dismissible: true, + }) - const dismissButton = screen.getByRole('button', { name: 'Dismiss' }) - await userEvent.click(dismissButton) + const { container } = renderWithProviders() expect(container).toBeEmptyDOMElement() }) diff --git a/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.tsx b/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.tsx index da21db8fb4d..2daaedcec29 100644 --- a/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.tsx +++ b/libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react' import { Banner } from '@qovery/shared/ui' +import { useLocalStorage } from '@qovery/shared/util-hooks' import { type AnnouncementBannerPayload, useAnnouncementBanner, @@ -13,7 +13,9 @@ const VARIANT_TO_COLOR_MAP: Record('announcement_banner_dismissed', null) + + const isDismissed = Boolean(bannerData && dismissedMessage === bannerData.message) if (!bannerData || isDismissed) { return null @@ -31,7 +33,7 @@ export function AnnouncementBanner() { } const handleDismiss = () => { - setIsDismissed(true) + setDismissedMessage(bannerData.message) } return (