chore(138): make use of page selector

Author: hilhorstt

packages/editor-website/e2e/page.spec.ts

@@ -6,6 +6,7 @@ test('Page has correct title', async ({ page }) => {
   await expect(page).toHaveTitle('Rich-text Editor - NL Design System');
   await page.getByRole('paragraph').filter({ hasText: /^$/ }).fill('Paragraaf.');
   await page.getByTestId('clippy-validations-gutter').getByRole('listitem').nth(1).click();
+  await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'Aanpassen' }).first().click();
   await page.waitForTimeout(500);
   await page.keyboard.type(' heading');

packages/editor-website/playwright.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
     },
   ],
   reporter: [['html', { outputFolder: 'tmp/playwright-report' }]],
+  retries: 1,
   testDir: './e2e',
   use: {
     baseURL: 'http://localhost:5174',

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/index.test.ts

@@ -1,77 +1,68 @@
-// typescript
 import './index.ts';
-import userEvent from '@testing-library/user-event';
-import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
 import type { Toolbar } from './index';
+import { getDeeplyMountedCustomElement } from '../../../test/helpers';
+import { cleanupTestEditor, EditorTestSetup, setupTestEditor } from '../../../test/setupTestEditor';
+
+const tag = 'clippy-toolbar';
 
 describe('<clippy-toolbar>', () => {
-  let container: HTMLElement;
+  let testSetup: EditorTestSetup;
   let user: ReturnType<typeof userEvent.setup>;
-  let element: Toolbar;
 
   beforeEach(async () => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
     user = userEvent.setup();
+    testSetup = setupTestEditor(`<${tag}></{tag}>`);
 
-    container.innerHTML = '<clippy-toolbar></clippy-toolbar>';
-    element = container.querySelector<Toolbar>('clippy-toolbar')!;
-    await element.updateComplete;
+    await getDeeplyMountedCustomElement<Toolbar>(tag);
   });
 
   afterEach(() => {
-    document.body.removeChild(container);
+    cleanupTestEditor(testSetup.container);
   });
 
   it('renders correctly with required toolbar elements', async () => {
-    expect(element).toBeDefined();
-    expect(querySelectorDeep('div[aria-label="Werkbalk tekstbewerker"]')).toBeDefined();
-    expect(querySelectorDeep('button[aria-label="Bold"]')).toBeDefined();
-    expect(querySelectorDeep('button[aria-label="Italic"]')).toBeDefined();
-    const linkButton = querySelectorDeep('clippy-toolbar-link');
-    await linkButton?.updateComplete;
-    expect(querySelectorDeep('button[aria-label="Link"]')).toBeDefined();
+    expect(page.getByLabelText('Werkbalk tekstbewerker')).toBeInTheDocument();
+    expect(page.getByLabelText('Bold')).toBeInTheDocument();
+    expect(page.getByLabelText('Italic')).toBeInTheDocument();
+    expect(page.getByLabelText('Link', { exact: true })).toBeInTheDocument();
   });
 
   it('updates all toolbar buttons when editor content changes', async () => {
-    const boldButton = querySelectorDeep('button[aria-label="Bold"]');
-    expect(boldButton?.getAttribute('aria-pressed')).toBe('false');
+    expect(page.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'false');
   });
 
   it('opens shortcuts dialog when keyboard shortcuts button is clicked', async () => {
-    const shortcutsButton = querySelectorDeep('clippy-shortcuts');
-    await shortcutsButton?.updateComplete;
+    expect(page.getByTestId('clippy-shortcuts-dialog')).not.toHaveAttribute('open');
 
-    const shortcutsButton2 = querySelectorDeep('button[aria-label="Keyboard shortcuts"]') as HTMLButtonElement;
-    await user.click(shortcutsButton2);
-    await shortcutsButton?.updateComplete;
-    const dialog = querySelectorDeep('dialog#clippy-shortcuts') as HTMLDialogElement;
-    const title = dialog.querySelector('#clippy-shortcuts-title');
-    expect(title?.innerHTML).toBe('Sneltoetsen');
+    const button = page.getByRole('button', { name: 'Keyboard shortcuts' });
+    await button.click();
+    expect(page.getByTestId('clippy-shortcuts-dialog')).toHaveAttribute('open');
   });
 
   it('changes link URL when link is edited', async () => {
-    const linkWC = querySelectorDeep('clippy-toolbar-link');
-    await linkWC?.updateComplete;
-    const linkButton = querySelectorDeep('button[aria-label="Link"]') as HTMLButtonElement;
+    const linkButton = page.getByLabelText('Link', { exact: true });
     await user.click(linkButton);
 
-    const linkElement = querySelectorDeep('clippy-toolbar-link');
-    await linkElement?.updateComplete;
+    expect(page.getByTestId('clippy-link-dialog')).toHaveAttribute('open');
+    const urlInput = page.getByLabelText('Link to:');
+    await user.type(urlInput, 'https://example.com');
 
-    const dialog = querySelectorDeep('dialog#clippy-link-dialog') as HTMLDialogElement;
-    expect(dialog).toHaveAttribute('open');
+    await user.keyboard('{Enter}');
+    expect(page.getByLabelText('Link to:')).toHaveValue('https://example.com');
+    await user.click(page.getByRole('button', { name: 'Link toevoegen' }));
+    expect(page.getByTestId('clippy-link-dialog')).not.toHaveAttribute('open');
   });
 
   it('adds an image when image upload is completed', async () => {
-    const imageUploadElement = querySelectorDeep('clippy-toolbar-image-upload');
-    await imageUploadElement?.updateComplete;
+    const button = page.getByRole('button', { name: 'Afbeelding' });
+    await button.click();
+    expect(page.getByTestId('clippy-image-upload-dialog')).not.toHaveAttribute('open');
+    const fileInput = page.getByTestId('clippy-image-upload');
 
-    const dialog = querySelectorDeep('dialog#clippy-image-upload-dialog') as HTMLDialogElement;
-    dialog?.showModal();
-    await imageUploadElement?.updateComplete;
+    await userEvent.upload(fileInput, new File(['(⌐□_□)'], 'clippy.png', { type: 'image/png' }));
 
-    expect(dialog).toHaveAttribute('open');
+    expect(page.getByRole('listitem').getByRole('img')).toHaveAttribute('alt', 'clippy.png');
   });
 });

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 {
@@ -23,6 +24,7 @@ export class ShortcutsDialog extends LitElement {
         id="clippy-shortcuts"
         class="clippy-shortcuts__dialog"
         aria-labelledby="clippy-shortcuts-title"
+        data-testid="clippy-shortcuts-dialog"
         ${ref(this.dialogRef)}
       >
         <div class="clippy-shortcuts__header">

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-image-upload/index.ts

@@ -98,12 +98,13 @@ export class ToolbarImageUpload extends LitElement {
         class="clippy-toolbar-image-upload--button"
         @click=${this.#toggleImageUploadDialog}
         aria-controls="clippy-image-upload-dialog"
+        label="Afbeelding"
       >
         ${unsafeSVG(PhotoIcon)}
         <input
           ${ref(this.#inputRef)}
           type="file"
-          id="clippy-image-upload"
+          data-testid="clippy-image-upload"
           style="display:none"
           accept="image/*"
           multiple
@@ -115,6 +116,7 @@ export class ToolbarImageUpload extends LitElement {
         id="clippy-image-upload-dialog"
         class="clippy-toolbar-image-upload--dialog"
         ${ref(this.#dialogRef)}
+        data-testid="clippy-image-upload-dialog"
       >
         ${map(
           this.files,

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 = [];
 
@@ -58,24 +67,16 @@ export class ToolbarLink extends LitElement {
       >
         ${unsafeSVG(LinkIcon)}
       </clippy-toolbar-button>
-      <dialog closedby="any" id="clippy-link-dialog" class="link--dialog" ${ref(this.#dialogRef)}>
+      <dialog closedby="any" class="link--dialog" ${ref(this.#dialogRef)} data-testid="clippy-link-dialog">
         <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/components/validations/drawer/index.test.ts

@@ -1,7 +1,7 @@
 import './index.ts';
 import type { Editor } from '@tiptap/core';
-import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { page } from 'vitest/browser';
 import { createTestEditor } from '../../../../test/createTestEditor';
 import { CustomEvents } from '../../../events';
 import { ValidationResult } from '../../../types/validation';
@@ -30,9 +30,8 @@ describe('<clippy-validations-dialog>', () => {
       element.editor = editor;
       await element.updateComplete;
     }
-
-    const dialog = querySelectorDeep('dialog#dialog-content') as HTMLDialogElement;
-    expect(dialog?.getAttribute('open')).toBeNull();
+    const dialog = page.getByTestId('clippy-validations-drawer');
+    expect(dialog).not.toHaveAttribute('open');
 
     globalThis.dispatchEvent(new CustomEvent(CustomEvents.OPEN_VALIDATIONS_DIALOG));
     await element?.updateComplete;
@@ -93,8 +92,7 @@ describe('<clippy-validations-dialog>', () => {
       await element.updateComplete;
     }
 
-    const validationList = querySelectorDeep('ul#validation-list');
-    expect(validationList).toBeDefined();
+    const validationList = page.getByTestId('clippy-validations-list').element();
 
     const validationItems = validationList?.querySelectorAll('clippy-validation-list-item');
     expect(validationItems?.length).toBe(10);

packages/editor/src/components/validations/drawer/index.ts

@@ -216,11 +216,11 @@ export class ValidationsDialog extends LitElement {
     return html`
       <dialog
         ${ref(this.#dialogRef)}
-        id="dialog-content"
+        data-testid="clippy-validations-drawer"
         class="clippy-dialog__content"
         aria-label="Toegankelijkheidsfouten"
       >
-        <ul class="clippy-dialog__list" id="validation-list">
+        <ul class="clippy-dialog__list" data-testid="clippy-validations-list">
           ${size > 0
             ? map(sortedValidations, ([key, { pos, severity, tipPayload }]) => {
                 const validationKey = key.split('_')[0] as ValidationKey;