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 (