mirror of
https://github.com/enso-org/enso.git
synced 2024-12-21 14:01:34 +03:00
cbf6d41e4c
This is a prerequisite for adding a CI action for E2E tests. - Fix E2E tests - Remove visual regression testing (VRT) and associated fixtures (screenshots) for now - Switch dashboard almost fully to Vite, from ESBuild, to match GUI2's build tooling. - Add some new E2E tests: - Creating assets - Deleting assets - Creating assets from the samples on the home page - Sort assets - Includes fixes for sorting: - Group sorted assets by type again (regression) (see https://github.com/enso-org/cloud-v2/issues/554) - Make sorting by title, case insensitive. This is because it is more intuitive for non-programmers if all items with uppercase names *aren't* separated from those with lowercase names - especially since the Windows FS is case-insensitive. - Normalization of Unicode letters is *not* currently being done. It can potentially be added later. - Double-clicking *anywhere* on a directory row now expands it. Previously it was only being expanded when double clicking - Add recursive label adding/removal to mirror backend - Note: The current implementation is not exactly the same as the backend's implementation. - Fix https://github.com/enso-org/cloud-v2/issues/872 - Unset "saved project details" (for opening the last open project) if fetching it produces an error. # Important Notes - All tests pass. (run `npm run test:e2e` in `app/ide-desktop/lib/dashboard`) - All `npm` commands should be run in `app/ide-desktop/lib/dashboard`. `dashboard:*` npm scripts have been removed from `app/ide-desktop` to prevent a mess. - `npm run dev` confirmed to still work. Note that it has not been changed as it was already using Vite. - `npm run build` now uses `vite build`. This has been tested using a local HTTP server that supports `404.html`. - Other cases have been tested: - `npm run test:e2e` works (all tests pass) - `./run ide build` works - `./run ide watch` works - `./run ide2 build` works - `./run gui watch` works
203 lines
9.7 KiB
TypeScript
203 lines
9.7 KiB
TypeScript
/** @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 actions.locateLabelsColumnToggle(page).click()
|
|
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 actions.locateLabelsColumnToggle(page).click()
|
|
await page.keyboard.down(await actions.modModifier(page))
|
|
await assetRows.nth(0).click()
|
|
await assetRows.nth(2).click()
|
|
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<string>()
|
|
const shouldHaveLabel = <T extends backend.AnyAsset>(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 })
|
|
|
|
await actions.locateLabelsColumnToggle(page).click()
|
|
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 assetRows.filter({ hasText: directory2.title }).click()
|
|
await assetRows.filter({ hasText: directory5.title }).click()
|
|
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<string>()
|
|
const shouldNotHaveLabel = <T extends backend.AnyAsset>(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 })
|
|
|
|
await actions.locateLabelsColumnToggle(page).click()
|
|
/** 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()
|
|
}
|
|
}
|
|
})
|