/** @file Test dragging of labels. */ import * as test from '@playwright/test' import * as backend from '#/services/Backend' import * as actions from './actions' test.test('drag labels onto single row', async ({ page }) => { const { api } = await actions.mockAllAndLogin({ page }) const assetRows = actions.locateAssetRows(page) const labels = actions.locateLabelsPanelLabels(page) const label = 'aaaa' api.addLabel(label, backend.COLORS[0]) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('bbbb', backend.COLORS[1]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('cccc', backend.COLORS[2]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('dddd', backend.COLORS[3]!) api.addDirectory('foo') api.addSecret('bar') api.addFile('baz') api.addSecret('quux') await actions.login({ page }) await labels.nth(0).dragTo(assetRows.nth(1)) await test.expect(actions.locateAssetLabels(assetRows.nth(0)).getByText(label)).not.toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(1)).getByText(label)).toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(2)).getByText(label)).not.toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(3)).getByText(label)).not.toBeVisible() }) test.test('drag labels onto multiple rows', async ({ page }) => { const { api } = await actions.mockAllAndLogin({ page }) const assetRows = actions.locateAssetRows(page) const labels = actions.locateLabelsPanelLabels(page) const label = 'aaaa' api.addLabel(label, backend.COLORS[0]) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('bbbb', backend.COLORS[1]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('cccc', backend.COLORS[2]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('dddd', backend.COLORS[3]!) api.addDirectory('foo') api.addSecret('bar') api.addFile('baz') api.addSecret('quux') await actions.login({ page }) await page.keyboard.down(await actions.modModifier(page)) await actions.clickAssetRow(assetRows.nth(0)) await actions.clickAssetRow(assetRows.nth(2)) await labels.nth(0).dragTo(assetRows.nth(2)) await page.keyboard.up(await actions.modModifier(page)) await test.expect(actions.locateAssetLabels(assetRows.nth(0)).getByText(label)).toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(1)).getByText(label)).not.toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(2)).getByText(label)).toBeVisible() await test.expect(actions.locateAssetLabels(assetRows.nth(3)).getByText(label)).not.toBeVisible() }) test.test('drag (recursive)', async ({ page }) => { const { api } = await actions.mockAllAndLogin({ page }) const assetRows = actions.locateAssetRows(page) const labels = actions.locateLabelsPanelLabels(page) const label = 'bbbb' api.addLabel('aaaa', backend.COLORS[0]) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel(label, backend.COLORS[1]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('cccc', backend.COLORS[2]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('dddd', backend.COLORS[3]!) const assetsWithLabel = new Set() const shouldHaveLabel = (asset: T) => { assetsWithLabel.add(asset.title) return asset } const directory1 = shouldHaveLabel(api.addDirectory('foo')) const directory2 = shouldHaveLabel(api.addDirectory('bar')) shouldHaveLabel(api.addFile('baz', { parentId: directory1.id })) shouldHaveLabel(api.addSecret('quux', { parentId: directory1.id })) const directory3 = api.addDirectory('directory 3') const directory5 = shouldHaveLabel(api.addDirectory('directory 5', { parentId: directory3.id })) api.addFile('file 1', { parentId: directory3.id }) api.addProject('file 2', { parentId: directory3.id }) api.addFile('another file') const directory4 = shouldHaveLabel(api.addDirectory('blargle', { parentId: directory2.id })) shouldHaveLabel(api.addProject('abcd', { parentId: directory2.id })) shouldHaveLabel(api.addProject('efgh', { parentId: directory2.id })) shouldHaveLabel(api.addFile('ijkl', { parentId: directory4.id })) shouldHaveLabel(api.addProject('mnop', { parentId: directory4.id })) shouldHaveLabel(api.addSecret('secret 1', { parentId: directory5.id })) shouldHaveLabel(api.addFile('yet another file', { parentId: directory5.id })) await actions.login({ page }) let didExpandRows = false do { didExpandRows = false const directories = await actions.locateExpandableDirectories(page).all() // If going through the directories in forward order, the positions change when // one directory is expanded, making the double click happend on the wrong row // for all directories after it. for (const directory of directories.reverse()) { didExpandRows = true await directory.dblclick() } } while (didExpandRows) await page.keyboard.down(await actions.modModifier(page)) const directory1Row = assetRows.filter({ hasText: directory1.title }) await directory1Row.click() await actions.clickAssetRow(assetRows.filter({ hasText: directory2.title })) await actions.clickAssetRow(assetRows.filter({ hasText: directory5.title })) await labels.nth(1).dragTo(directory1Row) await page.keyboard.up(await actions.modModifier(page)) for (const row of await actions.locateAssetRows(page).all()) { const name = await actions.locateAssetName(row).innerText() const labelElement = actions.locateAssetLabels(row).getByText(label) if (assetsWithLabel.has(name)) { await test.expect(labelElement).toBeVisible() } else { await test.expect(labelElement).not.toBeVisible() } } }) test.test('drag (inverted, recursive)', async ({ page }) => { const { api } = await actions.mockAllAndLogin({ page }) const assetRows = actions.locateAssetRows(page) const labels = actions.locateLabelsPanelLabels(page) const label = 'bbbb' api.addLabel('aaaa', backend.COLORS[0]) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const backendLabel = api.addLabel(label, backend.COLORS[1]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('cccc', backend.COLORS[2]!) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion api.addLabel('dddd', backend.COLORS[3]!) const assetsWithoutLabel = new Set() const shouldNotHaveLabel = (asset: T) => { assetsWithoutLabel.add(asset.title) return asset } const directory1 = shouldNotHaveLabel(api.addDirectory('foo')) const directory2 = shouldNotHaveLabel(api.addDirectory('bar')) shouldNotHaveLabel(api.addFile('baz', { parentId: directory1.id })) shouldNotHaveLabel(api.addSecret('quux', { parentId: directory1.id })) const directory3 = api.addDirectory('directory 3') const directory5 = shouldNotHaveLabel( api.addDirectory('directory 5', { parentId: directory3.id }) ) api.addFile('file 1', { parentId: directory3.id }) api.addProject('file 2', { parentId: directory3.id }) api.addFile('another file') const directory4 = shouldNotHaveLabel(api.addDirectory('blargle', { parentId: directory2.id })) shouldNotHaveLabel(api.addProject('abcd', { parentId: directory2.id })) shouldNotHaveLabel(api.addProject('efgh', { parentId: directory2.id })) shouldNotHaveLabel(api.addFile('ijkl', { parentId: directory4.id })) shouldNotHaveLabel(api.addProject('mnop', { parentId: directory4.id })) shouldNotHaveLabel(api.addSecret('secret 1', { parentId: directory5.id })) shouldNotHaveLabel(api.addFile('yet another file', { parentId: directory5.id })) api.setLabels(api.rootDirectoryId, [backendLabel.value]) await actions.login({ page }) /** The default position (the center) cannot be clicked on as it lands exactly on a label - * which has its own mouse action. It also cannot be too far left, otherwise it triggers * edit mode for the name. */ // eslint-disable-next-line @typescript-eslint/no-magic-numbers const somewhereInRow = { x: 300, y: 16 } let didExpandRows = false do { didExpandRows = false const directories = await actions.locateExpandableDirectories(page).all() // If going through the directories in forward order, the positions change when // one directory is expanded, making the double click happend on the wrong row // for all directories after it. for (const directory of directories.reverse()) { didExpandRows = true await directory.dblclick({ position: somewhereInRow }) } } while (didExpandRows) await page.keyboard.down(await actions.modModifier(page)) const directory1Row = assetRows.filter({ hasText: directory1.title }) await directory1Row.click({ position: somewhereInRow }) await assetRows.filter({ hasText: directory2.title }).click({ position: somewhereInRow }) await assetRows.filter({ hasText: directory5.title }).click({ position: somewhereInRow }) await labels.nth(1).dragTo(directory1Row) await page.keyboard.up(await actions.modModifier(page)) for (const row of await actions.locateAssetRows(page).all()) { const name = await actions.locateAssetName(row).innerText() const labelElement = actions.locateAssetLabels(row).getByText(label) if (assetsWithoutLabel.has(name)) { await test.expect(labelElement).not.toBeVisible() } else { await test.expect(labelElement).toBeVisible() } } })