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

     1  import React from 'react';
     2  import { render, screen } from '@testing-library/react';
     3  
     4  import ModalWithToggle, { ModalWithToggleProps } from './ModalWithToggle';
     5  
     6  const defaultProps = {
     7    isModalOpen: false,
     8    setModalOpenStatus: jest.fn(),
     9    toggleText: 'toggle-test-text',
    10    headerEl: <div />,
    11    leftSideEl: <div />,
    12    rightSideEl: <div />,
    13    footerEl: <div />,
    14  };
    15  
    16  describe('Component: ModalWithToggle', () => {
    17    const renderComponent = (props: ModalWithToggleProps) => {
    18      render(<ModalWithToggle {...props} />);
    19    };
    20  
    21    describe('structure', () => {
    22      it('should display toggler button', () => {
    23        renderComponent(defaultProps);
    24  
    25        expect(screen.getByTestId('toggler')).toHaveTextContent(
    26          defaultProps.toggleText
    27        );
    28      });
    29  
    30      it('should display modal after toggler click', () => {
    31        renderComponent({ ...defaultProps, isModalOpen: true });
    32  
    33        expect(screen.getByTestId('modal')).toBeInTheDocument();
    34        expect(screen.getByTestId('modal-header')).toBeInTheDocument();
    35        expect(screen.getByTestId('modal-body')).toBeInTheDocument();
    36        expect(screen.getByTestId('modal-footer')).toBeInTheDocument();
    37      });
    38    });
    39  
    40    describe('optional props', () => {
    41      it('props: noDataEl', () => {
    42        renderComponent({
    43          ...defaultProps,
    44          isModalOpen: true,
    45          noDataEl: <div data-testid="no-data" />,
    46        });
    47        expect(screen.getByTestId('no-data')).toBeInTheDocument();
    48      });
    49  
    50      it('props: modalClassName', () => {
    51        renderComponent({
    52          ...defaultProps,
    53          isModalOpen: true,
    54          modalClassName: 'test-class-name',
    55        });
    56        expect(screen.getByTestId('modal').getAttribute('class')).toContain(
    57          'test-class-name'
    58        );
    59      });
    60  
    61      it('props: modalHeight', () => {
    62        renderComponent({
    63          ...defaultProps,
    64          modalHeight: '100px',
    65          isModalOpen: true,
    66        });
    67        expect(
    68          screen
    69            .getByTestId('modal')
    70            .querySelector('.side')
    71            ?.getAttribute('style')
    72        ).toContain('100px');
    73      });
    74    });
    75  });