alertRulesList.spec.tsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. import {Incident} from 'sentry-fixture/incident';
  2. import {MetricRule} from 'sentry-fixture/metricRule';
  3. import {Organization} from 'sentry-fixture/organization';
  4. import {ProjectAlertRule} from 'sentry-fixture/projectAlertRule';
  5. import {initializeOrg} from 'sentry-test/initializeOrg';
  6. import {
  7. act,
  8. render,
  9. renderGlobalModal,
  10. screen,
  11. userEvent,
  12. within,
  13. } from 'sentry-test/reactTestingLibrary';
  14. import OrganizationStore from 'sentry/stores/organizationStore';
  15. import ProjectsStore from 'sentry/stores/projectsStore';
  16. import TeamStore from 'sentry/stores/teamStore';
  17. import {IncidentStatus} from 'sentry/views/alerts/types';
  18. import AlertRulesList from './alertRulesList';
  19. jest.mock('sentry/utils/analytics');
  20. describe('AlertRulesList', () => {
  21. const defaultOrg = Organization({
  22. access: ['alerts:write'],
  23. });
  24. TeamStore.loadInitialData([TestStubs.Team()], false, null);
  25. let rulesMock!: jest.Mock;
  26. let projectMock!: jest.Mock;
  27. const pageLinks =
  28. '<https://sentry.io/api/0/organizations/org-slug/combined-rules/?cursor=0:0:1>; rel="previous"; results="false"; cursor="0:0:1", ' +
  29. '<https://sentry.io/api/0/organizations/org-slug/combined-rules/?cursor=0:100:0>; rel="next"; results="true"; cursor="0:100:0"';
  30. beforeEach(() => {
  31. rulesMock = MockApiClient.addMockResponse({
  32. url: '/organizations/org-slug/combined-rules/',
  33. headers: {Link: pageLinks},
  34. body: [
  35. ProjectAlertRule({
  36. id: '123',
  37. name: 'First Issue Alert',
  38. projects: ['earth'],
  39. createdBy: {name: 'Samwise', id: 1, email: ''},
  40. }),
  41. MetricRule({
  42. id: '345',
  43. projects: ['earth'],
  44. latestIncident: Incident({
  45. status: IncidentStatus.CRITICAL,
  46. }),
  47. }),
  48. MetricRule({
  49. id: '678',
  50. projects: ['earth'],
  51. latestIncident: null,
  52. }),
  53. ],
  54. });
  55. projectMock = MockApiClient.addMockResponse({
  56. url: '/organizations/org-slug/projects/',
  57. body: [
  58. TestStubs.Project({
  59. slug: 'earth',
  60. platform: 'javascript',
  61. teams: [TestStubs.Team()],
  62. }),
  63. ],
  64. });
  65. act(() => OrganizationStore.onUpdate(defaultOrg, {replace: true}));
  66. act(() => ProjectsStore.loadInitialData([]));
  67. });
  68. afterEach(() => {
  69. act(() => ProjectsStore.reset());
  70. MockApiClient.clearMockResponses();
  71. jest.clearAllMocks();
  72. });
  73. it('displays list', async () => {
  74. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  75. render(<AlertRulesList />, {context: routerContext, organization});
  76. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  77. expect(projectMock).toHaveBeenLastCalledWith(
  78. expect.anything(),
  79. expect.objectContaining({
  80. query: expect.objectContaining({query: 'slug:earth'}),
  81. })
  82. );
  83. expect(screen.getAllByTestId('badge-display-name')[0]).toHaveTextContent('earth');
  84. });
  85. it('displays empty state', async () => {
  86. MockApiClient.addMockResponse({
  87. url: '/organizations/org-slug/combined-rules/',
  88. body: [],
  89. });
  90. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  91. render(<AlertRulesList />, {context: routerContext, organization});
  92. expect(
  93. await screen.findByText('No alert rules found for the current query.')
  94. ).toBeInTheDocument();
  95. expect(rulesMock).toHaveBeenCalledTimes(0);
  96. });
  97. it('displays team dropdown context if unassigned', async () => {
  98. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  99. render(<AlertRulesList />, {context: routerContext, organization});
  100. const assignee = (await screen.findAllByTestId('alert-row-assignee'))[0];
  101. const btn = within(assignee).getAllByRole('button')[0];
  102. expect(assignee).toBeInTheDocument();
  103. expect(btn).toBeInTheDocument();
  104. await userEvent.click(btn, {skipHover: true});
  105. expect(screen.getByText('#team-slug')).toBeInTheDocument();
  106. expect(within(assignee).getByText('Unassigned')).toBeInTheDocument();
  107. });
  108. it('assigns rule to team from unassigned', async () => {
  109. const assignMock = MockApiClient.addMockResponse({
  110. method: 'PUT',
  111. url: '/projects/org-slug/earth/rules/123/',
  112. body: [],
  113. });
  114. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  115. render(<AlertRulesList />, {context: routerContext, organization});
  116. const assignee = (await screen.findAllByTestId('alert-row-assignee'))[0];
  117. const btn = within(assignee).getAllByRole('button')[0];
  118. expect(assignee).toBeInTheDocument();
  119. expect(btn).toBeInTheDocument();
  120. await userEvent.click(btn, {skipHover: true});
  121. await userEvent.click(screen.getByText('#team-slug'));
  122. expect(assignMock).toHaveBeenCalledWith(
  123. '/projects/org-slug/earth/rules/123/',
  124. expect.objectContaining({
  125. data: expect.objectContaining({owner: 'team:1'}),
  126. })
  127. );
  128. });
  129. it('displays dropdown context menu with actions', async () => {
  130. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  131. render(<AlertRulesList />, {context: routerContext, organization});
  132. const actions = (await screen.findAllByRole('button', {name: 'Actions'}))[0];
  133. expect(actions).toBeInTheDocument();
  134. await userEvent.click(actions);
  135. expect(screen.getByText('Edit')).toBeInTheDocument();
  136. expect(screen.getByText('Delete')).toBeInTheDocument();
  137. expect(screen.getByText('Duplicate')).toBeInTheDocument();
  138. });
  139. it('deletes a rule', async () => {
  140. const {routerContext, organization} = initializeOrg({
  141. organization: defaultOrg,
  142. });
  143. const deletedRuleName = 'First Issue Alert';
  144. MockApiClient.addMockResponse({
  145. url: '/organizations/org-slug/combined-rules/',
  146. headers: {Link: pageLinks},
  147. body: [
  148. TestStubs.ProjectAlertRule({
  149. id: '123',
  150. name: deletedRuleName,
  151. projects: ['earth'],
  152. createdBy: {name: 'Samwise', id: 1, email: ''},
  153. }),
  154. ],
  155. });
  156. const deleteMock = MockApiClient.addMockResponse({
  157. url: `/projects/${organization.slug}/earth/rules/123/`,
  158. method: 'DELETE',
  159. body: {},
  160. });
  161. render(<AlertRulesList />, {context: routerContext, organization});
  162. renderGlobalModal();
  163. const actions = (await screen.findAllByRole('button', {name: 'Actions'}))[0];
  164. // Add a new response to the mock with no rules
  165. const emptyListMock = MockApiClient.addMockResponse({
  166. url: '/organizations/org-slug/combined-rules/',
  167. headers: {Link: pageLinks},
  168. body: [],
  169. });
  170. expect(screen.queryByText(deletedRuleName)).toBeInTheDocument();
  171. await userEvent.click(actions);
  172. await userEvent.click(screen.getByText('Delete'));
  173. await userEvent.click(screen.getByRole('button', {name: 'Delete Rule'}));
  174. expect(deleteMock).toHaveBeenCalledTimes(1);
  175. expect(emptyListMock).toHaveBeenCalledTimes(1);
  176. expect(screen.queryByText(deletedRuleName)).not.toBeInTheDocument();
  177. });
  178. it('sends user to new alert page on duplicate action', async () => {
  179. const {routerContext, organization, router} = initializeOrg({
  180. organization: defaultOrg,
  181. });
  182. render(<AlertRulesList />, {context: routerContext, organization});
  183. const actions = (await screen.findAllByRole('button', {name: 'Actions'}))[0];
  184. expect(actions).toBeInTheDocument();
  185. await userEvent.click(actions);
  186. const duplicate = await screen.findByText('Duplicate');
  187. expect(duplicate).toBeInTheDocument();
  188. await userEvent.click(duplicate);
  189. expect(router.push).toHaveBeenCalledWith({
  190. pathname: '/organizations/org-slug/alerts/new/issue/',
  191. query: {
  192. createFromDuplicate: true,
  193. duplicateRuleId: '123',
  194. project: 'earth',
  195. referrer: 'alert_stream',
  196. },
  197. });
  198. });
  199. it('sorts by name', async () => {
  200. const {routerContext, organization} = initializeOrg({
  201. organization: defaultOrg,
  202. router: {
  203. location: TestStubs.location({
  204. query: {asc: '1', sort: 'name'},
  205. // Sort by the name column
  206. search: '?asc=1&sort=name`',
  207. }),
  208. },
  209. });
  210. render(<AlertRulesList />, {context: routerContext, organization});
  211. expect(await screen.findByText('Alert Rule')).toHaveAttribute(
  212. 'aria-sort',
  213. 'ascending'
  214. );
  215. expect(rulesMock).toHaveBeenCalledTimes(1);
  216. expect(rulesMock).toHaveBeenCalledWith(
  217. '/organizations/org-slug/combined-rules/',
  218. expect.objectContaining({
  219. query: expect.objectContaining({sort: 'name', asc: '1'}),
  220. })
  221. );
  222. });
  223. it('disables the new alert button for members', async () => {
  224. const noAccessOrg = {
  225. ...defaultOrg,
  226. access: [],
  227. };
  228. const {routerContext, organization} = initializeOrg({organization: noAccessOrg});
  229. render(<AlertRulesList />, {context: routerContext, organization});
  230. expect(await screen.findByLabelText('Create Alert')).toBeDisabled();
  231. });
  232. it('searches by name', async () => {
  233. const {routerContext, organization, router} = initializeOrg();
  234. render(<AlertRulesList />, {context: routerContext, organization});
  235. const search = await screen.findByPlaceholderText('Search by name');
  236. expect(search).toBeInTheDocument();
  237. const testQuery = 'test name';
  238. await userEvent.type(search, `${testQuery}{enter}`);
  239. expect(router.push).toHaveBeenCalledWith(
  240. expect.objectContaining({
  241. query: {
  242. name: testQuery,
  243. },
  244. })
  245. );
  246. });
  247. it('uses empty team query parameter when removing all teams', async () => {
  248. const {routerContext, organization, router} = initializeOrg({
  249. router: {
  250. location: TestStubs.location({
  251. query: {team: 'myteams'},
  252. search: '?team=myteams`',
  253. }),
  254. },
  255. });
  256. render(<AlertRulesList />, {context: routerContext, organization});
  257. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  258. await userEvent.click(await screen.findByRole('button', {name: 'My Teams'}));
  259. // Uncheck myteams
  260. const myTeams = await screen.findAllByText('My Teams');
  261. await userEvent.click(myTeams[1]);
  262. expect(router.push).toHaveBeenCalledWith(
  263. expect.objectContaining({
  264. query: {
  265. team: '',
  266. },
  267. })
  268. );
  269. });
  270. it('displays metric alert status', async () => {
  271. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  272. render(<AlertRulesList />, {context: routerContext, organization});
  273. const rules = await screen.findAllByText('My Incident Rule');
  274. expect(rules[0]).toBeInTheDocument();
  275. expect(screen.getByText('Triggered')).toBeInTheDocument();
  276. expect(screen.getByText('Above 70')).toBeInTheDocument();
  277. expect(screen.getByText('Below 36')).toBeInTheDocument();
  278. expect(screen.getAllByTestId('alert-badge')[0]).toBeInTheDocument();
  279. });
  280. it('displays issue alert disabled', async () => {
  281. MockApiClient.addMockResponse({
  282. url: '/organizations/org-slug/combined-rules/',
  283. headers: {Link: pageLinks},
  284. body: [
  285. ProjectAlertRule({
  286. name: 'First Issue Alert',
  287. projects: ['earth'],
  288. status: 'disabled',
  289. }),
  290. ],
  291. });
  292. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  293. render(<AlertRulesList />, {context: routerContext, organization});
  294. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  295. expect(screen.getByText('Disabled')).toBeInTheDocument();
  296. });
  297. it('displays issue alert disabled instead of muted', async () => {
  298. MockApiClient.addMockResponse({
  299. url: '/organizations/org-slug/combined-rules/',
  300. headers: {Link: pageLinks},
  301. body: [
  302. ProjectAlertRule({
  303. name: 'First Issue Alert',
  304. projects: ['earth'],
  305. // both disabled and muted
  306. status: 'disabled',
  307. snooze: true,
  308. }),
  309. ],
  310. });
  311. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  312. render(<AlertRulesList />, {context: routerContext, organization});
  313. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  314. expect(screen.getByText('Disabled')).toBeInTheDocument();
  315. expect(screen.queryByText('Muted')).not.toBeInTheDocument();
  316. });
  317. it('displays issue alert muted', async () => {
  318. MockApiClient.addMockResponse({
  319. url: '/organizations/org-slug/combined-rules/',
  320. headers: {Link: pageLinks},
  321. body: [
  322. ProjectAlertRule({
  323. name: 'First Issue Alert',
  324. projects: ['earth'],
  325. snooze: true,
  326. }),
  327. ],
  328. });
  329. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  330. render(<AlertRulesList />, {context: routerContext, organization});
  331. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  332. expect(screen.getByText('Muted')).toBeInTheDocument();
  333. });
  334. it('displays metric alert muted', async () => {
  335. MockApiClient.addMockResponse({
  336. url: '/organizations/org-slug/combined-rules/',
  337. headers: {Link: pageLinks},
  338. body: [
  339. MetricRule({
  340. projects: ['earth'],
  341. snooze: true,
  342. }),
  343. ],
  344. });
  345. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  346. render(<AlertRulesList />, {context: routerContext, organization});
  347. expect(await screen.findByText('My Incident Rule')).toBeInTheDocument();
  348. expect(screen.getByText('Muted')).toBeInTheDocument();
  349. });
  350. it('sorts by alert rule', async () => {
  351. const {routerContext, organization} = initializeOrg({organization: defaultOrg});
  352. render(<AlertRulesList />, {context: routerContext, organization});
  353. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  354. expect(rulesMock).toHaveBeenCalledWith(
  355. '/organizations/org-slug/combined-rules/',
  356. expect.objectContaining({
  357. query: {
  358. expand: ['latestIncident', 'lastTriggered'],
  359. sort: ['incident_status', 'date_triggered'],
  360. team: ['myteams', 'unassigned'],
  361. },
  362. })
  363. );
  364. });
  365. it('preserves empty team query parameter on pagination', async () => {
  366. const {routerContext, organization, router} = initializeOrg({
  367. organization: defaultOrg,
  368. });
  369. render(<AlertRulesList />, {context: routerContext, organization});
  370. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  371. await userEvent.click(screen.getByLabelText('Next'));
  372. expect(router.push).toHaveBeenCalledWith(
  373. expect.objectContaining({
  374. query: {
  375. team: '',
  376. cursor: '0:100:0',
  377. },
  378. })
  379. );
  380. });
  381. });