test(chrome-ext): the simplest possible Textarea

This commit is contained in:
Elijah Potter 2025-07-01 14:48:04 -06:00
parent 49fcf8546d
commit 6d6200373f
4 changed files with 118 additions and 52 deletions

View file

@ -1,48 +1,18 @@
import type { Locator, Page } from '@playwright/test';
import type { Box } from '../src/Box';
import { expect, test } from './fixtures';
import { clickHarperHighlight, getHarperHighlights, replaceEditorContent } from './testUtils';
import { test } from './fixtures';
import {
assertHarperHighlightBoxes,
clickHarperHighlight,
getHarperHighlights,
getTextarea,
replaceEditorContent,
testBasicSuggestionTextarea,
testCanIgnoreTextareaSuggestion,
} from './testUtils';
const TEST_PAGE_URL = 'http://localhost:8081/github_textarea.html';
/** Grab the first `<textarea />` on a page. */
function getTextarea(page: Page): Locator {
return page.locator('textarea');
}
test('Can apply basic suggestion.', async ({ page }) => {
await page.goto(TEST_PAGE_URL);
const editor = getTextarea(page);
await replaceEditorContent(editor, 'This is an test');
await page.waitForTimeout(6000);
await clickHarperHighlight(page);
await page.getByTitle('Replace with "a"').click();
await page.waitForTimeout(3000);
expect(editor).toHaveValue('This is a test');
});
test('Can ignore suggestion.', async ({ page }) => {
await page.goto(TEST_PAGE_URL);
const editor = getTextarea(page);
await replaceEditorContent(editor, 'This is an test');
await page.waitForTimeout(6000);
await clickHarperHighlight(page);
await page.getByTitle('Ignore this lint').click();
await page.waitForTimeout(3000);
// Nothing should change.
expect(editor).toHaveValue('This is an test');
expect(await clickHarperHighlight(page)).toBe(false);
});
testBasicSuggestionTextarea(TEST_PAGE_URL);
testCanIgnoreTextareaSuggestion(TEST_PAGE_URL);
test('Wraps correctly', async ({ page }) => {
await page.goto(TEST_PAGE_URL);
@ -74,13 +44,3 @@ test('Scrolls correctly', async ({ page }) => {
await assertHarperHighlightBoxes(page, [{ width: 58.828125, x: 117.40625, y: 161, height: 18 }]);
});
async function assertHarperHighlightBoxes(page: Page, boxes: Box[]): Promise<void> {
const highlights = getHarperHighlights(page);
expect(await highlights.count()).toBe(boxes.length);
for (let i = 0; i < (await highlights.count()); i++) {
expect(await highlights.nth(i).boundingBox()).toStrictEqual(boxes[i]);
}
}

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<textarea rows="5" cols="33"></textarea>
</body>
</html>

View file

@ -0,0 +1,46 @@
import { test } from './fixtures';
import {
assertHarperHighlightBoxes,
getTextarea,
replaceEditorContent,
testBasicSuggestionTextarea,
testCanIgnoreTextareaSuggestion,
} from './testUtils';
const TEST_PAGE_URL = 'http://localhost:8081/simple_textarea.html';
testBasicSuggestionTextarea(TEST_PAGE_URL);
testCanIgnoreTextareaSuggestion(TEST_PAGE_URL);
test('Wraps correctly', async ({ page }) => {
await page.goto(TEST_PAGE_URL);
const editor = getTextarea(page);
await replaceEditorContent(
editor,
'This is a test of the Harper grammar checker, specifically if \nit is wrapped around a line weirdl y',
);
await page.waitForTimeout(6000);
await assertHarperHighlightBoxes(page, [
{ height: 19, width: 24, x: 241.90625, y: 27 },
{ height: 19, width: 48, x: 233.90625, y: 44 },
{ height: 19, width: 8, x: 281.90625, y: 44 },
{ height: 19, width: 8, x: 10, y: 61 },
]);
});
test('Scrolls correctly', async ({ page }) => {
await page.goto(TEST_PAGE_URL);
const editor = getTextarea(page);
await replaceEditorContent(
editor,
'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 page.waitForTimeout(6000);
await assertHarperHighlightBoxes(page, [{ height: 19, width: 56, x: 97.953125, y: 63 }]);
});

View file

@ -1,4 +1,5 @@
import type { Locator, Page } from '@playwright/test';
import { expect, test } from './fixtures';
/** Locate the [`Slate`](https://www.slatejs.org/examples/richtext) editor on the page. */
export function getSlateEditor(page: Page): Locator {
@ -50,3 +51,56 @@ export async function clickHarperHighlight(page: Page): Promise<boolean> {
await page.mouse.click(cx, cy);
return true;
}
/** Grab the first `<textarea />` on a page. */
export function getTextarea(page: Page): Locator {
return page.locator('textarea');
}
export async function testBasicSuggestionTextarea(testPageUrl: string) {
test('Can apply basic suggestion.', async ({ page }) => {
await page.goto(testPageUrl);
const editor = getTextarea(page);
await replaceEditorContent(editor, 'This is an test');
await page.waitForTimeout(6000);
await clickHarperHighlight(page);
await page.getByTitle('Replace with "a"').click();
await page.waitForTimeout(3000);
expect(editor).toHaveValue('This is a test');
});
}
export async function testCanIgnoreTextareaSuggestion(testPageUrl: string) {
test('Can ignore suggestion.', async ({ page }) => {
await page.goto(testPageUrl);
const editor = getTextarea(page);
await replaceEditorContent(editor, 'This is an test');
await page.waitForTimeout(6000);
await clickHarperHighlight(page);
await page.getByTitle('Ignore this lint').click();
await page.waitForTimeout(3000);
// Nothing should change.
expect(editor).toHaveValue('This is an test');
expect(await clickHarperHighlight(page)).toBe(false);
});
}
export async function assertHarperHighlightBoxes(page: Page, boxes: Box[]): Promise<void> {
const highlights = getHarperHighlights(page);
expect(await highlights.count()).toBe(boxes.length);
for (let i = 0; i < (await highlights.count()); i++) {
expect(await highlights.nth(i).boundingBox()).toStrictEqual(boxes[i]);
}
}