Fix test case for banner

Author: webstackdev

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

@@ -1,5 +1,5 @@
 
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import { TestError } from '@test/errors'
 import ConsentBanner from '@components/Consent/Banner/index.astro'
@@ -17,6 +17,13 @@ import {
 } from '@components/Consent/Banner/client/selectors'
 import { ClientScriptError } from '@components/scripts/errors'
 
+vi.mock('@components/scripts/store', () => ({
+  allowAllConsentCookies: vi.fn(),
+  hideConsentBanner: vi.fn(),
+  initConsentCookies: vi.fn(() => true),
+  showConsentBanner: vi.fn(),
+}))
+
 type ConsentBannerModule = WebComponentModule<ConsentBannerElement>
 
 const CONSENT_READY_TIMEOUT_MS = 2_000

src/components/ThemePicker/client/index.ts

@@ -64,7 +64,7 @@ export class ThemePickerElement extends LitElement {
   private emblaPrevBtn: HTMLButtonElement | null = null
   private emblaNextBtn: HTMLButtonElement | null = null
   private emblaApi: EmblaCarouselType | null = null
-  private emblaEvents: AbortController | null = null
+  private emblaControlsBound = false
   private lastIsOpen: boolean | null = null
   private lastTheme: ThemeId | null = null
 
@@ -218,29 +218,30 @@ export class ThemePickerElement extends LitElement {
       emblaWithEvents.on('select', this.emblaUpdateHandler)
       emblaWithEvents.on('reInit', this.emblaUpdateHandler)
 
-      this.emblaEvents = new AbortController()
-      const { signal } = this.emblaEvents
+      if (!this.emblaControlsBound) {
+        if (this.emblaPrevBtn) {
+          addButtonEventListeners(this.emblaPrevBtn, (event) => {
+            if (event.cancelable && !event.defaultPrevented) event.preventDefault()
+            try {
+              this.emblaApi?.scrollPrev()
+            } catch (error) {
+              handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollPrev' })
+            }
+          }, this)
+        }
 
-      if (this.emblaPrevBtn) {
-        this.emblaPrevBtn.addEventListener('click', (event) => {
-          event.preventDefault()
-          try {
-            this.emblaApi?.scrollPrev()
-          } catch (error) {
-            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollPrev' })
-          }
-        }, { signal })
-      }
+        if (this.emblaNextBtn) {
+          addButtonEventListeners(this.emblaNextBtn, (event) => {
+            if (event.cancelable && !event.defaultPrevented) event.preventDefault()
+            try {
+              this.emblaApi?.scrollNext()
+            } catch (error) {
+              handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollNext' })
+            }
+          }, this)
+        }
 
-      if (this.emblaNextBtn) {
-        this.emblaNextBtn.addEventListener('click', (event) => {
-          event.preventDefault()
-          try {
-            this.emblaApi?.scrollNext()
-          } catch (error) {
-            handleScriptError(error, { scriptName: 'ThemePickerElement', operation: 'embla:scrollNext' })
-          }
-        }, { signal })
+        this.emblaControlsBound = true
       }
     } catch (error) {
       this.teardownEmbla()
@@ -249,11 +250,6 @@ export class ThemePickerElement extends LitElement {
   }
 
   private teardownEmbla(): void {
-    if (this.emblaEvents) {
-      this.emblaEvents.abort()
-      this.emblaEvents = null
-    }
-
     if (this.emblaApi) {
       this.emblaApi.destroy()
       this.emblaApi = null