mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-26 14:58:55 +08:00
fix(editor): ci stability (#14704)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Improved Electron shutdown, diagnostics and tab teardown for more reliable exits and forced cleanup on stubborn processes. * **Tests** * Added polling-based test helpers, stronger scroll/page readiness, timeout-tolerant page selection, and async cleanup/worker teardown; updated many tests to wait for UI/model updates and rendering frames. * **Bug Fixes** * Reduced flakiness by awaiting paragraph visibility, nested counts, selection/navigation stability, tab counts, post-action renders, and safer element interactions. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -376,13 +376,28 @@ export async function setEdgelessTool(
|
||||
'shape',
|
||||
false
|
||||
);
|
||||
// Avoid clicking on the shape-element (will trigger dragging mode)
|
||||
await shapeToolButton.click({ position: { x: 5, y: 5 } });
|
||||
const shapeToolBox = await shapeToolButton.boundingBox();
|
||||
if (!shapeToolBox) {
|
||||
throw new Error('shapeToolBox is not found');
|
||||
}
|
||||
|
||||
const squareShapeButton = page
|
||||
.locator('edgeless-slide-menu edgeless-tool-icon-button')
|
||||
await page.mouse.click(shapeToolBox.x + 2, shapeToolBox.y + 2);
|
||||
|
||||
const shapeMenu = page.locator('edgeless-shape-menu');
|
||||
await expect(shapeMenu).toBeVisible();
|
||||
|
||||
const squareShapeButton = shapeMenu
|
||||
.locator('edgeless-tool-icon-button')
|
||||
.filter({ hasText: shape });
|
||||
await squareShapeButton.click();
|
||||
await expect(squareShapeButton).toBeVisible();
|
||||
const squareShapeBox = await squareShapeButton.boundingBox();
|
||||
if (!squareShapeBox) {
|
||||
throw new Error('squareShapeBox is not found');
|
||||
}
|
||||
await page.mouse.click(
|
||||
squareShapeBox.x + squareShapeBox.width / 2,
|
||||
squareShapeBox.y + squareShapeBox.height / 2
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -549,6 +549,7 @@ export async function focusRichText(
|
||||
await page.mouse.move(0, 0);
|
||||
const editor = getEditorHostLocator(page);
|
||||
const locator = editor.locator(RICH_TEXT_SELECTOR).nth(i);
|
||||
await expect(locator).toBeVisible();
|
||||
// need to set `force` to true when clicking on `affine-selected-blocks`
|
||||
await locator.click({ force: true, position: options?.clickPosition });
|
||||
}
|
||||
@@ -1229,43 +1230,37 @@ export async function getCurrentThemeCSSPropertyValue(
|
||||
}
|
||||
|
||||
export async function scrollToTop(page: Page) {
|
||||
await page.mouse.wheel(0, -1000);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
const scrollContainer = document.querySelector('.affine-page-viewport');
|
||||
if (!scrollContainer) {
|
||||
throw new Error("Can't find scroll container");
|
||||
}
|
||||
return scrollContainer.scrollTop < 10;
|
||||
const scrollContainer = page.locator('.affine-page-viewport');
|
||||
await expect(scrollContainer).toBeVisible();
|
||||
await scrollContainer.evaluate(node => {
|
||||
(node as HTMLElement).scrollTop = 0;
|
||||
});
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return await scrollContainer.evaluate(node => {
|
||||
return (node as HTMLElement).scrollTop;
|
||||
});
|
||||
})
|
||||
.toBeLessThan(10);
|
||||
}
|
||||
|
||||
export async function scrollToBottom(page: Page) {
|
||||
// await page.mouse.wheel(0, 1000);
|
||||
|
||||
await page
|
||||
.locator('.affine-page-viewport')
|
||||
.evaluate(node =>
|
||||
node.scrollTo({ left: 0, top: 1000, behavior: 'smooth' })
|
||||
);
|
||||
// TODO switch to `scrollend`
|
||||
// See https://developer.chrome.com/en/blog/scrollend-a-new-javascript-event/
|
||||
await page.waitForFunction(() => {
|
||||
const scrollContainer = document.querySelector('.affine-page-viewport');
|
||||
if (!scrollContainer) {
|
||||
throw new Error("Can't find scroll container");
|
||||
}
|
||||
|
||||
return (
|
||||
// Wait for scrolled to the bottom
|
||||
// Refer to https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom-not-just-the-window-but-any-element
|
||||
Math.abs(
|
||||
scrollContainer.scrollHeight -
|
||||
scrollContainer.scrollTop -
|
||||
scrollContainer.clientHeight
|
||||
) < 10
|
||||
);
|
||||
const scrollContainer = page.locator('.affine-page-viewport');
|
||||
await expect(scrollContainer).toBeVisible();
|
||||
await scrollContainer.evaluate(node => {
|
||||
const viewport = node as HTMLElement;
|
||||
viewport.scrollTop = viewport.scrollHeight;
|
||||
});
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return await scrollContainer.evaluate(node => {
|
||||
const viewport = node as HTMLElement;
|
||||
return Math.abs(
|
||||
viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight
|
||||
);
|
||||
});
|
||||
})
|
||||
.toBeLessThan(10);
|
||||
}
|
||||
|
||||
export async function mockParseDocUrlService(
|
||||
|
||||
@@ -110,10 +110,13 @@ export async function assertEmpty(page: Page) {
|
||||
}
|
||||
|
||||
export async function assertTitle(page: Page, text: string) {
|
||||
const editor = getEditorLocator(page);
|
||||
const inlineEditor = editor.locator('.doc-title-container').first();
|
||||
const vText = inlineEditorInnerTextToString(await inlineEditor.innerText());
|
||||
expect(vText).toBe(text);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const editor = getEditorLocator(page);
|
||||
const inlineEditor = editor.locator('.doc-title-container').first();
|
||||
return inlineEditorInnerTextToString(await inlineEditor.innerText());
|
||||
})
|
||||
.toBe(text);
|
||||
}
|
||||
|
||||
export async function assertInlineEditorDeltas(
|
||||
@@ -121,13 +124,16 @@ export async function assertInlineEditorDeltas(
|
||||
deltas: unknown[],
|
||||
i = 0
|
||||
) {
|
||||
const actual = await page.evaluate(i => {
|
||||
const inlineRoot = document.querySelectorAll<InlineRootElement>(
|
||||
'[data-v-root="true"]'
|
||||
)[i];
|
||||
return inlineRoot.inlineEditor.yTextDeltas;
|
||||
}, i);
|
||||
expect(actual).toEqual(deltas);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return page.evaluate(i => {
|
||||
const inlineRoot = document.querySelectorAll<InlineRootElement>(
|
||||
'[data-v-root="true"]'
|
||||
)[i];
|
||||
return inlineRoot?.inlineEditor.yTextDeltas;
|
||||
}, i);
|
||||
})
|
||||
.toEqual(deltas);
|
||||
}
|
||||
|
||||
export async function assertRichTextInlineDeltas(
|
||||
@@ -135,17 +141,20 @@ export async function assertRichTextInlineDeltas(
|
||||
deltas: unknown[],
|
||||
i = 0
|
||||
) {
|
||||
const actual = await page.evaluate(
|
||||
([i]) => {
|
||||
const editorHost = document.querySelector('editor-host');
|
||||
const inlineRoot = editorHost?.querySelectorAll<InlineRootElement>(
|
||||
'rich-text [data-v-root="true"]'
|
||||
)[i];
|
||||
return inlineRoot?.inlineEditor.yTextDeltas;
|
||||
},
|
||||
[i]
|
||||
);
|
||||
expect(actual).toEqual(deltas);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return page.evaluate(
|
||||
([i]) => {
|
||||
const editorHost = document.querySelector('editor-host');
|
||||
const inlineRoot = editorHost?.querySelectorAll<InlineRootElement>(
|
||||
'rich-text [data-v-root="true"]'
|
||||
)[i];
|
||||
return inlineRoot?.inlineEditor.yTextDeltas;
|
||||
},
|
||||
[i]
|
||||
);
|
||||
})
|
||||
.toEqual(deltas);
|
||||
}
|
||||
|
||||
export async function assertText(page: Page, text: string, i = 0) {
|
||||
@@ -168,7 +177,8 @@ export async function assertRichTexts(page: Page, texts: string[]) {
|
||||
);
|
||||
return richTexts.map(richText => {
|
||||
const editor = richText.inlineEditor as AffineInlineEditor;
|
||||
return editor.yText.toString();
|
||||
const text = editor.yText.toString();
|
||||
return /^\n\s*$/u.test(text) ? '' : text;
|
||||
});
|
||||
});
|
||||
})
|
||||
@@ -352,20 +362,20 @@ export async function assertRichTextModelType(
|
||||
type: string,
|
||||
index = 0
|
||||
) {
|
||||
const actual = await page.evaluate(
|
||||
({ index, BLOCK_ID_ATTR }) => {
|
||||
const editorHost = document.querySelector('editor-host');
|
||||
const richText = editorHost?.querySelectorAll('rich-text')[index];
|
||||
const block = richText?.closest<BlockComponent>(`[${BLOCK_ID_ATTR}]`);
|
||||
|
||||
if (!block) {
|
||||
throw new Error('block component is undefined');
|
||||
}
|
||||
return (block.model as BlockModel<{ type: string }>).props.type;
|
||||
},
|
||||
{ index, BLOCK_ID_ATTR }
|
||||
);
|
||||
expect(actual).toEqual(type);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return page.evaluate(
|
||||
({ index, BLOCK_ID_ATTR }) => {
|
||||
const editorHost = document.querySelector('editor-host');
|
||||
const richText = editorHost?.querySelectorAll('rich-text')[index];
|
||||
const block = richText?.closest<BlockComponent>(`[${BLOCK_ID_ATTR}]`);
|
||||
return (block?.model as BlockModel<{ type: string }> | undefined)
|
||||
?.props.type;
|
||||
},
|
||||
{ index, BLOCK_ID_ATTR }
|
||||
);
|
||||
})
|
||||
.toEqual(type);
|
||||
}
|
||||
|
||||
export async function assertTextFormats(page: Page, resultObj: unknown[]) {
|
||||
@@ -405,16 +415,19 @@ export async function assertBlockChildrenIds(
|
||||
blockId: string,
|
||||
ids: string[]
|
||||
) {
|
||||
const actual = await page.evaluate(
|
||||
({ blockId }) => {
|
||||
const element = document.querySelector(`[data-block-id="${blockId}"]`);
|
||||
// @ts-ignore
|
||||
const model = element.model as BlockModel;
|
||||
return model.children.map(child => child.id);
|
||||
},
|
||||
{ blockId }
|
||||
);
|
||||
expect(actual).toEqual(ids);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return page.evaluate(
|
||||
({ blockId }) => {
|
||||
const element = document.querySelector<BlockComponent>(
|
||||
`[data-block-id="${blockId}"]`
|
||||
);
|
||||
return element?.model.children.map(child => child.id);
|
||||
},
|
||||
{ blockId }
|
||||
);
|
||||
})
|
||||
.toEqual(ids);
|
||||
}
|
||||
|
||||
export async function assertBlockChildrenFlavours(
|
||||
@@ -422,18 +435,19 @@ export async function assertBlockChildrenFlavours(
|
||||
blockId: string,
|
||||
flavours: string[]
|
||||
) {
|
||||
const actual = await page.evaluate(
|
||||
({ blockId }) => {
|
||||
const element = document.querySelector<BlockComponent>(
|
||||
`[data-block-id="${blockId}"]`
|
||||
await expect
|
||||
.poll(async () => {
|
||||
return page.evaluate(
|
||||
({ blockId }) => {
|
||||
const element = document.querySelector<BlockComponent>(
|
||||
`[data-block-id="${blockId}"]`
|
||||
);
|
||||
return element?.model.children.map(child => child.flavour);
|
||||
},
|
||||
{ blockId }
|
||||
);
|
||||
// @ts-ignore
|
||||
const model = element.model as BlockModel;
|
||||
return model.children.map(child => child.flavour);
|
||||
},
|
||||
{ blockId }
|
||||
);
|
||||
expect(actual).toEqual(flavours);
|
||||
})
|
||||
.toEqual(flavours);
|
||||
}
|
||||
|
||||
export async function assertParentBlockId(
|
||||
|
||||
Reference in New Issue
Block a user