Update Consent Banner component tests to new test pattern, refactor to use consent store instead of cookies for managing state

Author: webstackdev

src/components/Consent/Banner/client/__tests__/banner.fixture.astro

@@ -0,0 +1,5 @@
+---
+import ConsentBanner from '@components/Consent/Banner/index.astro'
+---
+
+<ConsentBanner />

src/components/Consent/Banner/client/__tests__/index.spec.ts

@@ -0,0 +1,157 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import BannerFixture from '@components/Consent/Banner/client/__tests__/banner.fixture.astro'
+import type { ConsentBannerElement } from '@components/Consent/Banner/client'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import {
+  executeRender,
+  loadWebComponentModule,
+  withJsdomEnvironment,
+} from '@test/unit/helpers/litRuntime'
+
+vi.mock('@components/scripts/store', () => {
+  const showConsentBanner = vi.fn()
+  const hideConsentBanner = vi.fn()
+  const initConsentCookies = vi.fn(() => true)
+  const allowAllConsentCookies = vi.fn()
+
+  return {
+    showConsentBanner,
+    hideConsentBanner,
+    initConsentCookies,
+    allowAllConsentCookies,
+  }
+})
+
+vi.mock('@components/Consent/Preferences/client', () => ({
+  showConsentCustomizeModal: vi.fn(),
+}))
+
+import * as consentStore from '@components/scripts/store'
+
+const showConsentBannerMock = vi.mocked(consentStore.showConsentBanner)
+const hideConsentBannerMock = vi.mocked(consentStore.hideConsentBanner)
+const initConsentCookiesMock = vi.mocked(consentStore.initConsentCookies)
+const allowAllConsentCookiesMock = vi.mocked(consentStore.allowAllConsentCookies)
+
+type ConsentBannerModule = WebComponentModule<ConsentBannerElement>
+
+const CONSENT_READY_TIMEOUT_MS = 2_000
+const BANNER_READY_EVENT = 'consent-banner:ready'
+
+const waitForBannerReady = async (element: ConsentBannerElement) => {
+  if (element.isInitialized) {
+    return
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      element.removeEventListener(BANNER_READY_EVENT, onReady)
+      reject(new Error('Consent banner never finished initializing'))
+    }, CONSENT_READY_TIMEOUT_MS)
+
+    function onReady() {
+      clearTimeout(timeoutId)
+      resolve()
+    }
+
+    element.addEventListener(BANNER_READY_EVENT, onReady, { once: true })
+  })
+}
+
+type JsdomWindow = Window & typeof globalThis
+
+const renderConsentBanner = async (
+  assertion: (_context: { element: ConsentBannerElement; window: JsdomWindow }) => Promise<void> | void,
+) => {
+  const container = await AstroContainer.create()
+
+  await executeRender<ConsentBannerModule>({
+    container,
+    component: BannerFixture,
+    moduleSpecifier: '@components/Consent/Banner/client/index',
+    selector: 'consent-banner',
+    waitForReady: waitForBannerReady,
+    assert: async ({ element, window }) => {
+      if (!window) {
+        throw new Error('JSDOM window is not available for consent banner tests')
+      }
+
+      await assertion({ element, window: window as JsdomWindow })
+    },
+  })
+}
+
+beforeEach(async () => {
+  initConsentCookiesMock.mockReturnValue(true)
+  showConsentBannerMock.mockClear()
+  hideConsentBannerMock.mockClear()
+  initConsentCookiesMock.mockClear()
+  allowAllConsentCookiesMock.mockClear()
+
+  await withJsdomEnvironment(async ({ window }) => {
+    window.sessionStorage.clear()
+    window.localStorage.clear()
+
+    const module = await loadWebComponentModule<ConsentBannerModule>(
+      '@components/Consent/Banner/client/index',
+    )
+
+    const bannerCtor = module.componentCtor as typeof ConsentBannerElement
+    // Reset the static visibility flag so each test starts from a clean slate
+    ;(bannerCtor as unknown as { isModalCurrentlyVisible: boolean }).isModalCurrentlyVisible = false
+  })
+})
+
+describe('ConsentBannerElement', () => {
+  it('shows the modal when consent cookies are uninitialized', async () => {
+    initConsentCookiesMock.mockReturnValue(true)
+
+    await renderConsentBanner(({ window }) => {
+      const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+      expect(wrapper).not.toBeNull()
+      expect(wrapper!.style.display).toBe('block')
+      expect(showConsentBannerMock).toHaveBeenCalled()
+      expect(window.sessionStorage.getItem('consent-modal-visible')).toBe('true')
+      expect(window.sessionStorage.getItem('consent-modal-shown')).toBe('true')
+    })
+  })
+
+  it('skips rendering the modal when consent cookies already exist', async () => {
+    initConsentCookiesMock.mockReturnValue(false)
+
+    await renderConsentBanner(({ window }) => {
+      const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+      expect(wrapper).not.toBeNull()
+      expect(wrapper!.style.display).toBe('none')
+      expect(showConsentBannerMock).not.toHaveBeenCalled()
+    })
+  })
+
+  it('hides the banner when the close button is clicked', async () => {
+    await renderConsentBanner(({ window }) => {
+      const closeBtn = window.document.querySelector('.consent-modal__close-btn') as HTMLButtonElement | null
+      expect(closeBtn).not.toBeNull()
+
+      closeBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
+
+      expect(hideConsentBannerMock).toHaveBeenCalled()
+      const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+      expect(wrapper!.style.display).toBe('none')
+    })
+  })
+
+  it('grants all consent when Allow All is triggered', async () => {
+    await renderConsentBanner(({ window }) => {
+      const allowBtn = window.document.querySelector('.consent-modal__btn-allow') as HTMLButtonElement | null
+      expect(allowBtn).not.toBeNull()
+
+      allowBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
+
+      expect(allowAllConsentCookiesMock).toHaveBeenCalled()
+      expect(hideConsentBannerMock).toHaveBeenCalled()
+    })
+  })
+})

src/components/Consent/Banner/client/__tests__/selectors.spec.ts

@@ -1,8 +1,14 @@
 // @vitest-environment node
-import { beforeEach, afterEach, describe, expect, it } from 'vitest'
-import { Window } from 'happy-dom'
+
+import { beforeEach, describe, expect, it } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
-import ConsentBanner from '@components/Consent/Banner/index.astro'
+import BannerFixture from '@components/Consent/Banner/client/__tests__/banner.fixture.astro'
+import type { ConsentBannerElement } from '@components/Consent/Banner/client'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import {
+  executeRender,
+  withJsdomEnvironment,
+} from '@test/unit/helpers/litRuntime'
 import {
   getConsentWrapper,
   getConsentCloseBtn,
@@ -11,69 +17,99 @@ import {
 } from '@components/Consent/Banner/client/selectors'
 import { ClientScriptError } from '@components/scripts/errors'
 
-const attachDom = (html: string): Window => {
-  const windowInstance = new Window()
-  windowInstance.document.body.innerHTML = html
+type ConsentBannerModule = WebComponentModule<ConsentBannerElement>
 
-  globalThis.window = windowInstance as unknown as typeof globalThis.window
-  globalThis.document = windowInstance.document as unknown as Document
-  globalThis.Node = windowInstance.Node as unknown as typeof globalThis.Node
+const CONSENT_READY_TIMEOUT_MS = 2_000
+const BANNER_READY_EVENT = 'consent-banner:ready'
 
-  return windowInstance
-}
+const waitForBannerReady = async (element: ConsentBannerElement) => {
+  if (element.isInitialized) {
+    return
+  }
 
-describe('Consent Banner Selectors', () => {
-  let container: AstroContainer
-  let windowInstance: Window
+  await new Promise<void>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      element.removeEventListener(BANNER_READY_EVENT, onReady)
+      reject(new Error('Consent banner never finished initializing'))
+    }, CONSENT_READY_TIMEOUT_MS)
 
-  beforeEach(async () => {
-    container = await AstroContainer.create()
-    const markup = await container.renderToString(ConsentBanner)
-    windowInstance = attachDom(markup)
+    function onReady() {
+      clearTimeout(timeoutId)
+      resolve()
+    }
+
+    element.addEventListener(BANNER_READY_EVENT, onReady, { once: true })
   })
+}
+
+const renderConsentBanner = async (
+  assertion: () => Promise<void> | void,
+) => {
+  const container = await AstroContainer.create()
+
+  await executeRender<ConsentBannerModule>({
+    container,
+    component: BannerFixture,
+    moduleSpecifier: '@components/Consent/Banner/client/index',
+    selector: 'consent-banner',
+    waitForReady: waitForBannerReady,
+    assert: async () => assertion(),
+  })
+}
 
-  afterEach(() => {
-    windowInstance.happyDOM?.cancelAsync?.()
-    delete (globalThis as { document?: Document }).document
-    delete (globalThis as { window?: typeof globalThis.window }).window
-    delete (globalThis as { Node?: typeof globalThis.Node }).Node
+describe('Consent Banner Selectors', () => {
+  beforeEach(async () => {
+    await withJsdomEnvironment(({ window }) => {
+      window.sessionStorage.clear()
+      window.localStorage.clear()
+    })
   })
 
-  it('returns consent modal wrapper with expected attributes', () => {
-    const wrapper = getConsentWrapper()
+  it('returns consent modal wrapper with expected attributes', async () => {
+    await renderConsentBanner(() => {
+      const wrapper = getConsentWrapper()
 
-    expect(wrapper.id).toBe('consent-modal-id')
-    expect(wrapper.getAttribute('role')).toBe('dialog')
-    expect(wrapper.getAttribute('aria-label')).toBe('Cookie consent dialog')
+      expect(wrapper.id).toBe('consent-modal-id')
+      expect(wrapper.getAttribute('role')).toBe('dialog')
+      expect(wrapper.getAttribute('aria-label')).toBe('Cookie consent dialog')
+    })
   })
 
-  it('locates the close button', () => {
-    const closeBtn = getConsentCloseBtn()
+  it('locates the close button', async () => {
+    await renderConsentBanner(() => {
+      const closeBtn = getConsentCloseBtn()
 
-    expect(closeBtn).toBeTruthy()
-    expect(closeBtn.classList.contains('consent-modal__close-btn')).toBe(true)
-    expect(closeBtn.getAttribute('aria-label')).toMatch(/close cookie consent dialog/i)
+      expect(closeBtn).toBeTruthy()
+      expect(closeBtn.classList.contains('consent-modal__close-btn')).toBe(true)
+      expect(closeBtn.getAttribute('aria-label')).toMatch(/close cookie consent dialog/i)
+    })
   })
 
-  it('locates the allow-all button', () => {
-    const allowBtn = getConsentAllowBtn()
+  it('locates the allow-all button', async () => {
+    await renderConsentBanner(() => {
+      const allowBtn = getConsentAllowBtn()
 
-    expect(allowBtn).toBeTruthy()
-    expect(allowBtn.classList.contains('consent-modal__btn-allow')).toBe(true)
-    expect(allowBtn.textContent?.trim()).toBe('Allow All')
+      expect(allowBtn).toBeTruthy()
+      expect(allowBtn.classList.contains('consent-modal__btn-allow')).toBe(true)
+      expect(allowBtn.textContent?.trim()).toBe('Allow All')
+    })
   })
 
-  it('locates the customize button', () => {
-    const customizeBtn = getConsentCustomizeBtn()
+  it('locates the customize button', async () => {
+    await renderConsentBanner(() => {
+      const customizeBtn = getConsentCustomizeBtn()
 
-    expect(customizeBtn).toBeTruthy()
-    expect(customizeBtn.classList.contains('consent-modal__btn-customize')).toBe(true)
-    expect(customizeBtn.textContent?.trim()).toBe('Customize')
+      expect(customizeBtn).toBeTruthy()
+      expect(customizeBtn.classList.contains('consent-modal__btn-customize')).toBe(true)
+      expect(customizeBtn.textContent?.trim()).toBe('Customize')
+    })
   })
 
-  it('throws a ClientScriptError when wrapper is missing', () => {
-    document.getElementById('consent-modal-id')?.remove()
+  it('throws a ClientScriptError when wrapper is missing', async () => {
+    await renderConsentBanner(() => {
+      document.getElementById('consent-modal-id')?.remove()
 
-    expect(() => getConsentWrapper()).toThrowError(ClientScriptError)
+      expect(() => getConsentWrapper()).toThrowError(ClientScriptError)
+    })
   })
 })