github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/Heatmap/Heatmap.spec.tsx (about)

     1  import React from 'react';
     2  import { render, screen, within } from '@testing-library/react';
     3  
     4  import { Heatmap } from '.';
     5  import { heatmapMockData } from '../../services/exemplarsTestData';
     6  
     7  jest.mock('./useHeatmapSelection.hook', () => ({
     8    ...jest.requireActual('./useHeatmapSelection.hook'),
     9    useHeatmapSelection: () => ({
    10      selectedCoordinates: { start: null, end: null },
    11      selectedAreaToHeatmapRatio: 1,
    12      hasSelectedArea: false,
    13    }),
    14  }));
    15  
    16  const renderHeatmap = () => {
    17    render(
    18      <Heatmap
    19        sampleRate={100}
    20        heatmap={heatmapMockData}
    21        onSelection={() => ({})}
    22        timezone="utc"
    23      />
    24    );
    25  };
    26  
    27  describe('Component: Heatmap', () => {
    28    it('should have all main elements', () => {
    29      renderHeatmap();
    30  
    31      expect(screen.getByTestId('heatmap-container')).toBeInTheDocument();
    32      expect(screen.getByTestId('y-axis')).toBeInTheDocument();
    33      expect(screen.getByTestId('x-axis')).toBeInTheDocument();
    34      expect(screen.getByRole('img')).toBeInTheDocument();
    35      expect(screen.getByTestId('selection-canvas')).toBeInTheDocument();
    36      expect(screen.getByTestId('color-scale')).toBeInTheDocument();
    37  
    38      const xAxisTicks = within(screen.getByTestId('x-axis')).getAllByRole(
    39        'textbox'
    40      );
    41      expect(xAxisTicks).toHaveLength(8);
    42  
    43      const yAxisTicks = within(screen.getByTestId('y-axis')).getAllByRole(
    44        'textbox'
    45      );
    46      expect(yAxisTicks).toHaveLength(6);
    47  
    48      const [maxTextEl, midTextEl, minTextEl] = within(
    49        screen.getByTestId('color-scale')
    50      ).getAllByRole('textbox');
    51      expect(maxTextEl.textContent).toBe(heatmapMockData.maxDepth.toString());
    52      expect(midTextEl.textContent).toBe('11539');
    53      expect(minTextEl.textContent).toBe(heatmapMockData.minDepth.toString());
    54    });
    55  });