chore(138): utrecht-button#undefined error

Author: hilhorstt

packages/editor/package.json

@@ -29,7 +29,7 @@
     "preview": "vite preview",
     "pretest": "pnpm exec playwright install --with-deps",
     "test": "pnpm run --recursive '/^test:.+$/'",
-    "test:vitest": "vitest",
+    "test:vitest": "vitest --run",
     "test-coverage": "vitest run --coverage"
   },
   "dependencies": {
@@ -55,7 +55,7 @@
     "@tiptap/extension-underline": "3.11.1",
     "@tiptap/extensions": "3.11.1",
     "@tiptap/pm": "3.11.1",
-    "@utrecht/web-component-library-stencil": "3.7.0",
+    "@utrecht/web-component-library-stencil": "4.0.0",
     "lit": "3.3.1",
     "prosemirror-model": "1.25.4"
   },

packages/editor/src/components/toolbar/shortcuts-dialog/index.ts

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { ref, type Ref } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import shortcutsDialogStyles from './styles.ts';
+import './../toolbar-button';
 
 @customElement('clippy-shortcuts')
 export class ShortcutsDialog extends LitElement {

packages/editor/src/components/toolbar/toolbar-format-select/index.ts

@@ -71,7 +71,11 @@ export class FormatSelect extends LitElement {
 
   override render() {
     return html`
-      <select class="clippy-toolbar-button" @change=${this.#handleTextFormatChange}>
+      <select
+        class="clippy-toolbar-button"
+        @change=${this.#handleTextFormatChange}
+        aria-label="Tekst formaat selecteren"
+      >
         ${map(
           this.options,
           (option) => html`<option ?selected=${option.active} value=${option.value}>${option.label}</option>`,

packages/editor/src/components/toolbar/toolbar-link/index.ts

@@ -5,8 +5,17 @@ import { customElement, state } from 'lit/decorators.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { editor } from '@/decorators/TipTapDecorator.ts';
+import './../toolbar-button';
 
-@customElement('clippy-toolbar-link')
+const tag = 'clippy-toolbar-link';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tag]: ToolbarLink;
+  }
+}
+
+@customElement(tag)
 export class ToolbarLink extends LitElement {
   static override readonly styles = [];
 
@@ -62,20 +71,12 @@ export class ToolbarLink extends LitElement {
         <div>
           <label>Link to:<input value=${this.previousUrl} ${ref(this.#inputRef)} type="text" /></label>
         </div>
-        <utrecht-button-group>
-          <utrecht-button @click=${() => this.#dialogRef.value?.close()}>Sluiten</utrecht-button>
-          <utrecht-button @click=${this.#unsetLink}>Verwijder link</utrecht-button>
-          <utrecht-button appearance="secondary-action-button" @click=${this.#updateLink}>
-            Link toevoegen
-          </utrecht-button>
-        </utrecht-button-group>
+        <div>
+          <button @click=${() => this.#dialogRef.value?.close()}>Sluiten</button>
+          <button @click=${this.#unsetLink}>Verwijder link</button>
+          <button @click=${this.#updateLink}>Link toevoegen</button>
+        </div>
       </dialog>
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'clippy-toolbar-link': ToolbarLink;
-  }
-}

packages/editor/src/index.test.ts

@@ -1,35 +1,26 @@
 import userEvent from '@testing-library/user-event';
 import './index.ts';
-import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
-import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 import { describe, it, expect, beforeEach } from 'vitest';
 import { page } from 'vitest/browser';
 import { isMacOS } from '@/utils/isMacOS.ts';
+import './index';
 
 describe('<clippy-editor>', () => {
-  beforeEach(async () => {
-    defineCustomElements();
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
     document.body.innerHTML =
       '<clippy-editor><div slot="content" hidden><h1>Start met kopniveau 1</h1></div></clippy-editor>';
-    const editor = document.querySelector('clippy-editor');
-    await editor?.updateComplete;
-
-    // Wait for all utrecht-button elements to be ready
-    const buttons = querySelectorAllDeep('utrecht-button');
-    await Promise.all(buttons.map((button) => button.componentOnReady()));
   });
 
-  it.skip('should change selected text to heading level 3', async () => {
-    const user = userEvent.setup();
-    await expect.element(page.getByRole('heading', { name: 'Start met kopniveau 1' })).toBeInTheDocument();
+  it('should change selected text to heading level 3', async () => {
+    await expect(page.getByRole('heading', { name: 'Start met kopniveau 1' })).toBeInTheDocument();
 
-    const boldButton = querySelectorDeep('button[aria-label="Bold"]');
+    const boldButton = page.getByRole('button', { name: 'Bold' }).element();
 
-    const buttons = querySelectorAllDeep('utrecht-button');
-    await Promise.all(buttons.map((button) => button.componentOnReady()));
-
-    expect(boldButton).toBeDefined();
-    await userEvent.click(boldButton as HTMLButtonElement);
+    expect(boldButton).toBeInTheDocument();
+    await user.click(boldButton);
 
     const text = page.getByText('Start met kopniveau 1').element();
     expect(text).toBeInTheDocument();
@@ -41,31 +32,30 @@ describe('<clippy-editor>', () => {
       { keys: '[/MouseLeft]' },
     ]);
 
-    const select = querySelectorDeep('select');
-    expect(select).toBeDefined();
-    await user.selectOptions(select as Element, 'h3');
+    const select = page.getByLabelText('Tekst formaat selecteren');
+    expect(select).toBeInTheDocument();
+    await user.selectOptions(select.element(), 'h3');
 
-    const h3Option = querySelectorDeep('li[role="option"]#h3');
-    await user.click(h3Option as Element);
+    const h3Option = select.getByRole('option', { name: 'Kopniveau 1' }).element();
+    await user.click(h3Option);
 
     const h3Text = page.getByRole('heading', { level: 3 });
     expect(h3Text).toHaveTextContent('Start met kopniveau 1');
   });
 
-  it.skip('should open the shortcuts dialog with Command/Control + Alt + T', async () => {
-    const user = userEvent.setup();
+  it('should open the shortcuts dialog with Command/Control + Alt + T', async () => {
     const text = page.getByText('Start met kopniveau 1').element();
     expect(text).toBeInTheDocument();
-
+    expect(page.getByLabelText('Toegankelijkheidsfouten', { exact: true })).not.toHaveAttribute('open');
     await user.click(text);
     if (isMacOS()) {
       await user.keyboard('{meta>}{alt>}{t}{/alt}{/meta}');
     } else {
       await user.keyboard('{control>}{alt>}{t}{/alt}{/control}');
     }
-    const a11yDialog = querySelectorDeep('#dialog-content');
-    expect(a11yDialog?.hasAttribute('open')).toBe(true);
+    const a11yDialog = page.getByRole('dialog').element();
+    expect(a11yDialog).toHaveAttribute('open');
 
-    expect(a11yDialog?.querySelector('ul li')?.textContent).toBe('Geen toegankelijkheidsfouten gevonden.');
+    expect(a11yDialog).toHaveTextContent('Geen toegankelijkheidsfouten gevonden.');
   });
 });

packages/editor/src/index.ts

@@ -1,6 +1,5 @@
 import { provide } from '@lit/context';
 import { Editor as TiptapEditor } from '@tiptap/core';
-import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
 import './components/toolbar';
 import './components/validations/gutter';
 import './components/validations/drawer';
@@ -15,8 +14,6 @@ import editorStyles from './styles';
 
 const EDITOR_ID = 'editor';
 
-defineCustomElements();
-
 const sanitizeTopHeadingLevel = (number: number): number => {
   if (!Number.isNaN(number) && number >= 1 && number <= 6) {
     return number;

packages/editor/test/helpers.ts

@@ -14,15 +14,46 @@ export const getDeeplyMountedCustomElement = async <T extends LitElement>(select
   const element = document.querySelector<T>(selector);
   if (!element) throw new Error(`<${selector}> was not found in the document`);
   await element.updateComplete;
+
   const elements = collectAllElementsDeep('*', element);
-  for (const el of elements) {
-    const customEl = el as CustomElement;
-    if (typeof customEl.componentOnReady === 'function') {
-      await customEl.componentOnReady();
-    }
-    if (customEl.updateComplete instanceof Promise) {
-      await customEl.updateComplete;
+
+  // First, ensure all custom elements are defined
+  const customElementTags = new Set<string>();
+  elements.forEach((el) => {
+    const tagName = el.tagName.toLowerCase();
+    if (tagName.includes('-')) {
+      customElementTags.add(tagName);
     }
-  }
+  });
+
+  await Promise.all(
+    Array.from(customElementTags).map(async (tagName) => {
+      try {
+        await customElements.whenDefined(tagName);
+      } catch (error) {
+        console.warn(`Custom element ${tagName} not defined, skipping`, error?.toString());
+      }
+    }),
+  );
+
+  // Then wait for all components to be ready
+  await Promise.all(
+    elements.map(async (el) => {
+      const customEl = el as CustomElement;
+
+      if (typeof customEl.componentOnReady === 'function') {
+        try {
+          await customEl.componentOnReady();
+        } catch (error) {
+          console.warn(`Failed to wait for ${customEl.tagName}:`, error);
+        }
+      }
+
+      if (customEl.updateComplete instanceof Promise) {
+        await customEl.updateComplete;
+      }
+    }),
+  );
+
   return element;
 };