projectTeamAccess.spec.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import {ProjectFixture} from 'sentry-fixture/project';
  2. import {TeamFixture} from 'sentry-fixture/team';
  3. import {initializeOrg} from 'sentry-test/initializeOrg';
  4. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  5. import ProjectTeamAccess from 'sentry/views/projectDetail/projectTeamAccess';
  6. describe('ProjectDetail > ProjectTeamAccess', function () {
  7. const {organization, routerContext} = initializeOrg();
  8. it('renders a list', function () {
  9. render(
  10. <ProjectTeamAccess
  11. organization={organization}
  12. project={ProjectFixture({teams: [TeamFixture()]})}
  13. />,
  14. {context: routerContext}
  15. );
  16. expect(screen.getByText('Team Access')).toBeInTheDocument();
  17. expect(screen.getByText('#team-slug')).toBeInTheDocument();
  18. });
  19. it('links to a team settings', function () {
  20. render(
  21. <ProjectTeamAccess
  22. organization={organization}
  23. project={ProjectFixture({teams: [TeamFixture()]})}
  24. />,
  25. {context: routerContext}
  26. );
  27. expect(screen.getByRole('link', {name: '#team-slug'})).toHaveAttribute(
  28. 'href',
  29. '/settings/org-slug/teams/team-slug/'
  30. );
  31. });
  32. it('display the right empty state with access', function () {
  33. render(<ProjectTeamAccess organization={organization} project={ProjectFixture()} />, {
  34. context: routerContext,
  35. });
  36. expect(screen.getByRole('button', {name: 'Assign Team'})).toHaveAttribute(
  37. 'href',
  38. '/settings/org-slug/projects/project-slug/teams/'
  39. );
  40. });
  41. it('display the right empty state without access', function () {
  42. render(
  43. <ProjectTeamAccess
  44. organization={{...organization, access: []}}
  45. project={ProjectFixture({teams: []})}
  46. />,
  47. {context: routerContext}
  48. );
  49. expect(screen.getByRole('button', {name: 'Assign Team'})).toBeDisabled();
  50. });
  51. it('collapses more than 5 teams', async function () {
  52. render(
  53. <ProjectTeamAccess
  54. organization={organization}
  55. project={ProjectFixture({
  56. teams: [
  57. TeamFixture({slug: 'team1'}),
  58. TeamFixture({slug: 'team2'}),
  59. TeamFixture({slug: 'team3'}),
  60. TeamFixture({slug: 'team4'}),
  61. TeamFixture({slug: 'team5'}),
  62. TeamFixture({slug: 'team6'}),
  63. TeamFixture({slug: 'team7'}),
  64. ],
  65. })}
  66. />,
  67. {context: routerContext}
  68. );
  69. expect(screen.getAllByTestId('badge-display-name')).toHaveLength(5);
  70. await userEvent.click(screen.getByRole('button', {name: 'Show 2 collapsed teams'}));
  71. expect(screen.getAllByTestId('badge-display-name')).toHaveLength(7);
  72. await userEvent.click(screen.getByRole('button', {name: 'Collapse'}));
  73. expect(screen.getAllByTestId('badge-display-name')).toHaveLength(5);
  74. });
  75. it('sorts teams alphabetically', function () {
  76. render(
  77. <ProjectTeamAccess
  78. organization={organization}
  79. project={ProjectFixture({
  80. teams: [
  81. TeamFixture({slug: 'c'}),
  82. TeamFixture({slug: 'z'}),
  83. TeamFixture({slug: 'a'}),
  84. ],
  85. })}
  86. />,
  87. {context: routerContext}
  88. );
  89. const badges = screen.getAllByTestId('badge-display-name');
  90. expect(badges[0]).toHaveTextContent('#a');
  91. expect(badges[1]).toHaveTextContent('#c');
  92. expect(badges[2]).toHaveTextContent('#z');
  93. });
  94. });