releaseWidgetQueries.spec.tsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
  1. import {
  2. MetricsField,
  3. MetricsSessionUserCountByStatusByRelease,
  4. } from 'sentry-fixture/metrics';
  5. import {SessionsField} from 'sentry-fixture/sessions';
  6. import {initializeOrg} from 'sentry-test/initializeOrg';
  7. import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
  8. import {
  9. DashboardFilterKeys,
  10. DisplayType,
  11. WidgetType,
  12. } from 'sentry/views/dashboards/types';
  13. import ReleaseWidgetQueries from 'sentry/views/dashboards/widgetCard/releaseWidgetQueries';
  14. describe('Dashboards > ReleaseWidgetQueries', function () {
  15. const {organization} = initializeOrg();
  16. const badMessage = 'Bad request data';
  17. const multipleQueryWidget = {
  18. title: 'Sessions vs. Users',
  19. interval: '5m',
  20. displayType: DisplayType.LINE,
  21. queries: [
  22. {
  23. conditions: '',
  24. fields: [`sum(session)`],
  25. aggregates: [`sum(session)`],
  26. columns: [],
  27. name: 'sessions',
  28. orderby: '',
  29. },
  30. {
  31. conditions: 'environment:prod',
  32. fields: [`sum(session)`],
  33. aggregates: [`sum(session)`],
  34. columns: [],
  35. name: 'users',
  36. orderby: '',
  37. },
  38. ],
  39. widgetType: WidgetType.RELEASE,
  40. };
  41. const singleQueryWidget = {
  42. title: 'Sessions',
  43. interval: '5m',
  44. displayType: DisplayType.LINE,
  45. queries: [
  46. {
  47. conditions: '',
  48. fields: [`count_unique(user)`],
  49. aggregates: [`count_unique(user)`],
  50. columns: [],
  51. name: 'sessions',
  52. orderby: '-count_unique(user)',
  53. },
  54. ],
  55. widgetType: WidgetType.RELEASE,
  56. };
  57. const selection = {
  58. projects: [1],
  59. environments: ['prod'],
  60. datetime: {
  61. period: '14d',
  62. start: null,
  63. end: null,
  64. utc: null,
  65. },
  66. };
  67. const api = new MockApiClient();
  68. afterEach(function () {
  69. MockApiClient.clearMockResponses();
  70. });
  71. it('can send chart requests', async function () {
  72. jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
  73. const mock = MockApiClient.addMockResponse({
  74. url: '/organizations/org-slug/metrics/data/',
  75. body: MetricsField(`session.all`),
  76. });
  77. const children = jest.fn(() => <div />);
  78. render(
  79. <ReleaseWidgetQueries
  80. api={api}
  81. widget={singleQueryWidget}
  82. organization={organization}
  83. selection={selection}
  84. >
  85. {children}
  86. </ReleaseWidgetQueries>
  87. );
  88. expect(mock).toHaveBeenCalledTimes(1);
  89. await waitFor(() =>
  90. expect(children).toHaveBeenLastCalledWith(
  91. expect.objectContaining({
  92. tableResults: undefined,
  93. timeseriesResults: [
  94. {
  95. data: expect.arrayContaining([
  96. {name: '2021-12-01T16:15:00Z', value: 443.6200417187068},
  97. {name: '2021-12-01T16:30:00Z', value: 471.7512262596214},
  98. {name: '2021-12-01T16:45:00Z', value: 632.5356294251225},
  99. {name: '2021-12-01T17:00:00Z', value: 538.6063865509535},
  100. ]),
  101. seriesName: 'sessions > sum(session)',
  102. },
  103. ],
  104. })
  105. )
  106. );
  107. });
  108. it('fetches release data when sorting on release for metrics api', async function () {
  109. const mockRelease = MockApiClient.addMockResponse({
  110. url: '/organizations/org-slug/releases/',
  111. body: [
  112. {
  113. version: 'be1ddfb18126dd2cbde26bfe75488503280e716e',
  114. },
  115. ],
  116. });
  117. const mock = MockApiClient.addMockResponse({
  118. url: '/organizations/org-slug/metrics/data/',
  119. body: MetricsSessionUserCountByStatusByRelease(),
  120. });
  121. const children = jest.fn(() => <div />);
  122. const queries = [
  123. {
  124. conditions: '',
  125. fields: [`count_unique(user)`],
  126. aggregates: [`count_unique(user)`],
  127. columns: ['release'],
  128. name: 'sessions',
  129. orderby: '-release',
  130. },
  131. ];
  132. render(
  133. <ReleaseWidgetQueries
  134. api={api}
  135. widget={{...singleQueryWidget, queries}}
  136. organization={organization}
  137. selection={selection}
  138. >
  139. {children}
  140. </ReleaseWidgetQueries>
  141. );
  142. await waitFor(() => expect(mockRelease).toHaveBeenCalledTimes(1));
  143. expect(mockRelease).toHaveBeenCalledWith(
  144. '/organizations/org-slug/releases/',
  145. expect.objectContaining({
  146. data: {
  147. environment: ['prod'],
  148. per_page: 50,
  149. project: [1],
  150. sort: 'date',
  151. },
  152. })
  153. );
  154. expect(mock).toHaveBeenCalledTimes(1);
  155. expect(mock).toHaveBeenCalledWith(
  156. '/organizations/org-slug/metrics/data/',
  157. expect.objectContaining({
  158. query: {
  159. environment: ['prod'],
  160. field: ['count_unique(sentry.sessions.user)'],
  161. groupBy: ['release'],
  162. includeSeries: 1,
  163. includeTotals: 1,
  164. interval: '12h',
  165. per_page: 100,
  166. project: [1],
  167. query: ' release:be1ddfb18126dd2cbde26bfe75488503280e716e',
  168. statsPeriod: '14d',
  169. },
  170. })
  171. );
  172. });
  173. it('calls session api when session.status is a group by', function () {
  174. const mock = MockApiClient.addMockResponse({
  175. url: '/organizations/org-slug/sessions/',
  176. body: MetricsField(`count_unique(user)`),
  177. });
  178. const children = jest.fn(() => <div />);
  179. const queries = [
  180. {
  181. conditions: '',
  182. fields: [`count_unique(user)`],
  183. aggregates: [`count_unique(user)`],
  184. columns: ['session.status'],
  185. name: 'sessions',
  186. orderby: '-count_unique(user)',
  187. },
  188. ];
  189. render(
  190. <ReleaseWidgetQueries
  191. api={api}
  192. widget={{...singleQueryWidget, queries}}
  193. organization={organization}
  194. selection={selection}
  195. >
  196. {children}
  197. </ReleaseWidgetQueries>
  198. );
  199. expect(mock).toHaveBeenCalledWith(
  200. '/organizations/org-slug/sessions/',
  201. expect.objectContaining({
  202. query: expect.objectContaining({
  203. environment: ['prod'],
  204. field: ['count_unique(user)'],
  205. groupBy: ['session.status'],
  206. interval: '30m',
  207. project: [1],
  208. statsPeriod: '14d',
  209. }),
  210. })
  211. );
  212. });
  213. it('appends dashboard filters to releases request', async function () {
  214. const mock = MockApiClient.addMockResponse({
  215. url: '/organizations/org-slug/metrics/data/',
  216. body: MetricsSessionUserCountByStatusByRelease(),
  217. });
  218. render(
  219. <ReleaseWidgetQueries
  220. api={api}
  221. widget={singleQueryWidget}
  222. organization={organization}
  223. selection={selection}
  224. dashboardFilters={{[DashboardFilterKeys.RELEASE]: ['abc@1.3.0']}}
  225. >
  226. {() => <div data-test-id="child" />}
  227. </ReleaseWidgetQueries>
  228. );
  229. await screen.findByTestId('child');
  230. expect(mock).toHaveBeenCalledWith(
  231. '/organizations/org-slug/metrics/data/',
  232. expect.objectContaining({
  233. query: expect.objectContaining({
  234. query: ' release:abc@1.3.0 ',
  235. }),
  236. })
  237. );
  238. });
  239. it('strips injected sort columns', async function () {
  240. const mock = MockApiClient.addMockResponse({
  241. url: '/organizations/org-slug/metrics/data/',
  242. body: MetricsSessionUserCountByStatusByRelease(),
  243. });
  244. const children = jest.fn(() => <div />);
  245. const injectedOrderby = {
  246. title: 'Sessions',
  247. interval: '5m',
  248. displayType: DisplayType.LINE,
  249. queries: [
  250. {
  251. conditions: '',
  252. fields: [`sum(session)`],
  253. aggregates: [`sum(session)`],
  254. columns: [],
  255. name: 'sessions',
  256. orderby: '-count_unique(user)',
  257. },
  258. ],
  259. widgetType: WidgetType.RELEASE,
  260. };
  261. render(
  262. <ReleaseWidgetQueries
  263. api={api}
  264. widget={injectedOrderby}
  265. organization={organization}
  266. selection={selection}
  267. >
  268. {children}
  269. </ReleaseWidgetQueries>
  270. );
  271. expect(mock).toHaveBeenCalledTimes(1);
  272. await waitFor(() =>
  273. expect(children).toHaveBeenLastCalledWith(
  274. expect.objectContaining({
  275. errorMessage: undefined,
  276. loading: false,
  277. timeseriesResults: [
  278. {
  279. data: [
  280. {name: '2022-01-15T00:00:00Z', value: 0},
  281. {name: '2022-01-16T00:00:00Z', value: 0},
  282. {name: '2022-01-17T00:00:00Z', value: 0},
  283. {name: '2022-01-18T00:00:00Z', value: 0},
  284. {name: '2022-01-19T00:00:00Z', value: 0},
  285. {name: '2022-01-20T00:00:00Z', value: 0},
  286. {name: '2022-01-21T00:00:00Z', value: 0},
  287. {name: '2022-01-22T00:00:00Z', value: 0},
  288. {name: '2022-01-23T00:00:00Z', value: 0},
  289. {name: '2022-01-24T00:00:00Z', value: 23},
  290. {name: '2022-01-25T00:00:00Z', value: 11},
  291. {name: '2022-01-26T00:00:00Z', value: 0},
  292. {name: '2022-01-27T00:00:00Z', value: 0},
  293. {name: '2022-01-28T00:00:00Z', value: 0},
  294. ],
  295. seriesName: 'sessions > crashed, 1 : sum(session)',
  296. },
  297. {
  298. data: [
  299. {name: '2022-01-15T00:00:00Z', value: 1},
  300. {name: '2022-01-16T00:00:00Z', value: 0},
  301. {name: '2022-01-17T00:00:00Z', value: 0},
  302. {name: '2022-01-18T00:00:00Z', value: 0},
  303. {name: '2022-01-19T00:00:00Z', value: 0},
  304. {name: '2022-01-20T00:00:00Z', value: 0},
  305. {name: '2022-01-21T00:00:00Z', value: 0},
  306. {name: '2022-01-22T00:00:00Z', value: 0},
  307. {name: '2022-01-23T00:00:00Z', value: 0},
  308. {name: '2022-01-24T00:00:00Z', value: 0},
  309. {name: '2022-01-25T00:00:00Z', value: 0},
  310. {name: '2022-01-26T00:00:00Z', value: 0},
  311. {name: '2022-01-27T00:00:00Z', value: 0},
  312. {name: '2022-01-28T00:00:00Z', value: 0},
  313. ],
  314. seriesName: 'sessions > abnormal, 1 : sum(session)',
  315. },
  316. {
  317. data: [
  318. {name: '2022-01-15T00:00:00Z', value: 0},
  319. {name: '2022-01-16T00:00:00Z', value: 0},
  320. {name: '2022-01-17T00:00:00Z', value: 0},
  321. {name: '2022-01-18T00:00:00Z', value: 0},
  322. {name: '2022-01-19T00:00:00Z', value: 0},
  323. {name: '2022-01-20T00:00:00Z', value: 37},
  324. {name: '2022-01-21T00:00:00Z', value: 0},
  325. {name: '2022-01-22T00:00:00Z', value: 0},
  326. {name: '2022-01-23T00:00:00Z', value: 0},
  327. {name: '2022-01-24T00:00:00Z', value: 335},
  328. {name: '2022-01-25T00:00:00Z', value: 79},
  329. {name: '2022-01-26T00:00:00Z', value: 0},
  330. {name: '2022-01-27T00:00:00Z', value: 0},
  331. {name: '2022-01-28T00:00:00Z', value: 0},
  332. ],
  333. seriesName: 'sessions > errored, 1 : sum(session)',
  334. },
  335. {
  336. data: [
  337. {name: '2022-01-15T00:00:00Z', value: 0},
  338. {name: '2022-01-16T00:00:00Z', value: 0},
  339. {name: '2022-01-17T00:00:00Z', value: 0},
  340. {name: '2022-01-18T00:00:00Z', value: 0},
  341. {name: '2022-01-19T00:00:00Z', value: 0},
  342. {name: '2022-01-20T00:00:00Z', value: 2503},
  343. {name: '2022-01-21T00:00:00Z', value: 661},
  344. {name: '2022-01-22T00:00:00Z', value: 0},
  345. {name: '2022-01-23T00:00:00Z', value: 0},
  346. {name: '2022-01-24T00:00:00Z', value: 1464},
  347. {name: '2022-01-25T00:00:00Z', value: 430},
  348. {name: '2022-01-26T00:00:00Z', value: 0},
  349. {name: '2022-01-27T00:00:00Z', value: 0},
  350. {name: '2022-01-28T00:00:00Z', value: 0},
  351. ],
  352. seriesName: 'sessions > healthy, 1 : sum(session)',
  353. },
  354. {
  355. data: [
  356. {name: '2022-01-15T00:00:00Z', value: 1},
  357. {name: '2022-01-16T00:00:00Z', value: 0},
  358. {name: '2022-01-17T00:00:00Z', value: 0},
  359. {name: '2022-01-18T00:00:00Z', value: 0},
  360. {name: '2022-01-19T00:00:00Z', value: 0},
  361. {name: '2022-01-20T00:00:00Z', value: 0},
  362. {name: '2022-01-21T00:00:00Z', value: 0},
  363. {name: '2022-01-22T00:00:00Z', value: 0},
  364. {name: '2022-01-23T00:00:00Z', value: 0},
  365. {name: '2022-01-24T00:00:00Z', value: 23},
  366. {name: '2022-01-25T00:00:00Z', value: 11},
  367. {name: '2022-01-26T00:00:00Z', value: 0},
  368. {name: '2022-01-27T00:00:00Z', value: 0},
  369. {name: '2022-01-28T00:00:00Z', value: 0},
  370. ],
  371. seriesName: 'sessions > crashed, 2 : sum(session)',
  372. },
  373. {
  374. data: [
  375. {name: '2022-01-15T00:00:00Z', value: 1},
  376. {name: '2022-01-16T00:00:00Z', value: 0},
  377. {name: '2022-01-17T00:00:00Z', value: 0},
  378. {name: '2022-01-18T00:00:00Z', value: 0},
  379. {name: '2022-01-19T00:00:00Z', value: 0},
  380. {name: '2022-01-20T00:00:00Z', value: 0},
  381. {name: '2022-01-21T00:00:00Z', value: 0},
  382. {name: '2022-01-22T00:00:00Z', value: 0},
  383. {name: '2022-01-23T00:00:00Z', value: 0},
  384. {name: '2022-01-24T00:00:00Z', value: 0},
  385. {name: '2022-01-25T00:00:00Z', value: 0},
  386. {name: '2022-01-26T00:00:00Z', value: 0},
  387. {name: '2022-01-27T00:00:00Z', value: 0},
  388. {name: '2022-01-28T00:00:00Z', value: 0},
  389. ],
  390. seriesName: 'sessions > abnormal, 2 : sum(session)',
  391. },
  392. {
  393. data: [
  394. {name: '2022-01-15T00:00:00Z', value: 1},
  395. {name: '2022-01-16T00:00:00Z', value: 0},
  396. {name: '2022-01-17T00:00:00Z', value: 0},
  397. {name: '2022-01-18T00:00:00Z', value: 0},
  398. {name: '2022-01-19T00:00:00Z', value: 0},
  399. {name: '2022-01-20T00:00:00Z', value: 37},
  400. {name: '2022-01-21T00:00:00Z', value: 0},
  401. {name: '2022-01-22T00:00:00Z', value: 0},
  402. {name: '2022-01-23T00:00:00Z', value: 0},
  403. {name: '2022-01-24T00:00:00Z', value: 335},
  404. {name: '2022-01-25T00:00:00Z', value: 79},
  405. {name: '2022-01-26T00:00:00Z', value: 0},
  406. {name: '2022-01-27T00:00:00Z', value: 0},
  407. {name: '2022-01-28T00:00:00Z', value: 0},
  408. ],
  409. seriesName: 'sessions > errored, 2 : sum(session)',
  410. },
  411. {
  412. data: [
  413. {name: '2022-01-15T00:00:00Z', value: 1},
  414. {name: '2022-01-16T00:00:00Z', value: 0},
  415. {name: '2022-01-17T00:00:00Z', value: 0},
  416. {name: '2022-01-18T00:00:00Z', value: 0},
  417. {name: '2022-01-19T00:00:00Z', value: 0},
  418. {name: '2022-01-20T00:00:00Z', value: 2503},
  419. {name: '2022-01-21T00:00:00Z', value: 661},
  420. {name: '2022-01-22T00:00:00Z', value: 0},
  421. {name: '2022-01-23T00:00:00Z', value: 0},
  422. {name: '2022-01-24T00:00:00Z', value: 1464},
  423. {name: '2022-01-25T00:00:00Z', value: 430},
  424. {name: '2022-01-26T00:00:00Z', value: 0},
  425. {name: '2022-01-27T00:00:00Z', value: 0},
  426. {name: '2022-01-28T00:00:00Z', value: 0},
  427. ],
  428. seriesName: 'sessions > healthy, 2 : sum(session)',
  429. },
  430. ],
  431. })
  432. )
  433. );
  434. });
  435. it('can send table requests', async function () {
  436. jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
  437. const mock = MockApiClient.addMockResponse({
  438. url: '/organizations/org-slug/metrics/data/',
  439. body: MetricsSessionUserCountByStatusByRelease(),
  440. });
  441. const children = jest.fn(() => <div />);
  442. render(
  443. <ReleaseWidgetQueries
  444. api={api}
  445. widget={{...singleQueryWidget, displayType: DisplayType.TABLE}}
  446. organization={organization}
  447. selection={selection}
  448. >
  449. {children}
  450. </ReleaseWidgetQueries>
  451. );
  452. expect(mock).toHaveBeenCalledTimes(1);
  453. await waitFor(() =>
  454. expect(children).toHaveBeenLastCalledWith(
  455. expect.objectContaining({
  456. errorMessage: undefined,
  457. loading: false,
  458. tableResults: [
  459. {
  460. data: [
  461. {
  462. 'count_unique(user)': 1,
  463. id: '0',
  464. release: '1',
  465. 'session.status': 'crashed',
  466. 'sum(session)': 34,
  467. },
  468. {
  469. 'count_unique(user)': 1,
  470. id: '1',
  471. release: '1',
  472. 'session.status': 'abnormal',
  473. 'sum(session)': 1,
  474. },
  475. {
  476. 'count_unique(user)': 2,
  477. id: '2',
  478. release: '1',
  479. 'session.status': 'errored',
  480. 'sum(session)': 451,
  481. },
  482. {
  483. 'count_unique(user)': 3,
  484. id: '3',
  485. release: '1',
  486. 'session.status': 'healthy',
  487. 'sum(session)': 5058,
  488. },
  489. {
  490. 'count_unique(user)': 2,
  491. id: '4',
  492. release: '2',
  493. 'session.status': 'crashed',
  494. 'sum(session)': 35,
  495. },
  496. {
  497. 'count_unique(user)': 1,
  498. id: '5',
  499. release: '2',
  500. 'session.status': 'abnormal',
  501. 'sum(session)': 1,
  502. },
  503. {
  504. 'count_unique(user)': 1,
  505. id: '6',
  506. release: '2',
  507. 'session.status': 'errored',
  508. 'sum(session)': 452,
  509. },
  510. {
  511. 'count_unique(user)': 10,
  512. id: '7',
  513. release: '2',
  514. 'session.status': 'healthy',
  515. 'sum(session)': 5059,
  516. },
  517. ],
  518. meta: {
  519. 'count_unique(user)': 'integer',
  520. release: 'string',
  521. 'session.status': 'string',
  522. 'sum(session)': 'integer',
  523. },
  524. title: 'sessions',
  525. },
  526. ],
  527. timeseriesResults: undefined,
  528. })
  529. )
  530. );
  531. });
  532. it('can send big number requests', async function () {
  533. jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
  534. const mock = MockApiClient.addMockResponse({
  535. url: '/organizations/org-slug/metrics/data/',
  536. body: MetricsField(`count_unique(sentry.sessions.user)`),
  537. });
  538. const children = jest.fn(() => <div />);
  539. render(
  540. <ReleaseWidgetQueries
  541. api={api}
  542. widget={{...singleQueryWidget, displayType: DisplayType.BIG_NUMBER}}
  543. organization={organization}
  544. selection={selection}
  545. >
  546. {children}
  547. </ReleaseWidgetQueries>
  548. );
  549. expect(mock).toHaveBeenCalledTimes(1);
  550. expect(mock).toHaveBeenCalledWith(
  551. expect.anything(),
  552. expect.objectContaining({
  553. query: expect.objectContaining({
  554. field: ['count_unique(sentry.sessions.user)'],
  555. orderBy: '-count_unique(sentry.sessions.user)',
  556. }),
  557. })
  558. );
  559. await waitFor(() =>
  560. expect(children).toHaveBeenLastCalledWith(
  561. expect.objectContaining({
  562. loading: false,
  563. tableResults: [
  564. {
  565. data: [{'count_unique(user)': 51292.95404741901, id: '0'}],
  566. meta: {'count_unique(user)': 'integer'},
  567. title: 'sessions',
  568. },
  569. ],
  570. })
  571. )
  572. );
  573. });
  574. it('can send multiple API requests', function () {
  575. jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
  576. const metricsMock = MockApiClient.addMockResponse({
  577. url: '/organizations/org-slug/metrics/data/',
  578. body: SessionsField(`session.all`),
  579. match: [
  580. MockApiClient.matchQuery({
  581. field: [`session.all`],
  582. }),
  583. ],
  584. });
  585. render(
  586. <ReleaseWidgetQueries
  587. api={api}
  588. widget={multipleQueryWidget}
  589. organization={organization}
  590. selection={selection}
  591. >
  592. {() => <div data-test-id="child" />}
  593. </ReleaseWidgetQueries>
  594. );
  595. // Child should be rendered and 2 requests should be sent.
  596. expect(screen.getByTestId('child')).toBeInTheDocument();
  597. expect(metricsMock).toHaveBeenCalledTimes(2);
  598. expect(metricsMock).toHaveBeenNthCalledWith(
  599. 1,
  600. '/organizations/org-slug/metrics/data/',
  601. expect.objectContaining({
  602. query: {
  603. environment: ['prod'],
  604. field: ['session.all'],
  605. groupBy: [],
  606. interval: '30m',
  607. project: [1],
  608. statsPeriod: '14d',
  609. per_page: 1,
  610. includeSeries: 1,
  611. includeTotals: 0,
  612. },
  613. })
  614. );
  615. expect(metricsMock).toHaveBeenNthCalledWith(
  616. 2,
  617. '/organizations/org-slug/metrics/data/',
  618. expect.objectContaining({
  619. query: {
  620. environment: ['prod'],
  621. field: ['session.all'],
  622. groupBy: [],
  623. interval: '30m',
  624. project: [1],
  625. query: 'environment:prod',
  626. statsPeriod: '14d',
  627. per_page: 1,
  628. includeSeries: 1,
  629. includeTotals: 0,
  630. },
  631. })
  632. );
  633. });
  634. it('sets errorMessage when the first request fails', async function () {
  635. const failMock = MockApiClient.addMockResponse({
  636. url: '/organizations/org-slug/metrics/data/',
  637. statusCode: 400,
  638. body: {detail: badMessage},
  639. match: [
  640. MockApiClient.matchQuery({
  641. field: [`session.all`],
  642. }),
  643. ],
  644. });
  645. const children = jest.fn(() => <div data-test-id="child" />);
  646. render(
  647. <ReleaseWidgetQueries
  648. api={api}
  649. widget={multipleQueryWidget}
  650. organization={organization}
  651. selection={selection}
  652. >
  653. {children}
  654. </ReleaseWidgetQueries>
  655. );
  656. // Child should be rendered and 2 requests should be sent.
  657. expect(screen.getByTestId('child')).toBeInTheDocument();
  658. expect(failMock).toHaveBeenCalledTimes(2);
  659. await waitFor(() =>
  660. expect(children).toHaveBeenLastCalledWith(
  661. expect.objectContaining({errorMessage: badMessage})
  662. )
  663. );
  664. });
  665. it('adjusts interval based on date window', function () {
  666. jest.useFakeTimers().setSystemTime(new Date('2022-08-02'));
  667. const mock = MockApiClient.addMockResponse({
  668. url: '/organizations/org-slug/metrics/data/',
  669. body: SessionsField(`session.all`),
  670. });
  671. render(
  672. <ReleaseWidgetQueries
  673. api={api}
  674. widget={{...singleQueryWidget, interval: '1m'}}
  675. organization={organization}
  676. selection={{...selection, datetime: {...selection.datetime, period: '14d'}}}
  677. >
  678. {() => <div data-test-id="child" />}
  679. </ReleaseWidgetQueries>
  680. );
  681. expect(screen.getByTestId('child')).toBeInTheDocument();
  682. expect(mock).toHaveBeenCalledTimes(1);
  683. expect(mock).toHaveBeenCalledWith(
  684. expect.anything(),
  685. expect.objectContaining({
  686. query: expect.objectContaining({
  687. interval: '30m',
  688. statsPeriod: '14d',
  689. environment: ['prod'],
  690. project: [1],
  691. }),
  692. })
  693. );
  694. });
  695. it('does not re-fetch when renaming legend alias / adding falsy fields', () => {
  696. const mock = MockApiClient.addMockResponse({
  697. url: '/organizations/org-slug/metrics/data/',
  698. body: SessionsField(`session.all`),
  699. });
  700. const children = jest.fn(() => <div />);
  701. const {rerender} = render(
  702. <ReleaseWidgetQueries
  703. api={api}
  704. widget={singleQueryWidget}
  705. organization={organization}
  706. selection={selection}
  707. >
  708. {children}
  709. </ReleaseWidgetQueries>
  710. );
  711. expect(mock).toHaveBeenCalledTimes(1);
  712. rerender(
  713. <ReleaseWidgetQueries
  714. api={api}
  715. widget={{
  716. ...singleQueryWidget,
  717. queries: [
  718. {
  719. ...singleQueryWidget.queries[0],
  720. name: 'New Legend Alias',
  721. fields: [...singleQueryWidget.queries[0].fields, ''],
  722. },
  723. ],
  724. }}
  725. organization={organization}
  726. selection={selection}
  727. >
  728. {children}
  729. </ReleaseWidgetQueries>
  730. );
  731. // no additional request has been sent, the total count of requests is still 1
  732. expect(mock).toHaveBeenCalledTimes(1);
  733. });
  734. it('does not re-fetch when dashboard filter remains the same', () => {
  735. const mock = MockApiClient.addMockResponse({
  736. url: '/organizations/org-slug/metrics/data/',
  737. body: SessionsField(`session.all`),
  738. });
  739. const children = jest.fn(() => <div />);
  740. const {rerender} = render(
  741. <ReleaseWidgetQueries
  742. api={api}
  743. widget={singleQueryWidget}
  744. organization={organization}
  745. selection={selection}
  746. dashboardFilters={{[DashboardFilterKeys.RELEASE]: ['abc@1.3.0']}}
  747. >
  748. {children}
  749. </ReleaseWidgetQueries>
  750. );
  751. expect(mock).toHaveBeenCalledTimes(1);
  752. rerender(
  753. <ReleaseWidgetQueries
  754. api={api}
  755. widget={singleQueryWidget}
  756. organization={organization}
  757. selection={selection}
  758. dashboardFilters={{[DashboardFilterKeys.RELEASE]: ['abc@1.3.0']}}
  759. >
  760. {children}
  761. </ReleaseWidgetQueries>
  762. );
  763. // no additional request has been sent, the total count of requests is still 1
  764. expect(mock).toHaveBeenCalledTimes(1);
  765. });
  766. });