index.spec.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {act, render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
  3. import OrganizationStore from 'sentry/stores/organizationStore';
  4. import ProjectsStore from 'sentry/stores/projectsStore';
  5. import TeamStore from 'sentry/stores/teamStore';
  6. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  7. import AlertRulesList from 'sentry/views/alerts/list/rules';
  8. import {IncidentStatus} from 'sentry/views/alerts/types';
  9. import {OrganizationContext} from 'sentry/views/organizationContext';
  10. jest.mock('sentry/utils/analytics/trackAdvancedAnalyticsEvent');
  11. describe('AlertRulesList', () => {
  12. const {routerContext, organization, router} = initializeOrg({
  13. organization: {
  14. access: ['alerts:write'],
  15. },
  16. });
  17. TeamStore.loadInitialData([TestStubs.Team()], false, null);
  18. let rulesMock;
  19. let projectMock;
  20. const pageLinks =
  21. '<https://sentry.io/api/0/organizations/org-slug/combined-rules/?cursor=0:0:1>; rel="previous"; results="false"; cursor="0:0:1", ' +
  22. '<https://sentry.io/api/0/organizations/org-slug/combined-rules/?cursor=0:100:0>; rel="next"; results="true"; cursor="0:100:0"';
  23. const getComponent = (props = {}) => (
  24. <OrganizationContext.Provider value={props.organization ?? organization}>
  25. <AlertRulesList
  26. organization={props.organization ?? organization}
  27. params={{orgId: organization.slug}}
  28. location={{query: {}, search: ''}}
  29. router={router}
  30. {...props}
  31. />
  32. </OrganizationContext.Provider>
  33. );
  34. const createWrapper = props => render(getComponent(props), {context: routerContext});
  35. beforeEach(() => {
  36. rulesMock = MockApiClient.addMockResponse({
  37. url: '/organizations/org-slug/combined-rules/',
  38. headers: {Link: pageLinks},
  39. body: [
  40. TestStubs.ProjectAlertRule({
  41. id: '123',
  42. name: 'First Issue Alert',
  43. projects: ['earth'],
  44. createdBy: {name: 'Samwise', id: 1, email: ''},
  45. }),
  46. TestStubs.MetricRule({
  47. id: '345',
  48. projects: ['earth'],
  49. latestIncident: TestStubs.Incident({
  50. status: IncidentStatus.CRITICAL,
  51. }),
  52. }),
  53. TestStubs.MetricRule({
  54. id: '678',
  55. projects: ['earth'],
  56. latestIncident: null,
  57. }),
  58. ],
  59. });
  60. projectMock = MockApiClient.addMockResponse({
  61. url: '/organizations/org-slug/projects/',
  62. body: [
  63. TestStubs.Project({
  64. slug: 'earth',
  65. platform: 'javascript',
  66. teams: [TestStubs.Team()],
  67. }),
  68. ],
  69. });
  70. act(() => OrganizationStore.onUpdate(organization, {replace: true}));
  71. act(() => ProjectsStore.loadInitialData([]));
  72. });
  73. afterEach(() => {
  74. act(() => ProjectsStore.reset());
  75. MockApiClient.clearMockResponses();
  76. trackAdvancedAnalyticsEvent.mockClear();
  77. });
  78. it('displays list', async () => {
  79. createWrapper();
  80. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  81. expect(projectMock).toHaveBeenLastCalledWith(
  82. expect.anything(),
  83. expect.objectContaining({
  84. query: expect.objectContaining({query: 'slug:earth'}),
  85. })
  86. );
  87. expect(screen.getAllByTestId('badge-display-name')[0]).toHaveTextContent('earth');
  88. expect(trackAdvancedAnalyticsEvent).toHaveBeenCalledWith(
  89. 'alert_rules.viewed',
  90. expect.objectContaining({
  91. sort: 'incident_status,date_triggered',
  92. })
  93. );
  94. });
  95. it('displays empty state', async () => {
  96. MockApiClient.addMockResponse({
  97. url: '/organizations/org-slug/combined-rules/',
  98. body: [],
  99. });
  100. createWrapper();
  101. expect(
  102. await screen.findByText('No alert rules found for the current query.')
  103. ).toBeInTheDocument();
  104. expect(rulesMock).toHaveBeenCalledTimes(0);
  105. });
  106. it('displays team dropdown context if unassigned', async () => {
  107. createWrapper();
  108. const assignee = (await screen.findAllByTestId('alert-row-assignee'))[0];
  109. const btn = within(assignee).getAllByRole('button')[0];
  110. expect(assignee).toBeInTheDocument();
  111. expect(btn).toBeInTheDocument();
  112. userEvent.click(btn, {skipHover: true});
  113. expect(screen.getByText('#team-slug')).toBeInTheDocument();
  114. expect(within(assignee).getByText('Unassigned')).toBeInTheDocument();
  115. });
  116. it('assigns rule to team from unassigned', async () => {
  117. const assignMock = MockApiClient.addMockResponse({
  118. method: 'PUT',
  119. url: '/projects/org-slug/earth/rules/123/',
  120. body: [],
  121. });
  122. createWrapper();
  123. const assignee = (await screen.findAllByTestId('alert-row-assignee'))[0];
  124. const btn = within(assignee).getAllByRole('button')[0];
  125. expect(assignee).toBeInTheDocument();
  126. expect(btn).toBeInTheDocument();
  127. userEvent.click(btn, {skipHover: true});
  128. userEvent.click(screen.getByText('#team-slug'));
  129. expect(assignMock).toHaveBeenCalledWith(
  130. '/projects/org-slug/earth/rules/123/',
  131. expect.objectContaining({
  132. data: expect.objectContaining({owner: 'team:1'}),
  133. })
  134. );
  135. });
  136. it('displays dropdown context menu with actions', async () => {
  137. createWrapper();
  138. const actions = (await screen.findAllByTestId('alert-row-actions'))[0];
  139. expect(actions).toBeInTheDocument();
  140. userEvent.click(actions);
  141. expect(screen.getByText('Edit')).toBeInTheDocument();
  142. expect(screen.getByText('Delete')).toBeInTheDocument();
  143. expect(screen.getByText('Duplicate')).toBeInTheDocument();
  144. });
  145. it('sends user to new alert page on duplicate action', async () => {
  146. createWrapper();
  147. const actions = (await screen.findAllByTestId('alert-row-actions'))[0];
  148. expect(actions).toBeInTheDocument();
  149. userEvent.click(actions);
  150. const duplicate = await screen.findByText('Duplicate');
  151. expect(duplicate).toBeInTheDocument();
  152. userEvent.click(duplicate);
  153. expect(router.push).toHaveBeenCalledWith({
  154. pathname: '/organizations/org-slug/alerts/new/issue/',
  155. query: {
  156. createFromDuplicate: true,
  157. duplicateRuleId: '123',
  158. project: 'earth',
  159. referrer: 'alert_stream',
  160. },
  161. });
  162. });
  163. it('sorts by name', async () => {
  164. const {rerender} = createWrapper();
  165. // The name column is not used for sorting
  166. expect(await screen.findByText('Alert Rule')).toHaveAttribute('aria-sort', 'none');
  167. // Sort by the name column
  168. rerender(
  169. getComponent({
  170. location: {
  171. query: {asc: '1', sort: 'name'},
  172. search: '?asc=1&sort=name`',
  173. },
  174. })
  175. );
  176. expect(await screen.findByText('Alert Rule')).toHaveAttribute(
  177. 'aria-sort',
  178. 'ascending'
  179. );
  180. expect(rulesMock).toHaveBeenCalledTimes(2);
  181. expect(rulesMock).toHaveBeenCalledWith(
  182. '/organizations/org-slug/combined-rules/',
  183. expect.objectContaining({
  184. query: expect.objectContaining({sort: 'name', asc: '1'}),
  185. })
  186. );
  187. });
  188. it('disables the new alert button for members', async () => {
  189. const noAccessOrg = {
  190. ...organization,
  191. access: [],
  192. };
  193. const {rerender} = createWrapper({organization: noAccessOrg});
  194. expect(await screen.findByLabelText('Create Alert')).toBeDisabled();
  195. // Enabled with access
  196. rerender(getComponent());
  197. expect(await screen.findByLabelText('Create Alert')).toBeEnabled();
  198. });
  199. it('searches by name', async () => {
  200. createWrapper();
  201. const search = await screen.findByPlaceholderText('Search by name');
  202. expect(search).toBeInTheDocument();
  203. const testQuery = 'test name';
  204. userEvent.type(search, `${testQuery}{enter}`);
  205. expect(router.push).toHaveBeenCalledWith(
  206. expect.objectContaining({
  207. query: {
  208. name: testQuery,
  209. expand: ['latestIncident', 'lastTriggered'],
  210. sort: ['incident_status', 'date_triggered'],
  211. team: ['myteams', 'unassigned'],
  212. },
  213. })
  214. );
  215. });
  216. it('uses empty team query parameter when removing all teams', async () => {
  217. const {rerender} = createWrapper();
  218. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  219. rerender(
  220. getComponent({location: {query: {team: 'myteams'}, search: '?team=myteams`'}})
  221. );
  222. userEvent.click(await screen.findByRole('button', {name: 'My Teams'}));
  223. // Uncheck myteams
  224. const myTeams = await screen.findAllByText('My Teams');
  225. userEvent.click(myTeams[1]);
  226. expect(router.push).toHaveBeenCalledWith(
  227. expect.objectContaining({
  228. query: {
  229. expand: ['latestIncident', 'lastTriggered'],
  230. sort: ['incident_status', 'date_triggered'],
  231. team: '',
  232. },
  233. })
  234. );
  235. });
  236. it('displays alert status', async () => {
  237. createWrapper();
  238. const rules = await screen.findAllByText('My Incident Rule');
  239. expect(rules[0]).toBeInTheDocument();
  240. expect(screen.getByText('Triggered')).toBeInTheDocument();
  241. expect(screen.getByText('Above 70')).toBeInTheDocument();
  242. expect(screen.getByText('Below 36')).toBeInTheDocument();
  243. expect(screen.getAllByTestId('alert-badge')[0]).toBeInTheDocument();
  244. });
  245. it('sorts by alert rule', async () => {
  246. createWrapper({organization});
  247. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  248. expect(rulesMock).toHaveBeenCalledWith(
  249. '/organizations/org-slug/combined-rules/',
  250. expect.objectContaining({
  251. query: {
  252. expand: ['latestIncident', 'lastTriggered'],
  253. sort: ['incident_status', 'date_triggered'],
  254. team: ['myteams', 'unassigned'],
  255. },
  256. })
  257. );
  258. });
  259. it('preserves empty team query parameter on pagination', async () => {
  260. createWrapper({
  261. organization,
  262. location: {query: {team: ''}, search: '?team=`'},
  263. });
  264. expect(await screen.findByText('First Issue Alert')).toBeInTheDocument();
  265. userEvent.click(screen.getByLabelText('Next'));
  266. expect(router.push).toHaveBeenCalledWith(
  267. expect.objectContaining({
  268. query: {
  269. expand: ['latestIncident', 'lastTriggered'],
  270. sort: ['incident_status', 'date_triggered'],
  271. team: '',
  272. cursor: '0:100:0',
  273. },
  274. })
  275. );
  276. });
  277. });