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

     1  import React from 'react';
     2  import { App } from '@webapp/models/app';
     3  import { render, screen, fireEvent, waitFor } from '@testing-library/react';
     4  import AppSelector from '.';
     5  import { MENU_ITEM_ROLE } from './SelectButton';
     6  
     7  jest.mock('@webapp/services/apps');
     8  
     9  const { getByTestId, queryByRole } = screen;
    10  const mockApps: App[] = [
    11    { name: 'single', units: 'unknown', spyName: 'unknown' },
    12    { name: 'double.cpu', units: 'unknown', spyName: 'unknown' },
    13    { name: 'double.space', units: 'unknown', spyName: 'unknown' },
    14    { name: 'triple.app.cpu', units: 'unknown', spyName: 'unknown' },
    15    { name: 'triple.app.objects', units: 'unknown', spyName: 'unknown' },
    16  ];
    17  
    18  describe('AppSelector', () => {
    19    it('gets the list of apps, iterracts with it', async () => {
    20      const onSelected = jest.fn();
    21  
    22      render(
    23        <AppSelector
    24          apps={mockApps}
    25          onSelected={onSelected}
    26          selectedAppName={''}
    27        />
    28      );
    29  
    30      getByTestId('toggler').click();
    31  
    32      // checks that there are 3 groups
    33      expect(queryByRole(MENU_ITEM_ROLE, { name: 'single' })).toBeInTheDocument();
    34      expect(queryByRole(MENU_ITEM_ROLE, { name: 'double' })).toBeInTheDocument();
    35      expect(
    36        queryByRole(MENU_ITEM_ROLE, { name: 'triple.app' })
    37      ).toBeInTheDocument();
    38  
    39      fireEvent.click(screen.getByRole(MENU_ITEM_ROLE, { name: 'single' }));
    40      expect(onSelected).toHaveBeenCalledWith('single');
    41  
    42      getByTestId('toggler').click();
    43  
    44      // checks if 'triple' group expands 2 profile types
    45      fireEvent.click(screen.getByRole(MENU_ITEM_ROLE, { name: 'triple.app' }));
    46      await waitFor(() => {
    47        expect(
    48          queryByRole(MENU_ITEM_ROLE, { name: 'triple.app.cpu' })
    49        ).toBeInTheDocument();
    50        expect(
    51          queryByRole(MENU_ITEM_ROLE, { name: 'triple.app.objects' })
    52        ).toBeInTheDocument();
    53      });
    54      // checks if 'double' group expands 2 profile types
    55      fireEvent.click(screen.getByRole(MENU_ITEM_ROLE, { name: 'double' }));
    56      await waitFor(() => {
    57        expect(
    58          queryByRole(MENU_ITEM_ROLE, { name: 'double.space' })
    59        ).toBeInTheDocument();
    60        expect(
    61          queryByRole(MENU_ITEM_ROLE, { name: 'double.cpu' })
    62        ).toBeInTheDocument();
    63      });
    64    });
    65  });
    66  
    67  describe('AppSelector', () => {
    68    it('filters apps by query input', async () => {
    69      const onSelected = jest.fn();
    70  
    71      render(
    72        <AppSelector
    73          apps={mockApps}
    74          onSelected={onSelected}
    75          selectedAppName={''}
    76        />
    77      );
    78  
    79      getByTestId('toggler').click();
    80  
    81      const input = screen.getByTestId('application-search');
    82      fireEvent.change(input, { target: { value: 'triple.app' } });
    83  
    84      // picks groups, which either should be rendered or not
    85      await waitFor(() => {
    86        expect(
    87          queryByRole(MENU_ITEM_ROLE, { name: 'single' })
    88        ).not.toBeInTheDocument();
    89        expect(
    90          queryByRole(MENU_ITEM_ROLE, { name: 'double' })
    91        ).not.toBeInTheDocument();
    92        expect(
    93          queryByRole(MENU_ITEM_ROLE, { name: 'triple.app' })
    94        ).toBeInTheDocument();
    95      });
    96    });
    97  });