releaseWidgetQueries.spec.tsx 26 KB

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