github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/Tooltip/TableTooltip.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 type { Units } from '@pyroscope/models/src';
     6  import { DefaultPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
     7  
     8  import TableTooltip, { TableTooltipProps } from './TableTooltip';
     9  
    10  function TestTable(props: Omit<TableTooltipProps, 'tableBodyRef'>) {
    11    const tableBodyRef = useRef<HTMLTableSectionElement>(null);
    12  
    13    return (
    14      <>
    15        <table>
    16          <tbody data-testid="table-body" ref={tableBodyRef} />
    17        </table>
    18        <TableTooltip
    19          {...(props as TableTooltipProps)}
    20          tableBodyRef={tableBodyRef}
    21        />
    22      </>
    23    );
    24  }
    25  
    26  describe('TableTooltip', () => {
    27    const renderTable = (props: Omit<TableTooltipProps, 'tableBodyRef'>) =>
    28      render(<TestTable {...props} />);
    29  
    30    it('should render TableTooltip', () => {
    31      const props = {
    32        numTicks: 100,
    33        sampleRate: 100,
    34        units: 'samples' as Units,
    35        palette: DefaultPalette,
    36      };
    37  
    38      renderTable(props);
    39  
    40      userEvent.hover(screen.getByTestId('table-body'));
    41  
    42      expect(screen.getByTestId('tooltip')).toBeInTheDocument();
    43    });
    44  });