fix: toolbar wrap (#137)

Create PR for one of the fixes from this mega PR:

#130

Wrap the toolbar on small screens and add unit tests

---------

Co-authored-by: timhilhorst <[email protected]>

Author: Robbert

packages/editor-website/playwright.config.ts

@@ -15,7 +15,17 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { height: 1024, width: 1280 },
+      },
+    },
+    {
+      name: 'chromium-400-zoom',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { height: 1024, width: 320 },
+      },
     },
   ],
   reporter: [['html', { outputFolder: 'tmp/playwright-report' }]],

packages/editor/src/components/toolbar/styles.ts

@@ -2,7 +2,9 @@ import { css } from 'lit';
 
 export default css`
   .clippy-toolbar__wrapper {
+    /* Wrap the toolbar to make a toolbar with many items fit on small screens. */
     display: flex;
+    flex-wrap: wrap;
     gap: var(--basis-space-inline-sm);
     background-color: var(--ma-color-paars-1);
     border: 1px solid var(--ma-color-paars-8);

packages/editor/src/index.test.ts

@@ -55,4 +55,23 @@ describe('<clippy-editor>', () => {
 
     expect(a11yDialog).toHaveTextContent('Geen toegankelijkheidsfouten gevonden.');
   });
+
+  it('all toolbar buttons are visible, regardless of viewport size', async () => {
+    expect(page.getByRole('button', { name: 'Bold' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Italic' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Underline' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Undo' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Redo' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Ordered list' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Bullet list' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Definition list' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Tabel invoegen' })).toBeVisible();
+    const toolbar = await page.getByLabelText('Werkbalk tekstbewerker').element();
+    await toolbar.querySelector('clippy-toolbar-link').updateComplete;
+    await toolbar.querySelector('clippy-toolbar-image-upload').updateComplete;
+    await expect(page.getByRole('button', { name: 'Link' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Afbeelding' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Keyboard shortcuts' })).toBeVisible();
+    expect(page.getByRole('button', { name: 'Toon toegankelijkheidsfouten' })).toBeVisible();
+  });
 });