Merge pull request #346 from preactjs/update-pentf

Update test deps

Author: marvinhagemeister

package.json

@@ -73,10 +73,10 @@
 		"mkdirp": "^1.0.4",
 		"mochette": "^1.0.1",
 		"node-fetch": "^2.6.1",
-		"pentf": "^3.2.3",
+		"pentf": "^3.3.9",
 		"preact": "^10.5.7",
 		"prettier": "^2.1.2",
-		"puppeteer": "^10.2.0",
+		"puppeteer": "^14.0.0",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.28.1",
 		"rollup-plugin-copy": "^3.3.0",

test-e2e/test-utils.ts

@@ -1,5 +1,7 @@
 import { waitForPass } from "pentf/assert_utils";
+import { ignoreError } from "pentf/utils";
 import { expect } from "chai";
+import { strict as assert } from "assert";
 import {
 	clickNestedText,
 	clickTestId,
@@ -8,7 +10,6 @@ import {
 	waitForTestId,
 	resizePage,
 	clickSelector,
-	waitForSelector,
 } from "pentf/browser_utils";
 import { Page } from "puppeteer";
 import { getPreactVersions } from "./fixtures/utils";
@@ -18,6 +19,41 @@ export interface TestOptions {
 	preact?: string;
 }
 
+export async function waitForSelector(
+	page: Page,
+	selector: string,
+	{ timeout = 5000, checkEvery = 200 } = {},
+) {
+	let remainingTimeout = timeout;
+	// eslint-disable-next-line no-constant-condition
+	while (true) {
+		let found = false;
+		let errored = false;
+		try {
+			found = await page.evaluate(selector => {
+				return !!document.querySelector(selector);
+			}, selector);
+		} catch (err) {
+			errored = true;
+			if (!ignoreError(err)) {
+				throw err;
+			}
+		}
+
+		if (!errored && found) {
+			break;
+		}
+
+		if (remainingTimeout <= 0) {
+			assert(found, `Element matching ${selector} is not found.`);
+			break;
+		}
+
+		await wait(Math.min(checkEvery, remainingTimeout));
+		remainingTimeout -= checkEvery;
+	}
+}
+
 export async function newTestPage(
 	config: any,
 	name: string,
@@ -72,7 +108,7 @@ export async function getAttribute$$(
 	selector: string,
 	name: string,
 ) {
-	await page.waitForSelector(selector);
+	await waitForSelector(page, selector);
 	return page.$$eval(
 		selector,
 		(els: Element[], propName: any) => {
@@ -131,7 +167,7 @@ export async function waitForAttribute(
 }
 
 export async function click(page: Page, selector: string) {
-	await page.waitForSelector(selector);
+	await waitForSelector(page, selector);
 	return page.click(selector);
 }
 
@@ -207,7 +243,7 @@ export async function clickTab(page: Page, tab: DevtoolsTab) {
 }
 
 export async function getActiveTab(page: Page): Promise<DevtoolsTab> {
-	await page.waitForSelector('input[name="root-panel"]');
+	await waitForSelector(page, 'input[name="root-panel"]');
 	return await page.evaluate(() => {
 		const input = (Array.from(
 			document.querySelectorAll('input[name="root-panel"]'),

test-e2e/tests/collapse.test.ts

@@ -1,4 +1,11 @@
-import { newTestPage, click, getLog, waitFor, clickTab } from "../test-utils";
+import {
+	newTestPage,
+	click,
+	getLog,
+	waitFor,
+	clickTab,
+	waitForSelector,
+} from "../test-utils";
 import { expect } from "chai";
 import { clickNestedText } from "pentf/browser_utils";
 
@@ -7,7 +14,7 @@ export const description = "Collapse all the things!";
 export async function run(config: any) {
 	const { page, devtools } = await newTestPage(config, "update-all");
 
-	await devtools.waitForSelector('[data-testid="tree-item"]', {
+	await waitForSelector(devtools, '[data-testid="tree-item"]', {
 		timeout: 1000,
 	});
 
@@ -31,7 +38,7 @@ export async function run(config: any) {
 	// Props should be collapsed by default
 	await clickNestedText(devtools, "Provider");
 	const row = '[data-testid="props-row"]';
-	await devtools.waitForSelector(row, {
+	await waitForSelector(devtools, row, {
 		timeout: 1000,
 	});
 
@@ -56,7 +63,7 @@ export async function run(config: any) {
 
 	// Switching to Profiler and back should not change collapse state
 	await clickTab(devtools, "PROFILER");
-	await devtools.waitForSelector('[data-testid="record-btn"]');
+	await waitForSelector(devtools, '[data-testid="record-btn"]');
 	await clickTab(devtools, "ELEMENTS");
 
 	// Our input should still be visible

test-e2e/tests/element-scroll.test.ts

@@ -1,4 +1,8 @@
-import { newTestPage, installMouseHelper } from "../test-utils";
+import {
+	newTestPage,
+	installMouseHelper,
+	waitForSelector,
+} from "../test-utils";
 import { expect } from "chai";
 import { getText } from "pentf/browser_utils";
 
@@ -14,7 +18,7 @@ export async function run(config: any) {
 	});
 
 	const selector = '[data-name="App"]';
-	await devtools.waitForSelector(selector);
+	await waitForSelector(devtools, selector);
 	const { x, y } = await devtools.evaluate((s: string) => {
 		const rect = document.querySelector(s)!.getBoundingClientRect();
 		return { x: rect.right, y: rect.top };

test-e2e/tests/hoc-filter-disable.test.ts

@@ -1,4 +1,4 @@
-import { enableHOCFilter, newTestPage } from "../test-utils";
+import { enableHOCFilter, newTestPage, waitForSelector } from "../test-utils";
 import { expect } from "chai";
 import {
 	assertNotTestId,
@@ -18,7 +18,8 @@ export async function run(config: any) {
 	await clickNestedText(devtools, "HOC-Components");
 	await clickTestId(devtools, "filter-update");
 
-	await devtools.waitForSelector(
+	await waitForSelector(
+		devtools,
 		'[data-testid="tree-item"][data-name="Memo(Foo)"]',
 	);
 

test-e2e/tests/hoc-filter-search.test.ts

@@ -1,4 +1,9 @@
-import { enableHOCFilter, newTestPage, typeText } from "../test-utils";
+import {
+	enableHOCFilter,
+	newTestPage,
+	typeText,
+	waitForSelector,
+} from "../test-utils";
 import { expect } from "chai";
 import { getText } from "pentf/browser_utils";
 import { assertEventually } from "pentf/assert_utils";
@@ -8,7 +13,7 @@ export async function run(config: any) {
 	const { devtools } = await newTestPage(config, "hoc");
 	await enableHOCFilter(devtools);
 
-	await devtools.waitForSelector('[data-testid="tree-item"][data-name="Foo"]');
+	await waitForSelector(devtools, '[data-testid="tree-item"][data-name="Foo"]');
 	await typeText(devtools, '[data-testid="element-search"]', "forw");
 
 	let marked = await devtools.$$("mark");

test-e2e/tests/hoc-filter-update.test.ts

@@ -1,4 +1,4 @@
-import { enableHOCFilter, newTestPage } from "../test-utils";
+import { enableHOCFilter, newTestPage, waitForSelector } from "../test-utils";
 import { expect } from "chai";
 import { Page } from "puppeteer";
 
@@ -22,7 +22,8 @@ export async function run(config: any) {
 	const { devtools, page } = await newTestPage(config, "hoc-update");
 
 	await enableHOCFilter(devtools);
-	await devtools.waitForSelector(
+	await waitForSelector(
+		devtools,
 		'[data-testid="tree-item"][data-name="Wrapped"]',
 	);
 

test-e2e/tests/hoc-filter.test.ts

@@ -1,4 +1,4 @@
-import { enableHOCFilter, newTestPage } from "../test-utils";
+import { enableHOCFilter, newTestPage, waitForSelector } from "../test-utils";
 import { expect } from "chai";
 import { clickNestedText, waitForTestId } from "pentf/browser_utils";
 import { waitForPass } from "pentf/assert_utils";
@@ -9,7 +9,7 @@ export async function run(config: any) {
 	const { devtools } = await newTestPage(config, "hoc");
 	await enableHOCFilter(devtools);
 
-	await devtools.waitForSelector('[data-testid="tree-item"][data-name="Foo"]');
+	await waitForSelector(devtools, '[data-testid="tree-item"][data-name="Foo"]');
 
 	const items = await devtools.evaluate(() => {
 		return Array.from(

test-e2e/tests/hooks/hook-name.test.ts

@@ -1,4 +1,4 @@
-import { newTestPage, getHooks } from "../../test-utils";
+import { newTestPage, getHooks, waitForSelector } from "../../test-utils";
 import { expect } from "chai";
 import { clickNestedText } from "pentf/browser_utils";
 
@@ -15,40 +15,40 @@ export async function run(config: any) {
 			return !!(await devtools.$('[data-testid="Hooks"]'));
 		},
 	});
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 
 	expect(await getHooks(devtools)).to.deep.equal([
 		["useState customState", "0"],
 	]);
 
 	// Callback (Mixed)
 	await clickNestedText(devtools, /CounterCallback$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([
 		["useState counterState", "0"],
 		["useCallback", "ƒ ()"],
 	]);
 
 	// Reducer
 	await clickNestedText(devtools, /ReducerComponent$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([
 		["useReducer customReducer", '"foo"'],
 	]);
 
 	// Ref
 	await clickNestedText(devtools, /RefComponent$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([["useRef customRef", "0"]]);
 
 	// useMemo
 	await clickNestedText(devtools, /MemoComponent$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([["useMemo customMemo", "0"]]);
 
 	// Multiple (test ordering)
 	await clickNestedText(devtools, /^Multiple$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([
 		["useState foo", "0"],
 		["useState bar", "0"],
@@ -57,14 +57,14 @@ export async function run(config: any) {
 
 	// Do nothing for invalid callsites
 	await clickNestedText(devtools, /CallbackOnly$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([["useCallback", "ƒ ()"]]);
 
 	await clickNestedText(devtools, /LayoutEffect$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([["useLayoutEffect", "ƒ ()"]]);
 
 	await clickNestedText(devtools, /^Effect$/);
-	await devtools.waitForSelector(hooksPanel);
+	await waitForSelector(devtools, hooksPanel);
 	expect(await getHooks(devtools)).to.deep.equal([["useEffect", "ƒ ()"]]);
 }

test-e2e/tests/hooks/hooks-support.test.ts

@@ -1,4 +1,4 @@
-import { newTestPage } from "../../test-utils";
+import { newTestPage, waitForSelector } from "../../test-utils";
 import { clickNestedText } from "pentf/browser_utils";
 
 export const description =
@@ -13,5 +13,5 @@ export async function run(config: any) {
 	await clickNestedText(devtools, "RefComponent");
 
 	// Should print warning
-	await devtools.waitForSelector('[data-testid="no-hooks-support-warning"]');
+	await waitForSelector(devtools, '[data-testid="no-hooks-support-warning"]');
 }