applications/calendar/src/app/components/events/Participant.spec.tsx

   1 import { screen, waitFor } from '@testing-library/react';
   2 import userEvent from '@testing-library/user-event';
   3
   4 import { render } from '../../helpers/test/render';
   5 import Participant from './Participant';
   6
   7 describe('Participant', () => {
   8     const onCreateOrEditContactCallback = jest.fn();
   9     const props = {
  10         icon: <span>{'Icon'}</span>,
  11         name: 'text',
  12         title: 'title',
  13         tooltip: 'tooltip',
  14         initials: 'initials',
  15         email: 'email@provider.com',
  16         isContact: true,
  17         isCurrentUser: false,
  18         onCreateOrEditContact: onCreateOrEditContactCallback,
  19     };
  20
  21     afterEach(() => {
  22         onCreateOrEditContactCallback.mockClear();
  23     });
  24
  25     it('should render correctly', () => {
  26         const { rerender } = render(<Participant {...props} />);
  27
  28         expect(screen.getByText(props.name)).toBeInTheDocument();
  29         expect(screen.getByText(props.email)).toBeInTheDocument();
  30         expect(screen.getByText(props.initials)).toBeInTheDocument();
  31         expect(screen.getByText('Icon')).toBeInTheDocument();
  32
  33         rerender(<Participant {...props} extraText="extraText" />);
  34         expect(screen.getByText('extraText')).toBeInTheDocument();
  35     });
  36
  37     it('should render email only one time', () => {
  38         render(<Participant {...props} name={props.email} />);
  39         expect(screen.getByText(props.email)).toBeInTheDocument();
  40         expect(screen.queryAllByText(props.email)).toHaveLength(1);
  41     });
  42
  43     it('should not render email if isCurrentUser', () => {
  44         render(<Participant {...props} isCurrentUser />);
  45         expect(screen.queryByText(props.email)).not.toBeInTheDocument();
  46     });
  47
  48     it('should render dropdown on user click', async () => {
  49         render(<Participant {...props} />);
  50
  51         await userEvent.click(screen.getByTitle('More options'));
  52
  53         await waitFor(() => {
  54             expect(screen.getByText('Copy email address')).toBeInTheDocument();
  55         });
  56         expect(screen.getByText('View contact details')).toBeInTheDocument();
  57     });
  58
  59     describe('Contact modals callbacks', () => {
  60         it('should call contact details modal callback', async () => {
  61             render(<Participant {...props} isContact />);
  62
  63             await userEvent.click(screen.getByTitle('More options'));
  64
  65             await waitFor(() => {
  66                 expect(screen.getByText('View contact details')).toBeInTheDocument();
  67             });
  68
  69             await userEvent.click(screen.getByText('View contact details'));
  70
  71             expect(onCreateOrEditContactCallback).toHaveBeenCalledTimes(1);
  72         });
  73
  74         it('should call add contact modal callback', async () => {
  75             render(<Participant {...props} isContact={false} />);
  76
  77             await userEvent.click(screen.getByTitle('More options'));
  78
  79             await waitFor(() => {
  80                 expect(screen.getByText('Create new contact')).toBeInTheDocument();
  81             });
  82
  83             await userEvent.click(screen.getByText('Create new contact'));
  84
  85             expect(onCreateOrEditContactCallback).toHaveBeenCalledTimes(1);
  86         });
  87     });
  88 });