tse

Author: elijah-potter

packages/chrome-plugin/tests/hn.spec.ts

@@ -1,10 +1,12 @@
-import { test } from './fixtures';
+import { expect, test } from './fixtures';
 import {
 	assertHarperHighlightBoxes,
+	getHarperHighlightBoxes,
 	getTextarea,
 	replaceEditorContent,
 	testBasicSuggestionTextarea,
 	testCanIgnoreTextareaSuggestion,
+	waitForAnyHarperHighlight,
 } from './testUtils';
 
 const TEST_PAGE_URL = 'https://news.ycombinator.com/item?id=45453448';
@@ -42,5 +44,24 @@ test('Hacker News scrolls correctly', async ({ page }) => {
 		'This is a test of the the Harper grammar checker, specifically if \n\n\n\n\n\n\n\n\n\n\n\n\nit scrolls beyo nd the height of the buffer.',
 	);
 
-	await assertHarperHighlightBoxes(page, [{ x: 216.625, y: 217, width: 56, height: 19 }]);
+	await waitForAnyHarperHighlight(page);
+
+	const [highlight] = await getHarperHighlightBoxes(page);
+	const editorBox = await editor.boundingBox();
+	const scrollTop = await editor.evaluate((el) => el.scrollTop);
+
+	expect(highlight).toBeDefined();
+	expect(editorBox).not.toBeNull();
+	expect(scrollTop).toBeGreaterThan(0);
+
+	if (highlight && editorBox) {
+		const editorBottom = editorBox.y + editorBox.height;
+		const highlightBottom = highlight.y + highlight.height;
+		const relativeY = highlight.y - editorBox.y;
+		const maxRelative = editorBox.height - highlight.height;
+
+		expect(highlight.x).toBeGreaterThanOrEqual(editorBox.x - 9);
+		expect(highlightBottom).toBeLessThanOrEqual(editorBottom + 9);
+		expect(relativeY).toBeGreaterThan(maxRelative * 0.6);
+	}
 });

packages/chrome-plugin/tests/testUtils.ts

@@ -129,16 +129,42 @@ export async function assertHarperHighlightBoxes(page: Page, boxes: Box[]): Prom
 	const highlightCount = await highlights.count();
 	expect(highlightCount).toBe(boxes.length);
 
+	const actualBoxes: Box[] = [];
+
 	for (let i = 0; i < highlightCount; i++) {
 		const box = await highlights.nth(i).boundingBox();
+		expect(box).not.toBeNull();
+		if (box != null) {
+			actualBoxes.push(box as Box);
+		}
+	}
 
-		console.log(`Expected: ${JSON.stringify(boxes[i])}`);
-		console.log(`Got: ${JSON.stringify(box)}`);
+	const expectedSorted = sortBoxes(boxes);
+	const actualSorted = sortBoxes(actualBoxes);
 
-		assertBoxesClose(box, boxes[i]);
+	for (let i = 0; i < expectedSorted.length; i++) {
+		console.log(`Expected: ${JSON.stringify(expectedSorted[i])}`);
+		console.log(`Got: ${JSON.stringify(actualSorted[i])}`);
+		assertBoxesClose(actualSorted[i], expectedSorted[i]);
 	}
 }
 
+function sortBoxes(values: Box[]): Box[] {
+	return [...values].sort((a, b) => {
+		if (a == null || b == null) return 0;
+		if (a.y !== b.y) {
+			return a.y - b.y;
+		}
+		if (a.x !== b.x) {
+			return a.x - b.x;
+		}
+		if (a.width !== b.width) {
+			return a.width - b.width;
+		}
+		return a.height - b.height;
+	});
+}
+
 /** An assertion that checks to ensure that two boxes are _approximately_ equal.
  * Leaves wiggle room for floating point error. */
 export function assertBoxesClose(a: Box, b: Box) {
@@ -148,6 +174,19 @@ export function assertBoxesClose(a: Box, b: Box) {
 	assertClose(a.height, b.height);
 }
 
+export async function getHarperHighlightBoxes(page: Page): Promise<Box[]> {
+	const highlights = getHarperHighlights(page);
+	const count = await highlights.count();
+	const boxes: Box[] = [];
+	for (let i = 0; i < count; i++) {
+		const box = await highlights.nth(i).boundingBox();
+		if (box != null) {
+			boxes.push(box as Box);
+		}
+	}
+	return boxes;
+}
+
 function assertClose(actual: number, expected: number) {
 	expect(Math.abs(actual - expected)).toBeLessThanOrEqual(9);
 }