refactor(core): rename explorer to navigation-panel (#11876)

This commit is contained in:
EYHN
2025-04-22 12:47:35 +08:00
committed by GitHub
parent f918573ba8
commit e4d6833296
104 changed files with 913 additions and 769 deletions

View File

@@ -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();

View File

@@ -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');

View File

@@ -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();
});

View File

@@ -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();
});