Refactor Code components to extend LitElements

Author: webstackdev

_TODO.md

@@ -274,8 +274,6 @@ This article has different approaches to [print pagination](https://www.customjs
 
 A bunch of our web components extend directly from HTMLElement instead of following the instructions to extend LitElement.
 
-- Code/CodeBlock
-- Code/CodeTabs
 - Consent/Banner
 - Consent/Checkbox
 - Consent/Preferences

src/components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro

@@ -0,0 +1,9 @@
+---
+import CodeBlockRegister from '@components/Code/CodeBlock/index.astro'
+---
+
+<CodeBlockRegister />
+
+<code-block>
+  <pre data-language="typescript"><code>const message = 'hello'</code></pre>
+</code-block>

src/components/Code/CodeBlock/client/__tests__/index.spec.ts

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import CodeBlockFixture from '@components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro'
+import type { CodeBlockElement } from '../index'
+
+type CodeBlockModule = WebComponentModule<CodeBlockElement>
+
+describe('CodeBlock web component', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+  })
+
+  const renderCodeBlock = async (
+    assertion: (_context: { element: CodeBlockElement }) => Promise<void> | void
+  ): Promise<void> => {
+    await executeRender<CodeBlockModule>({
+      container,
+      component: CodeBlockFixture,
+      moduleSpecifier: '@components/Code/CodeBlock/client/index',
+      selector: 'code-block',
+      waitForReady: async (element: CodeBlockElement) => {
+        await element.updateComplete
+      },
+      assert: async ({ element }) => {
+        await assertion({ element })
+      },
+    })
+  }
+
+  it('marks the element as enhanced on connect', async () => {
+    await renderCodeBlock(async ({ element }) => {
+      expect(element.dataset['enhanced']).toBe('true')
+    })
+  })
+})

src/components/Code/CodeBlock/client/index.ts

@@ -1,11 +1,33 @@
-export function registerCodeBlockWebComponent(): void {
-  if (customElements.get('code-block')) return
-  customElements.define('code-block', CodeBlockElement)
-}
+import { LitElement } from 'lit'
+import { defineCustomElement } from '@components/scripts/utils'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+
+export class CodeBlockElement extends LitElement {
+  static registeredName = 'code-block'
+
+  protected override createRenderRoot(): HTMLElement {
+    return this
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
 
-class CodeBlockElement extends HTMLElement {
-  connectedCallback(): void {
     if (this.dataset['enhanced'] === 'true') return
     this.dataset['enhanced'] = 'true'
   }
 }
+
+export const registerWebComponent = async (
+  tagName = CodeBlockElement.registeredName
+): Promise<void> => {
+  if (typeof window === 'undefined') return
+  defineCustomElement(tagName, CodeBlockElement)
+}
+
+export const registerCodeBlockWebComponent = registerWebComponent
+
+export const webComponentModule: WebComponentModule<CodeBlockElement> = {
+  registeredName: CodeBlockElement.registeredName,
+  componentCtor: CodeBlockElement,
+  registerWebComponent,
+}

src/components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro

@@ -0,0 +1,32 @@
+---
+import CodeTabsRegister from '@components/Code/CodeTabs/index.astro'
+
+export interface Props {
+  variant?: 'single' | 'multi' | 'excluded'
+}
+
+const { variant = 'multi' } = Astro.props as Props
+---
+
+<CodeTabsRegister />
+
+<code-tabs>
+  {variant === 'multi' ? (
+    <>
+      <pre data-code-tabs-tab="A" data-language="javascript">
+        <code>console.log('A')</code>
+      </pre>
+      <pre data-code-tabs-tab="B" data-language="typescript">
+        <code>console.log('B')</code>
+      </pre>
+    </>
+  ) : variant === 'excluded' ? (
+    <pre data-language="text">
+      <code>plain text</code>
+    </pre>
+  ) : (
+    <pre data-language="typescript">
+      <code>const x: number = 1</code>
+    </pre>
+  )}
+</code-tabs>

src/components/Code/CodeTabs/client/__tests__/index.spec.ts

@@ -1,7 +1,42 @@
-import { describe, expect, it, vi } from 'vitest'
-import { withJsdomEnvironment } from '@test/unit/helpers/litRuntime'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender, withJsdomEnvironment } from '@test/unit/helpers/litRuntime'
+import CodeTabsFixture from '@components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro'
+import type { CodeTabsElement } from '../index'
+
+type CodeTabsModule = WebComponentModule<CodeTabsElement>
 
 describe('CodeTabs web component', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const renderCodeTabs = async (
+    props: { variant?: 'single' | 'multi' | 'excluded' },
+    assertion: (_context: { element: CodeTabsElement; window: Window }) => Promise<void> | void
+  ): Promise<void> => {
+    await executeRender<CodeTabsModule>({
+      container,
+      component: CodeTabsFixture,
+      moduleSpecifier: '@components/Code/CodeTabs/client/index',
+      args: { props },
+      selector: 'code-tabs',
+      waitForReady: async (element: CodeTabsElement) => {
+        await element.updateComplete
+      },
+      assert: async ({ element, window }) => {
+        await assertion({ element, window: window ?? globalThis.window })
+      },
+    })
+  }
+
   it('skips registration when customElements is unavailable', async () => {
     await withJsdomEnvironment(async () => {
       const globalRef = globalThis as unknown as { customElements?: CustomElementRegistry }
@@ -28,7 +63,7 @@ describe('CodeTabs web component', () => {
   })
 
   it('copies the active code block when clipboard is available', async () => {
-    await withJsdomEnvironment(async ({ window }) => {
+    await renderCodeTabs({ variant: 'single' }, async ({ element, window }) => {
       const globalRef = globalThis as unknown as { navigator?: Navigator }
       const originalNavigator = globalRef.navigator
 
@@ -45,18 +80,6 @@ describe('CodeTabs web component', () => {
       })
 
       try {
-        const { registerCodeTabsWebComponent } =
-          await import('@components/Code/CodeTabs/client/index')
-        registerCodeTabsWebComponent()
-
-        const element = window.document.createElement('code-tabs')
-        const pre = window.document.createElement('pre')
-        const code = window.document.createElement('code')
-        code.textContent = 'console.log("hello")'
-        pre.appendChild(code)
-        element.appendChild(pre)
-        window.document.body.appendChild(element)
-
         const copyButton = element.querySelector(
           'button[aria-label="Copy"]'
         ) as HTMLButtonElement | null
@@ -65,7 +88,7 @@ describe('CodeTabs web component', () => {
         copyButton?.click()
 
         await vi.waitFor(() => {
-          expect(writeText).toHaveBeenCalledWith('console.log("hello")')
+          expect(writeText).toHaveBeenCalledWith('const x: number = 1')
         })
       } finally {
         Object.defineProperty(globalThis, 'navigator', {
@@ -78,48 +101,40 @@ describe('CodeTabs web component', () => {
   })
 
   it('does not throw when clipboard is unavailable', async () => {
-    await withJsdomEnvironment(async ({ window }) => {
+    await renderCodeTabs({ variant: 'single' }, ({ element, window }) => {
+      const globalRef = globalThis as unknown as { navigator?: Navigator }
+      const originalNavigator = globalRef.navigator
+
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        writable: true,
+        value: window.navigator,
+      })
+
       Object.defineProperty(window.navigator, 'clipboard', {
         configurable: true,
         value: undefined,
       })
 
-      const { registerCodeTabsWebComponent } =
-        await import('@components/Code/CodeTabs/client/index')
-      registerCodeTabsWebComponent()
-
-      const element = window.document.createElement('code-tabs')
-      const pre = window.document.createElement('pre')
-      pre.textContent = 'no clipboard'
-      element.appendChild(pre)
-      window.document.body.appendChild(element)
-
-      const copyButton = element.querySelector(
-        'button[aria-label="Copy"]'
-      ) as HTMLButtonElement | null
-      expect(copyButton, 'CodeTabs should render a copy button').toBeTruthy()
+      try {
+        const copyButton = element.querySelector(
+          'button[aria-label="Copy"]'
+        ) as HTMLButtonElement | null
+        expect(copyButton, 'CodeTabs should render a copy button').toBeTruthy()
 
-      expect(() => copyButton?.click()).not.toThrow()
+        expect(() => copyButton?.click()).not.toThrow()
+      } finally {
+        Object.defineProperty(globalThis, 'navigator', {
+          configurable: true,
+          writable: true,
+          value: originalNavigator,
+        })
+      }
     })
   })
 
   it('renders a single tab label for a single named code block', async () => {
-    await withJsdomEnvironment(async ({ window }) => {
-      const { registerCodeTabsWebComponent } =
-        await import('@components/Code/CodeTabs/client/index')
-      registerCodeTabsWebComponent()
-
-      const element = window.document.createElement('code-tabs')
-      const pre = window.document.createElement('pre')
-      pre.setAttribute('data-language', 'typescript')
-
-      const code = window.document.createElement('code')
-      code.textContent = 'const x: number = 1'
-      pre.appendChild(code)
-
-      element.appendChild(pre)
-      window.document.body.appendChild(element)
-
+    await renderCodeTabs({ variant: 'single' }, ({ element }) => {
       const tabButton = element.querySelector('button[data-code-tabs-button="0"]')
       expect(tabButton, 'CodeTabs should render a tab button for a single named code block').toBeTruthy()
       expect(tabButton?.textContent).toBe('TypeScript')
@@ -131,27 +146,7 @@ describe('CodeTabs web component', () => {
   })
 
   it('does not apply hover color change to the active tab when multiple tabs exist', async () => {
-    await withJsdomEnvironment(async ({ window }) => {
-      const { registerCodeTabsWebComponent } =
-        await import('@components/Code/CodeTabs/client/index')
-      registerCodeTabsWebComponent()
-
-      const element = window.document.createElement('code-tabs')
-
-      const preA = window.document.createElement('pre')
-      preA.setAttribute('data-code-tabs-tab', 'A')
-      preA.setAttribute('data-language', 'javascript')
-      preA.appendChild(window.document.createElement('code'))
-
-      const preB = window.document.createElement('pre')
-      preB.setAttribute('data-code-tabs-tab', 'B')
-      preB.setAttribute('data-language', 'typescript')
-      preB.appendChild(window.document.createElement('code'))
-
-      element.appendChild(preA)
-      element.appendChild(preB)
-      window.document.body.appendChild(element)
-
+    await renderCodeTabs({ variant: 'multi' }, ({ element }) => {
       const activeButton = element.querySelector('button[data-code-tabs-button="0"]')
       const inactiveButton = element.querySelector('button[data-code-tabs-button="1"]')
 
@@ -171,18 +166,7 @@ describe('CodeTabs web component', () => {
   })
 
   it('does not render tabs for excluded single-language blocks', async () => {
-    await withJsdomEnvironment(async ({ window }) => {
-      const { registerCodeTabsWebComponent } =
-        await import('@components/Code/CodeTabs/client/index')
-      registerCodeTabsWebComponent()
-
-      const element = window.document.createElement('code-tabs')
-      const pre = window.document.createElement('pre')
-      pre.setAttribute('data-language', 'text')
-      pre.textContent = 'plain text'
-      element.appendChild(pre)
-      window.document.body.appendChild(element)
-
+    await renderCodeTabs({ variant: 'excluded' }, ({ element }) => {
       const anyTabButton = element.querySelector('button[data-code-tabs-button]')
       expect(anyTabButton, 'CodeTabs should not render tab buttons for excluded languages').toBeFalsy()
     })