Merge pull request #358 from preactjs/test-improve

Author: marvinhagemeister

package.json

@@ -55,7 +55,7 @@
 		"archiver": "^5.0.2",
 		"babel-loader": "^8.1.0",
 		"babel-plugin-helpers": "^0.1.1",
-		"babel-plugin-transform-jsx-to-htm": "^2.0.0",
+		"babel-plugin-transform-jsx-to-htm": "^2.2.0",
 		"babel-plugin-transform-rename-properties": "^0.1.0",
 		"concurrently": "^5.3.0",
 		"cpy-cli": "^3.1.1",

src/view/components/profiler/flamegraph/modes/FlamegraphLayout.tsx

@@ -48,14 +48,14 @@ export function FlamegraphLayout({
 				let text: any = "";
 				if (pos.commitParent || pos.weight === -1) {
 					text = (
-						<span data-testid="node-name">
-							{node.name}
+						<>
+							<span data-testid="node-name">{node.name}</span>
 							{filterHoc && node.hocs ? (
 								<HocLabels hocs={node.hocs} nodeId={node.id} canMark={false} />
 							) : (
 								""
 							)}
-						</span>
+						</>
 					);
 				} else {
 					const self = formatTime(commit.selfDurations.get(node.id)!);

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

@@ -1,6 +1,7 @@
 import { newTestPage, getHooks, waitForSelector } from "../../test-utils";
 import { expect } from "chai";
 import { clickNestedText, clickSelector } from "pentf/browser_utils";
+import { assertEventually } from "pentf/assert_utils";
 
 export const description = "Show custom hook name";
 
@@ -24,47 +25,93 @@ export async function run(config: any) {
 	// Callback (Mixed)
 	await clickNestedText(devtools, /CounterCallback$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useState counterState", "0"],
-		["useCallback", "ƒ ()"],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useState counterState", "0"],
+				["useCallback", "ƒ ()"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Reducer
 	await clickNestedText(devtools, /ReducerComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useReducer customReducer", '"foo"'],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useReducer customReducer", '"foo"'],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Ref
 	await clickNestedText(devtools, /RefComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useRef customRef", "0"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useRef customRef", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// useMemo
 	await clickNestedText(devtools, /MemoComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useMemo customMemo", "0"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useMemo customMemo", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Multiple (test ordering)
 	await clickNestedText(devtools, /^Multiple$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useState foo", "0"],
-		["useState bar", "0"],
-		["useState baz", "0"],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useState foo", "0"],
+				["useState bar", "0"],
+				["useState baz", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Do nothing for invalid callsites
 	await clickNestedText(devtools, /CallbackOnly$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useCallback", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([["useCallback", "ƒ ()"]]);
+		},
+		{ crashOnError: false },
+	);
 
 	await clickNestedText(devtools, /LayoutEffect$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useLayoutEffect", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useLayoutEffect", "ƒ ()"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	await clickNestedText(devtools, /^Effect$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useEffect", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([["useEffect", "ƒ ()"]]);
+		},
+		{ crashOnError: false },
+	);
 }

test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts

@@ -41,12 +41,14 @@ export async function run(config: any) {
 	await clickRecordButton(devtools);
 
 	const nodes = await getFlameNodes(devtools);
-	expect(nodes).to.deep.equal([
-		{ maximized: true, name: "Fragment", visible: true },
-		{ maximized: false, name: "Counter", visible: true },
-		{ maximized: false, name: "Value1", visible: true },
-		{ maximized: false, name: "Value2", visible: true },
-	]);
+	expect(nodes.sort((a, b) => a.name.localeCompare(b.name))).to.deep.equal(
+		[
+			{ maximized: true, name: "Fragment", visible: true },
+			{ maximized: false, name: "Counter", visible: true },
+			{ maximized: false, name: "Value1", visible: true },
+			{ maximized: false, name: "Value2", visible: true },
+		].sort((a, b) => a.name.localeCompare(b.name)),
+	);
 
 	const memoSize = await getSize(
 		devtools,

test-e2e/tests/profiler/flamegraph/utils.ts

@@ -5,7 +5,7 @@ export async function getFlameNodes(page: Page) {
 		return els.map(el => {
 			return {
 				maximized: el.hasAttribute("data-maximized"),
-				name: el.querySelector('[data-testid="node-name"]')!.textContent,
+				name: el.querySelector('[data-testid="node-name"]')!.textContent || "",
 				visible: el.hasAttribute("data-visible"),
 			};
 		});

yarn.lock

@@ -1761,10 +1761,10 @@ babel-plugin-helpers@^0.1.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-helpers/-/babel-plugin-helpers-0.1.1.tgz#2a9cce1bc588bd73861ca435fe2c851ed0ebd17d"
   integrity sha512-1Pg2Sg9e2Y2KwUxhLp/13TgZlbTh8sCJqno7vgMZJwQcRwuOWVMskyACfOdRheuVI9+MnG2nBfQPm9dxk+QpbQ==
 
-babel-plugin-transform-jsx-to-htm@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-to-htm/-/babel-plugin-transform-jsx-to-htm-2.0.0.tgz#ab04caf8752a67272c06d6f9786721c105417640"
-  integrity sha512-MuU/RfaTh2i1ar5iiOoce6F263jIHsXjN7SLrm9G80PKHOFZJSfq2F5hAHduVK4dMwA6xeSKK541Ho3LGb5lIg==
+babel-plugin-transform-jsx-to-htm@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-jsx-to-htm/-/babel-plugin-transform-jsx-to-htm-2.2.0.tgz#760023cd60a531f439a91df3ba99db831425a1ef"
+  integrity sha512-o98JbDlwdF3z03h+wdO5Ft4XTsJFONOM+XAFF9EH0EK8gYVSIwtp2jXvI7u4esIcQPiVy+ZHyZVy76AgnxnGbQ==
   dependencies:
     "@babel/plugin-syntax-jsx" "^7.2.0"
     htm "^3.0.0"