test(listbox): keyboard navigation rendering tests

test/rendering/listbox/listbox-keyboard-nav.spec.js

@@ -0,0 +1,80 @@
+/* eslint-disable no-undef */
+import { test, expect } from '@playwright/test';
+
+const getPage = require('../setup');
+const startServer = require('../server');
+
+test.describe('keyboard navigation', () => {
+  const filePrefix = 'listbox-focus';
+  const object = '[data-type="listbox"]';
+  const listboxSelector = `${object} .listbox-container`;
+
+  let page;
+
+  let destroyServer;
+  let destroyBrowser;
+  let url;
+
+  test.use({ viewport: { width: 300, height: 500 } });
+
+  test.beforeEach(async () => {
+    ({ url, destroy: destroyServer } = await startServer(8050));
+    ({ page, destroy: destroyBrowser } = await getPage());
+  });
+
+  test.afterEach(async () => {
+    await Promise.all([destroyServer(), destroyBrowser()]);
+  });
+
+  test('hovering and pressing arrow down should scroll listbox', async () => {
+    const FILE_NAME = 'listbox_key_scroll.png';
+
+    await page.goto(`${url}/listbox/listbox.html?scenario=standard`, { waitUntil: 'networkidle' });
+    const selector = await page.waitForSelector(listboxSelector, { visible: true });
+
+    await page.hover(listboxSelector);
+    await page.press(listboxSelector, 'ArrowDown');
+
+    const image = await selector.screenshot({ caret: 'hide' });
+    return expect(image).toMatchSnapshot(FILE_NAME);
+  });
+
+  test('simple list move down up and select C', async () => {
+    await page.goto(`${url}/listbox/listbox.html?scenario=standard`, { waitUntil: 'networkidle' });
+    const selector = await page.waitForSelector(listboxSelector, { visible: true });
+
+    // Move focus from A to C.
+    const firstRow = await page.waitForSelector('[data-testid="listbox.item"]:first-child .value');
+    await firstRow.focus();
+    await page.keyboard.press('ArrowDown'); // At B
+    await page.keyboard.press('ArrowDown'); // At C
+    const focusCImage = await selector.screenshot({ caret: 'hide' });
+    expect(focusCImage).toMatchSnapshot(`${filePrefix}-C.png`);
+
+    // Select and move focus up one step.
+    await page.keyboard.press('Space'); // Select C
+    await page.keyboard.press('ArrowUp'); // At B
+    const focusBAndSelectedCImage = await selector.screenshot({ caret: 'hide' });
+    expect(focusBAndSelectedCImage).toMatchSnapshot(`${filePrefix}-B-select-C.png`);
+
+    // Tab to confirm button.
+    await page.keyboard.press('Tab'); // At confirm button
+    const focusConfirm = await selector.screenshot({ caret: 'hide' });
+    expect(focusConfirm).toMatchSnapshot(`${filePrefix}-confirm.png`);
+
+    // Tab into search field.
+    await page.keyboard.press('Tab'); // At confirm button
+    const focusSearch = await selector.screenshot({ caret: 'hide' });
+    expect(focusSearch).toMatchSnapshot(`${filePrefix}-search.png`);
+
+    // Tab back into last focused row.
+    await page.keyboard.press('Tab'); // At a row again
+    const focusRow = await selector.screenshot({ caret: 'hide' });
+    expect(focusRow).toMatchSnapshot(`${filePrefix}-row-again.png`);
+
+    // Press Enter to confirm selections.
+    await page.keyboard.press('Enter');
+    const stillFocusingRow = await selector.screenshot({ caret: 'hide' });
+    expect(stillFocusingRow).toMatchSnapshot(`${filePrefix}-row-after-confirm.png`);
+  });
+});

test/rendering/listbox/listbox.spec.js

@@ -56,26 +56,6 @@ test.describe('listbox mashup rendering test', () => {
     return expect(image).toMatchSnapshot(FILE_NAME);
   });
 
-  // This test doesn't work correctly due to the setup.
-  // The checkbox never gets checked because the preselect won't work
-  // and the actual select isn't mocked.
-  test.skip('should render checkboxes and check A and I', async () => {
-    const FILE_NAME = 'listbox_checkboxes_select_AI.png';
-
-    await page.goto(`${url}/listbox/listbox.html?scenario=checkboxes`, { waitUntil: 'networkidle' });
-    const selector = await page.waitForSelector(listboxSelector, { visible: true });
-
-    const selectNumbers = [0, 8];
-    const action = async (nbr) => {
-      const rowSelector = `${listboxSelector} input[data-n="${nbr}"]`;
-      await page.locator(rowSelector).check();
-    };
-    await execSequence(selectNumbers, action);
-
-    const image = await selector.screenshot({ caret: 'hide' });
-    return expect(image).toMatchSnapshot(FILE_NAME);
-  });
-
   test('listbox search', async () => {
     const FILE_NAME = 'listbox_search_B.png';
     const searchSelector = '.search input';
@@ -103,19 +83,6 @@ test.describe('listbox mashup rendering test', () => {
     return expect(image).toMatchSnapshot(FILE_NAME);
   });
 
-  test('hovering and pressing arrow down should scroll listbox', async () => {
-    const FILE_NAME = 'listbox_key_scroll.png';
-
-    await page.goto(`${url}/listbox/listbox.html?scenario=standard`, { waitUntil: 'networkidle' });
-    const selector = await page.waitForSelector(listboxSelector, { visible: true });
-
-    await page.hover(listboxSelector);
-    await page.press(listboxSelector, 'ArrowDown');
-
-    const image = await selector.screenshot({ caret: 'hide' });
-    return expect(image).toMatchSnapshot(FILE_NAME);
-  });
-
   test('long title should detach toolbar', async () => {
     const FILE_NAME = 'listbox_detached_toolbar.png';