Add a test for the existing tooltip functionality

julienw · julienw · commit 8690bd48a889 · 2025-07-24T10:20:00.000+02:00
diff --git a/src/test/components/StackChart.test.js b/src/test/components/StackChart.test.js
@@ -75,11 +75,18 @@ beforeEach(addRootOverlayElement);
 afterEach(removeRootOverlayElement);
 
 describe('StackChart', function () {
-  it('matches the snapshot', () => {
-    const { container } = setupSamples();
+  it('matches the snapshot and can display a tooltip', () => {
+    const { container, getTooltip, moveMouse } = setupSamples();
     const drawCalls = flushDrawLog();
-    expect(container.firstChild).toMatchSnapshot();
-    expect(drawCalls).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot('dom');
+    expect(drawCalls).toMatchSnapshot('draw calls');
+
+    // It can also display a tooltip when hovering a stack.
+    expect(getTooltip()).toBe(null);
+
+    moveMouse(findFillTextPositionFromDrawLog(drawCalls, 'B'));
+    expect(getTooltip()).toBeTruthy();
+    expect(getTooltip()).toMatchSnapshot('tooltip');
   });
 
   it('can select a call node when clicking the chart', function () {
diff --git a/src/test/components/__snapshots__/StackChart.test.js.snap b/src/test/components/__snapshots__/StackChart.test.js.snap
@@ -954,7 +954,7 @@ exports[`StackChart EmptyReasons shows reasons when samples have been completely
 </div>
 `;
 
-exports[`StackChart matches the snapshot 1`] = `
+exports[`StackChart matches the snapshot and can display a tooltip: dom 1`] = `
 <div
   aria-labelledby="stack-chart-tab-button"
   class="stackChart"
@@ -1123,7 +1123,7 @@ exports[`StackChart matches the snapshot 1`] = `
 </div>
 `;
 
-exports[`StackChart matches the snapshot 2`] = `
+exports[`StackChart matches the snapshot and can display a tooltip: draw calls 1`] = `
 Array [
   Array [
     "set font",
@@ -1394,6 +1394,63 @@ Array [
 ]
 `;
 
+exports[`StackChart matches the snapshot and can display a tooltip: tooltip 1`] = `
+<div
+  class="tooltip"
+  data-testid="tooltip"
+  style="left: 164px; top: 38px;"
+>
+  <div
+    class="tooltipCallNode"
+  >
+    <div
+      class="tooltipOneLine tooltipHeader"
+    >
+      <div
+        class="tooltipTiming"
+      >
+        3.0ms
+      </div>
+      <div
+        class="tooltipTitle"
+      >
+        B
+      </div>
+      <div
+        class="tooltipIcon"
+      />
+    </div>
+    <div
+      class="tooltipCallNodeDetails"
+    >
+      <div
+        class="tooltipDetails tooltipCallNodeDetailsLeft"
+      >
+        <div
+          class="tooltipLabel"
+        >
+          Stack Type:
+        </div>
+        <div>
+          Native
+        </div>
+        <div
+          class="tooltipLabel"
+        >
+          Category:
+        </div>
+        <div>
+          <span
+            class="colored-square category-color-blue"
+          />
+          DOM
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`StackChart works when the user selects the JS allocations option 1`] = `
 <body>
   <div
