Skip to content

Commit

Permalink
e2e(core): add test for display menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@JimmFly
JimmFly committed Mar 25, 2024
1 parent 809c06b commit d06c70d
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 13 deletions.
8 changes: 7 additions & 1 deletion packages/frontend/core/src/components/page-list/components/page-display-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export const PageDisplayMenu = () => {
data-active={group === option.value}
endFix={group === option.value ? <DoneIcon fontSize={'20px'} /> : null}
className={styles.subMenuItem}
data-testid={`group-by-${option.value}`}
>
<span>{option.label}</span>
</MenuItem>
Expand All @@ -109,7 +110,10 @@ export const PageDisplayMenu = () => {
triggerOptions={{ className: styles.subMenuTrigger }}
items={subItems}
>
<div className={styles.subMenuTriggerContent}>
<div
className={styles.subMenuTriggerContent}
data-testid="page-display-grouping-menuItem"
>
<span>{t['com.affine.page.display.grouping']()}</span>
<span className={styles.currentGroupType}>{currentGroupType}</span>
</div>
Expand All @@ -128,6 +132,7 @@ export const PageDisplayMenu = () => {
className={styles.propertyButton}
onClick={option.onClick}
data-active={properties[option.key]}
data-testid={`property-${option.key}`}
>
{option.label}
</Button>
Expand All @@ -149,6 +154,7 @@ export const PageDisplayMenu = () => {
iconPosition="end"
icon={<ArrowDownSmallIcon className={styles.arrowDownSmallIcon} />}
className={styles.headerDisplayButton}
data-testid="page-display-menu-button"
>
{t['com.affine.page.display']()}
</Button>
Expand Down
52 changes: 40 additions & 12 deletions packages/frontend/core/src/components/page-list/group-definitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import { TagService } from '@affine/core/modules/tag';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
import type { DocMeta } from '@blocksuite/store';
import { useService } from '@toeverything/infra/di';
import { useLiveData } from '@toeverything/infra/livedata';
import { useLiveData,useService } from '@toeverything/infra';
import { useAtomValue } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import { type ReactNode, useMemo } from 'react';

import * as styles from './group-definitions.css';
import type { ItemGroupDefinition, ListItem, PageGroupByType } from './types';
import { type DateKey } from './types';
import type { type DateKey,ItemGroupDefinition, ListItem, PageGroupByType } from './types';
import { betweenDaysAgo, withinDaysAgo } from './utils';

export const pageGroupByTypeAtom = atomWithStorage<PageGroupByType>(
Expand All @@ -22,14 +20,21 @@ const GroupLabel = ({
label,
count,
icon,
id,
}: {
label: string | ReactNode;
id: string;
label: string;
count: number;
icon?: ReactNode;
}) => (
<div className={styles.groupLabelWrapper}>
{icon}
<div className={styles.groupLabel}>{label}</div>
<div
className={styles.groupLabel}
data-testid={`group-label-${id}-${count}`}
>
{label}
</div>
<div className={styles.pageCount}>{` · ${count}`}</div>
</div>
);
Expand All @@ -44,39 +49,59 @@ export const useDateGroupDefinitions = <T extends ListItem>(
{
id: 'today',
label: count => (
<GroupLabel label={t['com.affine.today']()} count={count} />
<GroupLabel
id="today"
label={t['com.affine.today']()}
count={count}
/>
),
match: item =>
withinDaysAgo(new Date(item[key] ?? item.createDate ?? ''), 1),
},
{
id: 'yesterday',
label: count => (
<GroupLabel label={t['com.affine.yesterday']()} count={count} />
<GroupLabel
id="yesterday"
label={t['com.affine.yesterday']()}
count={count}
/>
),
match: item =>
betweenDaysAgo(new Date(item[key] ?? item.createDate ?? ''), 1, 2),
},
{
id: 'last7Days',
label: count => (
<GroupLabel label={t['com.affine.last7Days']()} count={count} />
<GroupLabel
id="last7Days"
label={t['com.affine.last7Days']()}
count={count}
/>
),
match: item =>
betweenDaysAgo(new Date(item[key] ?? item.createDate ?? ''), 2, 7),
},
{
id: 'last30Days',
label: count => (
<GroupLabel label={t['com.affine.last30Days']()} count={count} />
<GroupLabel
id="last30Days"
label={t['com.affine.last30Days']()}
count={count}
/>
),
match: item =>
betweenDaysAgo(new Date(item[key] ?? item.createDate ?? ''), 7, 30),
},
{
id: 'moreThan30Days',
label: count => (
<GroupLabel label={t['com.affine.moreThan30Days']()} count={count} />
<GroupLabel
id="moreThan30Days"
label={t['com.affine.moreThan30Days']()}
count={count}
/>
),
match: item =>
!withinDaysAgo(new Date(item[key] ?? item.createDate ?? ''), 30),
Expand All @@ -87,12 +112,13 @@ export const useDateGroupDefinitions = <T extends ListItem>(
};
export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
const tagService = useService(TagService);
const tagMetas = useLiveData(tagService.tagMetas);
const tagMetas = useLiveData(tagService.tagMetas$);
return useMemo(() => {
return tagMetas.map(tag => ({
id: tag.id,
label: count => (
<GroupLabel
id={tag.title}
label={tag.title}
count={count}
icon={
Expand Down Expand Up @@ -120,6 +146,7 @@ export const useFavoriteGroupDefinitions = <
id: 'favourited',
label: count => (
<GroupLabel
id="favourited"
label={t['com.affine.page.group-header.favourited']()}
count={count}
icon={<FavoritedIcon className={styles.favouritedIcon} />}
Expand All @@ -131,6 +158,7 @@ export const useFavoriteGroupDefinitions = <
id: 'notFavourited',
label: count => (
<GroupLabel
id="notFavourited"
label={t['com.affine.page.group-header.not-favourited']()}
count={count}
icon={<FavoriteIcon className={styles.notFavouritedIcon} />}
Expand Down
52 changes: 52 additions & 0 deletions tests/affine-local/e2e/all-page.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
clickNewPageButton,
clickPageMoreActions,
getBlockSuiteEditorTitle,
waitForAllPagesLoad,
waitForEditorLoad,
Expand Down Expand Up @@ -256,3 +257,54 @@ test('select a group of items by clicking "Select All" in group header', async (
`${selectedItemCount} doc(s) selected`
);
});

test('click display button to group pages', async ({ page }) => {
await openHomePage(page);
await waitForEditorLoad(page);
await clickNewPageButton(page);
await getBlockSuiteEditorTitle(page).click();
await getBlockSuiteEditorTitle(page).fill('this is a new page to favorite');

await clickPageMoreActions(page);
const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
await favoriteBtn.click();

await clickSideBarAllPageButton(page);
await waitForAllPagesLoad(page);
// click the display button
await page.locator('[data-testid="page-display-menu-button"]').click();
await page.locator('[data-testid="page-display-grouping-menuItem"]').click();
await page.locator('[data-testid="group-by-favourites"]').click();

// the group header should appear
await expect(
page.locator('[data-testid="group-label-favourited-1"]')
).toBeVisible();

await expect(
page.locator('[data-testid="group-label-notFavourited-1"]')
).toBeVisible();
});

test('select display properties to hide bodyNotes', async ({ page }) => {
await openHomePage(page);
await waitForEditorLoad(page);
await clickNewPageButton(page);
await getBlockSuiteEditorTitle(page).click();
await getBlockSuiteEditorTitle(page).fill(
'this is a new page to test display properties'
);
await page.keyboard.press('Enter', { delay: 10 });
await page.keyboard.insertText('DRAGON BALL: Sparking! ZERO');
await clickSideBarAllPageButton(page);
await waitForAllPagesLoad(page);
const cell = page
.getByTestId('page-list-item')
.getByText('DRAGON BALL: Sparking! ZERO');
await expect(cell).toBeVisible();
await page.locator('[data-testid="page-display-menu-button"]').click();
await page.locator('[data-testid="property-bodyNotes"]').click();
await expect(cell).not.toBeVisible();
await page.locator('[data-testid="property-bodyNotes"]').click();
await expect(cell).toBeVisible();
});

0 comments on commit d06c70d

Please sign in to comment.