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

     1  import React from 'react';
     2  import { fireEvent, render, screen } from '@testing-library/react';
     3  import SyncTimelines from './index';
     4  import { getTitle } from './useSync';
     5  import { getSelectionBoundaries } from './getSelectionBoundaries';
     6  import { Selection } from '../markings';
     7  
     8  const from = 1666790156;
     9  const to = 1666791905;
    10  
    11  const propsWhenActive = {
    12    timeline: {
    13      color: 'rgb(208, 102, 212)',
    14      data: {
    15        startTime: 1666790760,
    16        samples: [
    17          16629, 50854, 14454, 3819, 40720, 23172, 22483, 7854, 33186, 81804,
    18          46942, 40631, 14135, 12824, 27514, 14366, 39691, 45412, 18631, 10371,
    19          31606, 53775, 42399, 40527, 20599, 27836, 23624, 80152, 9149, 45283,
    20          58361, 48738, 30363, 13834, 30849, 81892,
    21        ],
    22        durationDelta: 10,
    23      },
    24    },
    25    leftSelection: {
    26      from: String(from),
    27      to: '1666790783',
    28    },
    29    rightSelection: {
    30      from: '1666791459',
    31      to: String(to),
    32    },
    33    comparisonModeActive: false,
    34  };
    35  
    36  const propsWhenHidden = {
    37    timeline: {
    38      data: {
    39        startTime: 1666779070,
    40        samples: [
    41          1601, 30312, 22044, 53925, 44264, 26014, 15645, 14376, 21880, 8555,
    42          15995, 5849, 14138, 18929, 41842, 59101, 18931, 65541, 47674, 35886,
    43          55583, 19283, 19745, 9314, 1531,
    44        ],
    45        durationDelta: 10,
    46      },
    47    },
    48    leftSelection: {
    49      from: '1666779093',
    50      to: '1666779239',
    51    },
    52    rightSelection: {
    53      from: '1666779140',
    54      to: '1666779296',
    55    },
    56    comparisonModeActive: false,
    57  };
    58  
    59  const { getByRole, queryByText } = screen;
    60  
    61  describe('SyncTimelines', () => {
    62    it('renders sync and ignore buttons when active', async () => {
    63      render(<SyncTimelines onSync={() => {}} {...propsWhenActive} />);
    64  
    65      expect(getByRole('button', { name: 'Ignore' })).toBeInTheDocument();
    66      expect(getByRole('button', { name: 'Sync Timelines' })).toBeInTheDocument();
    67    });
    68  
    69    it('hidden when selections are in range', async () => {
    70      render(<SyncTimelines onSync={() => {}} {...propsWhenHidden} />);
    71  
    72      expect(queryByText('Sync')).not.toBeInTheDocument();
    73    });
    74  
    75    it('onSync returns correct from/to', async () => {
    76      let result = { from: '', to: '' };
    77      render(
    78        <SyncTimelines
    79          {...propsWhenActive}
    80          onSync={(from, to) => {
    81            result = { from, to };
    82          }}
    83        />
    84      );
    85  
    86      fireEvent.click(getByRole('button', { name: 'Sync Timelines' }));
    87  
    88      // new main timeline FROM = from - 1ms, TO = to + 1ms
    89      expect(Number(result.from) - from * 1000).toEqual(-1);
    90      expect(Number(result.to) - to * 1000).toEqual(1);
    91    });
    92  
    93    it('Hide button works', async () => {
    94      render(<SyncTimelines onSync={() => {}} {...propsWhenActive} />);
    95  
    96      fireEvent.click(getByRole('button', { name: 'Ignore' }));
    97  
    98      expect(queryByText('Sync')).not.toBeInTheDocument();
    99    });
   100  });
   101  
   102  describe('getTitle', () => {
   103    it('both selections are out of range', () => {
   104      expect(getTitle(false, false)).toEqual(
   105        'Warning: Baseline and Comparison timeline selections are out of range'
   106      );
   107    });
   108    it('baseline timeline selection is out of range', () => {
   109      expect(getTitle(false, true)).toEqual(
   110        'Warning: Baseline timeline selection is out of range'
   111      );
   112    });
   113    it('comparison timeline selection is out of range', () => {
   114      expect(getTitle(true, false)).toEqual(
   115        'Warning: Comparison timeline selection is out of range'
   116      );
   117    });
   118  });
   119  
   120  describe('getSelectionBoundaries', () => {
   121    const boundariesFromRelativeTime = getSelectionBoundaries({
   122      from: 'now-1h',
   123      to: 'now',
   124    } as Selection);
   125    const boundariesFromUnixTime = getSelectionBoundaries({
   126      from: '1667204605',
   127      to: '1667204867',
   128    } as Selection);
   129  
   130    const res = [
   131      boundariesFromRelativeTime.from,
   132      boundariesFromRelativeTime.to,
   133      boundariesFromUnixTime.from,
   134      boundariesFromUnixTime.to,
   135    ];
   136  
   137    it('returns correct data type', () => {
   138      expect(res.every((i) => typeof i === 'number')).toBe(true);
   139    });
   140  
   141    it('returns ms format (13 digits)', () => {
   142      expect(res.every((i) => String(i).length === 13)).toBe(true);
   143    });
   144  
   145    it('TO greater than FROM', () => {
   146      expect(
   147        boundariesFromRelativeTime.to > boundariesFromRelativeTime.from &&
   148          boundariesFromUnixTime.to > boundariesFromUnixTime.from
   149      ).toBe(true);
   150    });
   151  });