index.spec.tsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. import {Fragment} from 'react';
  2. import {GroupFixture} from 'sentry-fixture/group';
  3. import {OrganizationFixture} from 'sentry-fixture/organization';
  4. import {ProjectFixture} from 'sentry-fixture/project';
  5. import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
  6. import GlobalModal from 'sentry/components/globalModal';
  7. import GroupStore from 'sentry/stores/groupStore';
  8. import SelectedGroupStore from 'sentry/stores/selectedGroupStore';
  9. import {IssueCategory} from 'sentry/types/group';
  10. import * as analytics from 'sentry/utils/analytics';
  11. import {IssueListActions} from 'sentry/views/issueList/actions';
  12. const organization = OrganizationFixture();
  13. const defaultProps = {
  14. allResultsVisible: false,
  15. query: '',
  16. queryCount: 15,
  17. projectId: 'project-slug',
  18. selection: {
  19. projects: [1],
  20. environments: [],
  21. datetime: {start: null, end: null, period: null, utc: true},
  22. },
  23. groupIds: ['1', '2', '3'],
  24. onRealtimeChange: jest.fn(),
  25. onSelectStatsPeriod: jest.fn(),
  26. realtimeActive: false,
  27. statsPeriod: '24h',
  28. onDelete: jest.fn(),
  29. displayReprocessingActions: false,
  30. onSortChange: jest.fn(),
  31. sort: '',
  32. };
  33. function WrappedComponent(props) {
  34. return (
  35. <Fragment>
  36. <GlobalModal />
  37. <IssueListActions {...defaultProps} {...props} />
  38. </Fragment>
  39. );
  40. }
  41. describe('IssueListActions', function () {
  42. afterEach(() => {
  43. jest.restoreAllMocks();
  44. });
  45. beforeEach(() => {
  46. GroupStore.reset();
  47. SelectedGroupStore.reset();
  48. SelectedGroupStore.add(['1', '2', '3']);
  49. MockApiClient.addMockResponse({
  50. url: `/organizations/${organization.slug}/projects/`,
  51. body: [ProjectFixture({id: '1'})],
  52. });
  53. });
  54. describe('Bulk', function () {
  55. describe('Total results greater than bulk limit', function () {
  56. it('after checking "Select all" checkbox, displays bulk select message', async function () {
  57. render(<WrappedComponent queryCount={1500} />);
  58. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  59. });
  60. it('can bulk select', async function () {
  61. render(<WrappedComponent queryCount={1500} />);
  62. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  63. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  64. });
  65. it('bulk resolves', async function () {
  66. const apiMock = MockApiClient.addMockResponse({
  67. url: '/organizations/org-slug/issues/',
  68. method: 'PUT',
  69. });
  70. render(<WrappedComponent queryCount={1500} />);
  71. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  72. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  73. await userEvent.click(await screen.findByRole('button', {name: 'Resolve'}));
  74. await screen.findByRole('dialog');
  75. await userEvent.click(screen.getByRole('button', {name: 'Bulk resolve issues'}));
  76. expect(apiMock).toHaveBeenCalledWith(
  77. expect.anything(),
  78. expect.objectContaining({
  79. query: {
  80. project: [1],
  81. },
  82. data: {status: 'resolved', statusDetails: {}, substatus: null},
  83. })
  84. );
  85. });
  86. it('bulk sets priority', async function () {
  87. const apiMock = MockApiClient.addMockResponse({
  88. url: '/organizations/org-slug/issues/',
  89. method: 'PUT',
  90. });
  91. render(<WrappedComponent queryCount={1500} />, {
  92. organization: OrganizationFixture({features: ['issue-priority-ui']}),
  93. });
  94. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  95. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  96. await userEvent.click(await screen.findByRole('button', {name: 'Set Priority'}));
  97. await userEvent.click(screen.getByRole('menuitemradio', {name: 'High'}));
  98. expect(
  99. within(screen.getByRole('dialog')).getByText(
  100. 'Are you sure you want to reprioritize to high the first 1,000 issues that match the search?'
  101. )
  102. ).toBeInTheDocument();
  103. await userEvent.click(
  104. screen.getByRole('button', {name: 'Bulk reprioritize issues'})
  105. );
  106. expect(apiMock).toHaveBeenCalledWith(
  107. expect.anything(),
  108. expect.objectContaining({
  109. query: {
  110. project: [1],
  111. },
  112. data: {priority: 'high'},
  113. })
  114. );
  115. });
  116. });
  117. describe('Total results less than bulk limit', function () {
  118. it('after checking "Select all" checkbox, displays bulk select message', async function () {
  119. render(<WrappedComponent queryCount={15} />);
  120. const checkbox = screen.getByRole('checkbox', {name: 'Select all'});
  121. await userEvent.click(checkbox);
  122. expect(checkbox).toBeChecked();
  123. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  124. });
  125. it('bulk resolves', async function () {
  126. const apiMock = MockApiClient.addMockResponse({
  127. url: '/organizations/org-slug/issues/',
  128. method: 'PUT',
  129. });
  130. render(<WrappedComponent queryCount={15} />);
  131. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  132. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  133. await userEvent.click(await screen.findByRole('button', {name: 'Resolve'}));
  134. const modal = screen.getByRole('dialog');
  135. await userEvent.click(
  136. within(modal).getByRole('button', {name: 'Bulk resolve issues'})
  137. );
  138. expect(apiMock).toHaveBeenCalledWith(
  139. expect.anything(),
  140. expect.objectContaining({
  141. query: {
  142. project: [1],
  143. },
  144. data: {status: 'resolved', statusDetails: {}, substatus: null},
  145. })
  146. );
  147. });
  148. });
  149. describe('Selected on page', function () {
  150. it('resolves selected items', async function () {
  151. const apiMock = MockApiClient.addMockResponse({
  152. url: '/organizations/org-slug/issues/',
  153. method: 'PUT',
  154. });
  155. jest.spyOn(SelectedGroupStore, 'getSelectedIds').mockReturnValue(new Set(['1']));
  156. render(<WrappedComponent groupIds={['1', '2', '3', '6', '9']} />);
  157. const resolveButton = screen.getByRole('button', {name: 'Resolve'});
  158. expect(resolveButton).toBeEnabled();
  159. await userEvent.click(resolveButton);
  160. expect(apiMock).toHaveBeenCalledWith(
  161. expect.anything(),
  162. expect.objectContaining({
  163. query: {
  164. id: ['1'],
  165. project: [1],
  166. },
  167. data: {status: 'resolved', statusDetails: {}, substatus: null},
  168. })
  169. );
  170. });
  171. });
  172. });
  173. it('can set priority', async function () {
  174. const apiMock = MockApiClient.addMockResponse({
  175. url: '/organizations/org-slug/issues/',
  176. method: 'PUT',
  177. });
  178. jest.spyOn(SelectedGroupStore, 'getSelectedIds').mockReturnValue(new Set(['1']));
  179. render(<WrappedComponent {...defaultProps} />, {
  180. organization: OrganizationFixture({features: ['issue-priority-ui']}),
  181. });
  182. await userEvent.click(screen.getByRole('button', {name: 'Set Priority'}));
  183. await userEvent.click(screen.getByRole('menuitemradio', {name: 'High'}));
  184. expect(apiMock).toHaveBeenCalledWith(
  185. expect.anything(),
  186. expect.objectContaining({
  187. query: {
  188. id: ['1'],
  189. project: [1],
  190. },
  191. data: {priority: 'high'},
  192. })
  193. );
  194. });
  195. it('can archive an issue until escalating', async () => {
  196. const analyticsSpy = jest.spyOn(analytics, 'trackAnalytics');
  197. const apiMock = MockApiClient.addMockResponse({
  198. url: `/organizations/${organization.slug}/issues/`,
  199. method: 'PUT',
  200. });
  201. jest.spyOn(SelectedGroupStore, 'getSelectedIds').mockReturnValue(new Set(['1']));
  202. render(<WrappedComponent {...defaultProps} />, {organization});
  203. await userEvent.click(screen.getByRole('button', {name: 'Archive'}));
  204. expect(apiMock).toHaveBeenCalledWith(
  205. expect.anything(),
  206. expect.objectContaining({
  207. query: {
  208. id: ['1'],
  209. project: [1],
  210. },
  211. data: {
  212. status: 'ignored',
  213. statusDetails: {},
  214. substatus: 'archived_until_escalating',
  215. },
  216. })
  217. );
  218. expect(analyticsSpy).toHaveBeenCalledWith(
  219. 'issues_stream.archived',
  220. expect.objectContaining({
  221. action_substatus: 'archived_until_escalating',
  222. })
  223. );
  224. });
  225. it('can unarchive an issue when the query contains is:archived', async () => {
  226. const apiMock = MockApiClient.addMockResponse({
  227. url: `/organizations/${organization.slug}/issues/`,
  228. method: 'PUT',
  229. });
  230. jest.spyOn(SelectedGroupStore, 'getSelectedIds').mockReturnValue(new Set(['1']));
  231. render(<WrappedComponent {...defaultProps} query="is:archived" />, {
  232. organization,
  233. });
  234. await userEvent.click(screen.getByRole('button', {name: 'Unarchive'}));
  235. expect(apiMock).toHaveBeenCalledWith(
  236. expect.anything(),
  237. expect.objectContaining({
  238. query: expect.objectContaining({id: ['1'], project: [1]}),
  239. data: {status: 'unresolved', statusDetails: {}},
  240. })
  241. );
  242. });
  243. it('can resolve but not merge issues from different projects', async function () {
  244. jest
  245. .spyOn(SelectedGroupStore, 'getSelectedIds')
  246. .mockImplementation(() => new Set(['1', '2', '3']));
  247. jest.spyOn(GroupStore, 'get').mockImplementation(id => {
  248. switch (id) {
  249. case '1':
  250. return GroupFixture({project: ProjectFixture({slug: 'project-1'})});
  251. default:
  252. return GroupFixture({project: ProjectFixture({slug: 'project-2'})});
  253. }
  254. });
  255. render(<WrappedComponent />);
  256. // Can resolve but not merge issues from multiple projects
  257. expect(await screen.findByRole('button', {name: 'Resolve'})).toBeEnabled();
  258. expect(screen.getByRole('button', {name: 'Merge Selected Issues'})).toBeDisabled();
  259. });
  260. describe('mark reviewed', function () {
  261. it('acknowledges group', async function () {
  262. const mockOnActionTaken = jest.fn();
  263. MockApiClient.addMockResponse({
  264. url: '/organizations/org-slug/issues/',
  265. method: 'PUT',
  266. });
  267. jest
  268. .spyOn(SelectedGroupStore, 'getSelectedIds')
  269. .mockImplementation(() => new Set(['1', '2', '3']));
  270. jest.spyOn(GroupStore, 'get').mockImplementation(id => {
  271. return GroupFixture({
  272. id,
  273. inbox: {
  274. date_added: '2020-11-24T13:17:42.248751Z',
  275. reason: 0,
  276. reason_details: null,
  277. },
  278. });
  279. });
  280. render(<WrappedComponent onActionTaken={mockOnActionTaken} />);
  281. const reviewButton = screen.getByRole('button', {name: 'Mark Reviewed'});
  282. expect(reviewButton).toBeEnabled();
  283. await userEvent.click(reviewButton);
  284. expect(mockOnActionTaken).toHaveBeenCalledWith(['1', '2', '3'], {inbox: false});
  285. });
  286. it('mark reviewed disabled for group that is already reviewed', async function () {
  287. SelectedGroupStore.add(['1']);
  288. SelectedGroupStore.toggleSelectAll();
  289. GroupStore.loadInitialData([GroupFixture({id: '1', inbox: null})]);
  290. render(<WrappedComponent {...defaultProps} />);
  291. expect(await screen.findByRole('button', {name: 'Mark Reviewed'})).toBeDisabled();
  292. });
  293. });
  294. describe('sort', function () {
  295. it('calls onSortChange with new sort value', async function () {
  296. const mockOnSortChange = jest.fn();
  297. render(<WrappedComponent onSortChange={mockOnSortChange} />);
  298. await userEvent.click(screen.getByRole('button', {name: 'Last Seen'}));
  299. await userEvent.click(screen.getByText(/Number of events/));
  300. expect(mockOnSortChange).toHaveBeenCalledWith('freq');
  301. });
  302. });
  303. describe('performance issues', function () {
  304. it('disables options that are not supported for performance issues', async () => {
  305. jest
  306. .spyOn(SelectedGroupStore, 'getSelectedIds')
  307. .mockImplementation(() => new Set(['1', '2']));
  308. jest.spyOn(GroupStore, 'get').mockImplementation(id => {
  309. switch (id) {
  310. case '1':
  311. return GroupFixture({
  312. issueCategory: IssueCategory.ERROR,
  313. });
  314. default:
  315. return GroupFixture({
  316. issueCategory: IssueCategory.PERFORMANCE,
  317. });
  318. }
  319. });
  320. render(<WrappedComponent />);
  321. // Resolve and ignore are supported
  322. expect(screen.getByRole('button', {name: 'Resolve'})).toBeEnabled();
  323. expect(screen.getByRole('button', {name: 'Archive'})).toBeEnabled();
  324. // Merge is not supported and should be disabled
  325. expect(screen.getByRole('button', {name: 'Merge Selected Issues'})).toBeDisabled();
  326. // Open overflow menu
  327. await userEvent.click(screen.getByRole('button', {name: 'More issue actions'}));
  328. // 'Add to Bookmarks' is supported
  329. expect(
  330. screen.getByRole('menuitemradio', {name: 'Add to Bookmarks'})
  331. ).not.toHaveAttribute('aria-disabled');
  332. // Deleting is not supported and menu item should be disabled
  333. expect(screen.getByRole('menuitemradio', {name: 'Delete'})).toHaveAttribute(
  334. 'aria-disabled',
  335. 'true'
  336. );
  337. });
  338. describe('bulk action performance issues', function () {
  339. const orgWithPerformanceIssues = OrganizationFixture({
  340. features: ['performance-issues'],
  341. });
  342. it('silently filters out performance issues when bulk deleting', async function () {
  343. const bulkDeleteMock = MockApiClient.addMockResponse({
  344. url: '/organizations/org-slug/issues/',
  345. method: 'DELETE',
  346. });
  347. render(
  348. <Fragment>
  349. <GlobalModal />
  350. <IssueListActions {...defaultProps} query="is:unresolved" queryCount={100} />
  351. </Fragment>,
  352. {organization: orgWithPerformanceIssues}
  353. );
  354. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  355. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  356. await userEvent.click(
  357. await screen.findByRole('button', {name: 'More issue actions'})
  358. );
  359. await userEvent.click(screen.getByRole('menuitemradio', {name: 'Delete'}));
  360. const modal = screen.getByRole('dialog');
  361. expect(
  362. within(modal).getByText(/deleting performance issues is not yet supported/i)
  363. ).toBeInTheDocument();
  364. await userEvent.click(
  365. within(modal).getByRole('button', {name: 'Bulk delete issues'})
  366. );
  367. expect(bulkDeleteMock).toHaveBeenCalledWith(
  368. expect.anything(),
  369. expect.objectContaining({
  370. query: expect.objectContaining({
  371. query: 'is:unresolved issue.category:error',
  372. }),
  373. })
  374. );
  375. });
  376. it('silently filters out performance issues when bulk merging', async function () {
  377. const bulkMergeMock = MockApiClient.addMockResponse({
  378. url: '/organizations/org-slug/issues/',
  379. method: 'PUT',
  380. });
  381. // Ensure that all issues have the same project so we can merge
  382. jest
  383. .spyOn(GroupStore, 'get')
  384. .mockReturnValue(GroupFixture({project: ProjectFixture({slug: 'project-1'})}));
  385. render(
  386. <Fragment>
  387. <GlobalModal />
  388. <IssueListActions {...defaultProps} query="is:unresolved" queryCount={100} />
  389. </Fragment>,
  390. {organization: orgWithPerformanceIssues}
  391. );
  392. await userEvent.click(screen.getByRole('checkbox', {name: 'Select all'}));
  393. await userEvent.click(screen.getByTestId('issue-list-select-all-notice-link'));
  394. await userEvent.click(
  395. screen.getByRole('button', {name: 'Merge Selected Issues'})
  396. );
  397. const modal = screen.getByRole('dialog');
  398. expect(
  399. within(modal).getByText(/merging performance issues is not yet supported/i)
  400. ).toBeInTheDocument();
  401. await userEvent.click(
  402. within(modal).getByRole('button', {name: 'Bulk merge issues'})
  403. );
  404. expect(bulkMergeMock).toHaveBeenCalledWith(
  405. expect.anything(),
  406. expect.objectContaining({
  407. query: expect.objectContaining({
  408. query: 'is:unresolved issue.category:error',
  409. }),
  410. })
  411. );
  412. });
  413. });
  414. });
  415. });