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

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React, { useRef } 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  import type { Units } from '@pyroscope/models/src';
     7  
     8  import FlamegraphTooltip, { FlamegraphTooltipProps } from './FlamegraphTooltip';
     9  import { DefaultPalette } from '../';
    10  
    11  function TestCanvas(props: Omit<FlamegraphTooltipProps, 'canvasRef'>) {
    12    const canvasRef = useRef<HTMLCanvasElement>(null);
    13  
    14    return (
    15      <>
    16        <canvas data-testid="canvas" ref={canvasRef} />
    17        <FlamegraphTooltip
    18          {...(props as FlamegraphTooltipProps)}
    19          canvasRef={canvasRef}
    20        />
    21      </>
    22    );
    23  }
    24  
    25  describe('FlamegraphTooltip', () => {
    26    const renderCanvas = (
    27      props: Omit<FlamegraphTooltipProps, 'canvasRef' | 'palette'>
    28    ) => render(<TestCanvas {...props} palette={DefaultPalette} />);
    29  
    30    it('should render FlamegraphTooltip with single format', () => {
    31      const xyToData = (x: number, y: number) =>
    32        Maybe.of({
    33          format: 'single' as const,
    34          name: 'function_title',
    35          total: 10,
    36        });
    37  
    38      const props = {
    39        numTicks: 100,
    40        sampleRate: 100,
    41        xyToData,
    42        leftTicks: 100,
    43        rightTicks: 100,
    44        format: 'single' as const,
    45        units: 'samples' as Units,
    46      };
    47  
    48      renderCanvas(props);
    49  
    50      userEvent.hover(screen.getByTestId('canvas'));
    51  
    52      expect(screen.getByTestId('tooltip')).toBeInTheDocument();
    53    });
    54  
    55    it('should render FlamegraphTooltip with double format', () => {
    56      const xyToData = (x: number, y: number) =>
    57        Maybe.of({
    58          format: 'double' as const,
    59          name: 'my_function',
    60          totalLeft: 100,
    61          totalRight: 0,
    62          barTotal: 100,
    63        });
    64  
    65      const props = {
    66        numTicks: 100,
    67        sampleRate: 100,
    68        xyToData,
    69        leftTicks: 1000,
    70        rightTicks: 1000,
    71        format: 'double' as const,
    72        units: 'samples' as Units,
    73      };
    74  
    75      renderCanvas(props);
    76  
    77      userEvent.hover(screen.getByTestId('canvas'));
    78  
    79      expect(screen.getByTestId('tooltip')).toBeInTheDocument();
    80    });
    81  });