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

     1  import React from 'react';
     2  import { MemoryRouter } from 'react-router-dom';
     3  import { render, screen } from '@testing-library/react';
     4  import { configureStore } from '@reduxjs/toolkit';
     5  import { Provider } from 'react-redux';
     6  import uiReducer from '@webapp/redux/reducers/ui';
     7  
     8  import { SidebarComponent } from './Sidebar';
     9  
    10  // TODO: figure out the types here
    11  function createStore(preloadedState: any) {
    12    const store = configureStore({
    13      reducer: {
    14        ui: uiReducer,
    15      },
    16      preloadedState,
    17    });
    18  
    19    return store;
    20  }
    21  
    22  describe('Sidebar', () => {
    23    describe('active routes highlight', () => {
    24      describe.each([
    25        ['/', 'sidebar-continuous-single'],
    26        ['/comparison', 'sidebar-continuous-comparison'],
    27        ['/comparison-diff', 'sidebar-continuous-diff'],
    28      ])('visiting route %s', (a, b) => {
    29        describe('collapsed', () => {
    30          test(`should have menuitem ${b} active`, () => {
    31            render(
    32              <MemoryRouter initialEntries={[a]}>
    33                <Provider
    34                  store={createStore({
    35                    ui: {
    36                      sidebar: {
    37                        state: 'pristine',
    38                        collapsed: true,
    39                      },
    40                    },
    41                  })}
    42                >
    43                  <SidebarComponent />
    44                </Provider>
    45              </MemoryRouter>
    46            );
    47  
    48            // it should be active
    49            expect(screen.getByTestId(b)).toHaveClass('active');
    50          });
    51        });
    52  
    53        describe('not collapsed', () => {
    54          test(`should have menuitem ${b} active`, () => {
    55            render(
    56              <MemoryRouter initialEntries={[a]}>
    57                <Provider
    58                  store={createStore({
    59                    ui: {
    60                      sidebar: {
    61                        state: 'pristine',
    62                        collapsed: false,
    63                      },
    64                    },
    65                  })}
    66                >
    67                  <SidebarComponent />
    68                </Provider>
    69              </MemoryRouter>
    70            );
    71  
    72            // it should be active
    73            expect(screen.getByTestId(b)).toHaveClass('active');
    74          });
    75        });
    76      });
    77    });
    78  });