Add end to end test for Suspense

Basics of a Suspense node appearing are validated, but not yet all
details as devtools does not display final children yet.

package.json

@@ -15,7 +15,7 @@
 		"archive": "git archive --format zip --output dist/source-code.zip master",
 		"lint": "eslint 'src/**/*.{ts,tsx}' 'test-e2e/**/*.ts'",
 		"test": "mochette -c tsconfig.cjs.json 'src/**/*.test.{ts,tsx}'",
-		"test-e2e": "TS_NODE_PROJECT=tsconfig.cjs.json yarn ts-node test-e2e/run.ts --default-timeout 2000",
+		"test-e2e": "TS_NODE_PROJECT=tsconfig.cjs.json ts-node test-e2e/run.ts --default-timeout 2000",
 		"dev": "DEBUG=true concurrently 'npm run build:test -- --watch --no-watch.clearScreen' 'wmr start --port 8100 --cwd test-e2e/fixtures/'",
 		"dev:legacy": "webpack-dev-server --inline",
 		"run:chrome": "DEBUG=true npm run build:chrome && mkdir -p ./profiles/chrome && node tools/run-chrome.js",
@@ -42,7 +42,7 @@
 		"@testing-library/preact": "^2.0.0",
 		"@types/archiver": "^3.1.0",
 		"@types/chrome": "^0.0.119",
-		"@types/puppeteer": "^3.0.1",
+		"@types/puppeteer": "^2.0.1",
 		"@typescript-eslint/eslint-plugin": "^3.6.0",
 		"@typescript-eslint/parser": "^3.6.0",
 		"archiver": "^4.0.1",

test-e2e/fixtures/suspense.js

@@ -0,0 +1,42 @@
+const { h, render } = preact;
+const { Suspense } = preactCompat;
+const { useMemo } = preactHooks;
+
+function withDelay(ms) {
+	useMemo(() => {
+		let done = false;
+		const promise = new Promise(resolve => setTimeout(resolve, ms)).then(() => {
+			done = true;
+		});
+		return () => {
+			if (!done) {
+				throw promise;
+			}
+		};
+	}, [])();
+}
+
+function Block(props) {
+	const style = "padding: 2rem; background: " + props.background + ";";
+	return html`
+		<div data-testid=${props.id} style=${style}>${props.children}<//>
+	`;
+}
+
+function Delayed(props) {
+	withDelay(props.waitMs);
+	return html` <${Block} id="delayed" background="cadetblue" /> `;
+}
+
+function Shortly() {
+	const fallback = html` <${Block} id="skeleton" background="grey" /> `;
+	return html`
+		<${Block} id="container" background="black">
+			<${Suspense} fallback=${fallback}>
+				<${Delayed} waitMs=${500} />
+			<//>
+		<//>
+	`;
+}
+
+render(h(Shortly), document.getElementById("app"));

test-e2e/tests/highlight-margin.test.ts

@@ -3,7 +3,7 @@ import { expect } from "chai";
 import { wait } from "pentf/utils";
 import { Page } from "puppeteer";
 
-export const description = "Hihglight overlay should account for margin";
+export const description = "Highlight overlay should account for margin";
 
 function getHighlightSize(page: Page) {
 	return getSize(page, "#preact-devtools-highlighter > div");

test-e2e/tests/highlight-suspense.test.ts

@@ -0,0 +1,29 @@
+import { newTestPage, getSize } from "../test-utils";
+import { expect } from "chai";
+import { wait } from "pentf/utils";
+
+import type { Page } from "puppeteer";
+
+export const description = "Display and highlighting of Suspense in devtools";
+
+function getHighlightSize(page: Page): unknown {
+	return getSize(page, "#preact-devtools-highlighter > div");
+}
+
+export async function run(config: any): Promise<void> {
+	const { page, devtools } = await newTestPage(config, "suspense");
+
+	// TODO: would expect tree-item list to be:
+	//   ["Block", "Shortly", "Suspense", "Delayed", "Block"]
+	// but is actually:
+	//   ["Block", "Shortly", "Suspense", "m"]
+
+	await devtools.hover('[data-testid="tree-item"][data-name="Suspense"]');
+	// Wait for possible flickering to occur
+	await wait(1000);
+	const sizeOnPage = await getSize(page, '[data-testid="container"]');
+	const sizeOfHighlight = await getHighlightSize(page);
+	expect(sizeOfHighlight).to.eql(sizeOnPage);
+
+	// TODO: expect size of delayed child to be correctly shown
+}