/** @file Test copying, moving, cutting and pasting. */ import * as test from '@playwright/test' import * as actions from './actions' test.test.beforeEach(actions.mockAllAndLogin) test.test('copy', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 2, 1: Folder 1] await assetRows.nth(0).click({ button: 'right' }) await test.expect(actions.locateContextMenus(page)).toBeVisible() await actions.locateCopyButton(page).click() // Assets: [0: Folder 2 , 1: Folder 1] await test.expect(actions.locateContextMenus(page)).not.toBeVisible() await assetRows.nth(1).click({ button: 'right' }) await test.expect(actions.locateContextMenus(page)).toBeVisible() await actions.locatePasteButton(page).click() // Assets: [0: Folder 2, 1: Folder 1, 2: Folder 2 (copy) ] await test.expect(assetRows).toHaveCount(3) await test.expect(assetRows.nth(2)).toBeVisible() await test.expect(assetRows.nth(2)).toHaveText(/^New Folder 2 [(]copy[)]/) const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(1)) const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(2)) test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft) }) test.test('copy (keyboard)', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 2, 1: Folder 1] await actions.clickAssetRow(assetRows.nth(0)) await actions.press(page, 'Mod+C') // Assets: [0: Folder 2 , 1: Folder 1] await actions.clickAssetRow(assetRows.nth(1)) await actions.press(page, 'Mod+V') // Assets: [0: Folder 2, 1: Folder 1, 2: Folder 2 (copy) ] await test.expect(assetRows).toHaveCount(3) await test.expect(assetRows.nth(2)).toBeVisible() await test.expect(assetRows.nth(2)).toHaveText(/^New Folder 2 [(]copy[)]/) const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(1)) const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(2)) test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft) }) test.test('move', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 2, 1: Folder 1] await assetRows.nth(0).click({ button: 'right' }) await test.expect(actions.locateContextMenus(page)).toBeVisible() await actions.locateCutButton(page).click() // Assets: [0: Folder 2 , 1: Folder 1] await test.expect(actions.locateContextMenus(page)).not.toBeVisible() await assetRows.nth(1).click({ button: 'right' }) await test.expect(actions.locateContextMenus(page)).toBeVisible() await actions.locatePasteButton(page).click() // Assets: [0: Folder 1, 1: Folder 2 ] await test.expect(assetRows).toHaveCount(2) await test.expect(assetRows.nth(1)).toBeVisible() await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/) const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0)) const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1)) test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft) }) test.test('move (drag)', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 2, 1: Folder 1] await actions.dragAssetRowToAssetRow(assetRows.nth(0), assetRows.nth(1)) // Assets: [0: Folder 1, 1: Folder 2 ] await test.expect(assetRows).toHaveCount(2) await test.expect(assetRows.nth(1)).toBeVisible() await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/) const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0)) const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1)) test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft) }) test.test('move to trash', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() await actions.locateNewFolderIcon(page).click() await page.keyboard.down(await actions.modModifier(page)) await actions.clickAssetRow(assetRows.nth(0)) await actions.clickAssetRow(assetRows.nth(1)) // NOTE: For some reason, `react-aria-components` causes drag-n-drop to break if `Mod` is still // held. await page.keyboard.up(await actions.modModifier(page)) await actions.dragAssetRow(assetRows.nth(0), actions.locateTrashCategory(page)) await actions.expectPlaceholderRow(page) await actions.locateTrashCategory(page).click() await test.expect(assetRows).toHaveCount(2) await test.expect(assetRows.nth(0)).toBeVisible() await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1/) await test.expect(assetRows.nth(1)).toBeVisible() await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/) }) test.test('move (keyboard)', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 2, 1: Folder 1] await actions.clickAssetRow(assetRows.nth(0)) await actions.press(page, 'Mod+X') // Assets: [0: Folder 2 , 1: Folder 1] await actions.clickAssetRow(assetRows.nth(1)) await actions.press(page, 'Mod+V') // Assets: [0: Folder 1, 1: Folder 2 ] await test.expect(assetRows).toHaveCount(2) await test.expect(assetRows.nth(1)).toBeVisible() await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/) const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0)) const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1)) test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft) }) test.test('cut (keyboard)', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() await actions.clickAssetRow(assetRows.nth(0)) await actions.press(page, 'Mod+X') // This action is not a builtin `expect` action, so it needs to be manually retried. await test .expect(async () => { test .expect(await assetRows.nth(0).evaluate(el => Number(getComputedStyle(el).opacity))) .toBeLessThan(1) }) .toPass() }) test.test('duplicate', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await assetRows.nth(0).click({ button: 'right' }) await test.expect(actions.locateContextMenus(page)).toBeVisible() await actions.locateDuplicateButton(page).click() // Assets: [0: Folder 1 (copy), 1: Folder 1] await test.expect(assetRows).toHaveCount(2) await test.expect(actions.locateContextMenus(page)).not.toBeVisible() await test.expect(assetRows.nth(0)).toBeVisible() await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1 [(]copy[)]/) }) test.test('duplicate (keyboard)', async ({ page }) => { const assetRows = actions.locateAssetRows(page) await actions.locateNewFolderIcon(page).click() // Assets: [0: Folder 1] await actions.clickAssetRow(assetRows.nth(0)) await actions.press(page, 'Mod+D') // Assets: [0: Folder 1 (copy), 1: Folder 1] await test.expect(assetRows).toHaveCount(2) await test.expect(assetRows.nth(0)).toBeVisible() await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1 [(]copy[)]/) })