luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore(editor): improve color formatting tests (#10429)

Browse Source
This commit is contained in:
fundon
2025-02-26 08:19:54 +00:00
parent d25b216311
commit c058f94e15
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
tests/affine-local/e2e/blocksuite/toolbar.spec.ts
View File

@@ -13,7 +13,7 @@ test.beforeEach(async ({ page }) => {
await waitForEmptyEditor(page); await waitForEmptyEditor(page);
}); });
test.describe('Format bar', () => { test.describe('Formatting', () => {
test('should change text color', async ({ page }) => { test('should change text color', async ({ page }) => {
await page.keyboard.press('Enter'); await page.keyboard.press('Enter');
@@ -33,7 +33,10 @@ test.describe('Format bar', () => {
.evaluate(e => window.getComputedStyle(e).getPropertyValue('color')); .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
const paragraph = page.locator('affine-paragraph'); const paragraph = page.locator('affine-paragraph');
const textSpan = paragraph.getByText('rld'); const textSpan = paragraph
.locator('affine-text:has-text("rld")')
.locator('span')
.first();
await expect(textSpan).toBeVisible(); await expect(textSpan).toBeVisible();
const fgColor2 = await textSpan.evaluate(e => const fgColor2 = await textSpan.evaluate(e =>
window.getComputedStyle(e).getPropertyValue('color') window.getComputedStyle(e).getPropertyValue('color')
@@ -62,31 +65,40 @@ test.describe('Format bar', () => {
.evaluate(e => window.getComputedStyle(e).getPropertyValue('color')); .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
const paragraph = page.locator('affine-paragraph'); const paragraph = page.locator('affine-paragraph');
const text1Span = paragraph.getByText('rld'); const textSpan1 = paragraph
const fgColor2 = await text1Span.evaluate(e => .locator('affine-text:has-text("rld")')
.locator('span')
.first();
const fgColor2 = await textSpan1.evaluate(e =>
window.getComputedStyle(e).getPropertyValue('color') window.getComputedStyle(e).getPropertyValue('color')
); );
expect(fgColor1).toBe(fgColor2); expect(fgColor1).toBe(fgColor2);
await page.keyboard.press('Shift+ArrowLeft'); await page.keyboard.press('ArrowRight');
await page.keyboard.press('Shift+ArrowLeft');
for (let i = 0; i < 5; i++) {
await page.keyboard.press('Shift+ArrowLeft');
}
await formatBar.locator('.highlight-icon').hover(); await formatBar.locator('.highlight-icon').hover();
const bgYellowButton = formatBar.locator( const yellow = 'var(--affine-text-highlight-yellow)';
'[data-testid="var(--affine-text-highlight-yellow)"]' const bgYellowButton = formatBar.locator(`[data-testid="${yellow}"]`);
);
await bgYellowButton.click(); await bgYellowButton.click();
const bgColor1 = await bgYellowButton
const textSpan2 = paragraph
.locator('affine-text:has-text("wo")')
.locator('span') .locator('span')
.evaluate(e => window.getComputedStyle(e).getPropertyValue('background')); .first();
const text2Span = paragraph.getByText('world'); await expect(textSpan2).toBeVisible();
const bgColor2 = await text2Span.evaluate(e =>
window.getComputedStyle(e).getPropertyValue('background')
);
expect(bgColor1).toBe(bgColor2); const bgColor1 = await textSpan1.evaluate(e => e.style.backgroundColor);
const bgColor2 = await textSpan2.evaluate(e => e.style.backgroundColor);
expect(yellow).toBe(bgColor1);
expect(yellow).toBe(bgColor2);
}); });
}); });