widgetContainer.spec.tsx 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297
  1. import type {InitializeDataSettings} from 'sentry-test/performance/initializePerformanceData';
  2. import {initializeData as _initializeData} from 'sentry-test/performance/initializePerformanceData';
  3. import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
  4. import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
  5. import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
  6. import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
  7. import {PerformanceDisplayProvider} from 'sentry/utils/performance/contexts/performanceDisplayContext';
  8. import {OrganizationContext} from 'sentry/views/organizationContext';
  9. import WidgetContainer from 'sentry/views/performance/landing/widgets/components/widgetContainer';
  10. import {PerformanceWidgetSetting} from 'sentry/views/performance/landing/widgets/widgetDefinitions';
  11. import {ProjectPerformanceType} from 'sentry/views/performance/utils';
  12. import {QUERY_LIMIT_PARAM} from '../utils';
  13. const initializeData = (query = {}, rest: InitializeDataSettings = {}) => {
  14. const data = _initializeData({
  15. query: {statsPeriod: '7d', environment: ['prod'], project: [-42], ...query},
  16. ...rest,
  17. });
  18. data.eventView.additionalConditions.addFilterValues('transaction.op', ['pageload']);
  19. return data;
  20. };
  21. function WrappedComponent({data, withStaticFilters = false, ...rest}) {
  22. return (
  23. <OrganizationContext.Provider value={data.organization}>
  24. <MetricsCardinalityProvider
  25. location={data.router.location}
  26. organization={data.organization}
  27. >
  28. <MEPSettingProvider forceTransactions>
  29. <PerformanceDisplayProvider
  30. value={{performanceType: ProjectPerformanceType.ANY}}
  31. >
  32. <WidgetContainer
  33. chartHeight={100}
  34. allowedCharts={[
  35. PerformanceWidgetSetting.TPM_AREA,
  36. PerformanceWidgetSetting.FAILURE_RATE_AREA,
  37. PerformanceWidgetSetting.USER_MISERY_AREA,
  38. PerformanceWidgetSetting.DURATION_HISTOGRAM,
  39. ]}
  40. rowChartSettings={[]}
  41. withStaticFilters={withStaticFilters}
  42. forceDefaultChartSetting
  43. {...data}
  44. {...rest}
  45. />
  46. </PerformanceDisplayProvider>
  47. </MEPSettingProvider>
  48. </MetricsCardinalityProvider>
  49. </OrganizationContext.Provider>
  50. );
  51. }
  52. const issuesPredicate = (url, options) =>
  53. url.includes('events') && options.query?.query.includes('error');
  54. describe('Performance > Widgets > WidgetContainer', function () {
  55. let wrapper;
  56. let eventStatsMock;
  57. let eventsTrendsStats;
  58. let eventsMock;
  59. let issuesListMock;
  60. beforeEach(function () {
  61. eventStatsMock = MockApiClient.addMockResponse({
  62. method: 'GET',
  63. url: `/organizations/org-slug/events-stats/`,
  64. body: [],
  65. });
  66. eventsMock = MockApiClient.addMockResponse({
  67. method: 'GET',
  68. url: `/organizations/org-slug/events/`,
  69. body: {
  70. data: [{}],
  71. meta: {},
  72. },
  73. match: [(...args) => !issuesPredicate(...args)],
  74. });
  75. issuesListMock = MockApiClient.addMockResponse({
  76. method: 'GET',
  77. url: `/organizations/org-slug/events/`,
  78. body: {
  79. data: [
  80. {
  81. 'issue.id': 123,
  82. transaction: '/issue/:id/',
  83. title: 'Error: Something is broken.',
  84. 'project.id': 1,
  85. count: 3100,
  86. issue: 'JAVASCRIPT-ABCD',
  87. },
  88. ],
  89. },
  90. match: [(...args) => issuesPredicate(...args)],
  91. });
  92. eventsTrendsStats = MockApiClient.addMockResponse({
  93. method: 'GET',
  94. url: '/organizations/org-slug/events-trends-stats/',
  95. body: [],
  96. });
  97. MockApiClient.addMockResponse({
  98. method: 'GET',
  99. url: `/organizations/org-slug/metrics-compatibility/`,
  100. body: [],
  101. });
  102. MockApiClient.addMockResponse({
  103. method: 'GET',
  104. url: `/organizations/org-slug/metrics-compatibility-sums/`,
  105. body: [],
  106. });
  107. });
  108. afterEach(function () {
  109. if (wrapper) {
  110. wrapper.unmount();
  111. wrapper = undefined;
  112. }
  113. });
  114. it('Check requests when changing widget props', async function () {
  115. const data = initializeData();
  116. wrapper = render(
  117. <WrappedComponent
  118. data={data}
  119. defaultChartSetting={PerformanceWidgetSetting.TPM_AREA}
  120. />
  121. );
  122. await waitFor(() => {
  123. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  124. });
  125. // Change eventView reference
  126. data.eventView = data.eventView.clone();
  127. wrapper.rerender(
  128. <WrappedComponent
  129. data={data}
  130. defaultChartSetting={PerformanceWidgetSetting.TPM_AREA}
  131. />
  132. );
  133. await waitFor(() => {
  134. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  135. });
  136. // Change eventView statsperiod
  137. const modifiedData = initializeData({
  138. statsPeriod: '14d',
  139. });
  140. wrapper.rerender(
  141. <WrappedComponent
  142. data={modifiedData}
  143. defaultChartSetting={PerformanceWidgetSetting.TPM_AREA}
  144. />
  145. );
  146. await waitFor(() => {
  147. expect(eventStatsMock).toHaveBeenCalledTimes(2);
  148. });
  149. expect(eventStatsMock).toHaveBeenNthCalledWith(
  150. 2,
  151. expect.anything(),
  152. expect.objectContaining({
  153. query: expect.objectContaining({
  154. interval: '1h',
  155. partial: '1',
  156. query: 'transaction.op:pageload',
  157. statsPeriod: '28d',
  158. yAxis: 'tpm()',
  159. }),
  160. })
  161. );
  162. });
  163. it('Check requests when changing widget props for GenericDiscoverQuery based widget', async function () {
  164. const data = initializeData();
  165. wrapper = render(
  166. <MEPSettingProvider forceTransactions>
  167. <WrappedComponent
  168. data={data}
  169. defaultChartSetting={PerformanceWidgetSetting.MOST_IMPROVED}
  170. />
  171. </MEPSettingProvider>
  172. );
  173. await waitFor(() => {
  174. expect(eventsTrendsStats).toHaveBeenCalledTimes(1);
  175. });
  176. // Change eventView reference
  177. data.eventView = data.eventView.clone();
  178. wrapper.rerender(
  179. <MEPSettingProvider forceTransactions>
  180. <WrappedComponent
  181. data={data}
  182. defaultChartSetting={PerformanceWidgetSetting.MOST_IMPROVED}
  183. />
  184. </MEPSettingProvider>
  185. );
  186. await waitFor(() => {
  187. expect(eventsTrendsStats).toHaveBeenCalledTimes(1);
  188. });
  189. // Change eventView statsperiod
  190. const modifiedData = initializeData({
  191. statsPeriod: '14d',
  192. });
  193. wrapper.rerender(
  194. <MEPSettingProvider forceTransactions>
  195. <WrappedComponent
  196. data={modifiedData}
  197. defaultChartSetting={PerformanceWidgetSetting.MOST_IMPROVED}
  198. />
  199. </MEPSettingProvider>
  200. );
  201. await waitFor(() => {
  202. expect(eventsTrendsStats).toHaveBeenCalledTimes(2);
  203. });
  204. expect(eventsTrendsStats).toHaveBeenNthCalledWith(
  205. 2,
  206. expect.anything(),
  207. expect.objectContaining({
  208. query: expect.objectContaining({
  209. cursor: '0:0:1',
  210. environment: ['prod'],
  211. field: ['transaction', 'project'],
  212. interval: undefined,
  213. middle: undefined,
  214. noPagination: true,
  215. per_page: QUERY_LIMIT_PARAM,
  216. project: ['-42'],
  217. query:
  218. 'transaction.op:pageload tpm():>0.01 count_percentage():>0.25 count_percentage():<4 trend_percentage():>0% confidence():>6',
  219. sort: 'trend_percentage()',
  220. statsPeriod: '14d',
  221. trendFunction: 'p95(transaction.duration)',
  222. trendType: 'improved',
  223. }),
  224. })
  225. );
  226. });
  227. it('should call PageError Provider when errors are present', async function () {
  228. const data = initializeData();
  229. eventStatsMock = MockApiClient.addMockResponse({
  230. method: 'GET',
  231. url: `/organizations/org-slug/events-stats/`,
  232. statusCode: 400,
  233. body: {
  234. detail: 'Request did not work :(',
  235. },
  236. });
  237. wrapper = render(
  238. <PageAlertProvider>
  239. <PageAlert />
  240. <WrappedComponent
  241. data={data}
  242. defaultChartSetting={PerformanceWidgetSetting.TPM_AREA}
  243. />
  244. </PageAlertProvider>
  245. );
  246. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  247. 'Transactions Per Minute'
  248. );
  249. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  250. expect(await screen.findByTestId('page-error-alert')).toHaveTextContent(
  251. 'Request did not work :('
  252. );
  253. });
  254. it('TPM Widget', async function () {
  255. const data = initializeData();
  256. wrapper = render(
  257. <WrappedComponent
  258. data={data}
  259. defaultChartSetting={PerformanceWidgetSetting.TPM_AREA}
  260. />
  261. );
  262. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  263. 'Transactions Per Minute'
  264. );
  265. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  266. expect(eventStatsMock).toHaveBeenNthCalledWith(
  267. 1,
  268. expect.anything(),
  269. expect.objectContaining({
  270. query: expect.objectContaining({
  271. interval: '1h',
  272. partial: '1',
  273. query: 'transaction.op:pageload',
  274. statsPeriod: '14d',
  275. yAxis: 'tpm()',
  276. }),
  277. })
  278. );
  279. });
  280. it('Failure Rate Widget', async function () {
  281. const data = initializeData();
  282. wrapper = render(
  283. <WrappedComponent
  284. data={data}
  285. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  286. />
  287. );
  288. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  289. 'Failure Rate'
  290. );
  291. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  292. expect(eventStatsMock).toHaveBeenNthCalledWith(
  293. 1,
  294. expect.anything(),
  295. expect.objectContaining({
  296. query: expect.objectContaining({
  297. interval: '1h',
  298. partial: '1',
  299. query: 'transaction.op:pageload',
  300. statsPeriod: '14d',
  301. yAxis: 'failure_rate()',
  302. }),
  303. })
  304. );
  305. });
  306. it('Widget with MEP enabled and metric meta set to true', async function () {
  307. const data = initializeData(
  308. {},
  309. {
  310. features: ['performance-use-metrics'],
  311. }
  312. );
  313. eventStatsMock = MockApiClient.addMockResponse({
  314. method: 'GET',
  315. url: `/organizations/org-slug/events-stats/`,
  316. body: {
  317. data: [],
  318. isMetricsData: true,
  319. },
  320. });
  321. eventsMock = MockApiClient.addMockResponse({
  322. method: 'GET',
  323. url: `/organizations/org-slug/events/`,
  324. body: {
  325. data: [{}],
  326. meta: {isMetricsData: true},
  327. },
  328. });
  329. wrapper = render(
  330. <WrappedComponent
  331. data={data}
  332. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  333. />
  334. );
  335. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  336. expect(eventStatsMock).toHaveBeenNthCalledWith(
  337. 1,
  338. expect.anything(),
  339. expect.objectContaining({
  340. query: expect.objectContaining({dataset: 'metrics'}),
  341. })
  342. );
  343. expect(eventsMock).toHaveBeenCalledTimes(1);
  344. expect(eventsMock).toHaveBeenCalledWith(
  345. expect.anything(),
  346. expect.objectContaining({
  347. query: expect.objectContaining({dataset: 'metrics'}),
  348. })
  349. );
  350. expect(await screen.findByTestId('has-metrics-data-tag')).toHaveTextContent(
  351. 'processed'
  352. );
  353. });
  354. it('Widget with MEP enabled and metric meta set to undefined', async function () {
  355. const data = initializeData(
  356. {},
  357. {
  358. features: ['performance-use-metrics'],
  359. }
  360. );
  361. eventStatsMock = MockApiClient.addMockResponse({
  362. method: 'GET',
  363. url: `/organizations/org-slug/events-stats/`,
  364. body: {
  365. data: [],
  366. isMetricsData: undefined,
  367. },
  368. });
  369. wrapper = render(
  370. <WrappedComponent
  371. data={data}
  372. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  373. />
  374. );
  375. expect(await screen.findByTestId('no-metrics-data-tag')).toBeInTheDocument();
  376. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  377. expect(eventStatsMock).toHaveBeenNthCalledWith(
  378. 1,
  379. expect.anything(),
  380. expect.objectContaining({
  381. query: expect.objectContaining({dataset: 'metrics'}),
  382. })
  383. );
  384. });
  385. it('Widget with MEP enabled and metric meta set to false', async function () {
  386. const data = initializeData(
  387. {},
  388. {
  389. features: ['performance-use-metrics'],
  390. }
  391. );
  392. eventStatsMock = MockApiClient.addMockResponse({
  393. method: 'GET',
  394. url: `/organizations/org-slug/events-stats/`,
  395. body: {
  396. data: [],
  397. isMetricsData: false,
  398. },
  399. });
  400. eventsMock = MockApiClient.addMockResponse({
  401. method: 'GET',
  402. url: `/organizations/org-slug/events/`,
  403. body: {
  404. data: [{}],
  405. meta: {isMetricsData: false},
  406. },
  407. });
  408. wrapper = render(
  409. <WrappedComponent
  410. data={data}
  411. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  412. />
  413. );
  414. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  415. expect(eventStatsMock).toHaveBeenNthCalledWith(
  416. 1,
  417. expect.anything(),
  418. expect.objectContaining({
  419. query: expect.objectContaining({dataset: 'metrics'}),
  420. })
  421. );
  422. expect(eventsMock).toHaveBeenCalledTimes(1);
  423. expect(eventsMock).toHaveBeenCalledWith(
  424. expect.anything(),
  425. expect.objectContaining({
  426. query: expect.objectContaining({dataset: 'metrics'}),
  427. })
  428. );
  429. expect(await screen.findByTestId('has-metrics-data-tag')).toHaveTextContent(
  430. 'indexed'
  431. );
  432. });
  433. it('User misery Widget', async function () {
  434. const data = initializeData();
  435. wrapper = render(
  436. <WrappedComponent
  437. data={data}
  438. defaultChartSetting={PerformanceWidgetSetting.USER_MISERY_AREA}
  439. />
  440. );
  441. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  442. 'User Misery'
  443. );
  444. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  445. expect(eventStatsMock).toHaveBeenNthCalledWith(
  446. 1,
  447. expect.anything(),
  448. expect.objectContaining({
  449. query: expect.objectContaining({
  450. interval: '1h',
  451. partial: '1',
  452. query: 'transaction.op:pageload',
  453. statsPeriod: '14d',
  454. yAxis: 'user_misery()',
  455. }),
  456. })
  457. );
  458. });
  459. it('Worst LCP widget', async function () {
  460. const data = initializeData();
  461. wrapper = render(
  462. <WrappedComponent
  463. data={data}
  464. defaultChartSetting={PerformanceWidgetSetting.WORST_LCP_VITALS}
  465. />
  466. );
  467. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  468. 'Worst LCP Web Vitals'
  469. );
  470. expect(await screen.findByTestId('view-all-button')).toHaveTextContent('View All');
  471. expect(eventsMock).toHaveBeenCalledTimes(1);
  472. expect(eventsMock).toHaveBeenNthCalledWith(
  473. 1,
  474. expect.anything(),
  475. expect.objectContaining({
  476. query: expect.objectContaining({
  477. environment: ['prod'],
  478. field: [
  479. 'transaction',
  480. 'title',
  481. 'project.id',
  482. 'count_web_vitals(measurements.lcp, poor)',
  483. 'count_web_vitals(measurements.lcp, meh)',
  484. 'count_web_vitals(measurements.lcp, good)',
  485. ],
  486. per_page: 4,
  487. project: ['-42'],
  488. query: 'transaction.op:pageload',
  489. sort: '-count_web_vitals(measurements.lcp, poor)',
  490. statsPeriod: '7d',
  491. }),
  492. })
  493. );
  494. });
  495. it('Worst LCP widget - MEP', async function () {
  496. const data = initializeData(
  497. {},
  498. {
  499. features: ['performance-use-metrics'],
  500. }
  501. );
  502. wrapper = render(
  503. <WrappedComponent
  504. data={data}
  505. defaultChartSetting={PerformanceWidgetSetting.WORST_LCP_VITALS}
  506. />
  507. );
  508. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  509. 'Worst LCP Web Vitals'
  510. );
  511. expect(await screen.findByTestId('view-all-button')).toHaveTextContent('View All');
  512. expect(eventsMock).toHaveBeenCalledTimes(1);
  513. expect(eventsMock).toHaveBeenNthCalledWith(
  514. 1,
  515. expect.anything(),
  516. expect.objectContaining({
  517. query: expect.objectContaining({
  518. environment: ['prod'],
  519. field: [
  520. 'transaction',
  521. 'title',
  522. 'project.id',
  523. 'count_web_vitals(measurements.lcp, poor)',
  524. 'count_web_vitals(measurements.lcp, meh)',
  525. 'count_web_vitals(measurements.lcp, good)',
  526. ],
  527. per_page: 4,
  528. project: ['-42'],
  529. query: 'transaction.op:pageload !transaction:"<< unparameterized >>"',
  530. sort: '-count_web_vitals(measurements.lcp, poor)',
  531. statsPeriod: '7d',
  532. }),
  533. })
  534. );
  535. });
  536. it('Worst FCP widget', async function () {
  537. const data = initializeData();
  538. wrapper = render(
  539. <WrappedComponent
  540. data={data}
  541. defaultChartSetting={PerformanceWidgetSetting.WORST_FCP_VITALS}
  542. />
  543. );
  544. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  545. 'Worst FCP Web Vitals'
  546. );
  547. expect(await screen.findByTestId('view-all-button')).toHaveTextContent('View All');
  548. expect(eventsMock).toHaveBeenCalledTimes(1);
  549. expect(eventsMock).toHaveBeenNthCalledWith(
  550. 1,
  551. expect.anything(),
  552. expect.objectContaining({
  553. query: expect.objectContaining({
  554. environment: ['prod'],
  555. field: [
  556. 'transaction',
  557. 'title',
  558. 'project.id',
  559. 'count_web_vitals(measurements.fcp, poor)',
  560. 'count_web_vitals(measurements.fcp, meh)',
  561. 'count_web_vitals(measurements.fcp, good)',
  562. ],
  563. per_page: 4,
  564. project: ['-42'],
  565. query: 'transaction.op:pageload',
  566. sort: '-count_web_vitals(measurements.fcp, poor)',
  567. statsPeriod: '7d',
  568. }),
  569. })
  570. );
  571. });
  572. it('Worst FID widget', async function () {
  573. const data = initializeData();
  574. wrapper = render(
  575. <WrappedComponent
  576. data={data}
  577. defaultChartSetting={PerformanceWidgetSetting.WORST_FID_VITALS}
  578. />
  579. );
  580. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  581. 'Worst FID Web Vitals'
  582. );
  583. expect(await screen.findByTestId('view-all-button')).toHaveTextContent('View All');
  584. expect(eventsMock).toHaveBeenCalledTimes(1);
  585. expect(eventsMock).toHaveBeenNthCalledWith(
  586. 1,
  587. expect.anything(),
  588. expect.objectContaining({
  589. query: expect.objectContaining({
  590. environment: ['prod'],
  591. field: [
  592. 'transaction',
  593. 'title',
  594. 'project.id',
  595. 'count_web_vitals(measurements.fid, poor)',
  596. 'count_web_vitals(measurements.fid, meh)',
  597. 'count_web_vitals(measurements.fid, good)',
  598. ],
  599. per_page: 4,
  600. project: ['-42'],
  601. query: 'transaction.op:pageload',
  602. sort: '-count_web_vitals(measurements.fid, poor)',
  603. statsPeriod: '7d',
  604. }),
  605. })
  606. );
  607. });
  608. it('LCP Histogram Widget', async function () {
  609. const data = initializeData();
  610. wrapper = render(
  611. <WrappedComponent
  612. data={data}
  613. defaultChartSetting={PerformanceWidgetSetting.LCP_HISTOGRAM}
  614. />
  615. );
  616. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  617. 'LCP Distribution'
  618. );
  619. // TODO(k-fish): Add histogram mock
  620. });
  621. it('FCP Histogram Widget', async function () {
  622. const data = initializeData();
  623. wrapper = render(
  624. <WrappedComponent
  625. data={data}
  626. defaultChartSetting={PerformanceWidgetSetting.FCP_HISTOGRAM}
  627. />
  628. );
  629. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  630. 'FCP Distribution'
  631. );
  632. // TODO(k-fish): Add histogram mock
  633. });
  634. it('Most errors widget', async function () {
  635. const data = initializeData();
  636. wrapper = render(
  637. <WrappedComponent
  638. data={data}
  639. defaultChartSetting={PerformanceWidgetSetting.MOST_RELATED_ERRORS}
  640. />
  641. );
  642. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  643. 'Most Related Errors'
  644. );
  645. expect(eventsMock).toHaveBeenCalledTimes(1);
  646. expect(eventsMock).toHaveBeenNthCalledWith(
  647. 1,
  648. expect.anything(),
  649. expect.objectContaining({
  650. query: expect.objectContaining({
  651. environment: ['prod'],
  652. field: ['transaction', 'project.id', 'failure_count()'],
  653. per_page: QUERY_LIMIT_PARAM,
  654. project: ['-42'],
  655. query: 'transaction.op:pageload failure_count():>0',
  656. sort: '-failure_count()',
  657. statsPeriod: '7d',
  658. }),
  659. })
  660. );
  661. });
  662. it('Most related issues widget', async function () {
  663. const data = initializeData();
  664. wrapper = render(
  665. <WrappedComponent
  666. data={data}
  667. defaultChartSetting={PerformanceWidgetSetting.MOST_RELATED_ISSUES}
  668. />
  669. );
  670. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  671. 'Most Related Issues'
  672. );
  673. expect(issuesListMock).toHaveBeenCalledTimes(1);
  674. expect(issuesListMock).toHaveBeenNthCalledWith(
  675. 1,
  676. expect.anything(),
  677. expect.objectContaining({
  678. query: expect.objectContaining({
  679. environment: ['prod'],
  680. field: ['issue', 'transaction', 'title', 'project.id', 'count()'],
  681. per_page: QUERY_LIMIT_PARAM,
  682. project: ['-42'],
  683. query: 'event.type:error !tags[transaction]:"" count():>0',
  684. sort: '-count()',
  685. statsPeriod: '7d',
  686. }),
  687. })
  688. );
  689. });
  690. it('Switching from issues to errors widget', async function () {
  691. const data = initializeData();
  692. wrapper = render(
  693. <WrappedComponent
  694. data={data}
  695. defaultChartSetting={PerformanceWidgetSetting.MOST_RELATED_ISSUES}
  696. />
  697. );
  698. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  699. 'Most Related Issues'
  700. );
  701. expect(issuesListMock).toHaveBeenCalledTimes(1);
  702. wrapper.rerender(
  703. <WrappedComponent
  704. data={data}
  705. defaultChartSetting={PerformanceWidgetSetting.MOST_RELATED_ERRORS}
  706. />
  707. );
  708. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  709. 'Most Related Errors'
  710. );
  711. expect(eventsMock).toHaveBeenCalledTimes(1);
  712. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  713. });
  714. it('Most improved trends widget', async function () {
  715. const data = initializeData();
  716. wrapper = render(
  717. <MEPSettingProvider forceTransactions>
  718. <WrappedComponent
  719. data={data}
  720. defaultChartSetting={PerformanceWidgetSetting.MOST_IMPROVED}
  721. />
  722. </MEPSettingProvider>
  723. );
  724. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  725. 'Most Improved'
  726. );
  727. expect(eventsTrendsStats).toHaveBeenCalledTimes(1);
  728. expect(eventsTrendsStats).toHaveBeenNthCalledWith(
  729. 1,
  730. expect.anything(),
  731. expect.objectContaining({
  732. query: expect.objectContaining({
  733. environment: ['prod'],
  734. field: ['transaction', 'project'],
  735. interval: undefined,
  736. middle: undefined,
  737. per_page: QUERY_LIMIT_PARAM,
  738. project: ['-42'],
  739. query:
  740. 'transaction.op:pageload tpm():>0.01 count_percentage():>0.25 count_percentage():<4 trend_percentage():>0% confidence():>6',
  741. sort: 'trend_percentage()',
  742. statsPeriod: '7d',
  743. trendFunction: 'p95(transaction.duration)',
  744. trendType: 'improved',
  745. }),
  746. })
  747. );
  748. });
  749. it('Most time spent in db queries widget', async function () {
  750. const data = initializeData();
  751. wrapper = render(
  752. <MEPSettingProvider forceTransactions>
  753. <WrappedComponent
  754. data={data}
  755. defaultChartSetting={PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES}
  756. />
  757. </MEPSettingProvider>
  758. );
  759. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  760. 'Most Time-Consuming Queries'
  761. );
  762. expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute(
  763. 'href',
  764. '/insights/database/'
  765. );
  766. expect(eventsMock).toHaveBeenCalledTimes(1);
  767. expect(eventsMock).toHaveBeenNthCalledWith(
  768. 1,
  769. expect.anything(),
  770. expect.objectContaining({
  771. query: expect.objectContaining({
  772. dataset: 'spansMetrics',
  773. environment: ['prod'],
  774. field: [
  775. 'span.op',
  776. 'span.group',
  777. 'project.id',
  778. 'span.description',
  779. 'sum(span.self_time)',
  780. 'avg(span.self_time)',
  781. 'time_spent_percentage()',
  782. ],
  783. per_page: QUERY_LIMIT_PARAM,
  784. project: ['-42'],
  785. query: 'has:span.description span.module:db transaction.op:pageload',
  786. sort: '-time_spent_percentage()',
  787. statsPeriod: '7d',
  788. }),
  789. })
  790. );
  791. });
  792. it('Most time consuming domains widget', async function () {
  793. const data = initializeData();
  794. wrapper = render(
  795. <MEPSettingProvider forceTransactions>
  796. <WrappedComponent
  797. data={data}
  798. defaultChartSetting={PerformanceWidgetSetting.MOST_TIME_CONSUMING_DOMAINS}
  799. />
  800. </MEPSettingProvider>
  801. );
  802. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  803. 'Most Time-Consuming Domains'
  804. );
  805. expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute(
  806. 'href',
  807. '/insights/http/'
  808. );
  809. expect(eventsMock).toHaveBeenCalledTimes(1);
  810. expect(eventsMock).toHaveBeenNthCalledWith(
  811. 1,
  812. expect.anything(),
  813. expect.objectContaining({
  814. query: expect.objectContaining({
  815. dataset: 'spansMetrics',
  816. environment: ['prod'],
  817. field: [
  818. 'project.id',
  819. 'span.domain',
  820. 'sum(span.self_time)',
  821. 'avg(span.self_time)',
  822. 'time_spent_percentage()',
  823. ],
  824. per_page: QUERY_LIMIT_PARAM,
  825. project: ['-42'],
  826. query: 'span.module:http',
  827. sort: '-time_spent_percentage()',
  828. statsPeriod: '7d',
  829. }),
  830. })
  831. );
  832. });
  833. it('Most time consuming resources widget', async function () {
  834. const data = initializeData();
  835. wrapper = render(
  836. <MEPSettingProvider forceTransactions>
  837. <WrappedComponent
  838. data={data}
  839. defaultChartSetting={PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES}
  840. />
  841. </MEPSettingProvider>
  842. );
  843. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  844. 'Most Time-Consuming Assets'
  845. );
  846. expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute(
  847. 'href',
  848. '/insights/browser/assets/'
  849. );
  850. expect(eventsMock).toHaveBeenCalledTimes(1);
  851. expect(eventsMock).toHaveBeenNthCalledWith(
  852. 1,
  853. expect.anything(),
  854. expect.objectContaining({
  855. query: expect.objectContaining({
  856. dataset: 'spansMetrics',
  857. environment: ['prod'],
  858. field: [
  859. 'span.description',
  860. 'span.op',
  861. 'project.id',
  862. 'span.group',
  863. 'sum(span.self_time)',
  864. 'avg(span.self_time)',
  865. 'time_spent_percentage()',
  866. ],
  867. per_page: QUERY_LIMIT_PARAM,
  868. project: ['-42'],
  869. query:
  870. '!span.description:browser-extension://* resource.render_blocking_status:blocking ( span.op:resource.script OR file_extension:css OR file_extension:[woff,woff2,ttf,otf,eot] OR file_extension:[jpg,jpeg,png,gif,svg,webp,apng,avif] OR span.op:resource.img ) transaction.op:pageload',
  871. sort: '-time_spent_percentage()',
  872. statsPeriod: '7d',
  873. }),
  874. })
  875. );
  876. });
  877. it('Highest cache miss rate transactions widget', async function () {
  878. const data = initializeData();
  879. wrapper = render(
  880. <MEPSettingProvider forceTransactions>
  881. <WrappedComponent
  882. data={data}
  883. defaultChartSetting={
  884. PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS
  885. }
  886. />
  887. </MEPSettingProvider>
  888. );
  889. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  890. 'Highest Cache Miss Rates'
  891. );
  892. expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute(
  893. 'href',
  894. '/insights/caches/'
  895. );
  896. expect(eventsMock).toHaveBeenCalledTimes(1);
  897. expect(eventsMock).toHaveBeenNthCalledWith(
  898. 1,
  899. expect.anything(),
  900. expect.objectContaining({
  901. query: expect.objectContaining({
  902. cursor: '0:0:1',
  903. dataset: 'spansMetrics',
  904. environment: ['prod'],
  905. field: ['transaction', 'project.id', 'cache_miss_rate()'],
  906. noPagination: true,
  907. per_page: QUERY_LIMIT_PARAM,
  908. project: ['-42'],
  909. query: 'span.op:[cache.get_item,cache.get]',
  910. statsPeriod: '7d',
  911. referrer:
  912. 'api.performance.generic-widget-chart.highest-cache--miss-rate-transactions',
  913. sort: '-cache_miss_rate()',
  914. }),
  915. })
  916. );
  917. });
  918. it('Best Page Opportunities widget', async function () {
  919. const data = initializeData();
  920. wrapper = render(
  921. <MEPSettingProvider forceTransactions>
  922. <WrappedComponent
  923. data={data}
  924. defaultChartSetting={PerformanceWidgetSetting.HIGHEST_OPPORTUNITY_PAGES}
  925. />
  926. </MEPSettingProvider>
  927. );
  928. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  929. 'Best Page Opportunities'
  930. );
  931. expect(eventsMock).toHaveBeenCalledTimes(2);
  932. expect(eventsMock).toHaveBeenNthCalledWith(
  933. 2,
  934. expect.anything(),
  935. expect.objectContaining({
  936. query: expect.objectContaining({
  937. dataset: 'metrics',
  938. field: [
  939. 'transaction',
  940. 'p75(measurements.lcp)',
  941. 'p75(measurements.fcp)',
  942. 'p75(measurements.cls)',
  943. 'p75(measurements.ttfb)',
  944. 'p75(measurements.inp)',
  945. 'opportunity_score(measurements.score.total)',
  946. 'avg(measurements.score.total)',
  947. 'count()',
  948. 'count_scores(measurements.score.lcp)',
  949. 'count_scores(measurements.score.fcp)',
  950. 'count_scores(measurements.score.cls)',
  951. 'count_scores(measurements.score.inp)',
  952. 'count_scores(measurements.score.ttfb)',
  953. ],
  954. query:
  955. 'transaction.op:[pageload,""] span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,""] !transaction:"<< unparameterized >>" avg(measurements.score.total):>=0',
  956. }),
  957. })
  958. );
  959. });
  960. it('Most regressed trends widget', async function () {
  961. const data = initializeData();
  962. wrapper = render(
  963. <WrappedComponent
  964. data={data}
  965. defaultChartSetting={PerformanceWidgetSetting.MOST_REGRESSED}
  966. />
  967. );
  968. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  969. 'Most Regressed'
  970. );
  971. expect(eventsTrendsStats).toHaveBeenCalledTimes(1);
  972. expect(eventsTrendsStats).toHaveBeenNthCalledWith(
  973. 1,
  974. expect.anything(),
  975. expect.objectContaining({
  976. query: expect.objectContaining({
  977. environment: ['prod'],
  978. field: ['transaction', 'project'],
  979. interval: undefined,
  980. middle: undefined,
  981. per_page: QUERY_LIMIT_PARAM,
  982. project: ['-42'],
  983. query:
  984. 'transaction.op:pageload tpm():>0.01 count_percentage():>0.25 count_percentage():<4 trend_percentage():>0% confidence():>6',
  985. sort: '-trend_percentage()',
  986. statsPeriod: '7d',
  987. trendFunction: 'p95(transaction.duration)',
  988. trendType: 'regression',
  989. }),
  990. })
  991. );
  992. });
  993. it('Most slow frames widget', async function () {
  994. const data = initializeData();
  995. wrapper = render(
  996. <WrappedComponent
  997. data={data}
  998. defaultChartSetting={PerformanceWidgetSetting.MOST_SLOW_FRAMES}
  999. />
  1000. );
  1001. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1002. 'Most Slow Frames'
  1003. );
  1004. expect(eventsMock).toHaveBeenCalledTimes(1);
  1005. expect(eventsMock).toHaveBeenNthCalledWith(
  1006. 1,
  1007. expect.anything(),
  1008. expect.objectContaining({
  1009. query: expect.objectContaining({
  1010. cursor: '0:0:1',
  1011. environment: ['prod'],
  1012. field: ['transaction', 'project.id', 'epm()', 'avg(measurements.frames_slow)'],
  1013. noPagination: true,
  1014. per_page: QUERY_LIMIT_PARAM,
  1015. project: ['-42'],
  1016. query: 'transaction.op:pageload epm():>0.01 avg(measurements.frames_slow):>0',
  1017. sort: '-avg(measurements.frames_slow)',
  1018. statsPeriod: '7d',
  1019. }),
  1020. })
  1021. );
  1022. expect(await screen.findByTestId('empty-state')).toBeInTheDocument();
  1023. });
  1024. it('Most slow frames widget - MEP', async function () {
  1025. const data = initializeData(
  1026. {},
  1027. {
  1028. features: ['performance-use-metrics'],
  1029. }
  1030. );
  1031. wrapper = render(
  1032. <WrappedComponent
  1033. data={data}
  1034. defaultChartSetting={PerformanceWidgetSetting.MOST_SLOW_FRAMES}
  1035. />
  1036. );
  1037. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1038. 'Most Slow Frames'
  1039. );
  1040. expect(eventsMock).toHaveBeenCalledTimes(1);
  1041. expect(eventsMock).toHaveBeenNthCalledWith(
  1042. 1,
  1043. expect.anything(),
  1044. expect.objectContaining({
  1045. query: expect.objectContaining({
  1046. cursor: '0:0:1',
  1047. environment: ['prod'],
  1048. field: ['transaction', 'project.id', 'epm()', 'avg(measurements.frames_slow)'],
  1049. noPagination: true,
  1050. per_page: QUERY_LIMIT_PARAM,
  1051. project: ['-42'],
  1052. query: 'transaction.op:pageload epm():>0.01 avg(measurements.frames_slow):>0',
  1053. sort: '-avg(measurements.frames_slow)',
  1054. statsPeriod: '7d',
  1055. }),
  1056. })
  1057. );
  1058. expect(await screen.findByTestId('empty-state')).toBeInTheDocument();
  1059. });
  1060. it('Most frozen frames widget', async function () {
  1061. const data = initializeData();
  1062. wrapper = render(
  1063. <WrappedComponent
  1064. data={data}
  1065. defaultChartSetting={PerformanceWidgetSetting.MOST_FROZEN_FRAMES}
  1066. />
  1067. );
  1068. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1069. 'Most Frozen Frames'
  1070. );
  1071. expect(eventsMock).toHaveBeenCalledTimes(1);
  1072. expect(eventsMock).toHaveBeenNthCalledWith(
  1073. 1,
  1074. expect.anything(),
  1075. expect.objectContaining({
  1076. query: expect.objectContaining({
  1077. cursor: '0:0:1',
  1078. environment: ['prod'],
  1079. field: [
  1080. 'transaction',
  1081. 'project.id',
  1082. 'epm()',
  1083. 'avg(measurements.frames_frozen)',
  1084. ],
  1085. noPagination: true,
  1086. per_page: QUERY_LIMIT_PARAM,
  1087. project: ['-42'],
  1088. query: 'transaction.op:pageload epm():>0.01 avg(measurements.frames_frozen):>0',
  1089. sort: '-avg(measurements.frames_frozen)',
  1090. statsPeriod: '7d',
  1091. }),
  1092. })
  1093. );
  1094. expect(await screen.findByTestId('empty-state')).toBeInTheDocument();
  1095. });
  1096. it('Able to change widget type from menu', async function () {
  1097. const data = initializeData();
  1098. const setRowChartSettings = jest.fn(() => {});
  1099. wrapper = render(
  1100. <WrappedComponent
  1101. data={data}
  1102. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  1103. setRowChartSettings={setRowChartSettings}
  1104. />
  1105. );
  1106. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1107. 'Failure Rate'
  1108. );
  1109. expect(eventStatsMock).toHaveBeenCalledTimes(1);
  1110. expect(setRowChartSettings).toHaveBeenCalledTimes(0);
  1111. await userEvent.click(await screen.findByLabelText('More'));
  1112. await userEvent.click(await screen.findByText('User Misery'));
  1113. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1114. 'User Misery'
  1115. );
  1116. expect(eventStatsMock).toHaveBeenCalledTimes(2);
  1117. expect(setRowChartSettings).toHaveBeenCalledTimes(1);
  1118. });
  1119. it('Chart settings passed from the row are disabled in the menu', async function () {
  1120. const data = initializeData();
  1121. const setRowChartSettings = jest.fn(() => {});
  1122. wrapper = render(
  1123. <WrappedComponent
  1124. data={data}
  1125. defaultChartSetting={PerformanceWidgetSetting.FAILURE_RATE_AREA}
  1126. setRowChartSettings={setRowChartSettings}
  1127. rowChartSettings={[
  1128. PerformanceWidgetSetting.FAILURE_RATE_AREA,
  1129. PerformanceWidgetSetting.USER_MISERY_AREA,
  1130. ]}
  1131. />
  1132. );
  1133. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1134. 'Failure Rate'
  1135. );
  1136. // Open context menu
  1137. await userEvent.click(await screen.findByLabelText('More'));
  1138. // Check that the "User Misery" option is disabled by clicking on it,
  1139. // expecting that the selected option doesn't change
  1140. const userMiseryOption = await screen.findByRole('option', {name: 'User Misery'});
  1141. await userEvent.click(userMiseryOption);
  1142. expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
  1143. 'Failure Rate'
  1144. );
  1145. });
  1146. });