mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 13:01:59 +03:00
test(core): add tests for page info ui (#5769)
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/64419f79-46e8-4171-b853-5908841f827a.png)
This commit is contained in:
parent
bb8e601f82
commit
372b4da884
@ -0,0 +1,58 @@
|
||||
import { ConfirmModal } from '@affine/component';
|
||||
import { WorkspacePropertiesAdapter } from '@affine/core/modules/workspace';
|
||||
import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/workspace/properties/schema';
|
||||
import { Trans } from '@affine/i18n';
|
||||
import { useAFFiNEI18N } from '@affine/i18n/hooks';
|
||||
import { useService } from '@toeverything/infra/di';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { PagePropertiesMetaManager } from './page-properties-manager';
|
||||
|
||||
export const ConfirmDeletePropertyModal = ({
|
||||
onConfirm,
|
||||
onCancel,
|
||||
property,
|
||||
show,
|
||||
}: {
|
||||
property: PageInfoCustomPropertyMeta;
|
||||
show: boolean;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) => {
|
||||
const t = useAFFiNEI18N();
|
||||
const adapter = useService(WorkspacePropertiesAdapter);
|
||||
const count = useMemo(() => {
|
||||
const manager = new PagePropertiesMetaManager(adapter);
|
||||
return manager.getPropertyRelatedPages(property.id)?.size || 0;
|
||||
}, [adapter, property.id]);
|
||||
|
||||
return (
|
||||
<ConfirmModal
|
||||
open={show}
|
||||
closeButtonOptions={{
|
||||
onClick: onCancel,
|
||||
}}
|
||||
title={t['com.affine.settings.workspace.properties.delete-property']()}
|
||||
description={
|
||||
<Trans
|
||||
values={{
|
||||
name: property.name,
|
||||
count,
|
||||
}}
|
||||
i18nKey="com.affine.settings.workspace.properties.delete-property-prompt"
|
||||
>
|
||||
The <strong>{{ name: property.name } as any}</strong> property will be
|
||||
removed from count doc(s). This action cannot be undone.
|
||||
</Trans>
|
||||
}
|
||||
onConfirm={onConfirm}
|
||||
cancelButtonOptions={{
|
||||
onClick: onCancel,
|
||||
}}
|
||||
confirmButtonOptions={{
|
||||
type: 'error',
|
||||
children: t['Confirm'](),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
@ -34,7 +34,7 @@ export const IconsSelectorPanel = ({
|
||||
const t = useAFFiNEI18N();
|
||||
return (
|
||||
<Scrollable.Root>
|
||||
<div className={styles.menuHeader}>
|
||||
<div role="heading" className={styles.menuHeader}>
|
||||
{t['com.affine.page-properties.icons']()}
|
||||
</div>
|
||||
<Scrollable.Viewport className={styles.iconsContainerScrollable}>
|
||||
|
@ -90,7 +90,9 @@ export const EditPropertyNameMenuItem = ({
|
||||
const iconName = getSafeIconName(property.icon, property.type);
|
||||
const onKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
|
||||
e => {
|
||||
if (e.key !== 'Escape') {
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
onBlur(e.currentTarget.value);
|
||||
|
@ -132,6 +132,10 @@ export class PagePropertiesMetaManager {
|
||||
}
|
||||
return mapping;
|
||||
}
|
||||
|
||||
getPropertyRelatedPages(id: string) {
|
||||
return this.getPropertyStatistics().get(id);
|
||||
}
|
||||
}
|
||||
|
||||
export class PagePropertiesManager {
|
||||
|
@ -212,7 +212,7 @@ export const propertyRowCell = style({
|
||||
position: 'relative',
|
||||
borderRadius: 4,
|
||||
fontSize: cssVar('fontSm'),
|
||||
lineHeight: '20px',
|
||||
lineHeight: '22px',
|
||||
userSelect: 'none',
|
||||
':focus-visible': {
|
||||
outline: 'none',
|
||||
|
@ -60,6 +60,7 @@ import {
|
||||
|
||||
import { AffinePageReference } from '../reference-link';
|
||||
import { managerContext, pageInfoCollapsedAtom } from './common';
|
||||
import { ConfirmDeletePropertyModal } from './confirm-delete-property-modal';
|
||||
import {
|
||||
getDefaultIconName,
|
||||
nameToIcon,
|
||||
@ -281,7 +282,11 @@ const VisibilityModeSelector = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div data-required={required} className={styles.selectorButton}>
|
||||
<div
|
||||
role="button"
|
||||
data-required={required}
|
||||
className={styles.selectorButton}
|
||||
>
|
||||
{required ? (
|
||||
t['com.affine.page-properties.property.required']()
|
||||
) : (
|
||||
@ -305,7 +310,11 @@ export const PagePropertiesSettingsPopup = ({
|
||||
const menuItems = useMemo(() => {
|
||||
const options: MenuItemOption[] = [];
|
||||
options.push(
|
||||
<div className={styles.menuHeader} style={{ minWidth: 320 }}>
|
||||
<div
|
||||
role="heading"
|
||||
className={styles.menuHeader}
|
||||
style={{ minWidth: 320 }}
|
||||
>
|
||||
{t['com.affine.page-properties.settings.title']()}
|
||||
</div>
|
||||
);
|
||||
@ -327,7 +336,12 @@ export const PagePropertiesSettingsPopup = ({
|
||||
<MenuIcon>
|
||||
<Icon />
|
||||
</MenuIcon>
|
||||
<div className={styles.propertyRowName}>{name}</div>
|
||||
<div
|
||||
data-testid="page-property-setting-row-name"
|
||||
className={styles.propertyRowName}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
<VisibilityModeSelector property={property} />
|
||||
</SortablePropertyRow>
|
||||
);
|
||||
@ -407,6 +421,8 @@ export const PagePropertyRowNameMenu = ({
|
||||
const [localProperty, setLocalProperty] = useState(() => ({ ...property }));
|
||||
const nextVisibility = rotateVisibility(localProperty.visibility);
|
||||
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
|
||||
const handleFinishEditing = useCallback(() => {
|
||||
onFinishEditing();
|
||||
manager.updateCustomPropertyMeta(meta.id, localPropertyMeta);
|
||||
@ -445,14 +461,9 @@ export const PagePropertyRowNameMenu = ({
|
||||
},
|
||||
[nextVisibility]
|
||||
);
|
||||
const handleDelete = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const handleDelete = useCallback(() => {
|
||||
manager.removeCustomProperty(property.id);
|
||||
},
|
||||
[manager, property.id]
|
||||
);
|
||||
}, [manager, property.id]);
|
||||
|
||||
const handleIconChange = useCallback(
|
||||
(icon: PagePropertyIcon) => {
|
||||
@ -496,12 +507,11 @@ export const PagePropertyRowNameMenu = ({
|
||||
type: 'danger',
|
||||
icon: <DeleteIcon />,
|
||||
text: t['com.affine.page-properties.property.remove-property'](),
|
||||
onClick: handleDelete,
|
||||
onClick: () => setShowDeleteModal(true),
|
||||
});
|
||||
}
|
||||
return renderMenuItemOptions(options);
|
||||
}, [
|
||||
handleDelete,
|
||||
handleIconChange,
|
||||
handleNameBlur,
|
||||
handleNameChange,
|
||||
@ -513,6 +523,7 @@ export const PagePropertyRowNameMenu = ({
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
rootOptions={{
|
||||
open: editing,
|
||||
@ -522,11 +533,26 @@ export const PagePropertyRowNameMenu = ({
|
||||
onClick(e) {
|
||||
e.stopPropagation();
|
||||
},
|
||||
onKeyDown(e) {
|
||||
if (e.key === 'Escape') {
|
||||
handleFinishEditing();
|
||||
}
|
||||
},
|
||||
}}
|
||||
items={menuItems}
|
||||
>
|
||||
{children}
|
||||
</Menu>
|
||||
<ConfirmDeletePropertyModal
|
||||
onConfirm={() => {
|
||||
setShowDeleteModal(false);
|
||||
handleDelete();
|
||||
}}
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
show={showDeleteModal}
|
||||
property={meta}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -607,7 +633,11 @@ export const PagePropertiesTableHeader = ({
|
||||
</div>
|
||||
{properties.length === 0 || manager.readonly ? null : (
|
||||
<PagePropertiesSettingsPopup>
|
||||
<IconButton type="plain" icon={<MoreHorizontalIcon />} />
|
||||
<IconButton
|
||||
data-testid="page-info-show-more"
|
||||
type="plain"
|
||||
icon={<MoreHorizontalIcon />}
|
||||
/>
|
||||
</PagePropertiesSettingsPopup>
|
||||
)}
|
||||
<div className={styles.spacer} />
|
||||
@ -802,7 +832,7 @@ export const PagePropertiesCreatePropertyMenuItems = ({
|
||||
return useMemo(() => {
|
||||
const options: MenuItemOption[] = [];
|
||||
options.push(
|
||||
<div className={styles.menuHeader}>
|
||||
<div role="heading" className={styles.menuHeader}>
|
||||
{t['com.affine.page-properties.create-property.menu.header']()}
|
||||
</div>
|
||||
);
|
||||
@ -864,7 +894,7 @@ const PagePropertiesAddPropertyMenuItems = ({
|
||||
const menuItems = useMemo(() => {
|
||||
const options: MenuItemOption[] = [];
|
||||
options.push(
|
||||
<div className={styles.menuHeader}>
|
||||
<div role="heading" className={styles.menuHeader}>
|
||||
{t['com.affine.page-properties.add-property.menu.header']()}
|
||||
</div>
|
||||
);
|
||||
|
@ -47,7 +47,7 @@ const InlineTagsList = ({
|
||||
children,
|
||||
}: PropsWithChildren<InlineTagsListProps>) => {
|
||||
return (
|
||||
<div className={styles.inlineTagsContainer}>
|
||||
<div className={styles.inlineTagsContainer} data-testid="inline-tags-list">
|
||||
{value.map((tagId, idx) => {
|
||||
const tag = options.find(t => t.id === tagId);
|
||||
if (!tag) {
|
||||
@ -251,7 +251,7 @@ export const TagsEditor = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.tagsEditorRoot}>
|
||||
<div data-testid="tags-editor-popup" className={styles.tagsEditorRoot}>
|
||||
<div className={styles.tagsEditorSelectedTags}>
|
||||
<InlineTagsList
|
||||
options={options}
|
||||
@ -282,6 +282,9 @@ export const TagsEditor = ({
|
||||
<div
|
||||
key={tag.id}
|
||||
className={styles.tagSelectorItem}
|
||||
data-testid="tag-selector-item"
|
||||
data-tag-id={tag.id}
|
||||
data-tag-value={tag.value}
|
||||
onClick={() => {
|
||||
onAddTag(tag.id);
|
||||
}}
|
||||
@ -296,6 +299,7 @@ export const TagsEditor = ({
|
||||
})}
|
||||
{exactMatch || !inputValue ? null : (
|
||||
<div
|
||||
data-testid="tag-selector-item"
|
||||
className={styles.tagSelectorItem}
|
||||
onClick={() => {
|
||||
setInputValue('');
|
||||
|
@ -269,6 +269,7 @@ const WorkspaceListItem = ({
|
||||
.map(({ key, title }) => {
|
||||
return (
|
||||
<div
|
||||
data-testid={`workspace-list-item-${key}`}
|
||||
onClick={() => {
|
||||
onClick(key);
|
||||
}}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Button, ConfirmModal, IconButton, Menu } from '@affine/component';
|
||||
import { Button, IconButton, Menu } from '@affine/component';
|
||||
import { SettingHeader } from '@affine/component/setting-components';
|
||||
import { useWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
|
||||
import { useWorkspace } from '@affine/core/hooks/use-workspace';
|
||||
@ -28,6 +28,7 @@ import {
|
||||
PagePropertiesMetaManager,
|
||||
type PagePropertyIcon,
|
||||
} from '../../../page-properties';
|
||||
import { ConfirmDeletePropertyModal } from '../../../page-properties/confirm-delete-property-modal';
|
||||
import {
|
||||
EditPropertyNameMenuItem,
|
||||
type MenuItemOption,
|
||||
@ -54,57 +55,9 @@ const Divider = () => {
|
||||
return <div className={styles.divider} />;
|
||||
};
|
||||
|
||||
const ConfirmDeletePropertyModal = ({
|
||||
onConfirm,
|
||||
onCancel,
|
||||
property,
|
||||
count,
|
||||
show,
|
||||
}: {
|
||||
property: PageInfoCustomPropertyMeta;
|
||||
count: number;
|
||||
show: boolean;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) => {
|
||||
const t = useAFFiNEI18N();
|
||||
|
||||
return (
|
||||
<ConfirmModal
|
||||
open={show}
|
||||
closeButtonOptions={{
|
||||
onClick: onCancel,
|
||||
}}
|
||||
title={t['com.affine.settings.workspace.properties.delete-property']()}
|
||||
description={
|
||||
<Trans
|
||||
values={{
|
||||
name: property.name,
|
||||
count,
|
||||
}}
|
||||
i18nKey="com.affine.settings.workspace.properties.delete-property-prompt"
|
||||
>
|
||||
The <strong>{{ name: property.name } as any}</strong> property will be
|
||||
removed from count doc(s). This action cannot be undone.
|
||||
</Trans>
|
||||
}
|
||||
onConfirm={onConfirm}
|
||||
cancelButtonOptions={{
|
||||
onClick: onCancel,
|
||||
}}
|
||||
confirmButtonOptions={{
|
||||
type: 'error',
|
||||
children: t['Confirm'](),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const EditPropertyButton = ({
|
||||
property,
|
||||
count,
|
||||
}: {
|
||||
count: number;
|
||||
property: PageInfoCustomPropertyMeta;
|
||||
}) => {
|
||||
const t = useAFFiNEI18N();
|
||||
@ -234,7 +187,6 @@ const EditPropertyButton = ({
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
show={showDeleteModal}
|
||||
property={property}
|
||||
count={count}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -281,7 +233,7 @@ const CustomPropertyRow = ({
|
||||
{t['com.affine.page-properties.property.required']()}
|
||||
</div>
|
||||
) : null}
|
||||
<EditPropertyButton property={property} count={relatedPages.length} />
|
||||
<EditPropertyButton property={property} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -44,6 +44,8 @@ export const TagItem = ({
|
||||
data-testid="page-tag"
|
||||
className={styles.tag}
|
||||
data-idx={idx}
|
||||
data-tag-id={tag.id}
|
||||
data-tag-value={tag.value}
|
||||
title={tag.value}
|
||||
style={style}
|
||||
>
|
||||
@ -59,7 +61,11 @@ export const TagItem = ({
|
||||
/>
|
||||
<div className={styles.tagLabel}>{tag.value}</div>
|
||||
{onRemoved ? (
|
||||
<div className={styles.tagRemove} onClick={handleRemove}>
|
||||
<div
|
||||
data-testid="remove-tag-button"
|
||||
className={styles.tagRemove}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -1107,7 +1107,7 @@
|
||||
"com.affine.page-properties.backlinks": "Backlinks",
|
||||
"com.affine.page-properties.page-info": "Page Info",
|
||||
"com.affine.page-properties.settings.title": "customize properties",
|
||||
"com.affine.page-properties.add-property": "Add a property",
|
||||
"com.affine.page-properties.add-property": "Add property",
|
||||
"com.affine.page-properties.add-property.menu.header": "Properties",
|
||||
"com.affine.page-properties.create-property.menu.header": "Type",
|
||||
"com.affine.page-properties.add-property.menu.create": "Create property",
|
||||
|
@ -106,7 +106,7 @@ test('use monthpicker to modify the month of datepicker', async ({ page }) => {
|
||||
await checkDatePickerMonth(page, nextMonth);
|
||||
});
|
||||
|
||||
test.skip('allow creation of filters by tags', async ({ page }) => {
|
||||
test('allow creation of filters by tags', async ({ page }) => {
|
||||
await openHomePage(page);
|
||||
await waitForEditorLoad(page);
|
||||
await clickSideBarAllPageButton(page);
|
||||
|
@ -137,27 +137,6 @@ test('edit collection and change filter date', async ({ page }) => {
|
||||
expect(await first.textContent()).toBe('123');
|
||||
});
|
||||
|
||||
test.skip('create temporary filter by click tag', async ({ page }) => {
|
||||
await clickNewPageButton(page);
|
||||
await getBlockSuiteEditorTitle(page).click();
|
||||
await getBlockSuiteEditorTitle(page).fill('test page');
|
||||
await page.locator('page-meta-tags').click();
|
||||
await page.locator('.add-tag').click();
|
||||
await page.keyboard.type('TODO Tag');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.keyboard.press('Escape');
|
||||
await page.locator('.tag', { hasText: 'TODO Tag' }).click();
|
||||
const cell = page.getByTestId('page-list-item-title').getByText('test page');
|
||||
await expect(cell).toBeVisible();
|
||||
expect(await page.getByTestId('page-list-item').count()).toBe(1);
|
||||
await page.getByTestId('filter-arg').click();
|
||||
|
||||
await page.getByTestId('multi-select-TODO Tag').click();
|
||||
expect(
|
||||
await page.getByTestId('page-list-item').count()
|
||||
).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
test('add collection from sidebar', async ({ page }) => {
|
||||
await removeOnboardingPages(page);
|
||||
await clickNewPageButton(page);
|
||||
|
@ -48,6 +48,7 @@ test('page delete -> create new page -> refresh page -> new page should be appea
|
||||
page,
|
||||
workspace,
|
||||
}) => {
|
||||
test.slow();
|
||||
await openHomePage(page);
|
||||
await waitForEditorLoad(page);
|
||||
await clickNewPageButton(page);
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { test } from '@affine-test/kit/playwright';
|
||||
import { clickPageModeButton } from '@affine-test/kit/utils/editor';
|
||||
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
||||
import {
|
||||
clickNewPageButton,
|
||||
@ -135,8 +136,9 @@ test("Deleted page's reference will not be shown in sidebar", async ({
|
||||
test('Add new favorite page via sidebar', async ({ page }) => {
|
||||
await openHomePage(page);
|
||||
await waitForEditorLoad(page);
|
||||
await clickNewPageButton(page);
|
||||
|
||||
await page.getByTestId('slider-bar-add-favorite-button').first().click();
|
||||
await clickPageModeButton(page);
|
||||
await waitForEmptyEditor(page);
|
||||
|
||||
// enter random page title
|
||||
|
243
tests/affine-local/e2e/page-properties.spec.ts
Normal file
243
tests/affine-local/e2e/page-properties.spec.ts
Normal file
@ -0,0 +1,243 @@
|
||||
/* eslint-disable unicorn/prefer-dom-node-dataset */
|
||||
import { test } from '@affine-test/kit/playwright';
|
||||
import { clickPageModeButton } from '@affine-test/kit/utils/editor';
|
||||
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
||||
import { dragTo, waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
|
||||
import {
|
||||
addCustomProperty,
|
||||
changePropertyVisibility,
|
||||
clickPropertyValue,
|
||||
closeTagsEditor,
|
||||
expectTagsVisible,
|
||||
getPropertyValueLocator,
|
||||
openTagsEditor,
|
||||
openWorkspaceProperties,
|
||||
removeSelectedTag,
|
||||
searchAndCreateTag,
|
||||
} from '@affine-test/kit/utils/properties';
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await openHomePage(page);
|
||||
await clickPageModeButton(page);
|
||||
await waitForEditorLoad(page);
|
||||
});
|
||||
|
||||
test('allow create tag', async ({ page }) => {
|
||||
await openTagsEditor(page);
|
||||
await searchAndCreateTag(page, 'Test1');
|
||||
await searchAndCreateTag(page, 'Test2');
|
||||
await closeTagsEditor(page);
|
||||
await expectTagsVisible(page, ['Test1', 'Test2']);
|
||||
|
||||
await openTagsEditor(page);
|
||||
await removeSelectedTag(page, 'Test1');
|
||||
await closeTagsEditor(page);
|
||||
await expectTagsVisible(page, ['Test2']);
|
||||
});
|
||||
|
||||
test('add custom property', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await addCustomProperty(page, 'Number');
|
||||
await addCustomProperty(page, 'Date');
|
||||
await addCustomProperty(page, 'Checkbox');
|
||||
});
|
||||
|
||||
test('add custom property & edit', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Checkbox');
|
||||
await expect(
|
||||
getPropertyValueLocator(page, 'Checkbox').locator('input')
|
||||
).not.toBeChecked();
|
||||
await clickPropertyValue(page, 'Checkbox');
|
||||
await expect(
|
||||
getPropertyValueLocator(page, 'Checkbox').locator('input')
|
||||
).toBeChecked();
|
||||
});
|
||||
|
||||
test('property table reordering', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await addCustomProperty(page, 'Number');
|
||||
await addCustomProperty(page, 'Date');
|
||||
await addCustomProperty(page, 'Checkbox');
|
||||
|
||||
await dragTo(
|
||||
page,
|
||||
page.locator('[data-testid="page-property-row-name"]:has-text("Text")'),
|
||||
page.locator(
|
||||
'[data-testid="page-property-row-name"]:has-text("Checkbox") + div'
|
||||
)
|
||||
);
|
||||
|
||||
// new order should be (Tags), Number, Date, Checkbox, Text
|
||||
for (const [index, property] of [
|
||||
'Tags',
|
||||
'Number',
|
||||
'Date',
|
||||
'Checkbox',
|
||||
'Text',
|
||||
].entries()) {
|
||||
await expect(
|
||||
page
|
||||
.getByTestId('page-property-row')
|
||||
.nth(index)
|
||||
.getByTestId('page-property-row-name')
|
||||
).toHaveText(property);
|
||||
}
|
||||
});
|
||||
|
||||
test('page info show more will not should by default when there is no properties', async ({
|
||||
page,
|
||||
}) => {
|
||||
// by default page info show more should not show
|
||||
await expect(page.getByTestId('page-info-show-more')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('page info show more will show all properties', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await addCustomProperty(page, 'Number');
|
||||
await addCustomProperty(page, 'Date');
|
||||
await addCustomProperty(page, 'Checkbox');
|
||||
|
||||
await expect(page.getByTestId('page-info-show-more')).toBeVisible();
|
||||
await page.click('[data-testid="page-info-show-more"]');
|
||||
await expect(
|
||||
page.getByRole('heading', {
|
||||
name: 'customize properties',
|
||||
})
|
||||
).toBeVisible();
|
||||
|
||||
// new order should be (Tags), Number, Date, Checkbox, Text
|
||||
for (const [index, property] of [
|
||||
'Text',
|
||||
'Number',
|
||||
'Date',
|
||||
'Checkbox',
|
||||
].entries()) {
|
||||
await expect(
|
||||
page
|
||||
.getByTestId('page-properties-settings-menu-item')
|
||||
.nth(index)
|
||||
.getByTestId('page-property-setting-row-name')
|
||||
).toHaveText(property);
|
||||
}
|
||||
});
|
||||
|
||||
test('change page properties visibility', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await addCustomProperty(page, 'Number');
|
||||
await addCustomProperty(page, 'Date');
|
||||
await addCustomProperty(page, 'Checkbox');
|
||||
|
||||
// add some number to number property
|
||||
await clickPropertyValue(page, 'Number');
|
||||
await page.locator('input[type=number]').fill('123');
|
||||
|
||||
await changePropertyVisibility(page, 'Text', 'Hide in view');
|
||||
await changePropertyVisibility(page, 'Number', 'Hide in view when empty');
|
||||
|
||||
// text property should not be visible
|
||||
await expect(
|
||||
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
|
||||
).not.toBeVisible();
|
||||
|
||||
// number property should be visible
|
||||
await expect(
|
||||
page.locator('[data-testid="page-property-row-name"]:has-text("Number")')
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('check if added property is also in workspace settings', async ({
|
||||
page,
|
||||
}) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await openWorkspaceProperties(page);
|
||||
await expect(
|
||||
page.locator('[data-testid=custom-property-row]:has-text("Text")')
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('edit property name', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await page
|
||||
.locator('[data-testid="page-property-row-name"]:has-text("Text")')
|
||||
.click();
|
||||
await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
|
||||
await expect(page.locator('[data-radix-menu-content] input')).toHaveValue(
|
||||
'Text'
|
||||
);
|
||||
await page.locator('[data-radix-menu-content] input').fill('New Text');
|
||||
await page.keyboard.press('Enter');
|
||||
await expect(page.locator('[data-radix-menu-content] input')).toHaveValue(
|
||||
'New Text'
|
||||
);
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
// check if the property name is also updated in workspace settings
|
||||
await openWorkspaceProperties(page);
|
||||
await expect(
|
||||
page.locator('[data-testid=custom-property-row]:has-text("New Text")')
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('delete property via property popup', async ({ page }) => {
|
||||
await addCustomProperty(page, 'Text');
|
||||
await page
|
||||
.locator('[data-testid="page-property-row-name"]:has-text("Text")')
|
||||
.click();
|
||||
await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
|
||||
await page
|
||||
.locator('[data-radix-menu-content]')
|
||||
.getByRole('menuitem', {
|
||||
name: 'Remove property',
|
||||
})
|
||||
.click();
|
||||
// confirm delete dialog should show
|
||||
await expect(page.getByRole('dialog')).toContainText(
|
||||
`The "Text" property will be remove from 1 doc(s). This action cannot be undone.`
|
||||
);
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: 'Confirm',
|
||||
})
|
||||
.click();
|
||||
// check if the property is removed
|
||||
await expect(
|
||||
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
|
||||
).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('create a required property', async ({ page }) => {
|
||||
await openWorkspaceProperties(page);
|
||||
await addCustomProperty(page, 'Text', true);
|
||||
|
||||
await page
|
||||
.locator('[data-testid="custom-property-row"]:has-text("Text")')
|
||||
.getByRole('button')
|
||||
.click();
|
||||
|
||||
await page
|
||||
.getByRole('menuitem', {
|
||||
name: 'Set as required property',
|
||||
})
|
||||
.click();
|
||||
|
||||
await expect(
|
||||
page.locator('[data-testid="custom-property-row"]:has-text("Text")')
|
||||
).toContainText('Required');
|
||||
|
||||
// close workspace settings
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
// check if the property is also required in page properties
|
||||
await expect(
|
||||
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
|
||||
).toBeVisible();
|
||||
|
||||
// check if the required property is also listed in the show more menu
|
||||
await page.click('[data-testid="page-info-show-more"]');
|
||||
await expect(
|
||||
page.locator(
|
||||
'[data-testid="page-properties-settings-menu-item"]:has-text("Text")'
|
||||
)
|
||||
).toContainText('Required');
|
||||
});
|
@ -126,8 +126,9 @@ export const createPageWithTag = async (
|
||||
await clickNewPageButton(page);
|
||||
await getBlockSuiteEditorTitle(page).click();
|
||||
await getBlockSuiteEditorTitle(page).fill('test page');
|
||||
await page.locator('page-meta-tags').click();
|
||||
await page.locator('.add-tag').click();
|
||||
await page
|
||||
.locator('[data-testid="page-property-row"][data-property="tags"]')
|
||||
.click();
|
||||
for (const name of options.tags) {
|
||||
await createTag(page, name);
|
||||
}
|
||||
|
@ -26,7 +26,6 @@ export async function clickNewPageButton(page: Page) {
|
||||
await page.getByTestId('sidebar-new-page-button').click({
|
||||
delay: 100,
|
||||
});
|
||||
await expect(page.locator('.doc-title-container-empty')).toBeVisible();
|
||||
await waitForEmptyEditor(page);
|
||||
}
|
||||
|
||||
|
178
tests/kit/utils/properties.ts
Normal file
178
tests/kit/utils/properties.ts
Normal file
@ -0,0 +1,178 @@
|
||||
import { expect, type Page } from '@playwright/test';
|
||||
|
||||
export const getPropertyValueLocator = (page: Page, property: string) => {
|
||||
return page.locator(
|
||||
`[data-testid="page-property-row-name"]:has-text("${property}") + *`
|
||||
);
|
||||
};
|
||||
|
||||
export const clickPropertyValue = async (page: Page, property: string) => {
|
||||
await getPropertyValueLocator(page, property).click();
|
||||
};
|
||||
|
||||
export const openTagsEditor = async (page: Page) => {
|
||||
await clickPropertyValue(page, 'tags');
|
||||
await expect(page.getByTestId('tags-editor-popup')).toBeVisible();
|
||||
};
|
||||
|
||||
export const closeTagsEditor = async (page: Page) => {
|
||||
await page.keyboard.press('Escape');
|
||||
await expect(page.getByTestId('tags-editor-popup')).not.toBeVisible();
|
||||
};
|
||||
|
||||
export const clickTagFromSelector = async (page: Page, name: string) => {
|
||||
// assume that the tags editor is already open
|
||||
await page
|
||||
.locator(`[data-testid="tag-selector-item"][data-tag-value="${name}"]`)
|
||||
.click();
|
||||
};
|
||||
|
||||
export const removeSelectedTag = async (page: Page, name: string) => {
|
||||
await page
|
||||
.locator(
|
||||
`[data-testid="tags-editor-popup"] [data-testid="inline-tags-list"] [data-tag-value="${name}"] [data-testid="remove-tag-button"]`
|
||||
)
|
||||
.click();
|
||||
};
|
||||
|
||||
export const filterTags = async (page: Page, filter: string) => {
|
||||
await page
|
||||
.locator(
|
||||
'[data-testid="tags-editor-popup"] [data-testid="inline-tags-list"] input'
|
||||
)
|
||||
.fill(filter);
|
||||
};
|
||||
|
||||
export const searchAndCreateTag = async (page: Page, name: string) => {
|
||||
await filterTags(page, name);
|
||||
await page
|
||||
.locator(
|
||||
'[data-testid="tags-editor-popup"] [data-testid="tag-selector-item"]:has-text("Create ")'
|
||||
)
|
||||
.click();
|
||||
};
|
||||
|
||||
export const expectTagsVisible = async (page: Page, tags: string[]) => {
|
||||
const tagListPanel = page
|
||||
.getByTestId('page-property-row')
|
||||
.getByTestId('inline-tags-list');
|
||||
|
||||
expect(await tagListPanel.locator('[data-tag-value]').count()).toBe(
|
||||
tags.length
|
||||
);
|
||||
|
||||
for (const tag of tags) {
|
||||
await expect(
|
||||
tagListPanel.locator(`[data-tag-value="${tag}"]`)
|
||||
).toBeVisible();
|
||||
}
|
||||
};
|
||||
|
||||
export const clickAddPropertyButton = async (page: Page) => {
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: 'Add property',
|
||||
})
|
||||
.click();
|
||||
};
|
||||
|
||||
export const addCustomProperty = async (
|
||||
page: Page,
|
||||
type: string,
|
||||
inSettings?: boolean
|
||||
) => {
|
||||
await clickAddPropertyButton(page);
|
||||
if (!inSettings) {
|
||||
await expect(
|
||||
page.getByRole('heading', {
|
||||
name: 'Properties',
|
||||
})
|
||||
).toBeVisible();
|
||||
await page
|
||||
.getByRole('menuitem', {
|
||||
name: 'Create property',
|
||||
})
|
||||
.click();
|
||||
}
|
||||
await expect(
|
||||
page.getByRole('heading', {
|
||||
name: 'Type',
|
||||
})
|
||||
).toBeVisible();
|
||||
await page
|
||||
.getByRole('menuitem', {
|
||||
name: type,
|
||||
})
|
||||
.click();
|
||||
if (!inSettings) {
|
||||
await expect(
|
||||
page
|
||||
.getByRole('menuitem', {
|
||||
name: type,
|
||||
})
|
||||
.locator('.selected')
|
||||
).toBeVisible();
|
||||
await page.keyboard.press('Escape', {
|
||||
delay: 100,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const expectPropertyOrdering = async (
|
||||
page: Page,
|
||||
properties: string[]
|
||||
) => {
|
||||
for (let i = 0; i < properties.length; i++) {
|
||||
await expect(
|
||||
page.locator(`[data-testid="page-property-row-name"])`).nth(i)
|
||||
).toHaveText(properties[i]);
|
||||
}
|
||||
};
|
||||
|
||||
export const openWorkspaceProperties = async (page: Page) => {
|
||||
await page.getByTestId('slider-bar-workspace-setting-button').click();
|
||||
await page
|
||||
.locator('[data-testid="workspace-list-item"] .setting-name')
|
||||
.click();
|
||||
await page.getByTestId('workspace-list-item-properties').click();
|
||||
};
|
||||
|
||||
export const selectVisibilitySelector = async (
|
||||
page: Page,
|
||||
name: string,
|
||||
option: string
|
||||
) => {
|
||||
await page
|
||||
.getByRole('menu')
|
||||
.locator(
|
||||
`[data-testid="page-properties-settings-menu-item"]:has-text("${name}")`
|
||||
)
|
||||
.getByRole('button')
|
||||
.click();
|
||||
|
||||
await page
|
||||
.getByRole('menu')
|
||||
.last()
|
||||
.getByRole('menuitem', {
|
||||
name: option,
|
||||
exact: true,
|
||||
})
|
||||
.click();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
};
|
||||
|
||||
export const changePropertyVisibility = async (
|
||||
page: Page,
|
||||
name: string,
|
||||
option: string
|
||||
) => {
|
||||
await expect(page.getByTestId('page-info-show-more')).toBeVisible();
|
||||
await page.click('[data-testid="page-info-show-more"]');
|
||||
await expect(
|
||||
page.getByRole('heading', {
|
||||
name: 'customize properties',
|
||||
})
|
||||
).toBeVisible();
|
||||
await selectVisibilitySelector(page, name, option);
|
||||
};
|
Loading…
Reference in New Issue
Block a user