fix: tests

test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts → test/e2e/tests/array-editing/ArrayEditingBasicInteraction.spec.ts

@@ -11,13 +11,13 @@ test.describe('basic - open and close', () => {
     })
   })
 
-  test(`opening - when creating new array item, the tree editing modal should open`, async ({
+  test(`opening - when creating new array item, the array editing modal should open`, async ({
     page,
   }) => {
     await page.getByTestId('field-animals').getByRole('button', {name: 'Add item'}).click()
 
-    const modal = await page.getByTestId('tree-editing-dialog')
-    await expect(page.getByTestId('tree-editing-dialog')).toBeAttached()
+    const modal = await page.getByTestId('array-editing-dialog')
+    await expect(page.getByTestId('array-editing-dialog')).toBeAttached()
     await expect(modal).toBeVisible()
   })
 
@@ -29,12 +29,12 @@ test.describe('basic - open and close', () => {
     test.skip(browserName !== 'chromium')
 
     await page.getByTestId('field-animals').getByRole('button', {name: 'Add item'}).click()
-    const modal = await page.getByTestId('tree-editing-dialog')
+    const modal = await page.getByTestId('array-editing-dialog')
 
-    await expect(page.getByTestId('tree-editing-dialog')).toBeAttached()
+    await expect(page.getByTestId('array-editing-dialog')).toBeAttached()
     await page.getByRole('button', {name: 'Done'}).click()
 
-    await expect(page.getByTestId('tree-editing-dialog')).not.toBeVisible()
+    await expect(page.getByTestId('array-editing-dialog')).not.toBeVisible()
 
     await expect(modal).not.toBeVisible()
   })
@@ -51,7 +51,7 @@ test.describe('basic - main document action', () => {
 
     await page.getByTestId('field-animals').getByRole('button', {name: 'Add item'}).click()
 
-    await expect(page.getByTestId('tree-editing-dialog')).toBeAttached()
+    await expect(page.getByTestId('array-editing-dialog')).toBeAttached()
   })
 
   test(`actions - blocked main document action when modal is open`, async ({page}) => {
@@ -65,9 +65,9 @@ test.describe('basic - main document action', () => {
     // For now, only test in Chromium due to flakiness in Firefox and WebKit
     test.skip(browserName !== 'chromium')
 
-    await page.getByTestId('tree-editing-done').click()
+    await page.getByTestId('array-editing-done').click()
 
-    await expect(page.getByTestId('tree-editing-dialog')).not.toBeVisible()
+    await expect(page.getByTestId('array-editing-dialog')).not.toBeVisible()
     await expect(page.getByTestId('action-Publish')).not.toBeDisabled()
   })
 })

test/e2e/tests/array-editing/ArrayEditingNavigation.spec.ts

@@ -0,0 +1,42 @@
+import {expect} from '@playwright/test'
+import {test} from '@sanity/test'
+
+test.describe('navigation - breadcrumb', () => {
+  test.beforeEach(async ({page, createDraftDocument}) => {
+    // set up an array with two items: Albert, the whale and Lucy, the cat
+    await createDraftDocument('/test/content/input-debug;objectsDebug')
+    await expect(page.getByTestId('document-panel-scroller')).toBeAttached({
+      timeout: 40000,
+    })
+
+    // first element
+    await expect(page.getByTestId('field-animals')).toBeVisible()
+    await page.getByTestId('field-animals').getByRole('button', {name: 'Add item'}).click()
+    await expect(page.getByTestId('array-editing-dialog')).toBeAttached()
+
+    await page
+      .getByTestId('array-editing-dialog')
+      .getByTestId('string-input')
+      .fill('Albert, the whale')
+    await page.getByRole('button', {name: 'Done'}).click()
+
+    // wait for the modal to close
+    page.on('dialog', async () => {
+      await expect(page.getByTestId('array-editing-dialog')).not.toBeVisible()
+    })
+
+    // second element
+    await expect(page.getByTestId('field-animals')).toBeVisible()
+    await page.getByTestId('field-animals').getByRole('button', {name: 'Add item'}).click()
+    await expect(page.getByTestId('array-editing-dialog')).toBeAttached()
+
+    await page.getByTestId('array-editing-dialog').getByTestId('string-input').fill('Lucy, the cat')
+    await page.getByRole('button', {name: 'Done'}).click()
+
+    /* structure:
+    {
+      Albert, the whale
+      Lucy, the cat
+    } */
+  })
+})

test/e2e/tests/inputs/array.spec.ts

@@ -42,17 +42,17 @@ test(`file drop event should not propagate to dialog parent`, async ({
 
   // Open the dialog.
   await page.getByRole('button', {name: fileName}).click()
-  await expect(page.locator('#tree-editing-dialog')).toBeVisible()
+  await expect(page.locator('#array-editing-dialog')).toBeVisible()
 
   // Drop the file again; this time, while the dialog is open.
   //
   // - The drop event should not propagate to the parent.
   // - Therefore, the drop event should not cause the image to be added to the list again.
-  await page.locator('#tree-editing-dialog').dispatchEvent('drop', {dataTransfer})
+  await page.locator('#array-editing-dialog').dispatchEvent('drop', {dataTransfer})
 
   // Close the dialog.
-  await page.getByTestId('tree-editing-done').click()
-  await expect(await page.locator('#tree-editing-dialog')).not.toBeVisible()
+  await page.getByTestId('array-editing-done').click()
+  await expect(await page.locator('#array-editing-dialog')).not.toBeVisible()
 
   // Ensure the list still contains one item.
   expect(item).toHaveCount(1)
@@ -217,9 +217,9 @@ function createArrayFieldLocators(page: Page) {
   const popover = page.getByTestId('document-panel-portal')
   const popoverMenu = popover.getByRole('menu')
   const popoverMenuItem = (name: string) => popoverMenu.getByRole('menuitem', {name})
-  const insertDialog = page.locator('#tree-editing-dialog')
+  const insertDialog = page.locator('#array-editing-dialog')
   const input = (label: string) => insertDialog.getByLabel(label)
-  const closeDialogButton = page.getByTestId('tree-editing-done')
+  const closeDialogButton = page.getByTestId('array-editing-done')
 
   return {
     items,