2024-02-22 12:37:55 +03:00
|
|
|
/* eslint-disable unicorn/prefer-dom-node-dataset */
|
|
|
|
import { test } from '@affine-test/kit/playwright';
|
2024-02-23 10:55:43 +03:00
|
|
|
import {
|
|
|
|
openHomePage,
|
|
|
|
openJournalsPage,
|
|
|
|
} from '@affine-test/kit/utils/load-page';
|
2024-02-23 17:14:41 +03:00
|
|
|
import {
|
2024-10-24 10:38:45 +03:00
|
|
|
addDatabase,
|
|
|
|
addDatabaseRow,
|
2024-02-23 17:14:41 +03:00
|
|
|
clickNewPageButton,
|
2024-10-24 10:38:45 +03:00
|
|
|
createLinkedPage,
|
2024-02-23 17:14:41 +03:00
|
|
|
dragTo,
|
|
|
|
waitForEditorLoad,
|
|
|
|
waitForEmptyEditor,
|
|
|
|
} from '@affine-test/kit/utils/page-logic';
|
2024-02-22 12:37:55 +03:00
|
|
|
import {
|
|
|
|
addCustomProperty,
|
|
|
|
changePropertyVisibility,
|
|
|
|
clickPropertyValue,
|
|
|
|
closeTagsEditor,
|
2024-02-26 17:11:24 +03:00
|
|
|
ensurePagePropertiesVisible,
|
2024-02-22 12:37:55 +03:00
|
|
|
expectTagsVisible,
|
|
|
|
getPropertyValueLocator,
|
|
|
|
openTagsEditor,
|
|
|
|
openWorkspaceProperties,
|
|
|
|
removeSelectedTag,
|
|
|
|
searchAndCreateTag,
|
2024-10-17 16:48:45 +03:00
|
|
|
togglePropertyListVisibility,
|
2024-02-22 12:37:55 +03:00
|
|
|
} from '@affine-test/kit/utils/properties';
|
|
|
|
import { expect } from '@playwright/test';
|
|
|
|
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2024-02-23 17:14:41 +03:00
|
|
|
await clickNewPageButton(page);
|
|
|
|
await waitForEmptyEditor(page);
|
2024-02-26 17:11:24 +03:00
|
|
|
await ensurePagePropertiesVisible(page);
|
2024-02-22 12:37:55 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
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']);
|
|
|
|
});
|
|
|
|
|
2024-07-02 17:25:51 +03:00
|
|
|
test('allow using keyboard to navigate tags', async ({ page }) => {
|
|
|
|
await openTagsEditor(page);
|
|
|
|
await searchAndCreateTag(page, 'Test1');
|
|
|
|
await searchAndCreateTag(page, 'Test2');
|
|
|
|
|
|
|
|
await page.keyboard.press('ArrowLeft');
|
|
|
|
await page.keyboard.press('Backspace');
|
|
|
|
await closeTagsEditor(page);
|
|
|
|
await expectTagsVisible(page, ['Test1']);
|
|
|
|
|
|
|
|
await openTagsEditor(page);
|
|
|
|
await page.keyboard.press('ArrowDown');
|
|
|
|
await page.keyboard.press('ArrowDown');
|
|
|
|
await page.keyboard.press('Enter');
|
|
|
|
await closeTagsEditor(page);
|
|
|
|
await expectTagsVisible(page, ['Test1', 'Test2']);
|
|
|
|
});
|
|
|
|
|
2024-02-23 10:55:43 +03:00
|
|
|
test('allow create tag on journals page', async ({ page }) => {
|
|
|
|
await openJournalsPage(page);
|
2024-02-23 17:14:41 +03:00
|
|
|
await waitForEditorLoad(page);
|
2024-02-26 17:11:24 +03:00
|
|
|
await ensurePagePropertiesVisible(page);
|
2024-02-23 17:14:41 +03:00
|
|
|
|
2024-02-23 10:55:43 +03:00
|
|
|
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']);
|
|
|
|
});
|
|
|
|
|
2024-02-22 12:37:55 +03:00
|
|
|
test('add custom property', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
|
|
|
await addCustomProperty(page, page, 'number');
|
|
|
|
await addCustomProperty(page, page, 'date');
|
|
|
|
await addCustomProperty(page, page, 'checkbox');
|
|
|
|
await addCustomProperty(page, page, 'createdBy');
|
|
|
|
await addCustomProperty(page, page, 'updatedBy');
|
2024-02-22 12:37:55 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
test('add custom property & edit', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'checkbox');
|
2024-02-22 12:37:55 +03:00
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
getPropertyValueLocator(page, 'checkbox').locator('input')
|
2024-02-22 12:37:55 +03:00
|
|
|
).not.toBeChecked();
|
2024-10-15 13:17:11 +03:00
|
|
|
await clickPropertyValue(page, 'checkbox');
|
2024-02-22 12:37:55 +03:00
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
getPropertyValueLocator(page, 'checkbox').locator('input')
|
2024-02-22 12:37:55 +03:00
|
|
|
).toBeChecked();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('property table reordering', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
|
|
|
await addCustomProperty(page, page, 'number');
|
|
|
|
await addCustomProperty(page, page, 'date');
|
|
|
|
await addCustomProperty(page, page, 'checkbox');
|
|
|
|
await addCustomProperty(page, page, 'createdBy');
|
|
|
|
await addCustomProperty(page, page, 'updatedBy');
|
2024-02-22 12:37:55 +03:00
|
|
|
|
|
|
|
await dragTo(
|
|
|
|
page,
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid="doc-property-name"]:has-text("Text")'),
|
2024-02-22 12:37:55 +03:00
|
|
|
page.locator(
|
2024-10-15 13:17:11 +03:00
|
|
|
'[data-testid="doc-property-name"]:has-text("Checkbox") + div'
|
|
|
|
),
|
|
|
|
'bottom'
|
2024-02-22 12:37:55 +03:00
|
|
|
);
|
|
|
|
|
2024-10-24 10:38:45 +03:00
|
|
|
// new order should be Doc mode, (Tags), Created at, Updated at, Number, Date, Checkbox, Text
|
2024-02-22 12:37:55 +03:00
|
|
|
for (const [index, property] of [
|
|
|
|
'Tags',
|
2024-10-21 12:41:45 +03:00
|
|
|
'Doc mode',
|
|
|
|
'Journal',
|
2024-10-24 10:38:45 +03:00
|
|
|
'Created at',
|
|
|
|
'Updated at',
|
2024-10-31 08:01:52 +03:00
|
|
|
'Created by',
|
2024-02-22 12:37:55 +03:00
|
|
|
'Number',
|
|
|
|
'Date',
|
|
|
|
'Checkbox',
|
|
|
|
'Text',
|
2024-09-02 12:37:39 +03:00
|
|
|
'Created by',
|
|
|
|
'Last edited by',
|
2024-02-22 12:37:55 +03:00
|
|
|
].entries()) {
|
|
|
|
await expect(
|
|
|
|
page
|
2024-10-15 13:17:11 +03:00
|
|
|
.getByTestId('doc-property-row')
|
2024-02-22 12:37:55 +03:00
|
|
|
.nth(index)
|
2024-10-15 13:17:11 +03:00
|
|
|
.getByTestId('doc-property-name')
|
2024-02-22 12:37:55 +03:00
|
|
|
).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 }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
|
|
|
await addCustomProperty(page, page, 'number');
|
|
|
|
await addCustomProperty(page, page, 'date');
|
|
|
|
await addCustomProperty(page, page, 'checkbox');
|
|
|
|
await addCustomProperty(page, page, 'createdBy');
|
|
|
|
await addCustomProperty(page, page, 'updatedBy');
|
2024-02-22 12:37:55 +03:00
|
|
|
|
2024-10-15 13:17:11 +03:00
|
|
|
await changePropertyVisibility(page, 'Text', 'always-hide');
|
|
|
|
|
|
|
|
await expect(page.getByTestId('property-collapsible-button')).toBeVisible();
|
|
|
|
await page.click('[data-testid="property-collapsible-button"]');
|
2024-02-22 12:37:55 +03:00
|
|
|
|
|
|
|
for (const [index, property] of [
|
2024-10-15 13:17:11 +03:00
|
|
|
'Tags',
|
2024-10-21 12:41:45 +03:00
|
|
|
'Doc mode',
|
|
|
|
'Journal',
|
2024-10-24 10:38:45 +03:00
|
|
|
'Created at',
|
|
|
|
'Updated at',
|
2024-10-31 08:01:52 +03:00
|
|
|
'Created by',
|
2024-02-22 12:37:55 +03:00
|
|
|
'Text',
|
|
|
|
'Number',
|
|
|
|
'Date',
|
|
|
|
'Checkbox',
|
2024-09-02 12:37:39 +03:00
|
|
|
'Created by',
|
|
|
|
'Last edited by',
|
2024-02-22 12:37:55 +03:00
|
|
|
].entries()) {
|
|
|
|
await expect(
|
|
|
|
page
|
2024-10-15 13:17:11 +03:00
|
|
|
.getByTestId('doc-property-row')
|
2024-02-22 12:37:55 +03:00
|
|
|
.nth(index)
|
2024-10-15 13:17:11 +03:00
|
|
|
.getByTestId('doc-property-name')
|
2024-02-22 12:37:55 +03:00
|
|
|
).toHaveText(property);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
test('change page properties visibility', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
|
|
|
await addCustomProperty(page, page, 'number');
|
|
|
|
await addCustomProperty(page, page, 'date');
|
|
|
|
await addCustomProperty(page, page, 'checkbox');
|
2024-10-17 16:48:45 +03:00
|
|
|
await togglePropertyListVisibility(page);
|
2024-02-22 12:37:55 +03:00
|
|
|
|
|
|
|
// add some number to number property
|
|
|
|
await clickPropertyValue(page, 'Number');
|
|
|
|
await page.locator('input[type=number]').fill('123');
|
|
|
|
|
2024-10-15 13:17:11 +03:00
|
|
|
await changePropertyVisibility(page, 'Text', 'always-hide');
|
|
|
|
await changePropertyVisibility(page, 'Number', 'hide-when-empty');
|
2024-02-22 12:37:55 +03:00
|
|
|
|
|
|
|
// text property should not be visible
|
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid="doc-property-name"]:has-text("Text")')
|
2024-02-22 12:37:55 +03:00
|
|
|
).not.toBeVisible();
|
|
|
|
|
|
|
|
// number property should be visible
|
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid="doc-property-name"]:has-text("Number")')
|
2024-02-22 12:37:55 +03:00
|
|
|
).toBeVisible();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('check if added property is also in workspace settings', async ({
|
|
|
|
page,
|
|
|
|
}) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
2024-02-22 12:37:55 +03:00
|
|
|
await openWorkspaceProperties(page);
|
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid=doc-property-manager-item]:has-text("Text")')
|
2024-02-22 12:37:55 +03:00
|
|
|
).toBeVisible();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('edit property name', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
2024-02-22 12:37:55 +03:00
|
|
|
await page
|
2024-10-15 13:17:11 +03:00
|
|
|
.locator('[data-testid="doc-property-name"]:has-text("Text")')
|
2024-02-22 12:37:55 +03:00
|
|
|
.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(
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid=doc-property-manager-item]:has-text("New Text")')
|
2024-02-22 12:37:55 +03:00
|
|
|
).toBeVisible();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('delete property via property popup', async ({ page }) => {
|
2024-10-15 13:17:11 +03:00
|
|
|
await addCustomProperty(page, page, 'text');
|
2024-02-22 12:37:55 +03:00
|
|
|
await page
|
2024-10-15 13:17:11 +03:00
|
|
|
.locator('[data-testid="doc-property-name"]:has-text("Text")')
|
2024-02-22 12:37:55 +03:00
|
|
|
.click();
|
|
|
|
await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
|
|
|
|
await page
|
|
|
|
.locator('[data-radix-menu-content]')
|
|
|
|
.getByRole('menuitem', {
|
2024-10-15 13:17:11 +03:00
|
|
|
name: 'Delete property',
|
2024-02-22 12:37:55 +03:00
|
|
|
})
|
|
|
|
.click();
|
|
|
|
// confirm delete dialog should show
|
2024-10-15 13:17:11 +03:00
|
|
|
await expect(page.getByRole('dialog')).toBeVisible();
|
2024-02-22 12:37:55 +03:00
|
|
|
await page
|
|
|
|
.getByRole('button', {
|
|
|
|
name: 'Confirm',
|
|
|
|
})
|
|
|
|
.click();
|
|
|
|
// check if the property is removed
|
|
|
|
await expect(
|
2024-10-15 13:17:11 +03:00
|
|
|
page.locator('[data-testid="http://localhost:8080/"]:has-text("Text")')
|
2024-02-22 12:37:59 +03:00
|
|
|
).not.toBeVisible();
|
|
|
|
});
|
2024-10-24 10:38:45 +03:00
|
|
|
|
|
|
|
test('workspace properties can be collapsed', async ({ page }) => {
|
|
|
|
await expect(page.getByTestId('doc-property-row').first()).toBeVisible();
|
|
|
|
await page.getByRole('button', { name: 'Workspace properties' }).click();
|
|
|
|
await expect(page.getByTestId('doc-property-row').first()).not.toBeVisible();
|
|
|
|
await page.getByRole('button', { name: 'Workspace properties' }).click();
|
|
|
|
await expect(page.getByTestId('doc-property-row').first()).toBeVisible();
|
|
|
|
});
|
|
|
|
|
|
|
|
// todo: add more tests for database backlink info for different cell types
|
|
|
|
test('can show database backlink info', async ({ page }) => {
|
|
|
|
const pageTitle = 'some page title';
|
|
|
|
await clickNewPageButton(page, pageTitle);
|
|
|
|
await page.keyboard.press('Enter');
|
|
|
|
|
|
|
|
const databaseTitle = 'some database title';
|
|
|
|
await addDatabase(page, databaseTitle);
|
|
|
|
|
|
|
|
await expect(page.locator('affine-database-title')).toContainText(
|
|
|
|
databaseTitle
|
|
|
|
);
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
page.locator(`affine-database-title:has-text("${databaseTitle}")`)
|
|
|
|
).toBeVisible();
|
|
|
|
|
|
|
|
await addDatabaseRow(page, databaseTitle);
|
|
|
|
|
|
|
|
// the new row's title cell should have been focused at the point of adding the row
|
|
|
|
await createLinkedPage(page, 'linked page');
|
|
|
|
|
|
|
|
// change status label
|
|
|
|
await page.keyboard.press('Escape');
|
|
|
|
await page.keyboard.press('ArrowRight');
|
|
|
|
await page.keyboard.press('Enter');
|
|
|
|
await page.keyboard.type('Done');
|
|
|
|
await page
|
|
|
|
.locator('affine-multi-tag-select .select-option:has-text("Done")')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
// go back to title cell
|
|
|
|
await page.keyboard.press('ArrowLeft');
|
|
|
|
await page.keyboard.press('Enter');
|
|
|
|
|
|
|
|
// goto the linked page
|
|
|
|
await page.locator('.affine-reference-title:has-text("linked page")').click();
|
|
|
|
|
|
|
|
// ensure the page properties are visible
|
|
|
|
await ensurePagePropertiesVisible(page);
|
|
|
|
|
|
|
|
// database backlink property should be rendered, but collapsed
|
|
|
|
const linkedDatabaseSection = page
|
|
|
|
.getByTestId('property-collapsible-section')
|
|
|
|
.filter({
|
|
|
|
hasText: 'some database title',
|
|
|
|
});
|
|
|
|
await expect(linkedDatabaseSection).toBeVisible();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
linkedDatabaseSection.getByTestId('property-collapsible-section-content')
|
|
|
|
).not.toBeVisible();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
linkedDatabaseSection.locator(
|
|
|
|
`.affine-reference-title:has-text("${pageTitle}")`
|
|
|
|
)
|
|
|
|
).toBeVisible();
|
|
|
|
|
|
|
|
// expand the linked database section
|
|
|
|
await linkedDatabaseSection
|
|
|
|
.getByTestId('property-collapsible-section-trigger')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
linkedDatabaseSection.getByTestId('property-collapsible-section-content')
|
|
|
|
).toBeVisible();
|
|
|
|
|
|
|
|
await expect(
|
|
|
|
linkedDatabaseSection
|
|
|
|
.getByTestId('database-backlink-cell')
|
|
|
|
.getByTestId('inline-tags-list')
|
|
|
|
.filter({
|
|
|
|
hasText: 'Done',
|
|
|
|
})
|
|
|
|
).toBeVisible();
|
|
|
|
});
|