participantList.spec.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import {TeamFixture} from 'sentry-fixture/team';
  2. import {UserFixture} from 'sentry-fixture/user';
  3. import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
  4. import {ParticipantList} from './participantList';
  5. describe('ParticipantList', () => {
  6. const users = [
  7. UserFixture({id: '1', name: 'John Doe', email: 'john.doe@example.com'}),
  8. UserFixture({id: '2', name: 'Jane Doe', email: 'jane.doe@example.com'}),
  9. ];
  10. const teams = [
  11. TeamFixture({id: '1', slug: 'team-1', memberCount: 3}),
  12. TeamFixture({id: '2', slug: 'team-2', memberCount: 5}),
  13. ];
  14. it('expands and collapses the list when clicked', async () => {
  15. render(
  16. <ParticipantList teams={teams} users={users} description="Participants">
  17. Click Me
  18. </ParticipantList>
  19. );
  20. expect(screen.queryByText('#team-1')).not.toBeInTheDocument();
  21. await userEvent.click(screen.getByText('Click Me'));
  22. await waitFor(() => expect(screen.getByText('#team-1')).toBeVisible());
  23. expect(screen.getByText('Teams (2)')).toBeInTheDocument();
  24. expect(screen.getByText('Individuals (2)')).toBeInTheDocument();
  25. await userEvent.click(screen.getByText('Click Me'));
  26. await waitFor(() => expect(screen.getByText('#team-1')).not.toBeVisible());
  27. });
  28. it('does not display section headers when there is only users or teams', async () => {
  29. render(
  30. <ParticipantList teams={[]} users={users} description="Participants">
  31. Click Me
  32. </ParticipantList>
  33. );
  34. await userEvent.click(screen.getByRole('button', {name: 'Click Me'}));
  35. await waitFor(() => expect(screen.getByText('John Doe')).toBeVisible());
  36. expect(screen.queryByText('Individuals (2)')).not.toBeInTheDocument();
  37. });
  38. });