projectTeams.spec.jsx 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {
  3. render,
  4. renderGlobalModal,
  5. screen,
  6. userEvent,
  7. waitFor,
  8. waitForElementToBeRemoved,
  9. } from 'sentry-test/reactTestingLibrary';
  10. import TeamStore from 'sentry/stores/teamStore';
  11. import ProjectTeams from 'sentry/views/settings/project/projectTeams';
  12. describe('ProjectTeams', function () {
  13. let org;
  14. let project;
  15. let routerContext;
  16. const team1 = TestStubs.Team();
  17. const team2 = TestStubs.Team({
  18. id: '2',
  19. slug: 'team-slug-2',
  20. name: 'Team Name 2',
  21. hasAccess: true,
  22. });
  23. beforeEach(function () {
  24. const initialData = initializeOrg();
  25. org = initialData.organization;
  26. project = initialData.project;
  27. routerContext = initialData.routerContext;
  28. TeamStore.loadInitialData([team1, team2]);
  29. MockApiClient.addMockResponse({
  30. url: `/projects/${org.slug}/${project.slug}/`,
  31. method: 'GET',
  32. body: project,
  33. });
  34. MockApiClient.addMockResponse({
  35. url: `/projects/${org.slug}/${project.slug}/teams/`,
  36. method: 'GET',
  37. body: [team1],
  38. });
  39. MockApiClient.addMockResponse({
  40. url: `/organizations/${org.slug}/teams/`,
  41. method: 'GET',
  42. body: [team1, team2],
  43. });
  44. });
  45. afterEach(function () {
  46. MockApiClient.clearMockResponses();
  47. });
  48. it('renders', function () {
  49. const {container} = render(
  50. <ProjectTeams
  51. params={{orgId: org.slug, projectId: project.slug}}
  52. organization={org}
  53. />
  54. );
  55. expect(container).toSnapshot();
  56. });
  57. it('can remove a team from project', async function () {
  58. MockApiClient.addMockResponse({
  59. url: `/projects/${org.slug}/${project.slug}/teams/`,
  60. method: 'GET',
  61. body: [team1, team2],
  62. });
  63. const endpoint = `/projects/${org.slug}/${project.slug}/teams/${team1.slug}/`;
  64. const mock = MockApiClient.addMockResponse({
  65. url: endpoint,
  66. method: 'DELETE',
  67. statusCode: 200,
  68. });
  69. const endpoint2 = `/projects/${org.slug}/${project.slug}/teams/${team2.slug}/`;
  70. const mock2 = MockApiClient.addMockResponse({
  71. url: endpoint2,
  72. method: 'DELETE',
  73. statusCode: 200,
  74. });
  75. render(
  76. <ProjectTeams
  77. params={{orgId: org.slug, projectId: project.slug}}
  78. organization={org}
  79. />
  80. );
  81. expect(mock).not.toHaveBeenCalled();
  82. userEvent.click(screen.getAllByRole('button', {name: 'Remove'})[0]);
  83. expect(mock).toHaveBeenCalledWith(
  84. endpoint,
  85. expect.objectContaining({
  86. method: 'DELETE',
  87. })
  88. );
  89. // Wait for row to be removed
  90. await waitForElementToBeRemoved(() => screen.queryByText('#team-slug'));
  91. // Remove second team
  92. userEvent.click(screen.getAllByRole('button', {name: 'Remove'})[0]);
  93. // Modal opens because this is the last team in project
  94. renderGlobalModal();
  95. expect(screen.getByRole('dialog')).toBeInTheDocument();
  96. userEvent.click(screen.getByTestId('confirm-button'));
  97. expect(mock2).toHaveBeenCalledWith(
  98. endpoint2,
  99. expect.objectContaining({
  100. method: 'DELETE',
  101. })
  102. );
  103. });
  104. it('removes team from project when project team is not in org list', async function () {
  105. MockApiClient.clearMockResponses();
  106. MockApiClient.addMockResponse({
  107. url: `/projects/${org.slug}/${project.slug}/teams/`,
  108. method: 'GET',
  109. body: [team1, team2],
  110. });
  111. const endpoint = `/projects/${org.slug}/${project.slug}/teams/${team1.slug}/`;
  112. const mock = MockApiClient.addMockResponse({
  113. url: endpoint,
  114. method: 'DELETE',
  115. });
  116. const endpoint2 = `/projects/${org.slug}/${project.slug}/teams/${team2.slug}/`;
  117. const mock2 = MockApiClient.addMockResponse({
  118. url: endpoint2,
  119. method: 'DELETE',
  120. });
  121. MockApiClient.addMockResponse({
  122. url: `/organizations/${org.slug}/teams/`,
  123. method: 'GET',
  124. body: [
  125. TestStubs.Team({
  126. id: '3',
  127. slug: 'team-slug-3',
  128. name: 'Team Name 3',
  129. hasAccess: true,
  130. }),
  131. ],
  132. });
  133. render(
  134. <ProjectTeams
  135. params={{orgId: org.slug, projectId: project.slug}}
  136. organization={org}
  137. />
  138. );
  139. expect(mock).not.toHaveBeenCalled();
  140. // Click "Remove"
  141. userEvent.click(screen.getAllByRole('button', {name: 'Remove'})[0]);
  142. expect(mock).toHaveBeenCalledWith(
  143. endpoint,
  144. expect.objectContaining({
  145. method: 'DELETE',
  146. })
  147. );
  148. await waitForElementToBeRemoved(() => screen.queryByText('#team-slug'));
  149. // Remove second team
  150. userEvent.click(screen.getAllByRole('button', {name: 'Remove'})[0]);
  151. // Modal opens because this is the last team in project
  152. renderGlobalModal();
  153. expect(screen.getByRole('dialog')).toBeInTheDocument();
  154. // Click confirm
  155. userEvent.click(screen.getByTestId('confirm-button'));
  156. expect(mock2).toHaveBeenCalledWith(
  157. endpoint2,
  158. expect.objectContaining({
  159. method: 'DELETE',
  160. })
  161. );
  162. });
  163. it('can associate a team with project', function () {
  164. const endpoint = `/projects/${org.slug}/${project.slug}/teams/${team2.slug}/`;
  165. const mock = MockApiClient.addMockResponse({
  166. url: endpoint,
  167. method: 'POST',
  168. statusCode: 200,
  169. });
  170. render(
  171. <ProjectTeams
  172. params={{orgId: org.slug, projectId: project.slug}}
  173. organization={org}
  174. />
  175. );
  176. expect(mock).not.toHaveBeenCalled();
  177. // Add a team
  178. userEvent.click(screen.getAllByRole('button', {name: 'Add Team'})[1]);
  179. userEvent.click(screen.getByText('#team-slug-2'));
  180. expect(mock).toHaveBeenCalledWith(
  181. endpoint,
  182. expect.objectContaining({
  183. method: 'POST',
  184. })
  185. );
  186. });
  187. it('creates a new team adds it to current project using the "create team modal" in dropdown', async function () {
  188. MockApiClient.addMockResponse({
  189. url: '/internal/health/',
  190. body: {},
  191. });
  192. MockApiClient.addMockResponse({
  193. url: '/assistant/',
  194. body: {},
  195. });
  196. MockApiClient.addMockResponse({
  197. url: '/organizations/',
  198. body: [org],
  199. });
  200. const addTeamToProject = MockApiClient.addMockResponse({
  201. url: `/projects/${org.slug}/${project.slug}/teams/new-team/`,
  202. method: 'POST',
  203. });
  204. const createTeam = MockApiClient.addMockResponse({
  205. url: `/organizations/${org.slug}/teams/`,
  206. method: 'POST',
  207. body: {slug: 'new-team'},
  208. });
  209. render(
  210. <ProjectTeams
  211. params={{orgId: org.slug, projectId: project.slug}}
  212. project={project}
  213. organization={org}
  214. />,
  215. {context: routerContext}
  216. );
  217. // Add new team
  218. userEvent.click(screen.getAllByRole('button', {name: 'Add Team'})[1]);
  219. // XXX(epurkhiser): Create Team should really be a button
  220. userEvent.click(screen.getByRole('link', {name: 'Create Team'}));
  221. renderGlobalModal();
  222. await screen.findByRole('dialog');
  223. userEvent.type(screen.getByRole('textbox', {name: 'Team Name'}), 'new-team');
  224. userEvent.click(screen.getByRole('button', {name: 'Create Team'}));
  225. await waitFor(() => expect(createTeam).toHaveBeenCalledTimes(1));
  226. expect(createTeam).toHaveBeenCalledWith(
  227. '/organizations/org-slug/teams/',
  228. expect.objectContaining({
  229. data: {slug: 'new-team'},
  230. })
  231. );
  232. expect(addTeamToProject).toHaveBeenCalledTimes(1);
  233. expect(addTeamToProject).toHaveBeenCalledWith(
  234. '/projects/org-slug/project-slug/teams/new-team/',
  235. expect.anything()
  236. );
  237. });
  238. });