Distinct node name from HOC in DOM

Author: marvinhagemeister

src/view/components/elements/TreeView.tsx

@@ -169,7 +169,7 @@ export function MarkResult(props: { text: string; id: ID }) {
 		const start = idx > 0 ? text.slice(0, idx) : "";
 		const end = idx < text.length ? text.slice(idx + m[0].length) : "";
 		return (
-			<span ref={ref}>
+			<span ref={ref} data-testid="node-name">
 				{start}
 				<mark
 					class={`${s.mark} ${isActive ? s.markSelected : ""}`}
@@ -181,7 +181,7 @@ export function MarkResult(props: { text: string; id: ID }) {
 			</span>
 		);
 	}
-	return <span>{text}</span>;
+	return <span data-testid="node-name">{text}</span>;
 }
 
 export function TreeItem(props: { key: any; id: ID; top: number }) {

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

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

src/view/components/profiler/flamegraph/ranked/RankedLayout.tsx

@@ -68,7 +68,7 @@ export function RankedLayout({
 					);
 				const text = (
 					<>
-						{node.name}
+						<span data-testid="node-name">{node.name}</span>
 						{hocs} ({formatTime(selfDuration)})
 					</>
 				);

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

@@ -3,13 +3,9 @@ import { Page } from "puppeteer";
 export async function getFlameNodes(page: Page) {
 	return await page.$$eval('[data-type="flamegraph"] > *', els => {
 		return els.map(el => {
-			const text = el.textContent!;
 			return {
 				maximized: el.hasAttribute("data-maximized"),
-				name: text.slice(
-					0,
-					text.includes("(") ? text.lastIndexOf("(") - 1 : text.length,
-				),
+				name: el.querySelector('[data-testid="node-name"]')!.textContent,
 				visible: el.hasAttribute("data-visible"),
 			};
 		});