chore: add test for all collection and all tag (#7687)

packages/frontend/core/src/components/page-list/collections/collection-list-header.tsx

@@ -19,7 +19,11 @@ export const CollectionListHeader = ({
         <div className={styles.collectionListHeaderTitle}>
           {t['com.affine.collections.header']()}
         </div>
-        <Button className={styles.newCollectionButton} onClick={onCreate}>
+        <Button
+          className={styles.newCollectionButton}
+          onClick={onCreate}
+          data-testid="all-collection-new-button"
+        >
           {t['com.affine.collections.empty.new-collection-button']()}
         </Button>
       </div>

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -481,6 +481,7 @@ export const CollectionOperationCell = ({
                   </MenuIcon>
                 }
                 type="danger"
+                data-testid="delete-collection"
               >
                 {t['Delete']()}
               </MenuItem>
@@ -490,7 +491,7 @@ export const CollectionOperationCell = ({
             align: 'end',
           }}
         >
-          <IconButton>
+          <IconButton data-testid="collection-item-operation-button">
             <MoreVerticalIcon />
           </IconButton>
         </Menu>
@@ -560,6 +561,7 @@ export const TagOperationCell = ({
               }
               type="danger"
               onSelect={handleDelete}
+              data-testid="delete-tag"
             >
               {t['Delete']()}
             </MenuItem>
@@ -568,7 +570,7 @@ export const TagOperationCell = ({
             align: 'end',
           }}
         >
-          <IconButton>
+          <IconButton data-testid="tag-item-operation-button">
             <MoreVerticalIcon />
           </IconButton>
         </Menu>

packages/frontend/core/src/components/page-list/tags/create-tag.tsx

@@ -134,7 +134,11 @@ export const CreateOrEditTag = ({
   }
 
   return (
-    <div className={styles.createTagWrapper} data-show={open}>
+    <div
+      className={styles.createTagWrapper}
+      data-show={open}
+      data-testid="edit-tag-modal"
+    >
       <Menu
         rootOptions={{
           open: menuOpen,
@@ -154,11 +158,17 @@ export const CreateOrEditTag = ({
         value={tagName}
         onChange={handleChangeName}
         autoFocus
+        data-testid="edit-tag-input"
       />
       <Button className={styles.cancelBtn} onClick={onClose}>
         {t['Cancel']()}
       </Button>
-      <Button variant="primary" onClick={onConfirm} disabled={!tagName}>
+      <Button
+        variant="primary"
+        onClick={onConfirm}
+        disabled={!tagName}
+        data-testid="save-tag"
+      >
         {tagMeta ? t['Save']() : t['Create']()}
       </Button>
     </div>

packages/frontend/core/src/components/page-list/tags/tag-list-header.tsx

@@ -8,7 +8,11 @@ export const TagListHeader = ({ onOpen }: { onOpen: () => void }) => {
   return (
     <div className={styles.tagListHeader}>
       <div className={styles.tagListHeaderTitle}>{t['Tags']()}</div>
-      <Button className={styles.newTagButton} onClick={onOpen}>
+      <Button
+        className={styles.newTagButton}
+        onClick={onOpen}
+        data-testid="all-tags-new-button"
+      >
         {t['com.affine.tags.empty.new-tag-button']()}
       </Button>
     </div>

packages/frontend/core/src/components/page-list/view/create-collection.tsx

@@ -88,7 +88,7 @@ export const CreateCollection = ({
     [isNameEmpty]
   );
   return (
-    <div>
+    <div data-testid="edit-collection-modal">
       <div className={styles.content}>
         <div className={styles.label}>
           {t['com.affine.editCollectionName.name']()}

tests/affine-local/e2e/all-page.spec.ts

@@ -404,3 +404,68 @@ test('select three pages with shiftKey and delete', async ({ page }) => {
 
   expect(await getPagesCount(page)).toBe(pageCount - 3);
 });
+
+test('create a collection and delete it', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+  await page.getByTestId('workspace-collections-button').click();
+
+  // create a collection
+  await page.getByTestId('all-collection-new-button').click();
+  await expect(page.getByTestId('edit-collection-modal')).toBeVisible();
+  await page.getByTestId('input-collection-title').fill('test collection');
+  await page.getByTestId('save-collection').click();
+
+  // check the collection is created
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+  await page.getByTestId('workspace-collections-button').click();
+  const cell = page
+    .getByTestId('collection-list-item')
+    .getByText('test collection');
+  await expect(cell).toBeVisible();
+
+  // delete the collection
+  await page.getByTestId('collection-item-operation-button').click();
+  await page.getByTestId('delete-collection').click();
+  await page.waitForURL(url => url.pathname.endsWith('collection'));
+
+  const newCell = page
+    .getByTestId('collection-list-item')
+    .getByText('test collection');
+  await expect(newCell).not.toBeVisible();
+});
+
+test('create a tag and delete it', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+  await page.getByTestId('workspace-tags-button').click();
+
+  // create a tag
+  await page.getByTestId('all-tags-new-button').click();
+  await expect(page.getByTestId('edit-tag-modal')).toBeVisible();
+  await page.getByTestId('edit-tag-input').fill('test-tag');
+  await page.getByTestId('save-tag').click();
+
+  // check the tag is created
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+  await page.getByTestId('workspace-tags-button').click();
+  const cell = page.getByTestId('tag-list-item').getByText('test-tag');
+  await expect(cell).toBeVisible();
+
+  // delete the tag
+  await page.getByTestId('tag-item-operation-button').click();
+  await page.getByTestId('delete-tag').click();
+  await page.getByTestId('confirm-modal-confirm').getByText('Delete').click();
+  await page.waitForURL(url => url.pathname.endsWith('tag'));
+
+  const newCell = page.getByTestId('tag-list-item').getByText('test-tag');
+  await expect(newCell).not.toBeVisible();
+});