mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 12:55:00 +00:00
7436c139ab
Closes: [AF-2132](https://linear.app/affine-design/issue/AF-2132/优化-emoji-title-和-icon-显示)
1000 lines
31 KiB
TypeScript
1000 lines
31 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import { locateModeSwitchButton } from '@affine-test/kit/utils/editor';
|
|
import {
|
|
pasteByKeyboard,
|
|
writeTextToClipboard,
|
|
} from '@affine-test/kit/utils/keyboard';
|
|
import { coreUrl, openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import {
|
|
clickNewPageButton,
|
|
createLinkedPage,
|
|
createTodayPage,
|
|
getBlockSuiteEditorTitle,
|
|
waitForEditorLoad,
|
|
waitForEmptyEditor,
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
import {
|
|
confirmExperimentalPrompt,
|
|
openEditorSetting,
|
|
openExperimentalFeaturesPanel,
|
|
} from '@affine-test/kit/utils/setting';
|
|
import { expect, type Locator, type Page } from '@playwright/test';
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await openHomePage(page);
|
|
await clickNewPageButton(page);
|
|
await waitForEmptyEditor(page);
|
|
});
|
|
|
|
async function enableEmojiDocIcon(page: Page) {
|
|
// Opens settings panel
|
|
await openEditorSetting(page);
|
|
await openExperimentalFeaturesPanel(page);
|
|
await confirmExperimentalPrompt(page);
|
|
|
|
const settingModal = page.locator('[data-testid=setting-modal-content]');
|
|
const item = settingModal.locator('div').getByText('Emoji Doc Icon');
|
|
await item.waitFor({ state: 'attached' });
|
|
await expect(item).toBeVisible();
|
|
const button = item.locator('label');
|
|
const isChecked = await button.locator('input').isChecked();
|
|
if (!isChecked) {
|
|
await button.click();
|
|
}
|
|
|
|
// Closes settings panel
|
|
await page.keyboard.press('Escape');
|
|
}
|
|
|
|
async function notClickable(locator: Locator) {
|
|
await expect(locator).toHaveAttribute('disabled', '');
|
|
}
|
|
|
|
async function clickable(locator: Locator) {
|
|
await expect(locator).not.toHaveAttribute('disabled', '');
|
|
}
|
|
|
|
test('not allowed to switch to embed view when linking to the same document', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
|
|
const url0 = new URL(page.url());
|
|
|
|
await writeTextToClipboard(page, url0.toString());
|
|
await pasteByKeyboard(page);
|
|
|
|
// Inline
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
await inlineToolbar.getByLabel('Switch view').click();
|
|
|
|
await notClickable(inlineToolbar.getByLabel('Inline view'));
|
|
await clickable(inlineToolbar.getByLabel('Card view'));
|
|
await notClickable(inlineToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByLabel('Card view').click();
|
|
|
|
// Card
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await cardLink.dblclick();
|
|
|
|
const peekViewModel = page.getByTestId('peek-view-modal');
|
|
await expect(peekViewModel).toBeVisible();
|
|
await expect(peekViewModel.locator('page-editor')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(peekViewModel).not.toBeVisible();
|
|
await page.click('body');
|
|
|
|
await cardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await notClickable(cardToolbar.getByLabel('Embed view'));
|
|
});
|
|
|
|
test('not allowed to switch to embed view when linking to block', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
// Inline
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
await inlineToolbar.getByLabel('Switch view').click();
|
|
|
|
await notClickable(inlineToolbar.getByLabel('Inline view'));
|
|
await clickable(inlineToolbar.getByLabel('Card view'));
|
|
await clickable(inlineToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByLabel('Card view').click();
|
|
|
|
// Card
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await cardLink.dblclick();
|
|
|
|
const peekViewModel = page.getByTestId('peek-view-modal');
|
|
await expect(peekViewModel).toBeVisible();
|
|
await expect(peekViewModel.locator('page-editor')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(peekViewModel).not.toBeVisible();
|
|
|
|
await page.click('body');
|
|
await cardLink.click();
|
|
|
|
await cardToolbar.getByLabel('More').click();
|
|
await cardToolbar.getByLabel('Copy link to block').click();
|
|
|
|
await page.keyboard.press('Enter');
|
|
await pasteByKeyboard(page);
|
|
|
|
const href0 = await inlineLink.locator('a').getAttribute('href');
|
|
|
|
await inlineLink.hover();
|
|
await inlineToolbar.getByLabel('Switch view').click();
|
|
|
|
await notClickable(inlineToolbar.getByLabel('Inline view'));
|
|
await clickable(inlineToolbar.getByLabel('Card view'));
|
|
await notClickable(inlineToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByLabel('Card view').click();
|
|
|
|
const otherCardLink = page.locator('affine-embed-linked-doc-block').nth(1);
|
|
await otherCardLink.dblclick();
|
|
|
|
await expect(peekViewModel).toBeVisible();
|
|
await expect(peekViewModel.locator('page-editor')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(peekViewModel).not.toBeVisible();
|
|
|
|
await page.click('body');
|
|
await otherCardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await notClickable(cardToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to inline view
|
|
await cardToolbar.getByLabel('Inline view').click();
|
|
|
|
const href1 = await inlineLink.locator('a').getAttribute('href');
|
|
|
|
expect(href0).not.toBeNull();
|
|
expect(href1).not.toBeNull();
|
|
|
|
const url0 = new URL(href0!, coreUrl);
|
|
const url1 = new URL(href1!, coreUrl);
|
|
|
|
url0.searchParams.delete('refreshKey');
|
|
url1.searchParams.delete('refreshKey');
|
|
expect(url0.toJSON()).toStrictEqual(url1.toJSON());
|
|
});
|
|
|
|
test('allow switching to embed view when linking to the other document without mode', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
// Inline
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
await inlineToolbar.getByLabel('Switch view').click();
|
|
|
|
await notClickable(inlineToolbar.getByLabel('Inline view'));
|
|
await clickable(inlineToolbar.getByLabel('Card view'));
|
|
await clickable(inlineToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByLabel('Card view').click();
|
|
|
|
// Card
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await cardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await clickable(cardToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to embed view
|
|
await cardToolbar.getByLabel('Embed view').click();
|
|
|
|
// Embed
|
|
const embedLink = page.locator('affine-embed-synced-doc-block');
|
|
const embedToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await expect(embedLink).toBeVisible();
|
|
await embedLink.click();
|
|
|
|
// refocus
|
|
await embedLink.click();
|
|
await expect(embedToolbar).toBeVisible();
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(embedToolbar.getByLabel('Inline view'));
|
|
await clickable(embedToolbar.getByLabel('Card view'));
|
|
await notClickable(embedToolbar.getByLabel('Embed view'));
|
|
|
|
// Closes
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
await expect(
|
|
page.locator('.affine-embed-synced-doc-container.page')
|
|
).toBeVisible();
|
|
|
|
// Opens in peek view
|
|
await embedLink.dblclick();
|
|
|
|
const peekViewModel = page.getByTestId('peek-view-modal');
|
|
await expect(peekViewModel).toBeVisible();
|
|
await expect(peekViewModel.locator('page-editor')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(peekViewModel).not.toBeVisible();
|
|
await page.waitForTimeout(300);
|
|
|
|
await embedLink.click();
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(embedToolbar.getByLabel('Inline view'));
|
|
await clickable(embedToolbar.getByLabel('Card view'));
|
|
await notClickable(embedToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await embedToolbar.getByLabel('Card view').click();
|
|
|
|
await cardLink.click();
|
|
|
|
// refocus
|
|
await cardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await clickable(cardToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to inline view
|
|
await cardToolbar.getByLabel('Inline view').click();
|
|
|
|
await expect(inlineLink).toBeVisible();
|
|
});
|
|
|
|
test('allow switching to embed view when linking to the other document with mode', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
const url = new URL(page.url());
|
|
url.searchParams.append('mode', 'edgeless');
|
|
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.click();
|
|
|
|
await page.waitForTimeout(300);
|
|
await page.keyboard.press('Enter');
|
|
|
|
await writeTextToClipboard(page, url.toString());
|
|
await pasteByKeyboard(page);
|
|
|
|
// Inline
|
|
await inlineLink.hover();
|
|
await inlineToolbar.getByLabel('Switch view').click();
|
|
|
|
await notClickable(inlineToolbar.getByLabel('Inline view'));
|
|
await clickable(inlineToolbar.getByLabel('Card view'));
|
|
await clickable(inlineToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByLabel('Card view').click();
|
|
await page.waitForTimeout(300);
|
|
|
|
// Card
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await expect(cardLink).toBeVisible();
|
|
await cardLink.click();
|
|
|
|
// refocus
|
|
await cardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await clickable(cardToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to embed view
|
|
await cardToolbar.getByLabel('Embed view').click();
|
|
|
|
// Embed
|
|
const embedLink = page.locator('affine-embed-synced-doc-block');
|
|
const embedToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await expect(embedLink).toBeVisible();
|
|
await embedLink.click();
|
|
|
|
// refocus
|
|
await embedLink.click();
|
|
await expect(embedToolbar).toBeVisible();
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(embedToolbar.getByLabel('Inline view'));
|
|
await clickable(embedToolbar.getByLabel('Card view'));
|
|
await notClickable(embedToolbar.getByLabel('Embed view'));
|
|
|
|
// Closes
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
await expect(
|
|
page.locator('.affine-embed-synced-doc-container.edgeless')
|
|
).toBeVisible();
|
|
|
|
// Opens in peek view
|
|
await embedLink.dblclick();
|
|
|
|
const peekViewModel = page.getByTestId('peek-view-modal');
|
|
await expect(peekViewModel).toBeVisible();
|
|
await expect(peekViewModel.locator('edgeless-editor')).toBeVisible();
|
|
await page.keyboard.press('Escape');
|
|
await expect(peekViewModel).not.toBeVisible();
|
|
await page.waitForTimeout(300);
|
|
|
|
await embedLink.click();
|
|
await embedToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(embedToolbar.getByLabel('Inline view'));
|
|
await clickable(embedToolbar.getByLabel('Card view'));
|
|
await notClickable(embedToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to card view
|
|
await embedToolbar.getByLabel('Card view').click();
|
|
|
|
await cardLink.click();
|
|
await cardToolbar.getByLabel('Switch view').click();
|
|
|
|
await clickable(cardToolbar.getByLabel('Inline view'));
|
|
await notClickable(cardToolbar.getByLabel('Card view'));
|
|
await clickable(cardToolbar.getByLabel('Embed view'));
|
|
|
|
// Switches to inline view
|
|
await cardToolbar.getByLabel('Inline view').click();
|
|
|
|
await inlineLink.click();
|
|
|
|
// Checks the url
|
|
const url2 = new URL(page.url());
|
|
url2.searchParams.delete('refreshKey');
|
|
expect(url.toJSON()).toStrictEqual(url2.toJSON());
|
|
});
|
|
|
|
test('@ popover should show today menu item', async ({ page }) => {
|
|
await page.keyboard.press('Enter');
|
|
await waitForEmptyEditor(page);
|
|
await page.keyboard.press('@');
|
|
await expect(page.locator('.linked-doc-popover')).toBeVisible();
|
|
const todayMenuItem = page.locator('.linked-doc-popover').getByText('Today');
|
|
await expect(todayMenuItem).toBeVisible();
|
|
|
|
const textContent = await todayMenuItem.locator('span').textContent();
|
|
await todayMenuItem.click();
|
|
const date = textContent?.trim();
|
|
|
|
// a affine-reference should be created with name date
|
|
await expect(
|
|
page.locator('affine-reference:has-text("' + date + '")')
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('@ popover with input=tmr', async ({ page }) => {
|
|
await page.keyboard.press('Enter');
|
|
await waitForEmptyEditor(page);
|
|
await page.keyboard.press('@');
|
|
await page.keyboard.type('tmr');
|
|
await expect(page.locator('.linked-doc-popover')).toBeVisible();
|
|
const tomorrowMenuItem = page
|
|
.locator('.linked-doc-popover')
|
|
.getByText('Tomorrow');
|
|
await expect(tomorrowMenuItem).toBeVisible();
|
|
|
|
const textContent = await tomorrowMenuItem.locator('span').textContent();
|
|
await tomorrowMenuItem.click();
|
|
|
|
// a affine-reference should be created with name date
|
|
await expect(
|
|
page.locator('affine-reference:has-text("' + textContent + '")')
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('@ popover with input=dec should create a reference with a December date', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await waitForEmptyEditor(page);
|
|
await page.keyboard.press('@');
|
|
await page.keyboard.type('dc');
|
|
|
|
const decemberMenuItem = page.locator(
|
|
'.linked-doc-popover icon-button:has-text("Dec")'
|
|
);
|
|
await expect(decemberMenuItem).toBeVisible();
|
|
|
|
const textContent = await decemberMenuItem
|
|
.locator('.text-container')
|
|
.textContent();
|
|
await decemberMenuItem.click();
|
|
|
|
// a affine-reference should be created with name date
|
|
await expect(
|
|
page.locator('affine-reference:has-text("' + textContent + '")')
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('@ popover with click "select a specific date" should show a date picker', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await waitForEmptyEditor(page);
|
|
await page.keyboard.press('@');
|
|
|
|
const todayMenuItem = page.locator('.linked-doc-popover').getByText('Today');
|
|
await expect(todayMenuItem).toBeVisible();
|
|
|
|
const textContent = await todayMenuItem.locator('span').textContent();
|
|
const date = textContent?.trim();
|
|
|
|
await page.locator('icon-button:has-text("Select a specific date")').click();
|
|
await expect(
|
|
page.locator('[data-is-date-cell][data-is-today=true]')
|
|
).toBeVisible();
|
|
await page.locator('[data-is-date-cell][data-is-today=true]').click();
|
|
|
|
// a affine-reference should be created with name date
|
|
await expect(
|
|
page.locator('affine-reference:has-text("' + date + '")')
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('linked doc should show markdown preview in the backlink section', async ({
|
|
page,
|
|
}) => {
|
|
await waitForEmptyEditor(page);
|
|
await page.keyboard.type('source page');
|
|
await page.keyboard.press('Enter');
|
|
|
|
await page.keyboard.type('some inline content');
|
|
await page.keyboard.press('Enter');
|
|
|
|
await createLinkedPage(page, 'Test Page');
|
|
await page.locator('affine-reference:has-text("Test Page")').click();
|
|
|
|
await expect(getBlockSuiteEditorTitle(page)).toHaveText('Test Page');
|
|
await page
|
|
.getByRole('button', {
|
|
name: 'Show',
|
|
})
|
|
.click();
|
|
|
|
await page.getByRole('button', { name: 'source page' }).click();
|
|
|
|
await expect(page.locator('text-renderer')).toContainText(
|
|
'some inline content'
|
|
);
|
|
await expect(page.locator('text-renderer')).toContainText('Test Page');
|
|
});
|
|
|
|
test('the viewport should be fit when the linked document is with edgeless mode', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
|
|
await locateModeSwitchButton(page, 'edgeless').click();
|
|
|
|
const note = page.locator('affine-edgeless-note');
|
|
const noteBoundingBox = await note.boundingBox();
|
|
expect(noteBoundingBox).not.toBeNull();
|
|
if (!noteBoundingBox) return;
|
|
|
|
// move viewport
|
|
const { x, y } = noteBoundingBox;
|
|
await page.mouse.click(x, y);
|
|
await page.keyboard.down('Space');
|
|
await page.waitForTimeout(50);
|
|
await page.mouse.down();
|
|
await page.mouse.move(x + 1000, y);
|
|
await page.mouse.up();
|
|
await page.keyboard.up('Space');
|
|
|
|
// create edgeless text
|
|
await page.keyboard.press('t');
|
|
await page.mouse.click(x, y);
|
|
await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
|
|
await page.keyboard.type('Edgeless Text');
|
|
|
|
const url = new URL(page.url());
|
|
|
|
await clickNewPageButton(page);
|
|
await page.keyboard.press('Enter');
|
|
|
|
await writeTextToClipboard(page, url.toString());
|
|
await pasteByKeyboard(page);
|
|
|
|
// Inline
|
|
await page.locator('affine-reference').hover();
|
|
await page.getByLabel('Switch view').click();
|
|
await page.getByTestId('link-to-embed').click();
|
|
|
|
const viewport = await page
|
|
.locator('affine-embed-synced-doc-block')
|
|
.boundingBox();
|
|
expect(viewport).not.toBeNull();
|
|
if (!viewport) return;
|
|
|
|
const edgelessText = await page
|
|
.locator('affine-embed-synced-doc-block affine-edgeless-text')
|
|
.boundingBox();
|
|
expect(edgelessText).not.toBeNull();
|
|
if (!edgelessText) return;
|
|
|
|
// the edgeless text should be in the viewport
|
|
expect(viewport.x).toBeLessThanOrEqual(edgelessText.x);
|
|
expect(viewport.y).toBeLessThanOrEqual(edgelessText.y);
|
|
expect(viewport.x + viewport.width).toBeGreaterThanOrEqual(
|
|
edgelessText.x + edgelessText.width
|
|
);
|
|
expect(viewport.y + viewport.height).toBeGreaterThanOrEqual(
|
|
edgelessText.y + edgelessText.height
|
|
);
|
|
});
|
|
|
|
test('should show edgeless content when switching card view of linked mode doc in edgeless', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
|
|
await locateModeSwitchButton(page, 'edgeless').click();
|
|
|
|
const note = page.locator('affine-edgeless-note');
|
|
const noteBoundingBox = await note.boundingBox();
|
|
expect(noteBoundingBox).not.toBeNull();
|
|
if (!noteBoundingBox) return;
|
|
|
|
// move viewport
|
|
const { x, y } = noteBoundingBox;
|
|
await page.mouse.click(x, y);
|
|
await page.keyboard.down('Space');
|
|
await page.waitForTimeout(50);
|
|
await page.mouse.down();
|
|
await page.mouse.move(x + 1000, y);
|
|
await page.mouse.up();
|
|
await page.keyboard.up('Space');
|
|
|
|
// create edgeless text
|
|
await page.keyboard.press('t');
|
|
await page.mouse.click(x, y);
|
|
await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
|
|
await page.keyboard.type('Edgeless Text');
|
|
|
|
const url = new URL(page.url());
|
|
|
|
await clickNewPageButton(page);
|
|
await locateModeSwitchButton(page, 'edgeless').click();
|
|
|
|
await page.mouse.move(x, y);
|
|
await writeTextToClipboard(page, url.toString());
|
|
await pasteByKeyboard(page);
|
|
|
|
// Inline
|
|
await page
|
|
.locator('affine-embed-edgeless-linked-doc-block')
|
|
.waitFor({ state: 'visible' });
|
|
await page.mouse.click(x - 50, y - 50);
|
|
await page.getByLabel('Switch view').click();
|
|
await page.getByTestId('link-to-embed').click();
|
|
|
|
const viewport = await page
|
|
.locator('affine-embed-edgeless-synced-doc-block')
|
|
.boundingBox();
|
|
expect(viewport).not.toBeNull();
|
|
if (!viewport) return;
|
|
|
|
const edgelessText = await page
|
|
.locator('affine-embed-edgeless-synced-doc-block affine-edgeless-text')
|
|
.boundingBox();
|
|
expect(edgelessText).not.toBeNull();
|
|
if (!edgelessText) return;
|
|
|
|
// the edgeless text should be in the viewport
|
|
expect(viewport.x).toBeLessThanOrEqual(edgelessText.x);
|
|
expect(viewport.y).toBeLessThanOrEqual(edgelessText.y);
|
|
expect(viewport.x + viewport.width).toBeGreaterThanOrEqual(
|
|
edgelessText.x + edgelessText.width
|
|
);
|
|
expect(viewport.y + viewport.height).toBeGreaterThanOrEqual(
|
|
edgelessText.y + edgelessText.height
|
|
);
|
|
});
|
|
|
|
// Aliases & Copy link
|
|
test.describe('Customize linked doc title and description', () => {
|
|
// Inline View
|
|
test('should set a custom title for inline link', async ({ page }) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
const link = page.locator('affine-reference');
|
|
const title = link.locator('.affine-reference-title');
|
|
await link.hover();
|
|
|
|
const toolbar = page.locator('reference-popup');
|
|
|
|
// Copies link
|
|
await toolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url0 = await link.locator('a').getAttribute('href');
|
|
const url1 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
expect(url0).not.toBeNull();
|
|
expect(new URL(url0!, coreUrl).pathname).toBe(new URL(url1).pathname);
|
|
|
|
// Edits title
|
|
await toolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Title alias
|
|
await page.keyboard.type('Test Page Alias');
|
|
await page.keyboard.press('Enter');
|
|
|
|
await expect(title).toHaveText('Test Page Alias');
|
|
|
|
// Original title
|
|
await link.hover();
|
|
const docTitle = toolbar.getByRole('button', { name: 'Doc title' });
|
|
await expect(docTitle).toHaveText('Test Page', { useInnerText: true });
|
|
|
|
// Edits title
|
|
await toolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
const aliasPopup = page.locator('reference-alias-popup');
|
|
|
|
// Input
|
|
await expect(aliasPopup.locator('input')).toHaveValue('Test Page Alias');
|
|
|
|
// Reset
|
|
await aliasPopup.getByRole('button', { name: 'Reset' }).click();
|
|
|
|
await expect(title).toHaveText('Test Page');
|
|
|
|
await link.hover();
|
|
await expect(docTitle).toBeHidden();
|
|
});
|
|
|
|
// Card View
|
|
test('should set a custom title and description for card link', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
|
|
// Copies link
|
|
await inlineToolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url0 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
|
|
// Edits title
|
|
await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Title alias
|
|
await page.keyboard.type('Test Page Alias');
|
|
await page.keyboard.press('Enter');
|
|
|
|
await inlineLink.hover();
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await inlineToolbar.getByRole('button', { name: 'Card view' }).click();
|
|
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardTitle = cardLink.locator(
|
|
'.affine-embed-linked-doc-content-title-text'
|
|
);
|
|
const cardDescription = cardLink.locator(
|
|
'.affine-embed-linked-doc-content-note.alias'
|
|
);
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await cardLink.click();
|
|
|
|
// Copies link
|
|
await cardToolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url1 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
|
|
expect(url0).not.toBeNull();
|
|
expect(url1).not.toBeNull();
|
|
expect(url0).toBe(url1);
|
|
|
|
const docTitle = cardToolbar.getByRole('button', { name: 'Doc title' });
|
|
await expect(docTitle).toHaveText('Test Page', { useInnerText: true });
|
|
await expect(cardTitle).toHaveText('Test Page Alias');
|
|
|
|
// Edits title & description
|
|
await cardToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
const cardEditPopup = page.locator('embed-card-edit-modal');
|
|
|
|
// Title alias
|
|
await page.keyboard.type('Test Page Alias Again');
|
|
await page.keyboard.press('Tab');
|
|
// Description alias
|
|
await page.keyboard.type('This is a new description');
|
|
|
|
// Saves aliases
|
|
await cardEditPopup.getByRole('button', { name: 'Save' }).click();
|
|
await expect(cardTitle).toHaveText('Test Page Alias Again');
|
|
await expect(cardDescription).toHaveText('This is a new description');
|
|
|
|
await cardLink.click();
|
|
|
|
// Switches to inline view
|
|
{
|
|
await cardToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await cardToolbar.getByRole('button', { name: 'Inline view' }).click();
|
|
|
|
// Focuses inline editor
|
|
const bounds = (await inlineLink.boundingBox())!;
|
|
await page.mouse.click(
|
|
bounds.x + bounds.width + 30,
|
|
bounds.y + bounds.height / 2
|
|
);
|
|
|
|
await inlineLink.hover();
|
|
|
|
const title = inlineLink.locator('.affine-reference-title');
|
|
await expect(title).toHaveText('Test Page Alias Again');
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await inlineToolbar.getByRole('button', { name: 'Card view' }).click();
|
|
}
|
|
|
|
await cardLink.click();
|
|
|
|
await cardToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Resets
|
|
await cardEditPopup.getByRole('button', { name: 'Reset' }).click();
|
|
|
|
await expect(cardTitle).toHaveText('Test Page');
|
|
await expect(cardDescription).toBeHidden();
|
|
});
|
|
|
|
// Embed View
|
|
test('should automatically switch to card view and set a custom title and description', async ({
|
|
page,
|
|
}) => {
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
|
|
// Copies link
|
|
await inlineToolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url0 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
|
|
// Switches to card view
|
|
await inlineToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await inlineToolbar.getByRole('button', { name: 'Card view' }).click();
|
|
|
|
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
const cardTitle = cardLink.locator(
|
|
'.affine-embed-linked-doc-content-title-text'
|
|
);
|
|
const cardDescription = cardLink.locator(
|
|
'.affine-embed-linked-doc-content-note.alias'
|
|
);
|
|
const cardToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
await cardLink.click();
|
|
|
|
// Copies link
|
|
await cardToolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url1 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
|
|
// Switches to embed view
|
|
await cardToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await cardToolbar.getByRole('button', { name: 'Embed view' }).click();
|
|
|
|
const embedLink = page.locator('affine-embed-synced-doc-block');
|
|
const embedTitle = embedLink.locator('.affine-embed-synced-doc-title');
|
|
const embedToolbar = page.locator('affine-embed-card-toolbar');
|
|
|
|
// refocus the page
|
|
await embedLink.click();
|
|
|
|
await embedLink.click();
|
|
|
|
// Copies link
|
|
await embedToolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
const url2 = await (
|
|
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
).jsonValue();
|
|
|
|
expect(url0).not.toBeNull();
|
|
expect(url1).not.toBeNull();
|
|
expect(url2).not.toBeNull();
|
|
expect(url0).toBe(url1);
|
|
expect(url1).toBe(url2);
|
|
|
|
// Edits title & description
|
|
await embedToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
const embedEditPopup = page.locator('embed-card-edit-modal');
|
|
|
|
// Title alias
|
|
await page.keyboard.type('Test Page Alias Again');
|
|
await page.keyboard.press('Tab');
|
|
// Description alias
|
|
await page.keyboard.type('This is a new description');
|
|
|
|
// Cancels
|
|
await embedEditPopup.getByRole('button', { name: 'Cancel' }).click();
|
|
await expect(embedEditPopup).toBeHidden();
|
|
|
|
await embedLink.click();
|
|
|
|
// Edits title & description
|
|
await embedToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Title alias
|
|
await page.keyboard.type('Test Page Alias');
|
|
await page.keyboard.press('Tab');
|
|
// Description alias
|
|
await page.keyboard.type('This is a new description');
|
|
|
|
// Saves aliases
|
|
await embedEditPopup.getByRole('button', { name: 'Save' }).click();
|
|
|
|
// Automatically switch to card view
|
|
await expect(embedLink).toBeHidden();
|
|
|
|
await expect(cardTitle).toHaveText('Test Page Alias');
|
|
await expect(cardDescription).toHaveText('This is a new description');
|
|
|
|
await cardLink.click();
|
|
|
|
const docTitle = cardToolbar.getByRole('button', { name: 'Doc title' });
|
|
await expect(docTitle).toHaveText('Test Page', { useInnerText: true });
|
|
await expect(cardTitle).toHaveText('Test Page Alias');
|
|
|
|
// Switches to embed view
|
|
await cardToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await cardToolbar.getByRole('button', { name: 'Embed view' }).click();
|
|
|
|
await expect(embedTitle).toHaveText('Test Page');
|
|
|
|
await embedLink.click();
|
|
|
|
// Switches to inline view
|
|
{
|
|
await embedToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await embedToolbar.getByRole('button', { name: 'Inline view' }).click();
|
|
|
|
// Focuses inline editor
|
|
const bounds = (await inlineLink.boundingBox())!;
|
|
await page.mouse.click(
|
|
bounds.x + bounds.width + 30,
|
|
bounds.y + bounds.height / 2
|
|
);
|
|
|
|
await inlineLink.hover();
|
|
|
|
const title = inlineLink.locator('.affine-reference-title');
|
|
await expect(title).toHaveText('Test Page');
|
|
|
|
// Switches to embed view
|
|
await inlineToolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await inlineToolbar.getByRole('button', { name: 'Embed view' }).click();
|
|
}
|
|
|
|
await embedLink.click();
|
|
|
|
await expect(embedTitle).toHaveText('Test Page');
|
|
await expect(
|
|
embedToolbar.getByRole('button', { name: 'Doc title' })
|
|
).toBeHidden();
|
|
});
|
|
|
|
test('should show emoji doc icon in normal document', async ({ page }) => {
|
|
await waitForEditorLoad(page);
|
|
await enableEmojiDocIcon(page);
|
|
|
|
await clickNewPageButton(page);
|
|
const title = getBlockSuiteEditorTitle(page);
|
|
await title.click();
|
|
|
|
await page.keyboard.press('Enter');
|
|
await createLinkedPage(page, 'Test Page');
|
|
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
|
|
// Edits title
|
|
await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Title alias
|
|
await page.keyboard.type('🦀hello');
|
|
await page.keyboard.press('Enter');
|
|
|
|
const a = inlineLink.locator('a');
|
|
|
|
await expect(a).toHaveText('🦀hello');
|
|
await expect(a.locator('svg')).toBeHidden();
|
|
await expect(a.locator('.affine-reference-title')).toHaveText('hello');
|
|
});
|
|
|
|
test('should show emoji doc icon in journal document', async ({ page }) => {
|
|
await waitForEditorLoad(page);
|
|
await enableEmojiDocIcon(page);
|
|
|
|
await clickNewPageButton(page);
|
|
const title = getBlockSuiteEditorTitle(page);
|
|
await title.click();
|
|
|
|
await page.keyboard.press('Enter');
|
|
await createTodayPage(page);
|
|
|
|
const inlineLink = page.locator('affine-reference');
|
|
const inlineToolbar = page.locator('reference-popup');
|
|
|
|
await inlineLink.hover();
|
|
|
|
// Edits title
|
|
await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
|
|
|
|
// Title alias
|
|
await page.keyboard.type('🦀');
|
|
await page.keyboard.press('Enter');
|
|
|
|
const a = inlineLink.locator('a');
|
|
|
|
const year = String(new Date().getFullYear());
|
|
await expect(a).toContainText('🦀');
|
|
await expect(a.locator('svg')).toBeHidden();
|
|
await expect(a.locator('.affine-reference-title')).toContainText(year);
|
|
});
|
|
});
|