diff --git a/package.json b/package.json index 8e979756..52b6b629 100644 --- a/package.json +++ b/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", diff --git a/test-e2e/fixtures/suspense.js b/test-e2e/fixtures/suspense.js new file mode 100644 index 00000000..610e3498 --- /dev/null +++ b/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` +
${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")); diff --git a/test-e2e/tests/highlight-margin.test.ts b/test-e2e/tests/highlight-margin.test.ts index d3dd4220..6b3ec622 100644 --- a/test-e2e/tests/highlight-margin.test.ts +++ b/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"); diff --git a/test-e2e/tests/highlight-suspense.test.ts b/test-e2e/tests/highlight-suspense.test.ts new file mode 100644 index 00000000..e6dabbb1 --- /dev/null +++ b/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 { + 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 +}