From 2aec14de207d68bc66beb3cbb83ac33584b5ff1a Mon Sep 17 00:00:00 2001 From: Herman Wikner Date: Tue, 16 Jul 2024 14:22:50 +0200 Subject: [PATCH] fix: tests --- .../ArrayEditingBasicInteraction.spec.ts} | 18 +- .../ArrayEditingNavigation.spec.ts | 42 ++++ test/e2e/tests/inputs/array.spec.ts | 12 +- .../TreeEditingNavigation.spec.ts | 208 ------------------ 4 files changed, 57 insertions(+), 223 deletions(-) rename test/e2e/tests/{tree-editing/TreeEditingBasicInteraction.spec.ts => array-editing/ArrayEditingBasicInteraction.spec.ts} (74%) create mode 100644 test/e2e/tests/array-editing/ArrayEditingNavigation.spec.ts delete mode 100644 test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts diff --git a/test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts b/test/e2e/tests/array-editing/ArrayEditingBasicInteraction.spec.ts similarity index 74% rename from test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts rename to test/e2e/tests/array-editing/ArrayEditingBasicInteraction.spec.ts index bafb39212aa..7fef96c9373 100644 --- a/test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts +++ b/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() }) }) diff --git a/test/e2e/tests/array-editing/ArrayEditingNavigation.spec.ts b/test/e2e/tests/array-editing/ArrayEditingNavigation.spec.ts new file mode 100644 index 00000000000..9248e55042a --- /dev/null +++ b/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 + } */ + }) +}) diff --git a/test/e2e/tests/inputs/array.spec.ts b/test/e2e/tests/inputs/array.spec.ts index 8cce703c997..e13f7582fd4 100644 --- a/test/e2e/tests/inputs/array.spec.ts +++ b/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, diff --git a/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts b/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts deleted file mode 100644 index bf8df5b68fe..00000000000 --- a/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts +++ /dev/null @@ -1,208 +0,0 @@ -import {expect} from '@playwright/test' -import {test} from '@sanity/test' - -test.describe('navigation - tree sidebar', () => { - test.beforeEach(async ({page, createDraftDocument, browserName}) => { - // set up an array with two items: Albert, the whale and Lucy, the cat - - // For now, only test in Chromium due to flakiness in Firefox and WebKit - test.skip(browserName !== 'chromium') - - 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('tree-editing-dialog')).toBeAttached() - - await page - .getByTestId('tree-editing-dialog') - .getByTestId('string-input') - .fill('Albert, the whale') - await page.getByRole('button', {name: 'Done'}).click() - - // wait for modal to close - page.on('dialog', async () => { - await expect(page.getByTestId('tree-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('tree-editing-dialog')).toBeAttached() - - await page.getByTestId('tree-editing-dialog').getByTestId('string-input').fill('Lucy, the cat') - await page.getByRole('button', {name: 'Done'}).click() - - // wait for modal to close - page.on('dialog', async () => { - await expect(page.getByTestId('tree-editing-dialog')).not.toBeVisible() - }) - /* structure: - { - Albert, the whale - Lucy, the cat - } */ - }) - - // first level array item test - test(`opening the first item, you should be able to navigate to the second array item`, async ({ - page, - browserName, - }) => { - /* travelling from Albert, the Whale -> Lucy, the cat (sister item) via sidebar */ - - // For now, only test in Chromium due to flakiness in Firefox and WebKit - test.skip(browserName !== 'chromium') - - // open first array item - await page.getByRole('button', {name: 'Albert, the whale'}).click() - - // wait for the modal to open - await expect(page.getByTestId('tree-editing-dialog')).toBeAttached() - - // open sidebar - await page.getByTestId('tree-editing-sidebar-toggle').click() - await expect(page.getByTestId('tree-editing-menu')).toBeVisible() - - // click on second array item in the sidebar - await page.getByTestId('tree-editing-menu').getByRole('button', {name: 'Lucy, the cat'}).click() - - // Wait for the animation to change form to finish - const elementSelector = '[data-testid="tree-editing-dialog-content"]' // element that is animated - - // Wait for opacity to turn 0 - await page.waitForFunction((selector) => { - const element = document.querySelector(selector) - return element && getComputedStyle(element).opacity !== '1' - }, elementSelector) - - // Wait for opacity to turn 1 - await page.waitForFunction((selector) => { - const element = document.querySelector(selector) - return element && getComputedStyle(element).opacity === '1' - }, elementSelector) - - // make sure that item is selected on nav tree - await expect( - await page - .getByRole('treeitem', {name: 'Lucy, the cat'}) - .getByTestId('tree-editing-menu-item-content'), - ).toHaveAttribute('data-selected') - - // Wait for input not to be albert - await page.waitForFunction((selector) => { - const element = document.querySelectorAll(selector)[1] as HTMLInputElement // first input in modal - return element && element.value !== 'Albert, the whale' - }, '[data-testid="string-input"]') - - // make sure first input has the right data - await expect( - await page.locator('#tree-editing-form').getByTestId('string-input').inputValue(), - ).toBe('Lucy, the cat') - - // make sure breadcrumb shows the right item - await expect(await page.locator('#tree-breadcrumb-menu-button').textContent()).toBe( - 'Lucy, the cat', - ) - - await page.getByRole('button', {name: 'Done'}).click() - - // wait for the modal to close - page.on('dialog', async () => { - await expect(page.getByTestId('tree-editing-dialog')).not.toBeVisible() - }) - }) -}) - -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('tree-editing-dialog')).toBeAttached() - - await page - .getByTestId('tree-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('tree-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('tree-editing-dialog')).toBeAttached() - - await page.getByTestId('tree-editing-dialog').getByTestId('string-input').fill('Lucy, the cat') - await page.getByRole('button', {name: 'Done'}).click() - - /* structure: - { - Albert, the whale - Lucy, the cat - } */ - }) - - // first level array item test - test(`opening the first item, you should be able to navigate to the second array item`, async ({ - page, - }) => { - /* travelling from Albert, the Whale -> Lucy, the cat (sister item) via breadcrumb */ - - await page.getByRole('button', {name: 'Albert, the whale'}).click() - await expect(page.getByTestId('tree-editing-dialog')).toBeAttached() - - // click the breacrumb - await page.locator('#tree-breadcrumb-menu-button').click() - await expect(page.locator('[data-ui="Popover__wrapper"]')).toBeAttached() - - // navigate on second array item in breadcrumb - // for some reason when trying to click playwright doesn't like the dropdown menu and doesn't let me select any - await page.keyboard.press('ArrowDown') - await page.keyboard.press('Enter') - - // open sidebar - await page.getByTestId('tree-editing-sidebar-toggle').click() - await expect(page.getByTestId('tree-editing-menu')).toBeVisible() - - // make sure that item is selected on nav tree - await expect( - await page - .getByRole('treeitem', {name: 'Lucy, the cat'}) - .getByTestId('tree-editing-menu-item-content'), - ).toHaveAttribute('data-selected') - - // Wait for input not to be albert - await page.waitForFunction((selector) => { - const element = document.querySelectorAll(selector)[1] as HTMLInputElement // first input in modal - return element && element.value !== 'Albert, the whale' - }, '[data-testid="string-input"]') - - // make sure first input has the right data - await expect( - await page.getByTestId('tree-editing-dialog').getByTestId('string-input').inputValue(), - ).toBe('Lucy, the cat') - - // make sure breadcrumb shows the right item - await expect( - await page - .getByTestId('tree-editing-dialog') - .locator('#tree-breadcrumb-menu-button') - .textContent(), - ).toBe('Lucy, the cat') - }) -})