github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenu.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 { MenuItem } from '@webapp/ui/Menu';
     5  import userEvent from '@testing-library/user-event';
     6  
     7  import ContextMenu, { ContextMenuProps } from './ContextMenu';
     8  
     9  const { queryByRole, queryAllByRole, getByRole } = screen;
    10  
    11  function TestCanvas(props: Omit<ContextMenuProps, 'canvasRef'>) {
    12    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    13  
    14    return (
    15      <>
    16        <canvas data-testid="canvas" ref={canvasRef} />
    17        <ContextMenu data-testid="contextmenu" canvasRef={canvasRef} {...props} />
    18      </>
    19    );
    20  }
    21  
    22  describe('ContextMenu', () => {
    23    it('works', () => {
    24      let hasBeenClicked = false;
    25  
    26      const xyToMenuItems = () => {
    27        return [
    28          <MenuItem
    29            key="test"
    30            onClick={() => {
    31              hasBeenClicked = true;
    32            }}
    33          >
    34            Test
    35          </MenuItem>,
    36        ];
    37      };
    38  
    39      render(
    40        <TestCanvas
    41          xyToMenuItems={xyToMenuItems}
    42          onClose={() => {}}
    43          onOpen={() => {}}
    44        />
    45      );
    46  
    47      expect(queryByRole('menu')).not.toBeInTheDocument();
    48  
    49      // trigger a right click
    50      userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
    51  
    52      expect(queryByRole('menu')).toBeVisible();
    53      expect(queryAllByRole('menuitem')).toHaveLength(1);
    54  
    55      userEvent.click(getByRole('menuitem'));
    56      expect(hasBeenClicked).toBe(true);
    57    });
    58  
    59    it('shows different items depending on the clicked node', () => {
    60      const xyToMenuItems = jest.fn();
    61  
    62      render(
    63        <TestCanvas
    64          xyToMenuItems={xyToMenuItems}
    65          onClose={() => {}}
    66          onOpen={() => {}}
    67        />
    68      );
    69  
    70      expect(queryByRole('menu')).not.toBeInTheDocument();
    71  
    72      // trigger a right click
    73      xyToMenuItems.mockReturnValueOnce([<MenuItem key="1">1</MenuItem>]);
    74      userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
    75      expect(queryAllByRole('menuitem')).toHaveLength(1);
    76  
    77      xyToMenuItems.mockReturnValueOnce([
    78        <MenuItem key="1">1</MenuItem>,
    79        <MenuItem key="2">2</MenuItem>,
    80      ]);
    81      userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
    82      expect(queryAllByRole('menuitem')).toHaveLength(2);
    83    });
    84  });