Add unit tests for embla base class in scripts

Author: webstackdev

.cache/pages.json

@@ -100,13 +100,30 @@
   {
     "tags": [
       "apis-and-gateways",
+      "argo-cd",
+      "aws",
+      "azure",
+      "backstage-idp",
       "build-and-deploy",
       "cloud-platforms",
+      "crossplane",
+      "docker",
+      "dotnet",
+      "go",
+      "grafana",
+      "helm",
+      "kubernetes",
       "observability-and-telemetry",
+      "openstack",
       "platform-engineering",
+      "prometheus",
+      "python",
       "reliability-and-testing",
+      "ruby",
       "system-modernization",
-      "systems-and-development"
+      "systems-and-development",
+      "terraform",
+      "typescript"
     ]
   }
 ]

src/components/scripts/embla/EmblaCarouselBase.ts

@@ -4,8 +4,8 @@
  * Encapsulates the shared behaviour that was previously duplicated across the
  * Carousel and Testimonials components:
  *
- * - Embla initialisation / teardown (with optional Autoplay plugin)
- * - Animation-lifecycle store integration (reduced-motion, visibility, user prefs)
+ * - Embla initialization / teardown (with optional Autoplay plugin)
+ * - Animation-lifecycle store integration (reduced-motion, visibility, user preferences)
  * - IntersectionObserver viewport gating (pause when off-screen)
  * - Focus-visible pause management
  * - Previous / Next navigation button wiring
@@ -51,7 +51,7 @@ export abstract class EmblaCarouselBase extends LitElement {
   protected abstract queryElements(): EmblaElementHandles
 
   /**
-   * Hook called after successful base initialisation.
+   * Hook called after successful base initialization.
    * Subclasses can wire up component-specific behaviour here
    * (keyboard handling, autoplay toggle buttons, status regions, etc.).
    */
@@ -125,12 +125,12 @@ export abstract class EmblaCarouselBase extends LitElement {
 
   // ────────────────────── Protected read-only accessors ──────────────────────
 
-  /** The live Embla API instance, or `null` before initialisation. */
+  /** The live Embla API instance, or `null` before initialization. */
   protected get emblaApi(): EmblaCarouselType | null {
     return this._emblaApi
   }
 
-  /** Whether the carousel was successfully initialised. */
+  /** Whether the carousel was successfully initialized. */
   protected get isInitialized(): boolean {
     return this._initialized
   }
@@ -145,7 +145,7 @@ export abstract class EmblaCarouselBase extends LitElement {
     return this._animationInstanceId
   }
 
-  /** The Embla viewport element, or `null` before initialisation. */
+  /** The Embla viewport element, or `null` before initialization. */
   protected get viewport(): HTMLElement | null {
     return this._viewport
   }
@@ -225,7 +225,7 @@ export abstract class EmblaCarouselBase extends LitElement {
     this.teardown()
   }
 
-  // ────────────────────── Initialisation ──────────────────────
+  // ────────────────────── initialization ──────────────────────
 
   private initialize(): void {
     if (this._initialized) return

src/components/scripts/embla/__fixtures__/EmblaBaseFixture.client.ts

@@ -0,0 +1,66 @@
+import { EmblaCarouselBase } from '../EmblaCarouselBase'
+import { defineCustomElement } from '@components/scripts/utils'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import type { EmblaCarouselConfig, EmblaElementHandles } from '../types'
+import {
+  queryEmblaDotsContainer,
+  queryEmblaNextButton,
+  queryEmblaPrevButton,
+  queryEmblaRoot,
+  queryEmblaSlides,
+  queryEmblaViewport,
+} from './selectors'
+
+export class EmblaBaseFixtureElement extends EmblaCarouselBase {
+  static registeredName = 'embla-base-fixture'
+
+  protected getConfig(): EmblaCarouselConfig {
+    return {
+      scriptName: 'EmblaBaseFixture',
+      logPrefix: 'embla-fixture',
+      animationId: 'embla-base-fixture',
+      emblaOptions: { loop: false },
+      autoplayOptions: {
+        delay: 3000,
+        stopOnInteraction: true,
+        stopOnMouseEnter: true,
+        playOnInit: false,
+      },
+    }
+  }
+
+  protected queryElements(): EmblaElementHandles {
+    const emblaRoot = queryEmblaRoot(this)
+    const viewport = queryEmblaViewport(this)
+    const dotsContainer = queryEmblaDotsContainer(this)
+    const prevBtn = queryEmblaPrevButton(this)
+    const nextBtn = queryEmblaNextButton(this)
+    const slides = queryEmblaSlides(this)
+
+    if (!emblaRoot || !viewport) {
+      throw new Error('Fixture markup missing embla root or viewport')
+    }
+
+    return {
+      emblaRoot,
+      viewport,
+      dotsContainer,
+      prevBtn,
+      nextBtn,
+      slideCount: slides.length,
+    }
+  }
+}
+
+export const registerWebComponent = async (
+  tagName = EmblaBaseFixtureElement.registeredName
+): Promise<void> => {
+  if (typeof window === 'undefined') return
+  defineCustomElement(tagName, EmblaBaseFixtureElement)
+}
+
+export const webComponentModule: WebComponentModule<EmblaBaseFixtureElement> = {
+  registeredName: EmblaBaseFixtureElement.registeredName,
+  componentCtor: EmblaBaseFixtureElement,
+  registerWebComponent,
+}

src/components/scripts/embla/__fixtures__/emblaCarouselBase.fixture.astro

@@ -0,0 +1,15 @@
+---
+---
+
+<embla-base-fixture>
+  <div data-embla-root>
+    <div data-embla-viewport>
+      <div data-embla-slide>Slide 1</div>
+      <div data-embla-slide>Slide 2</div>
+      <div data-embla-slide>Slide 3</div>
+    </div>
+  </div>
+  <div data-embla-dots></div>
+  <button data-embla-prev type="button">Prev</button>
+  <button data-embla-next type="button">Next</button>
+</embla-base-fixture>

src/components/scripts/embla/__fixtures__/selectors.ts

@@ -0,0 +1,43 @@
+import {
+  isButtonElement,
+  isDivElement,
+} from '@components/scripts/assertions/elements'
+import type { EmblaRootElement } from '../types'
+
+const SELECTORS = {
+  emblaRoot: '[data-embla-root]',
+  viewport: '[data-embla-viewport]',
+  dots: '[data-embla-dots]',
+  prevBtn: '[data-embla-prev]',
+  nextBtn: '[data-embla-next]',
+  slide: '[data-embla-slide]',
+} as const
+
+export const queryEmblaRoot = (scope: ParentNode): EmblaRootElement | null => {
+  const element = scope.querySelector(SELECTORS.emblaRoot)
+  return isDivElement(element) ? (element as EmblaRootElement) : null
+}
+
+export const queryEmblaViewport = (scope: ParentNode): HTMLDivElement | null => {
+  const element = scope.querySelector(SELECTORS.viewport)
+  return isDivElement(element) ? element : null
+}
+
+export const queryEmblaDotsContainer = (scope: ParentNode): HTMLDivElement | null => {
+  const element = scope.querySelector(SELECTORS.dots)
+  return isDivElement(element) ? element : null
+}
+
+export const queryEmblaPrevButton = (scope: ParentNode): HTMLButtonElement | null => {
+  const element = scope.querySelector(SELECTORS.prevBtn)
+  return isButtonElement(element) ? element : null
+}
+
+export const queryEmblaNextButton = (scope: ParentNode): HTMLButtonElement | null => {
+  const element = scope.querySelector(SELECTORS.nextBtn)
+  return isButtonElement(element) ? element : null
+}
+
+export const queryEmblaSlides = (scope: ParentNode): HTMLDivElement[] => {
+  return Array.from(scope.querySelectorAll(SELECTORS.slide)).filter(isDivElement)
+}