github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Highlight.spec.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import { render, screen } from '@testing-library/react';
     4  import userEvent from '@testing-library/user-event';
     5  import { Maybe } from 'true-myth';
     6  
     7  import Highlight, { HighlightProps } from './Highlight';
     8  
     9  function TestComponent(props: Omit<HighlightProps, 'canvasRef'>) {
    10    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    11  
    12    return (
    13      <>
    14        <canvas data-testid="canvas" ref={canvasRef} />
    15        {canvasRef && <Highlight canvasRef={canvasRef} {...props} />}
    16      </>
    17    );
    18  }
    19  
    20  describe('Highlight', () => {
    21    it('works', () => {
    22      const xyToHighlightData = jest.fn();
    23      render(
    24        <TestComponent
    25          barHeight={50}
    26          xyToHighlightData={xyToHighlightData}
    27          zoom={Maybe.nothing()}
    28        />
    29      );
    30  
    31      // hover over a bar
    32      xyToHighlightData.mockReturnValueOnce(
    33        Maybe.of({
    34          left: 10,
    35          top: 5,
    36          width: 100,
    37        })
    38      );
    39      userEvent.hover(screen.getByTestId('canvas'));
    40      expect(screen.getByTestId('flamegraph-highlight')).toBeVisible();
    41      expect(screen.getByTestId('flamegraph-highlight')).toHaveStyle({
    42        height: '50px',
    43        left: '10px',
    44        top: '5px',
    45        width: '100px',
    46      });
    47  
    48      // hover outside the canvas
    49      xyToHighlightData.mockReturnValueOnce(Maybe.nothing());
    50      userEvent.hover(screen.getByTestId('canvas'));
    51      expect(screen.getByTestId('flamegraph-highlight')).not.toBeVisible();
    52    });
    53  });