mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-17 22:37:04 +08:00
2c4278058b
Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter) ### What's Changed! Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module. * Added `Highlighter` element model * Added `Highlighter` tool * Added `Highlighter` entry to the global toolbar
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import {
|
|
clickEdgelessModeButton,
|
|
clickView,
|
|
dblclickView,
|
|
dragView,
|
|
locateEditorContainer,
|
|
locateToolbar,
|
|
setEdgelessTool,
|
|
} from '@affine-test/kit/utils/editor';
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import {
|
|
clickNewPageButton,
|
|
switchEdgelessTheme,
|
|
waitForEditorLoad,
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
import { expect } from '@playwright/test';
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
await clickNewPageButton(page);
|
|
await clickEdgelessModeButton(page);
|
|
const container = locateEditorContainer(page);
|
|
await container.click();
|
|
});
|
|
|
|
test('should add text to shape, default to pure black', async ({ page }) => {
|
|
await setEdgelessTool(page, 'shape');
|
|
await dragView(page, [100, 300], [200, 400]);
|
|
await dblclickView(page, [150, 350]);
|
|
|
|
await expect(
|
|
page.locator('edgeless-shape-text-editor rich-text')
|
|
).toBeVisible();
|
|
await page.keyboard.type('text');
|
|
await page.keyboard.press('Escape');
|
|
|
|
const toolbar = locateToolbar(page);
|
|
const textColorContainer = toolbar.locator(
|
|
'edgeless-color-picker-button.text-color'
|
|
);
|
|
const textColorBtn = textColorContainer.getByLabel('Text color');
|
|
const blackBtn = textColorContainer
|
|
.locator('edgeless-color-button[active]')
|
|
.getByLabel('Black');
|
|
|
|
await expect(textColorContainer).toBeVisible();
|
|
|
|
await textColorBtn.click();
|
|
await expect(blackBtn).toHaveCount(1);
|
|
|
|
const svgFillColor = await blackBtn.locator('svg').getAttribute('fill');
|
|
expect(svgFillColor).toBe('#000000');
|
|
|
|
await switchEdgelessTheme(page, 'dark');
|
|
|
|
await clickView(page, [150, 350]);
|
|
await textColorBtn.click();
|
|
|
|
await expect(blackBtn).toHaveCount(1);
|
|
|
|
const svgFillColor2 = await blackBtn.locator('svg').getAttribute('fill');
|
|
expect(svgFillColor2).toBe('#000000');
|
|
});
|
|
|
|
test('should add text to shape with pure white', async ({ page }) => {
|
|
await setEdgelessTool(page, 'shape');
|
|
await dragView(page, [100, 300], [200, 400]);
|
|
await dblclickView(page, [150, 350]);
|
|
|
|
await expect(
|
|
page.locator('edgeless-shape-text-editor rich-text')
|
|
).toBeVisible();
|
|
await page.keyboard.type('text');
|
|
await page.keyboard.press('Escape');
|
|
|
|
const toolbar = locateToolbar(page);
|
|
const textColorContainer = toolbar.locator(
|
|
'edgeless-color-picker-button.text-color'
|
|
);
|
|
const textColorBtn = textColorContainer.getByLabel('Text color');
|
|
|
|
let currentColor = await textColorBtn
|
|
.locator('svg rect')
|
|
.getAttribute('fill');
|
|
expect(currentColor).toBe('#000000');
|
|
|
|
await textColorBtn.click();
|
|
|
|
const blackBtn = textColorContainer
|
|
.locator('edgeless-color-button[active]')
|
|
.getByLabel('Black');
|
|
await expect(blackBtn).toHaveCount(1);
|
|
|
|
const whiteBtn = textColorContainer
|
|
.locator('edgeless-color-button')
|
|
.getByLabel('White');
|
|
await whiteBtn.click();
|
|
|
|
currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
|
|
expect(currentColor).toBe('#ffffff');
|
|
|
|
await switchEdgelessTheme(page, 'dark');
|
|
|
|
await clickView(page, [150, 350]);
|
|
|
|
currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
|
|
expect(currentColor).toBe('#ffffff');
|
|
});
|