2024-03-29 07:04:26 +03:00
|
|
|
/* eslint-disable unicorn/prefer-dom-node-dataset */
|
2023-12-12 19:04:57 +03:00
|
|
|
import { test } from '@affine-test/kit/playwright';
|
|
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
|
|
import {
|
|
|
|
clickNewPageButton,
|
|
|
|
dragTo,
|
|
|
|
getBlockSuiteEditorTitle,
|
|
|
|
waitForEditorLoad,
|
|
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
|
|
import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
|
2024-03-25 06:55:32 +03:00
|
|
|
import type { Locator, Page } from '@playwright/test';
|
|
|
|
import { expect } from '@playwright/test';
|
2023-12-12 19:04:57 +03:00
|
|
|
|
|
|
|
const dragToFavourites = async (
|
|
|
|
page: Page,
|
|
|
|
dragItem: Locator,
|
2024-03-29 07:04:26 +03:00
|
|
|
id: string,
|
2024-07-26 07:35:31 +03:00
|
|
|
type: 'doc' | 'collection' | 'tag' | 'folder' = 'doc'
|
2023-12-12 19:04:57 +03:00
|
|
|
) => {
|
2024-07-26 07:35:31 +03:00
|
|
|
const favourites = page.getByTestId('explorer-favorite-category-divider');
|
2023-12-12 19:04:57 +03:00
|
|
|
await dragTo(page, dragItem, favourites);
|
2024-07-26 07:35:31 +03:00
|
|
|
const item = page
|
|
|
|
.getByTestId(`explorer-favorites`)
|
|
|
|
.locator(`[data-testid="explorer-${type}-${id}"]`);
|
|
|
|
await expect(item).toBeVisible();
|
|
|
|
return item;
|
2023-12-12 19:04:57 +03:00
|
|
|
};
|
|
|
|
|
2024-03-29 07:04:26 +03:00
|
|
|
const createCollection = async (page: Page, name: string) => {
|
2024-07-26 07:35:31 +03:00
|
|
|
await page.getByTestId('explorer-bar-add-collection-button').click();
|
2023-12-12 19:04:57 +03:00
|
|
|
const input = page.getByTestId('input-collection-title');
|
2023-12-13 10:51:59 +03:00
|
|
|
await expect(input).toBeVisible();
|
2024-03-29 07:04:26 +03:00
|
|
|
await input.fill(name);
|
2023-12-12 19:04:57 +03:00
|
|
|
await page.getByTestId('save-collection').click();
|
2024-07-26 07:35:31 +03:00
|
|
|
const newCollectionId = page.url().split('/').reverse()[0];
|
|
|
|
const collection = page.getByTestId(`explorer-collection-${newCollectionId}`);
|
2024-03-29 07:04:26 +03:00
|
|
|
await expect(collection).toBeVisible();
|
|
|
|
return collection;
|
|
|
|
};
|
|
|
|
|
|
|
|
const createPage = async (page: Page, title: string) => {
|
|
|
|
await clickNewPageButton(page);
|
|
|
|
await getBlockSuiteEditorTitle(page).fill(title);
|
|
|
|
};
|
|
|
|
|
|
|
|
const dragToCollection = async (page: Page, dragItem: Locator) => {
|
|
|
|
const collection = await createCollection(page, 'test collection');
|
2023-12-12 19:04:57 +03:00
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await dragTo(page, dragItem, collection);
|
|
|
|
await page.waitForTimeout(500);
|
2024-07-26 07:35:31 +03:00
|
|
|
const collectionPage = collection.locator('[data-testid^="explorer-doc-"]');
|
2024-03-29 07:04:26 +03:00
|
|
|
await expect(collectionPage).toBeVisible();
|
2023-12-12 19:04:57 +03:00
|
|
|
return collectionPage;
|
|
|
|
};
|
|
|
|
|
|
|
|
const dragToTrash = async (page: Page, title: string, dragItem: Locator) => {
|
|
|
|
// drag to trash
|
|
|
|
await dragTo(page, dragItem, page.getByTestId('trash-page'));
|
2024-03-29 07:04:26 +03:00
|
|
|
const confirmTip = page.getByText('Delete doc?');
|
|
|
|
await expect(confirmTip).toBeVisible();
|
2023-12-12 19:04:57 +03:00
|
|
|
|
|
|
|
await page.getByRole('button', { name: 'Delete' }).click();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
page.getByText(title),
|
|
|
|
'The deleted post is no longer on the All Page list'
|
|
|
|
).toHaveCount(0);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
await page.getByTestId('trash-page').click();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
page.getByText(title),
|
|
|
|
'The deleted post exists in the Trash list'
|
|
|
|
).toHaveCount(1);
|
|
|
|
};
|
|
|
|
|
2024-03-29 07:04:26 +03:00
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
|
|
|
await waitForEditorLoad(page);
|
|
|
|
});
|
|
|
|
|
2023-12-12 19:04:57 +03:00
|
|
|
test('drag a page from "All pages" list to favourites, then drag to trash', async ({
|
|
|
|
page,
|
|
|
|
}) => {
|
|
|
|
const title = 'this is a new page to drag';
|
2024-03-29 07:04:26 +03:00
|
|
|
await waitForEditorLoad(page);
|
|
|
|
await createPage(page, title);
|
2023-12-12 19:04:57 +03:00
|
|
|
const pageId = page.url().split('/').reverse()[0];
|
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
|
|
|
|
const favouritePage = await dragToFavourites(
|
|
|
|
page,
|
2024-07-26 07:35:31 +03:00
|
|
|
page.locator(`[data-testid="page-list-item"]:has-text("${title}")`),
|
2023-12-12 19:04:57 +03:00
|
|
|
pageId
|
|
|
|
);
|
|
|
|
|
|
|
|
await dragToTrash(page, title, favouritePage);
|
|
|
|
});
|
|
|
|
|
|
|
|
test('drag a page from "All pages" list to collections, then drag to trash', async ({
|
|
|
|
page,
|
|
|
|
}) => {
|
|
|
|
const title = 'this is a new page to drag';
|
2024-03-29 07:04:26 +03:00
|
|
|
await waitForEditorLoad(page);
|
|
|
|
await createPage(page, title);
|
2023-12-12 19:04:57 +03:00
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
|
|
|
|
const collectionPage = await dragToCollection(
|
|
|
|
page,
|
2024-07-26 07:35:31 +03:00
|
|
|
page.locator(`[data-testid="page-list-item"]:has-text("${title}")`)
|
2023-12-12 19:04:57 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
await dragToTrash(page, title, collectionPage);
|
|
|
|
});
|
|
|
|
|
|
|
|
test('drag a page from "All pages" list to trash', async ({ page }) => {
|
|
|
|
const title = 'this is a new page to drag';
|
2024-03-29 07:04:26 +03:00
|
|
|
await createPage(page, title);
|
|
|
|
|
2023-12-12 19:04:57 +03:00
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
|
|
|
|
await dragToTrash(
|
|
|
|
page,
|
|
|
|
title,
|
2024-07-26 07:35:31 +03:00
|
|
|
page.locator(`[data-testid="page-list-item"]:has-text("${title}")`)
|
2023-12-12 19:04:57 +03:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
test('drag a page from favourites to collection', async ({ page }) => {
|
|
|
|
const title = 'this is a new page to drag';
|
2024-03-29 07:04:26 +03:00
|
|
|
await createPage(page, title);
|
|
|
|
|
2023-12-12 19:04:57 +03:00
|
|
|
const pageId = page.url().split('/').reverse()[0];
|
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
|
|
|
|
// drag to favourites
|
|
|
|
const favouritePage = await dragToFavourites(
|
|
|
|
page,
|
2024-07-26 07:35:31 +03:00
|
|
|
page.locator(`[data-testid="page-list-item"]:has-text("${title}")`),
|
2023-12-12 19:04:57 +03:00
|
|
|
pageId
|
|
|
|
);
|
|
|
|
|
|
|
|
// drag to collections
|
|
|
|
await dragToCollection(page, favouritePage);
|
|
|
|
});
|
2024-03-29 07:04:26 +03:00
|
|
|
|
|
|
|
test('drag a collection to favourites', async ({ page }) => {
|
|
|
|
await clickSideBarAllPageButton(page);
|
|
|
|
await page.waitForTimeout(500);
|
|
|
|
const collection = await createCollection(page, 'test collection');
|
2024-07-26 07:35:31 +03:00
|
|
|
const collectionId = page.url().split('/').reverse()[0];
|
2024-03-29 07:04:26 +03:00
|
|
|
await dragToFavourites(page, collection, collectionId, 'collection');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('items in favourites can be reordered by dragging', async ({ page }) => {
|
|
|
|
const title0 = 'this is a new page to drag';
|
|
|
|
await createPage(page, title0);
|
|
|
|
await page.getByTestId('pin-button').click();
|
|
|
|
|
|
|
|
const title1 = 'this is another new page to drag';
|
|
|
|
await createPage(page, title1);
|
|
|
|
await page.getByTestId('pin-button').click();
|
|
|
|
|
|
|
|
{
|
|
|
|
const collection = await createCollection(page, 'test collection');
|
2024-07-26 07:35:31 +03:00
|
|
|
const collectionId = page.url().split('/').reverse()[0];
|
2024-03-29 07:04:26 +03:00
|
|
|
await dragToFavourites(page, collection, collectionId, 'collection');
|
|
|
|
}
|
|
|
|
|
|
|
|
// assert the order of the items in favourites
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]')
|
2024-03-29 07:04:26 +03:00
|
|
|
).toHaveCount(3);
|
|
|
|
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]').first()
|
2024-07-26 11:15:32 +03:00
|
|
|
).toHaveText('test collection');
|
2024-03-29 07:04:26 +03:00
|
|
|
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]').last()
|
2024-07-26 11:15:32 +03:00
|
|
|
).toHaveText(title0);
|
2024-03-29 07:04:26 +03:00
|
|
|
|
|
|
|
// drag the first item to the last
|
|
|
|
const firstItem = page
|
2024-07-26 07:35:31 +03:00
|
|
|
.getByTestId('explorer-favorites')
|
|
|
|
.locator('[draggable]')
|
2024-03-29 07:04:26 +03:00
|
|
|
.first();
|
|
|
|
const lastItem = page
|
2024-07-26 07:35:31 +03:00
|
|
|
.getByTestId('explorer-favorites')
|
|
|
|
.locator('[draggable]')
|
2024-03-29 07:04:26 +03:00
|
|
|
.last();
|
2024-07-26 07:35:31 +03:00
|
|
|
await dragTo(page, firstItem, lastItem, 'bottom');
|
2024-03-29 07:04:26 +03:00
|
|
|
|
|
|
|
// now check the order again
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]')
|
2024-03-29 07:04:26 +03:00
|
|
|
).toHaveCount(3);
|
|
|
|
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]').first()
|
2024-03-29 07:04:26 +03:00
|
|
|
).toHaveText(title1);
|
|
|
|
|
|
|
|
await expect(
|
2024-07-26 07:35:31 +03:00
|
|
|
page.getByTestId('explorer-favorites').locator('[draggable]').last()
|
2024-07-26 11:15:32 +03:00
|
|
|
).toHaveText('test collection');
|
2024-03-29 07:04:26 +03:00
|
|
|
});
|