mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-09-07 01:09:54 +08:00
refactor(core): rename explorer to navigation-panel (#11876)
This commit is contained in:
@@ -241,8 +241,8 @@ export class EditorUtils {
|
||||
public static async clearAllCollections(page: Page) {
|
||||
while (true) {
|
||||
const collection = await page
|
||||
.getByTestId('explorer-collections')
|
||||
.locator('[data-testid^="explorer-collection-"]')
|
||||
.getByTestId('navigation-panel-collections')
|
||||
.locator('[data-testid^="navigation-panel-collection-"]')
|
||||
.first();
|
||||
|
||||
if (!(await collection.isVisible())) {
|
||||
@@ -252,7 +252,7 @@ export class EditorUtils {
|
||||
const collectionContent = await collection.locator('div').first();
|
||||
await collectionContent.hover();
|
||||
const more = await collectionContent.getByTestId(
|
||||
'explorer-tree-node-operation-button'
|
||||
'navigation-panel-tree-node-operation-button'
|
||||
);
|
||||
await more.click();
|
||||
await page.getByTestId('collection-delete-button').click();
|
||||
@@ -263,8 +263,8 @@ export class EditorUtils {
|
||||
public static async clearAllTags(page: Page) {
|
||||
while (true) {
|
||||
const tag = await page
|
||||
.getByTestId('explorer-tags')
|
||||
.locator('[data-testid^="explorer-tag-"]')
|
||||
.getByTestId('navigation-panel-tags')
|
||||
.locator('[data-testid^="navigation-panel-tag-"]')
|
||||
.first();
|
||||
|
||||
if (!(await tag.isVisible())) {
|
||||
@@ -274,7 +274,7 @@ export class EditorUtils {
|
||||
const tagContent = await tag.locator('div').first();
|
||||
await tagContent.hover();
|
||||
const more = await tagContent.getByTestId(
|
||||
'explorer-tree-node-operation-button'
|
||||
'navigation-panel-tree-node-operation-button'
|
||||
);
|
||||
await more.click();
|
||||
await page.getByTestId('tag-delete-button').click();
|
||||
@@ -288,7 +288,9 @@ export class EditorUtils {
|
||||
docContent: string
|
||||
) {
|
||||
// Create collection
|
||||
await page.getByTestId('explorer-bar-add-collection-button').click();
|
||||
await page
|
||||
.getByTestId('navigation-panel-bar-add-collection-button')
|
||||
.click();
|
||||
const input = await page.getByTestId('prompt-modal-input');
|
||||
await input.focus();
|
||||
await input.pressSequentially(collectionName);
|
||||
@@ -318,9 +320,9 @@ export class EditorUtils {
|
||||
docContent: string
|
||||
) {
|
||||
// Create tag
|
||||
const tags = await page.getByTestId('explorer-tags');
|
||||
const tags = await page.getByTestId('navigation-panel-tags');
|
||||
await tags.hover();
|
||||
await tags.getByTestId('explorer-bar-add-tag-button').click();
|
||||
await tags.getByTestId('navigation-panel-bar-add-tag-button').click();
|
||||
const input = await page.getByTestId('rename-modal-input');
|
||||
await input.focus();
|
||||
await input.pressSequentially(tagName);
|
||||
|
||||
@@ -110,7 +110,7 @@ test('can sync collections between different browser', async ({
|
||||
page
|
||||
);
|
||||
await enableCloudWorkspace(page);
|
||||
await page.getByTestId('explorer-bar-add-collection-button').click();
|
||||
await page.getByTestId('navigation-panel-bar-add-collection-button').click();
|
||||
const title = page.getByTestId('prompt-modal-input');
|
||||
await title.isVisible();
|
||||
await title.fill('test collection');
|
||||
@@ -122,7 +122,7 @@ test('can sync collections between different browser', async ({
|
||||
const page2 = await context.newPage();
|
||||
await loginUser(page2, user);
|
||||
await page2.goto(page.url());
|
||||
const collections = page2.getByTestId('explorer-collections');
|
||||
const collections = page2.getByTestId('navigation-panel-collections');
|
||||
await collections.getByTestId('category-divider-collapse-button').click();
|
||||
await expect(collections.getByText('test collection')).toBeVisible();
|
||||
}
|
||||
|
||||
@@ -109,21 +109,24 @@ test('should transform local favorites data', async ({ page }) => {
|
||||
},
|
||||
page
|
||||
);
|
||||
await page.getByTestId('explorer-bar-add-favorite-button').first().click();
|
||||
await page
|
||||
.getByTestId('navigation-panel-bar-add-favorite-button')
|
||||
.first()
|
||||
.click();
|
||||
await clickPageModeButton(page);
|
||||
await waitForEmptyEditor(page);
|
||||
|
||||
await getBlockSuiteEditorTitle(page).fill('this is a new fav page');
|
||||
await expect(
|
||||
page
|
||||
.getByTestId('explorer-favorites')
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable] >> text=this is a new fav page')
|
||||
).toBeVisible();
|
||||
|
||||
await enableCloudWorkspace(page);
|
||||
await expect(
|
||||
page
|
||||
.getByTestId('explorer-favorites')
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable] >> text=this is a new fav page')
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -85,14 +85,14 @@ test('New a page and add to favourites, then open info modal from sidebar', asyn
|
||||
|
||||
await page.getByTestId('all-pages').click();
|
||||
const favoriteListItemInSidebar = page.locator(
|
||||
`[data-testid="explorer-favorites"] [data-testid="explorer-doc-${newPageId}"]`
|
||||
`[data-testid="navigation-panel-favorites"] [data-testid="navigation-panel-doc-${newPageId}"]`
|
||||
);
|
||||
expect(await favoriteListItemInSidebar.textContent()).toBe(
|
||||
'this is a new page'
|
||||
);
|
||||
await favoriteListItemInSidebar.hover();
|
||||
await favoriteListItemInSidebar
|
||||
.getByTestId('explorer-tree-node-operation-button')
|
||||
.getByTestId('navigation-panel-tree-node-operation-button')
|
||||
.click();
|
||||
const infoBtn = page.getByText('View Info');
|
||||
await infoBtn.click();
|
||||
|
||||
@@ -27,23 +27,27 @@ const dragToFavourites = async (
|
||||
id: string,
|
||||
type: 'doc' | 'collection' | 'tag' | 'folder' = 'doc'
|
||||
) => {
|
||||
const favourites = page.getByTestId('explorer-favorite-category-divider');
|
||||
const favourites = page.getByTestId(
|
||||
'navigation-panel-favorite-category-divider'
|
||||
);
|
||||
await dragTo(page, dragItem, favourites);
|
||||
const item = page
|
||||
.getByTestId(`explorer-favorites`)
|
||||
.locator(`[data-testid="explorer-${type}-${id}"]`);
|
||||
.getByTestId(`navigation-panel-favorites`)
|
||||
.locator(`[data-testid="navigation-panel-${type}-${id}"]`);
|
||||
await expect(item).toBeVisible();
|
||||
return item;
|
||||
};
|
||||
|
||||
const createCollection = async (page: Page, name: string) => {
|
||||
await page.getByTestId('explorer-bar-add-collection-button').click();
|
||||
await page.getByTestId('navigation-panel-bar-add-collection-button').click();
|
||||
const input = page.getByTestId('prompt-modal-input');
|
||||
await expect(input).toBeVisible();
|
||||
await input.fill(name);
|
||||
await page.getByTestId('prompt-modal-confirm').click();
|
||||
const newCollectionId = getCurrentCollectionIdFromUrl(page);
|
||||
const collection = page.getByTestId(`explorer-collection-${newCollectionId}`);
|
||||
const collection = page.getByTestId(
|
||||
`navigation-panel-collection-${newCollectionId}`
|
||||
);
|
||||
await expect(collection).toBeVisible();
|
||||
return collection;
|
||||
};
|
||||
@@ -57,7 +61,9 @@ const dragToCollection = async (page: Page, dragItem: Locator) => {
|
||||
await clickSideBarAllPageButton(page);
|
||||
await dragTo(page, dragItem, collection);
|
||||
await page.waitForTimeout(500);
|
||||
const collectionPage = collection.locator('[data-testid^="explorer-doc-"]');
|
||||
const collectionPage = collection.locator(
|
||||
'[data-testid^="navigation-panel-doc-"]'
|
||||
);
|
||||
await expect(collectionPage).toBeVisible();
|
||||
return collectionPage;
|
||||
};
|
||||
@@ -182,39 +188,45 @@ test('items in favourites can be reordered by dragging', async ({ page }) => {
|
||||
|
||||
// assert the order of the items in favourites
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]')
|
||||
page.getByTestId('navigation-panel-favorites').locator('[draggable]')
|
||||
).toHaveCount(3);
|
||||
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]').first()
|
||||
page
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable]')
|
||||
.first()
|
||||
).toHaveText('test collection');
|
||||
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]').last()
|
||||
page.getByTestId('navigation-panel-favorites').locator('[draggable]').last()
|
||||
).toHaveText(title0);
|
||||
|
||||
// drag the first item to the last
|
||||
const firstItem = page
|
||||
.getByTestId('explorer-favorites')
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable]')
|
||||
.first();
|
||||
const lastItem = page
|
||||
.getByTestId('explorer-favorites')
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable]')
|
||||
.last();
|
||||
await dragTo(page, firstItem, lastItem, 'bottom');
|
||||
|
||||
// now check the order again
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]')
|
||||
page.getByTestId('navigation-panel-favorites').locator('[draggable]')
|
||||
).toHaveCount(3);
|
||||
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]').first()
|
||||
page
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable]')
|
||||
.first()
|
||||
).toHaveText(title1);
|
||||
|
||||
await expect(
|
||||
page.getByTestId('explorer-favorites').locator('[draggable]').last()
|
||||
page.getByTestId('navigation-panel-favorites').locator('[draggable]').last()
|
||||
).toHaveText('test collection');
|
||||
});
|
||||
|
||||
@@ -304,8 +316,8 @@ test('drag a favourite page into note on page mode', async ({ page }) => {
|
||||
await page.getByTestId('pin-button').click();
|
||||
const pageId = getCurrentDocIdFromUrl(page);
|
||||
const item = page
|
||||
.getByTestId(`explorer-favorites`)
|
||||
.locator(`[data-testid="explorer-doc-${pageId}"]`);
|
||||
.getByTestId(`navigation-panel-favorites`)
|
||||
.locator(`[data-testid="navigation-panel-doc-${pageId}"]`);
|
||||
await expect(item).toBeVisible();
|
||||
|
||||
// drag item into blocksuite editor
|
||||
@@ -327,8 +339,8 @@ test('drag a favourite page into canvas on edgeless mode', async ({ page }) => {
|
||||
await page.getByTestId('pin-button').click();
|
||||
const pageId = getCurrentDocIdFromUrl(page);
|
||||
const item = page
|
||||
.getByTestId(`explorer-favorites`)
|
||||
.locator(`[data-testid="explorer-doc-${pageId}"]`);
|
||||
.getByTestId(`navigation-panel-favorites`)
|
||||
.locator(`[data-testid="navigation-panel-doc-${pageId}"]`);
|
||||
await expect(item).toBeVisible();
|
||||
|
||||
await clickNewPageButton(page, 'edgeless page');
|
||||
@@ -373,8 +385,8 @@ test('drag a favourite page into note on edgeless mode', async ({ page }) => {
|
||||
await page.getByTestId('pin-button').click();
|
||||
const pageId = getCurrentDocIdFromUrl(page);
|
||||
const item = page
|
||||
.getByTestId(`explorer-favorites`)
|
||||
.locator(`[data-testid="explorer-doc-${pageId}"]`);
|
||||
.getByTestId(`navigation-panel-favorites`)
|
||||
.locator(`[data-testid="navigation-panel-doc-${pageId}"]`);
|
||||
await expect(item).toBeVisible();
|
||||
|
||||
await clickNewPageButton(page, 'edgeless page');
|
||||
|
||||
@@ -67,26 +67,34 @@ const createAndPinCollection = async (
|
||||
test('Show collections items in sidebar', async ({ page }) => {
|
||||
await removeOnboardingPages(page);
|
||||
await createAndPinCollection(page);
|
||||
const collections = page.getByTestId('explorer-collections');
|
||||
const collections = page.getByTestId('navigation-panel-collections');
|
||||
await collections.getByTestId('category-divider-collapse-button').click();
|
||||
const items = collections.locator('[data-testid^="explorer-collection-"]');
|
||||
const items = collections.locator(
|
||||
'[data-testid^="navigation-panel-collection-"]'
|
||||
);
|
||||
await expect(items).toHaveCount(1);
|
||||
const first = items.first();
|
||||
expect(await first.textContent()).toBe('test collection');
|
||||
await first.getByTestId('explorer-collapsed-button').click();
|
||||
const collectionPage = first.locator('[data-testid^="explorer-doc-"]').nth(0);
|
||||
await first.getByTestId('navigation-panel-collapsed-button').click();
|
||||
const collectionPage = first
|
||||
.locator('[data-testid^="navigation-panel-doc-"]')
|
||||
.nth(0);
|
||||
expect(await collectionPage.textContent()).toBe('test page');
|
||||
await collectionPage.hover();
|
||||
await collectionPage
|
||||
.getByTestId('explorer-tree-node-operation-button')
|
||||
.getByTestId('navigation-panel-tree-node-operation-button')
|
||||
.click();
|
||||
const deletePage = page.getByText('Move to trash');
|
||||
await deletePage.click();
|
||||
await page.getByTestId('confirm-modal-confirm').click();
|
||||
expect(await first.locator('[data-testid^="explorer-doc-"]').count()).toBe(0);
|
||||
expect(
|
||||
await first.locator('[data-testid^="navigation-panel-doc-"]').count()
|
||||
).toBe(0);
|
||||
// position is a workaround for the hover issue when empty collection status's height > 26px (will cause scroll)
|
||||
await first.hover({ position: { x: 10, y: 10 } });
|
||||
await first.getByTestId('explorer-tree-node-operation-button').click();
|
||||
await first
|
||||
.getByTestId('navigation-panel-tree-node-operation-button')
|
||||
.click();
|
||||
const deleteCollection = page.getByText('Delete');
|
||||
await deleteCollection.click();
|
||||
await page.waitForTimeout(50);
|
||||
@@ -109,13 +117,17 @@ test('Show collections items in sidebar', async ({ page }) => {
|
||||
test('edit collection', async ({ page }) => {
|
||||
await removeOnboardingPages(page);
|
||||
await createAndPinCollection(page);
|
||||
const collections = page.getByTestId('explorer-collections');
|
||||
const collections = page.getByTestId('navigation-panel-collections');
|
||||
await collections.getByTestId('category-divider-collapse-button').click();
|
||||
const items = collections.locator('[data-testid^="explorer-collection-"]');
|
||||
const items = collections.locator(
|
||||
'[data-testid^="navigation-panel-collection-"]'
|
||||
);
|
||||
expect(await items.count()).toBe(1);
|
||||
const first = items.first();
|
||||
await first.hover();
|
||||
await first.getByTestId('explorer-tree-node-operation-button').click();
|
||||
await first
|
||||
.getByTestId('navigation-panel-tree-node-operation-button')
|
||||
.click();
|
||||
const editCollection = page.getByText('Rename');
|
||||
await editCollection.click();
|
||||
await page.getByTestId('rename-modal-input').fill('123');
|
||||
@@ -127,13 +139,17 @@ test('edit collection', async ({ page }) => {
|
||||
test('edit collection and change filter date', async ({ page }) => {
|
||||
await removeOnboardingPages(page);
|
||||
await createAndPinCollection(page);
|
||||
const collections = page.getByTestId('explorer-collections');
|
||||
const collections = page.getByTestId('navigation-panel-collections');
|
||||
await collections.getByTestId('category-divider-collapse-button').click();
|
||||
const items = collections.locator('[data-testid^="explorer-collection-"]');
|
||||
const items = collections.locator(
|
||||
'[data-testid^="navigation-panel-collection-"]'
|
||||
);
|
||||
expect(await items.count()).toBe(1);
|
||||
const first = items.first();
|
||||
await first.hover();
|
||||
await first.getByTestId('explorer-tree-node-operation-button').click();
|
||||
await first
|
||||
.getByTestId('navigation-panel-tree-node-operation-button')
|
||||
.click();
|
||||
const editCollection = page.getByText('Rename');
|
||||
await editCollection.click();
|
||||
await page.getByTestId('rename-modal-input').fill('123');
|
||||
@@ -151,21 +167,23 @@ test('add collection from sidebar', async ({ page }) => {
|
||||
const cell = page.getByTestId('page-list-item-title').getByText('test page');
|
||||
await expect(cell).toBeVisible();
|
||||
await page
|
||||
.getByTestId('explorer-collections')
|
||||
.getByTestId('navigation-panel-collections')
|
||||
.getByTestId('category-divider-collapse-button')
|
||||
.click();
|
||||
const nullCollection = page.getByTestId(
|
||||
'slider-bar-collection-empty-message'
|
||||
);
|
||||
await expect(nullCollection).toBeVisible();
|
||||
await page.getByTestId('explorer-bar-add-collection-button').click();
|
||||
await page.getByTestId('navigation-panel-bar-add-collection-button').click();
|
||||
const title = page.getByTestId('prompt-modal-input');
|
||||
await expect(title).toBeVisible();
|
||||
await title.fill('test collection');
|
||||
await page.getByTestId('prompt-modal-confirm').click();
|
||||
await page.waitForTimeout(100);
|
||||
const collections = page.getByTestId('explorer-collections');
|
||||
const items = collections.locator('[data-testid^="explorer-collection-"]');
|
||||
const collections = page.getByTestId('navigation-panel-collections');
|
||||
const items = collections.locator(
|
||||
'[data-testid^="navigation-panel-collection-"]'
|
||||
);
|
||||
expect(await items.count()).toBe(1);
|
||||
await expect(nullCollection).not.toBeVisible();
|
||||
});
|
||||
|
||||
@@ -29,7 +29,7 @@ test('Show favorite items in sidebar', async ({ page, workspace }) => {
|
||||
const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
|
||||
await favoriteBtn.click();
|
||||
const favoriteListItemInSidebar = page.getByTestId(
|
||||
'explorer-doc-' + newPageId
|
||||
'navigation-panel-doc-' + newPageId
|
||||
);
|
||||
expect(await favoriteListItemInSidebar.textContent()).toBe(
|
||||
'this is a new page to favorite'
|
||||
@@ -58,7 +58,7 @@ test('Show favorite reference in sidebar', async ({ page, workspace }) => {
|
||||
const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
|
||||
await favoriteBtn.click();
|
||||
|
||||
const favItemTestId = 'explorer-doc-' + newPageId;
|
||||
const favItemTestId = 'navigation-panel-doc-' + newPageId;
|
||||
|
||||
const favoriteListItemInSidebar = page.getByTestId(favItemTestId);
|
||||
expect(await favoriteListItemInSidebar.textContent()).toBe(
|
||||
@@ -66,14 +66,14 @@ test('Show favorite reference in sidebar', async ({ page, workspace }) => {
|
||||
);
|
||||
|
||||
const collapseButton = favoriteListItemInSidebar.getByTestId(
|
||||
'explorer-collapsed-button'
|
||||
'navigation-panel-collapsed-button'
|
||||
);
|
||||
|
||||
await expect(collapseButton).toBeVisible();
|
||||
await collapseButton.click();
|
||||
await expect(
|
||||
favoriteListItemInSidebar.locator(
|
||||
'[data-testid^="explorer-doc-"]:has-text("Another page")'
|
||||
'[data-testid^="navigation-panel-doc-"]:has-text("Another page")'
|
||||
)
|
||||
).toBeVisible();
|
||||
const currentWorkspace = await workspace.current();
|
||||
@@ -111,7 +111,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
|
||||
|
||||
const anotherPageId = getCurrentDocIdFromUrl(page);
|
||||
|
||||
const favItemTestId = 'explorer-doc-' + newPageId;
|
||||
const favItemTestId = 'navigation-panel-doc-' + newPageId;
|
||||
|
||||
await expect(page.getByTestId(favItemTestId)).toHaveText(
|
||||
'this is a new page to favorite'
|
||||
@@ -119,10 +119,10 @@ test("Deleted page's reference will not be shown in sidebar", async ({
|
||||
|
||||
await page
|
||||
.getByTestId(favItemTestId)
|
||||
.getByTestId('explorer-collapsed-button')
|
||||
.getByTestId('navigation-panel-collapsed-button')
|
||||
.click();
|
||||
|
||||
const favItemAnotherPageTestId = 'explorer-doc-' + anotherPageId;
|
||||
const favItemAnotherPageTestId = 'navigation-panel-doc-' + anotherPageId;
|
||||
|
||||
await expect(
|
||||
page.getByTestId(favItemTestId).getByTestId(favItemAnotherPageTestId)
|
||||
@@ -146,7 +146,10 @@ test('Add new favorite page via sidebar', async ({ page }) => {
|
||||
await openHomePage(page);
|
||||
await waitForEditorLoad(page);
|
||||
|
||||
await page.getByTestId('explorer-bar-add-favorite-button').first().click();
|
||||
await page
|
||||
.getByTestId('navigation-panel-bar-add-favorite-button')
|
||||
.first()
|
||||
.click();
|
||||
await clickPageModeButton(page);
|
||||
await waitForEmptyEditor(page);
|
||||
|
||||
@@ -154,7 +157,7 @@ test('Add new favorite page via sidebar', async ({ page }) => {
|
||||
await getBlockSuiteEditorTitle(page).fill('this is a new fav page');
|
||||
// check if the page title is shown in the favorite list
|
||||
const favItem = page
|
||||
.getByTestId('explorer-favorites')
|
||||
.getByTestId('navigation-panel-favorites')
|
||||
.locator('[draggable] >> text=this is a new fav page');
|
||||
await expect(favItem).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -7,7 +7,9 @@ import { expandCollapsibleSection, pageBack } from './utils';
|
||||
|
||||
test('Create new doc in favorites', async ({ page }) => {
|
||||
const section = await expandCollapsibleSection(page, 'favorites');
|
||||
const newButton = section.getByTestId('explorer-bar-add-favorite-button');
|
||||
const newButton = section.getByTestId(
|
||||
'navigation-panel-bar-add-favorite-button'
|
||||
);
|
||||
await newButton.tap();
|
||||
|
||||
// const testTitleText = 'Test Favorited Doc';
|
||||
@@ -19,7 +21,7 @@ test('Create new doc in favorites', async ({ page }) => {
|
||||
|
||||
await pageBack(page);
|
||||
const section2 = await expandCollapsibleSection(page, 'favorites');
|
||||
const node = section2.getByTestId(`explorer-doc-${docId}`);
|
||||
const node = section2.getByTestId(`navigation-panel-doc-${docId}`);
|
||||
await expect(node).toBeVisible();
|
||||
|
||||
// const label = node.getByText(testTitleText);
|
||||
|
||||
@@ -4,11 +4,13 @@ import { expect, type Locator, type Page } from '@playwright/test';
|
||||
import {
|
||||
expandCollapsibleSection,
|
||||
getAttrOfActiveElement,
|
||||
openExplorerNodeMenu,
|
||||
openNavigationPanelNodeMenu,
|
||||
} from './utils';
|
||||
|
||||
const locateFolder = async (scope: Page | Locator, name: string) => {
|
||||
return scope.locator(`[data-role="explorer-folder"][aria-label="${name}"]`);
|
||||
return scope.locator(
|
||||
`[data-role="navigation-panel-folder"][aria-label="${name}"]`
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -21,7 +23,7 @@ const isRenameInputFocused = async (page: Page) => {
|
||||
|
||||
const createRootFolder = async (page: Page, name: string) => {
|
||||
const section = await expandCollapsibleSection(page, 'organize');
|
||||
await section.getByTestId('explorer-bar-add-organize-button').tap();
|
||||
await section.getByTestId('navigation-panel-bar-add-organize-button').tap();
|
||||
const dialog = page.getByRole('dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
await isRenameInputFocused(page);
|
||||
@@ -33,7 +35,7 @@ const createRootFolder = async (page: Page, name: string) => {
|
||||
};
|
||||
|
||||
const createSubFolder = async (page: Page, parent: Locator, name: string) => {
|
||||
const menu = await openExplorerNodeMenu(page, parent);
|
||||
const menu = await openNavigationPanelNodeMenu(page, parent);
|
||||
await menu.getByTestId('create-subfolder').tap();
|
||||
|
||||
const dialog = page.getByRole('dialog');
|
||||
@@ -64,7 +66,7 @@ test('create a folder and rename it', async ({ page }) => {
|
||||
const appendedName = ' Renamed';
|
||||
|
||||
const folder = await createRootFolder(page, originalName);
|
||||
const menu = await openExplorerNodeMenu(page, folder);
|
||||
const menu = await openNavigationPanelNodeMenu(page, folder);
|
||||
await menu.getByTestId('rename-folder').tap();
|
||||
await isRenameInputFocused(page);
|
||||
await page.keyboard.type(appendedName);
|
||||
|
||||
@@ -4,15 +4,17 @@ import { expect, type Locator, type Page } from '@playwright/test';
|
||||
import {
|
||||
expandCollapsibleSection,
|
||||
getAttrOfActiveElement,
|
||||
openExplorerNodeMenu,
|
||||
openNavigationPanelNodeMenu,
|
||||
} from './utils';
|
||||
|
||||
async function locateTag(scope: Page | Locator, name: string) {
|
||||
return scope.locator(`[data-role="explorer-tag"][aria-label="${name}"]`);
|
||||
return scope.locator(
|
||||
`[data-role="navigation-panel-tag"][aria-label="${name}"]`
|
||||
);
|
||||
}
|
||||
|
||||
async function getExplorerTagColor(tagNode: Locator) {
|
||||
const icon = tagNode.getByTestId('explorer-tag-icon-dot');
|
||||
async function getNavigationPanelTagColor(tagNode: Locator) {
|
||||
const icon = tagNode.getByTestId('navigation-panel-tag-icon-dot');
|
||||
await expect(icon).toBeVisible();
|
||||
const color = await icon.evaluate(el => el.style.backgroundColor);
|
||||
return color;
|
||||
@@ -33,7 +35,7 @@ async function createRootTag(
|
||||
color = 'var(--affine-palette-line-red)'
|
||||
) {
|
||||
const section = await expandCollapsibleSection(page, 'tags');
|
||||
await section.getByTestId('explorer-add-tag-button').tap();
|
||||
await section.getByTestId('navigation-panel-add-tag-button').tap();
|
||||
const dialog = page.getByRole('dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
// input name
|
||||
@@ -47,21 +49,21 @@ async function createRootTag(
|
||||
const tag = await locateTag(section, name);
|
||||
await expect(tag).toBeVisible();
|
||||
// check tag color
|
||||
const fill = await getExplorerTagColor(tag);
|
||||
const fill = await getNavigationPanelTagColor(tag);
|
||||
expect(fill).toEqual(color);
|
||||
return tag;
|
||||
}
|
||||
|
||||
test('create a tag from explorer', async ({ page }) => {
|
||||
test('create a tag from navigation panel', async ({ page }) => {
|
||||
await createRootTag(page, 'Test Tag');
|
||||
});
|
||||
|
||||
test('rename a tag from explorer', async ({ page }) => {
|
||||
test('rename a tag from navigation panel', async ({ page }) => {
|
||||
const originalName = 'Test Tag';
|
||||
const appendedName = ' Renamed';
|
||||
|
||||
const tag = await createRootTag(page, originalName);
|
||||
const menu = await openExplorerNodeMenu(page, tag);
|
||||
const menu = await openNavigationPanelNodeMenu(page, tag);
|
||||
await menu.getByTestId('rename-tag').tap();
|
||||
const focusedTestid = await getAttrOfActiveElement(page);
|
||||
expect(focusedTestid).toEqual('rename-input');
|
||||
@@ -72,16 +74,16 @@ test('rename a tag from explorer', async ({ page }) => {
|
||||
await expect(renamedTag).toBeVisible();
|
||||
});
|
||||
|
||||
test('change tag color from explorer', async ({ page }) => {
|
||||
test('change tag color from navigation panel', async ({ page }) => {
|
||||
const newColor = 'var(--affine-palette-line-green)';
|
||||
const tagName = 'Test Tag';
|
||||
const tag = await createRootTag(page, tagName);
|
||||
const menu = await openExplorerNodeMenu(page, tag);
|
||||
const menu = await openNavigationPanelNodeMenu(page, tag);
|
||||
await menu.getByTestId('rename-tag').tap();
|
||||
await changeTagColor(menu, newColor);
|
||||
await menu.getByTestId('rename-confirm').tap();
|
||||
|
||||
const updatedTag = await locateTag(page, tagName);
|
||||
const fill = await getExplorerTagColor(updatedTag);
|
||||
const fill = await getNavigationPanelTagColor(updatedTag);
|
||||
expect(fill).toEqual(newColor);
|
||||
});
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* eslint-disable unicorn/prefer-dom-node-dataset */
|
||||
import { expect, type Locator, type Page } from '@playwright/test';
|
||||
|
||||
export async function expandCollapsibleSection(page: Page, name: string) {
|
||||
const divider = page.locator(`[data-collapsible]:has-text("${name}")`);
|
||||
// oxlint-disable-next-line prefer-dom-node-dataset
|
||||
if ((await divider.getAttribute('data-collapsed')) === 'true') {
|
||||
await divider.click();
|
||||
}
|
||||
@@ -32,10 +32,10 @@ export async function getAttrOfActiveElement(
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the context menu of an explorer node
|
||||
* Open the context menu of an navigation panel node
|
||||
* @returns Menu Locator
|
||||
*/
|
||||
export async function openExplorerNodeMenu(page: Page, node: Locator) {
|
||||
export async function openNavigationPanelNodeMenu(page: Page, node: Locator) {
|
||||
await node.getByTestId('menu-trigger').tap();
|
||||
const menu = page.getByRole('dialog');
|
||||
await expect(menu).toBeVisible();
|
||||
@@ -49,7 +49,8 @@ export async function openTab(
|
||||
const tab = page.locator('#app-tabs').getByRole('tab', { name });
|
||||
await expect(tab).toBeVisible();
|
||||
await tab.click();
|
||||
// eslint-disable-next-line unicorn/prefer-dom-node-dataset
|
||||
|
||||
// oxlint-disable-next-line prefer-dom-node-dataset
|
||||
const isActive = await tab.getAttribute('data-active');
|
||||
expect(isActive).toBe('true');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user