From 566e6b5cce4dbbdb037f900c75b673bbbf4d967b Mon Sep 17 00:00:00 2001 From: Per-Kristian Nordnes Date: Wed, 11 Dec 2024 23:25:57 +0100 Subject: [PATCH] test(playwright-ct): add tests for advanced keyboard editing with the Portable Text Input --- .../inputs/PortableText/Annotations.spec.tsx | 17 ++++++++++++ .../PortableText/FocusTracking.spec.tsx | 1 + .../inputs/PortableText/ObjectBlock.spec.tsx | 26 +++++++++++++++++++ 3 files changed, 44 insertions(+) diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx index db8b32138c99..88eb32c1290d 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx @@ -48,8 +48,25 @@ test.describe('Portable Text Input', () => { // Expect the editor to have focus after closing the popover await expect($pte).toBeFocused() + const $toolbarPopover = page.getByTestId('annotation-toolbar-popover') + // Assertion: the annotation toolbar popover should be visible await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible() + await expect($toolbarPopover).toBeVisible() + + // Assertion: tab works to get to the toolbar popover buttons + await page.keyboard.press('Tab') + await expect(page.getByTestId('edit-annotation-button')).toBeFocused() + await page.keyboard.press('Tab') + await expect(page.getByTestId('remove-annotation-button')).toBeFocused() + await page.keyboard.press('Escape') + await expect($pte).toBeFocused() + await expect($toolbarPopover).toBeVisible() + await page.waitForTimeout(100) + await page.keyboard.press('Escape') + await page.waitForTimeout(100) + // Assertion: escape closes the toolbar popover + await expect($toolbarPopover).not.toBeVisible() }) test('Can create, and then open the existing annotation again for editing', async ({ diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx index 600c8313ee39..1831c08102af 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx @@ -117,6 +117,7 @@ test.describe('Portable Text Input', () => { const $portableTextInput = component.getByTestId('field-body') const $pteTextbox = $portableTextInput.getByRole('textbox') await expect($pteTextbox).not.toBeFocused() + await page.keyboard.press('Tab+Tab') const blockObjectInput = page.getByTestId('objectBlockInputField').getByRole('textbox') await expect(blockObjectInput).toBeFocused() }) diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx index c1c42a264d4d..37687944204e 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx @@ -30,6 +30,32 @@ test.describe('Portable Text Input', () => { await expect($pte.getByText('Custom preview block:')).toBeVisible() }) + test('Inline object toolbars works as expected', async ({mount, page}) => { + const {getFocusedPortableTextEditor} = testHelpers({page}) + await mount() + const $pte = await getFocusedPortableTextEditor('field-body') + await page.getByRole('button', {name: 'Insert Inline Object (inline)'}).click() + // Assertion: the annotation toolbar popover should not be visible + await expect(page.getByTestId('inline-object-toolbar-popover')).not.toBeVisible() + const $locatorDialog = page.getByTestId('popover-edit-dialog') + // Assertion: Object edit dialog should be visible + await expect($locatorDialog).toBeVisible() + await page.keyboard.press('Escape') + // Assertion: the annotation toolbar popover should be visible + await expect(page.getByTestId('inline-object-toolbar-popover')).toBeVisible() + // Assertion: tab works to get to the toolbar popover buttons + await page.keyboard.press('Tab') + await expect(page.getByTestId('edit-inline-object-button')).toBeFocused() + await page.keyboard.press('Tab') + await expect(page.getByTestId('remove-inline-object-button')).toBeFocused() + await page.keyboard.press('Escape') + await expect(page.getByTestId('edit-inline-object-button')).toBeVisible() + await expect($pte).toBeFocused() + await page.keyboard.press('Escape') + // Assertion: escape closes the toolbar popover + await expect(page.getByTestId('inline-object-toolbar-popover')).not.toBeVisible() + }) + test('Double-clicking opens a block', async ({mount, page}) => { const {getFocusedPortableTextEditor} = testHelpers({page}) await mount()