mirror of
https://github.com/enso-org/enso.git
synced 2024-12-21 04:51:38 +03:00
ccfeac1c02
⚠️ This PR depends on #9896 and MUST NOT be merged before that one. - Close #9898 - Move right menu to Drive View - Use new icon for toggling the menu - Move Search Bar into Drive View - both of these changes come with free simplifications to the code. - Refactor entire Top Bar to show pages as tabs - Fix https://github.com/enso-org/cloud-v2/issues/1301 - Remove grey background from arrow icon visible when hovering over directory rows # Important Notes - Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER: - They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located. - While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts. - However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
97 lines
3.8 KiB
TypeScript
97 lines
3.8 KiB
TypeScript
/** @file Test the drive view. */
|
|
import * as test from '@playwright/test'
|
|
|
|
import * as actions from './actions'
|
|
|
|
const PASS_TIMEOUT = 5_000
|
|
|
|
test.test('extra columns should stick to right side of assets table', async ({ page }) => {
|
|
await actions.mockAllAndLogin({ page })
|
|
await actions.locateAccessedByProjectsColumnToggle(page).click()
|
|
await actions.locateAccessedDataColumnToggle(page).click()
|
|
await actions.locateAssetsTable(page).evaluate(element => {
|
|
let scrollableParent: HTMLElement | SVGElement | null = element
|
|
while (
|
|
scrollableParent != null &&
|
|
scrollableParent.scrollWidth <= scrollableParent.clientWidth
|
|
) {
|
|
scrollableParent = scrollableParent.parentElement
|
|
}
|
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
|
scrollableParent?.scrollTo({ left: 999999, behavior: 'instant' })
|
|
})
|
|
const extraColumns = actions.locateExtraColumns(page)
|
|
const assetsTable = actions.locateAssetsTable(page)
|
|
await test
|
|
.expect(async () => {
|
|
const extraColumnsRight = await extraColumns.evaluate(
|
|
element => element.getBoundingClientRect().right
|
|
)
|
|
const assetsTableRight = await assetsTable.evaluate(
|
|
element => element.getBoundingClientRect().right
|
|
)
|
|
test.expect(extraColumnsRight).toEqual(assetsTableRight)
|
|
})
|
|
.toPass({ timeout: PASS_TIMEOUT })
|
|
})
|
|
|
|
test.test('extra columns should stick to top of scroll container', async ({ page }) => {
|
|
const { api } = await actions.mockAllAndLogin({ page })
|
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
|
for (let i = 0; i < 100; i += 1) {
|
|
api.addFile('a')
|
|
}
|
|
await actions.login({ page })
|
|
|
|
await actions.locateAccessedByProjectsColumnToggle(page).click()
|
|
await actions.locateAccessedDataColumnToggle(page).click()
|
|
await actions.locateAssetsTable(page).evaluate(element => {
|
|
let scrollableParent: HTMLElement | SVGElement | null = element
|
|
while (
|
|
scrollableParent != null &&
|
|
scrollableParent.scrollWidth <= scrollableParent.clientWidth
|
|
) {
|
|
scrollableParent = scrollableParent.parentElement
|
|
}
|
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
|
scrollableParent?.scrollTo({ top: 999999, behavior: 'instant' })
|
|
})
|
|
const extraColumns = actions.locateExtraColumns(page)
|
|
const assetsTable = actions.locateAssetsTable(page)
|
|
await test
|
|
.expect(async () => {
|
|
const extraColumnsTop = await extraColumns.evaluate(
|
|
element => element.getBoundingClientRect().top
|
|
)
|
|
const assetsTableTop = await assetsTable.evaluate(element => {
|
|
let scrollableParent: HTMLElement | SVGElement | null = element
|
|
while (
|
|
scrollableParent != null &&
|
|
scrollableParent.scrollWidth <= scrollableParent.clientWidth
|
|
) {
|
|
scrollableParent = scrollableParent.parentElement
|
|
}
|
|
return scrollableParent?.getBoundingClientRect().top
|
|
})
|
|
test.expect(extraColumnsTop).toEqual(assetsTableTop)
|
|
})
|
|
.toPass({ timeout: PASS_TIMEOUT })
|
|
})
|
|
|
|
test.test('can drop onto root directory dropzone', async ({ page }) => {
|
|
const { api } = await actions.mockAllAndLogin({ page })
|
|
const assetRows = actions.locateAssetRows(page)
|
|
const asset = api.addDirectory('a')
|
|
api.addFile('b', { parentId: asset.id })
|
|
await actions.login({ page })
|
|
|
|
await assetRows.nth(0).dblclick()
|
|
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)
|
|
await assetRows.nth(1).dragTo(actions.locateRootDirectoryDropzone(page), { force: true })
|
|
const firstLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
|
|
const secondLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
test.expect(firstLeft, 'siblings have same indentation').toEqual(secondLeft)
|
|
})
|