Add a test for the new functionality

Author: julienw

src/test/components/StackChart.test.js

@@ -11,6 +11,7 @@ import {
   fireEvent,
   screen,
   act,
+  within,
 } from 'firefox-profiler/test/fixtures/testing-library';
 import * as UrlStateSelectors from '../../selectors/url-state';
 
@@ -32,6 +33,7 @@ import {
   commitRange,
   changeImplementationFilter,
   changeCallTreeSummaryStrategy,
+  updatePreviewSelection,
 } from '../../actions/profile-view';
 import { changeSelectedTab } from '../../actions/app';
 import { selectedThreadSelectors } from '../../selectors/per-thread';
@@ -89,6 +91,72 @@ describe('StackChart', function () {
     expect(getTooltip()).toMatchSnapshot('tooltip');
   });
 
+  it('matches the snapshot and can display a tooltip with the same widths option', () => {
+    const samples = `
+      A[cat:DOM]       A[cat:DOM]       A[cat:DOM]       A[cat:DOM]
+      B[cat:DOM]       B[cat:DOM]       B[cat:DOM]       B[cat:DOM]
+      C[cat:Graphics]  C[cat:Graphics]  C[cat:Graphics]  H[cat:Network]
+      D[cat:Graphics]  F[cat:Graphics]  F[cat:Graphics]  I[cat:Network]
+      E[cat:Graphics]  G[cat:Graphics]  G[cat:Graphics]
+    `;
+    const { getTooltip, moveMouse, flushRafCalls, dispatch } =
+      setupSamples(samples);
+    useSameWidthsStackChart({ flushRafCalls });
+
+    let drawCalls = flushDrawLog();
+    expect(document.body).toMatchSnapshot('dom');
+    expect(getDrawnFrames(drawCalls)).toEqual([
+      'A',
+      'B',
+      'C',
+      'H',
+      'D',
+      'F',
+      'I',
+      'E',
+      'G',
+    ]);
+    expect(drawCalls).toMatchSnapshot('draw calls');
+
+    // It can also display a tooltip when hovering a stack.
+    expect(getTooltip()).toBe(null);
+
+    moveMouse(findFillTextPositionFromDrawLog(drawCalls, 'I'));
+    expect(getTooltip()).toBeTruthy();
+    expect(getTooltip()).toMatchSnapshot('tooltip');
+
+    // Let's add a preview selection and do it again.
+    flushDrawLog();
+    act(() =>
+      dispatch(
+        updatePreviewSelection({
+          hasSelection: true,
+          isModifying: false,
+          selectionStart: 2.1,
+          selectionEnd: 3.1,
+        })
+      )
+    );
+
+    flushRafCalls();
+    drawCalls = flushDrawLog();
+    expect(getDrawnFrames(drawCalls)).toEqual([
+      'A',
+      'B',
+      'C',
+      'H',
+      'F',
+      'I',
+      'G',
+    ]);
+    expect(drawCalls).toMatchSnapshot('draw calls for preview selection');
+
+    // It can also display a tooltip when hovering a new stack.
+    moveMouse(findFillTextPositionFromDrawLog(drawCalls, 'H'));
+    expect(getTooltip()).toBeTruthy();
+    expect(getTooltip()).toMatchSnapshot('tooltip after preview selection');
+  });
+
   it('can select a call node when clicking the chart', function () {
     const { dispatch, getState, leftClick, findFillTextPosition } =
       setupSamples();
@@ -163,11 +231,6 @@ describe('StackChart', function () {
     expect(copy).toHaveBeenLastCalledWith('B');
   });
 
-  function getDrawnFrames() {
-    const drawCalls = flushDrawLog();
-    return drawCalls.filter(([fn]) => fn === 'fillText').map(([, arg]) => arg);
-  }
-
   it('can scroll into view when selecting a node', function () {
     // Create a stack deep enough to not have all its rendered frames
     // fit within GRAPH_HEIGHT.
@@ -284,15 +347,28 @@ describe('MarkerChart', function () {
   it.todo('can right click a marker and show a context menu');
 
   it('shows a tooltip when hovering', () => {
-    const { getTooltip, moveMouse, findFillTextPosition } = setupUserTimings({
-      isShowUserTimingsClicked: true,
-    });
+    const { getTooltip, moveMouse, findFillTextPosition, flushRafCalls } =
+      setupUserTimings({
+        isShowUserTimingsClicked: true,
+      });
 
     expect(getTooltip()).toBe(null);
 
     moveMouse(findFillTextPosition('componentB'));
-    expect(getTooltip()).toBeTruthy();
-    expect(getTooltip()).toMatchSnapshot();
+    let tooltip = getTooltip();
+    expect(
+      within(ensureExists(tooltip)).getByText('componentB')
+    ).toBeInTheDocument();
+    expect(tooltip).toMatchSnapshot();
+
+    // This still matches markers with the same widths option
+    useSameWidthsStackChart({ flushRafCalls });
+    moveMouse(findFillTextPosition('componentA'));
+    tooltip = getTooltip();
+    expect(
+      within(ensureExists(tooltip)).getByText('componentA')
+    ).toBeInTheDocument();
+    expect(tooltip).toMatchSnapshot();
   });
 });
 
@@ -312,6 +388,17 @@ function showUserTimings({ getByLabelText, flushRafCalls }) {
   flushRafCalls();
 }
 
+function useSameWidthsStackChart({ flushRafCalls }) {
+  flushDrawLog();
+  const checkbox = screen.getByLabelText('Use the same width for each stack');
+  fireFullClick(checkbox);
+  flushRafCalls();
+}
+
+function getDrawnFrames(drawCalls = flushDrawLog()) {
+  return drawCalls.filter(([fn]) => fn === 'fillText').map(([, arg]) => arg);
+}
+
 function setupCombinedTimings() {
   const userTimingsProfile = getProfileWithMarkers([
     getUserTiming('renderFunction', 0, 10),
@@ -467,6 +554,7 @@ function setup(store, funcNames: string[] = []) {
 
   function moveMouse(where) {
     fireMouseEvent('mousemove', getPositioningOptions(where));
+    flushRafCalls();
   }
 
   // Context menu tools