Refactor Consent/Banner component to extend LitElements

Author: webstackdev

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

@@ -60,20 +60,23 @@ const waitForBannerReady = async (element: ConsentBannerElement) => {
 
 type JsdomWindow = Window & typeof globalThis
 
+let container: AstroContainer
+
 const renderConsentBanner = async (
   assertion: (_context: {
     element: ConsentBannerElement
     window: JsdomWindow
   }) => Promise<void> | void
 ) => {
-  const container = await AstroContainer.create()
-
   await executeRender<ConsentBannerModule>({
     container,
     component: ConsentBanner,
     moduleSpecifier: '@components/Consent/Banner/client/index',
     selector: 'consent-banner',
-    waitForReady: waitForBannerReady,
+    waitForReady: async (element: ConsentBannerElement) => {
+      await waitForBannerReady(element)
+      await element.updateComplete
+    },
     assert: async ({ element, window }) => {
       if (!window) {
         throw new TestError('JSDOM window is not available for consent banner tests')
@@ -85,6 +88,7 @@ const renderConsentBanner = async (
 }
 
 beforeEach(async () => {
+  container = await AstroContainer.create()
   initConsentCookiesMock.mockReturnValue(true)
   showConsentBannerMock.mockClear()
   hideConsentBannerMock.mockClear()
@@ -193,4 +197,28 @@ describe('ConsentBannerElement', () => {
       }
     })
   })
+
+  it('records visibility before Astro view transitions', async () => {
+    await renderConsentBanner(({ window }) => {
+      const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+      expect(wrapper).not.toBeNull()
+      wrapper!.style.display = 'block'
+
+      window.document.dispatchEvent(new window.CustomEvent('astro:before-swap'))
+
+      expect(showConsentBannerMock).toHaveBeenCalled()
+    })
+  })
+
+  it('clears visibility when the banner is hidden before Astro view transitions', async () => {
+    await renderConsentBanner(({ window }) => {
+      const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+      expect(wrapper).not.toBeNull()
+      wrapper!.style.display = 'none'
+
+      window.document.dispatchEvent(new window.CustomEvent('astro:before-swap'))
+
+      expect(hideConsentBannerMock).toHaveBeenCalled()
+    })
+  })
 })

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

@@ -4,6 +4,7 @@
  * Uses Light DOM (no Shadow DOM) with Astro-rendered templates
  */
 
+import { LitElement } from 'lit'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import {
   addButtonEventListeners,
@@ -32,7 +33,9 @@ const COMPONENT_TAG_NAME = 'consent-banner' as const
 const COMPONENT_SCRIPT_NAME = 'ConsentBannerElement'
 export const CONSENT_BANNER_READY_EVENT = 'consent-banner:ready'
 
-export class ConsentBannerElement extends HTMLElement {
+export class ConsentBannerElement extends LitElement {
+  static registeredName = COMPONENT_TAG_NAME
+
   private wrapper!: HTMLDivElement
   private closeBtn!: HTMLButtonElement
   private allowBtn!: HTMLButtonElement
@@ -51,7 +54,12 @@ export class ConsentBannerElement extends HTMLElement {
     window.location.assign(url)
   }
 
-  connectedCallback(): void {
+  protected override createRenderRoot(): HTMLElement {
+    return this
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
     if (this.isInitialized || typeof document === 'undefined') {
       return
     }
@@ -76,7 +84,8 @@ export class ConsentBannerElement extends HTMLElement {
     }
   }
 
-  disconnectedCallback(): void {
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
     if (this.domReadyHandler) {
       document.removeEventListener('DOMContentLoaded', this.domReadyHandler)
       this.domReadyHandler = null
@@ -377,8 +386,10 @@ export const registerConsentBannerWebComponent = (tagName: string = COMPONENT_TA
   defineCustomElement(tagName, ConsentBannerElement)
 }
 
+export const registerWebComponent = registerConsentBannerWebComponent
+
 export const webComponentModule: WebComponentModule<ConsentBannerElement> = {
   registeredName: COMPONENT_TAG_NAME,
   componentCtor: ConsentBannerElement,
-  registerWebComponent: registerConsentBannerWebComponent,
+  registerWebComponent,
 }