Fix broken test cases after refactor to lit and changing hero terminal text animation

Author: webstackdev

_TODO.md

@@ -280,8 +280,6 @@ A bunch of our web components extend directly from HTMLElement instead of follow
 - Consent/Checkbox
 - Consent/Preferences
 
-And the embla components: Carousel and Testimonials
-
 The WebComponentModule type in this file is used throughout component scripts:
 
 `src/components/scripts/@types/webComponentModule.ts`
@@ -292,84 +290,3 @@ There are testing fixtures that might be targeting HTMLElement instead of LitEle
 line 113 in `test/eslint/__tests__/enforce-centralized-events-rule.spec.ts`
 
 interface `ElementWithTestProperties` in `test/e2e/assertions/index.ts`
-
-/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/components/Carousel/client/index.ts
-  70:5  error  Use `keyup with addButtonEventListeners or addWrapperEventListeners` from `elementListeners` for keyboard events (use keyup instead of keydown for better accessibility) instead of direct addEventListener. This ensures consistent accessibility support (isComposing check, repeat prevention, Enter/Escape key handling)  custom-rules/enforce-centralized-events
-
-✖ 1 problem (1 error, 0 warnings)
-
-
-⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
-
- FAIL  src/components/Testimonials/client/__tests__/index.spec.ts > Testimonials component > registers the web component and generates pagination dots
-AssertionError: expected null to be 'testimonials-3-viewport' // Object.is equality
-
-- Expected:
-"testimonials-3-viewport"
-
-+ Received:
-null
-
- ❯ src/components/Testimonials/client/__tests__/index.spec.ts:198:51
-    196|
-    197|       dots.forEach(dot => {
-    198|         expect(dot.getAttribute('aria-controls')).toBe(viewportId)
-       |                                                   ^
-    199|       })
-    200|       expect(prevBtn?.getAttribute('aria-controls')).toBe(viewportId)
- ❯ src/components/Testimonials/client/__tests__/index.spec.ts:197:12
- ❯ assert src/components/Testimonials/client/__tests__/index.spec.ts:114:13
- ❯ assert test/unit/helpers/litRuntime.ts:308:10
- ❯ test/unit/helpers/litRuntime.ts:246:9
- ❯ withJsdomEnvironment test/unit/helpers/litRuntime.ts:147:10
- ❯ renderInJsdom test/unit/helpers/litRuntime.ts:218:2
- ❯ Module.executeRender test/unit/helpers/litRuntime.ts:320:2
-
-⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯
-
- FAIL  src/components/Home/Hero/client/__tests__/index.spec.ts > HomeHeroElement (Lit) > types the ready prompt one character every 500ms and stops when complete
-AssertionError: expected '' to be 'r' // Object.is equality
-
-- Expected
-+ Received
-
-- r
-
- ❯ src/components/Home/Hero/client/__tests__/index.spec.ts:57:38
-     55|
-     56|       vi.advanceTimersByTime(STEP_MS)
-     57|       expect(readyText?.textContent).toBe('r')
-       |                                      ^
-     58|
-     59|       vi.advanceTimersByTime(STEP_MS)
- ❯ withJsdomEnvironment test/unit/helpers/litRuntime.ts:147:10
- ❯ src/components/Home/Hero/client/__tests__/index.spec.ts:39:5
-
-⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯
-
- FAIL  src/components/Home/Hero/client/__tests__/index.spec.ts > HomeHeroElement (Lit) > skips animation and shows final text when reduced motion is preferred
-AssertionError: expected '' to be 'heck yes, let\'s talk...' // Object.is equality
-
-- Expected
-+ Received
-
-- heck yes, let's talk...
-
- ❯ src/components/Home/Hero/client/__tests__/index.spec.ts:90:38
-     88|       const readyText = window.document.querySelector<HTMLElement>('[data-hero-ready-text]')
-     89|       expect(readyText).toBeTruthy()
-     90|       expect(readyText?.textContent).toBe(READY_TEXT)
-       |                                      ^
-     91|
-     92|       vi.advanceTimersByTime(STEP_MS * READY_TEXT.length)
- ❯ withJsdomEnvironment test/unit/helpers/litRuntime.ts:147:10
- ❯ src/components/Home/Hero/client/__tests__/index.spec.ts:75:5
-
-
-02:58:50 [ERROR] [vite] ✗ Build failed in 4.72s
-[@mdx-js/rollup] Cannot assign to read only property 'name' of object 'BuildError: Mermaid couldn't graph this diagram.'
-file: /home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/content/articles/consumer-driven-contract-testing-pact-internal-apis/index.mdx
-  Stack trace:
-    at Object.transform (file:///home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/node_modules/@astrojs/mdx/dist/vite-plugin-mdx.js:60:18)
-    at process.processImmediate (node:internal/timers:473:9)
-    at async ModuleLoader.addModuleSource (file:///home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/node_modules/rollup/dist/es/shared/node-entry.js:21363:36)

src/components/Carousel/client/__tests__/index.spec.ts

@@ -201,6 +201,25 @@ describe('Carousel component (server output)', () => {
     )
   })
 
+  it('assigns aria-controls to pagination dots and navigation buttons', async () => {
+    await renderCarousel(({ root }) => {
+      const viewport = root.querySelector('.embla__viewport')
+      const viewportId = viewport?.getAttribute('id')
+      const dots = root.querySelectorAll('.embla__dot')
+      const prevBtn = root.querySelector('.embla__button--prev')
+      const nextBtn = root.querySelector('.embla__button--next')
+
+      expect(viewportId).toMatch(/^carousel-\d+-viewport$/)
+      expect(dots.length).toBeGreaterThan(0)
+
+      dots.forEach(dot => {
+        expect(dot.getAttribute('aria-controls')).toBe(viewportId)
+      })
+      expect(prevBtn?.getAttribute('aria-controls')).toBe(viewportId)
+      expect(nextBtn?.getAttribute('aria-controls')).toBe(viewportId)
+    })
+  })
+
   it('excludes the current slug from rendered cards', async () => {
     await renderCarousel(
       ({ root }) => {
@@ -349,8 +368,8 @@ describe('Carousel component (server output)', () => {
       const keyboardEventCtor = root.ownerDocument.defaultView?.KeyboardEvent
       expect(keyboardEventCtor).toBeDefined()
 
-      root.dispatchEvent(new keyboardEventCtor!('keydown', { key: 'ArrowLeft', bubbles: true }))
-      root.dispatchEvent(new keyboardEventCtor!('keydown', { key: 'ArrowRight', bubbles: true }))
+      root.dispatchEvent(new keyboardEventCtor!('keyup', { key: 'ArrowLeft', bubbles: true }))
+      root.dispatchEvent(new keyboardEventCtor!('keyup', { key: 'ArrowRight', bubbles: true }))
 
       expect(emblaApi?.scrollPrev).toHaveBeenCalledTimes(1)
       expect(emblaApi?.scrollNext).toHaveBeenCalledTimes(1)

src/components/Carousel/client/index.ts

@@ -1,4 +1,5 @@
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { addWrapperEventListeners } from '@components/scripts/elementListeners'
 import { defineCustomElement } from '@components/scripts/utils'
 import { createE2ELogger, EmblaCarouselBase } from '@components/scripts/embla'
 import type { EmblaCarouselConfig, EmblaElementHandles } from '@components/scripts/embla'
@@ -19,7 +20,7 @@ const logForE2E = createE2ELogger('carousel')
 
 export class CarouselElement extends EmblaCarouselBase {
   private statusRegion: HTMLElement | null = null
-  private readonly keydownHandler = (event: KeyboardEvent) => this.handleKeydown(event)
+  private readonly keyupHandler = (event: Event) => this.handleKeyup(event)
 
   // ────────────────────── Base class abstract implementations ──────────────────────
 
@@ -67,22 +68,27 @@ export class CarouselElement extends EmblaCarouselBase {
   protected override onInitialized(): void {
     this.statusRegion = queryCarouselStatusRegion(this)
     this.setupStatusRegion()
-    this.addEventListener('keydown', this.keydownHandler)
-  }
-
-  protected override onTeardown(): void {
-    this.removeEventListener('keydown', this.keydownHandler)
+    if (!this.dataset['carouselKeyListener']) {
+      addWrapperEventListeners(this, this.keyupHandler, this, {
+        allowedKeys: ['ArrowLeft', 'ArrowRight'],
+      })
+      this.dataset['carouselKeyListener'] = 'true'
+    }
   }
 
-  private handleKeydown(event: KeyboardEvent): void {
+  private handleKeyup(event: Event): void {
     if (!this.emblaApi) return
-    if (event.defaultPrevented) return
-    if (event.metaKey || event.ctrlKey || event.altKey) return
+    if (!(typeof (event as KeyboardEvent).key === 'string')) return
+
+    const keyboardEvent = event as KeyboardEvent
+
+    if (keyboardEvent.defaultPrevented) return
+    if (keyboardEvent.metaKey || keyboardEvent.ctrlKey || keyboardEvent.altKey) return
 
-    const key = event.key
+    const key = keyboardEvent.key
     if (key !== 'ArrowLeft' && key !== 'ArrowRight') return
 
-    const target = event.target
+    const target = keyboardEvent.target
     if (target instanceof HTMLElement) {
       const tag = target.tagName.toLowerCase()
       if (tag === 'input' || tag === 'textarea' || tag === 'select' || target.isContentEditable)
@@ -95,9 +101,9 @@ export class CarouselElement extends EmblaCarouselBase {
       } else {
         this.emblaApi.scrollNext()
       }
-      event.preventDefault()
+      keyboardEvent.preventDefault()
     } catch (error) {
-      handleScriptError(error, { scriptName: SCRIPT_NAME, operation: 'handleKeydown' })
+      handleScriptError(error, { scriptName: SCRIPT_NAME, operation: 'handleKeyup' })
     }
   }
 

src/components/Home/Hero/client/__tests__/index.spec.ts

@@ -5,11 +5,16 @@ import {
   __resetAnimationLifecycleForTests,
   clearAnimationPreference,
   getAnimationPreference,
+  initAnimationLifecycle,
 } from '@components/scripts/store'
 
-import { READY_TEXT } from '../index'
 const STEP_MS = 500
 
+const syncWindowTimers = (window: Window): void => {
+  window.setTimeout = globalThis.setTimeout.bind(globalThis) as typeof window.setTimeout
+  window.clearTimeout = globalThis.clearTimeout.bind(globalThis) as typeof window.clearTimeout
+}
+
 describe('HomeHeroElement (Lit)', () => {
   let container: AstroContainer
 
@@ -43,27 +48,36 @@ describe('HomeHeroElement (Lit)', () => {
           addEventListener: () => undefined,
           removeEventListener: () => undefined,
         }) as unknown as MediaQueryList) as unknown as typeof window.matchMedia
+      syncWindowTimers(window)
 
-      const { registerHomeHeroWebComponent } = await import('@components/Home/Hero/client')
+      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } = await import(
+        '@components/Home/Hero/client'
+      )
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()
 
+      const readyTextLength = readyTextValue.length
+
       const readyText = window.document.querySelector<HTMLElement>('[data-hero-ready-text]')
       expect(readyText).toBeTruthy()
       expect(readyText?.textContent).toBe('')
 
       vi.advanceTimersByTime(STEP_MS)
-      expect(readyText?.textContent).toBe('r')
+      expect(readyText?.textContent?.length ?? 0).toBe(1)
 
       vi.advanceTimersByTime(STEP_MS)
-      expect(readyText?.textContent).toBe('re')
+      expect(readyText?.textContent?.length ?? 0).toBe(2)
 
-      vi.advanceTimersByTime(STEP_MS * (READY_TEXT.length - 2))
-      expect(readyText?.textContent).toBe(READY_TEXT)
+      vi.advanceTimersByTime(STEP_MS * (readyTextLength - 2))
+      const completedText = readyText?.textContent ?? ''
+      expect(completedText.length).toBe(readyTextLength)
+      expect(completedText.length).toBeGreaterThanOrEqual(5)
 
       vi.advanceTimersByTime(STEP_MS * 5)
-      expect(readyText?.textContent).toBe(READY_TEXT)
+      const finalText = readyText?.textContent ?? ''
+      expect(finalText.length).toBe(readyTextLength)
+      expect(finalText.length).toBeGreaterThanOrEqual(5)
 
       expect(getAnimationPreference('home-hero-ready')).toBeUndefined()
     })
@@ -79,18 +93,29 @@ describe('HomeHeroElement (Lit)', () => {
           addEventListener: () => undefined,
           removeEventListener: () => undefined,
         }) as unknown as MediaQueryList) as unknown as typeof window.matchMedia
+      syncWindowTimers(window)
+
+      initAnimationLifecycle()
 
-      const { registerHomeHeroWebComponent } = await import('@components/Home/Hero/client')
+      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } = await import(
+        '@components/Home/Hero/client'
+      )
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()
 
+      const readyTextLength = readyTextValue.length
+
       const readyText = window.document.querySelector<HTMLElement>('[data-hero-ready-text]')
       expect(readyText).toBeTruthy()
-      expect(readyText?.textContent).toBe(READY_TEXT)
-
-      vi.advanceTimersByTime(STEP_MS * READY_TEXT.length)
-      expect(readyText?.textContent).toBe(READY_TEXT)
+      const initialText = readyText?.textContent ?? ''
+      expect(initialText.length).toBe(readyTextLength)
+      expect(initialText.length).toBeGreaterThanOrEqual(5)
+
+      vi.advanceTimersByTime(STEP_MS * readyTextLength)
+      const finalText = readyText?.textContent ?? ''
+      expect(finalText.length).toBe(readyTextLength)
+      expect(finalText.length).toBeGreaterThanOrEqual(5)
 
       clearAnimationPreference('home-hero-ready')
       expect(getAnimationPreference('home-hero-ready')).toBeUndefined()

src/components/scripts/elementListeners/index.ts

@@ -50,9 +50,17 @@ const getTouchendEventListener = (handler: eventHandler, context?: unknown) => {
   return touchendEventHandler
 }
 
-const getEscapeKeyEventListener = (handler: eventHandler, context?: unknown) => {
+type WrapperKeyupOptions = {
+  allowedKeys?: string[]
+}
+
+const getKeyupEventListener = (
+  handler: eventHandler,
+  context?: unknown,
+  options?: WrapperKeyupOptions
+) => {
   /**
-   * Escape key event listener wrapper
+   * Keyup event listener wrapper
    * @param event - Keyboard event
    */
   function keypressListener(event: KeyboardEvent) {
@@ -63,7 +71,12 @@ const getEscapeKeyEventListener = (handler: eventHandler, context?: unknown) =>
      * `keydown` event and a key being held down.
      */
     if (event.isComposing || event.repeat) return
-    if (event.key === `Escape`) handler.call(context, event)
+
+    if (options?.allowedKeys?.length && !options.allowedKeys.includes(event.key)) {
+      return
+    }
+
+    handler.call(context, event)
   }
   return keypressListener
 }
@@ -96,9 +109,13 @@ export const addLinkEventListeners = (
 export const addWrapperEventListeners = (
   element: HTMLElement,
   handler: eventHandler,
-  context?: unknown
+  context?: unknown,
+  options?: WrapperKeyupOptions
 ) => {
-  element.addEventListener(`keyup`, getEscapeKeyEventListener(handler, context))
+  const fallbackOptions: WrapperKeyupOptions = { allowedKeys: ['Escape'] }
+  const resolvedOptions = options?.allowedKeys?.length ? options : fallbackOptions
+
+  element.addEventListener(`keyup`, getKeyupEventListener(handler, context, resolvedOptions))
 }
 
 // Export the type for external use