test(playwright-ct): add tests for advanced keyboard editing with the…

… Portable Text Input
sanity-io · Dec 12, 2024 · 566e6b5 · 566e6b5
1 parent 55cbdaf
commit 566e6b5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
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
@@ -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
@@ -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
@@ -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(<ObjectBlockStory />)
+      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(<ObjectBlockStory />)