slowestFunctionsWidget.spec.tsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import {ProjectFixture} from 'sentry-fixture/project';
  2. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  3. import ProjectsStore from 'sentry/stores/projectsStore';
  4. import {SlowestFunctionsWidget} from 'sentry/views/profiling/landing/slowestFunctionsWidget';
  5. describe('SlowestFunctionsWidget', function () {
  6. beforeEach(function () {
  7. const project = ProjectFixture({
  8. id: '1',
  9. slug: 'proj-slug',
  10. });
  11. ProjectsStore.loadInitialData([project]);
  12. });
  13. afterEach(function () {
  14. MockApiClient.clearMockResponses();
  15. });
  16. it('renders errors', async function () {
  17. // return 400 for all queries
  18. MockApiClient.addMockResponse({
  19. url: '/organizations/org-slug/events/',
  20. statusCode: 400,
  21. });
  22. render(<SlowestFunctionsWidget widgetHeight="100px" breakdownFunction="p75()" />);
  23. // starts by rendering loading
  24. expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
  25. // switches to errors once the api responds with an error
  26. expect(await screen.findByTestId('error-indicator')).toBeInTheDocument();
  27. });
  28. it('renders no functions', async function () {
  29. // for the slowest functions query
  30. MockApiClient.addMockResponse({
  31. url: '/organizations/org-slug/events/',
  32. body: {
  33. data: [],
  34. },
  35. match: [
  36. MockApiClient.matchQuery({
  37. dataset: 'profileFunctions',
  38. field: ['project.id', 'fingerprint', 'package', 'function', 'count()', 'sum()'],
  39. }),
  40. ],
  41. });
  42. render(<SlowestFunctionsWidget widgetHeight="100px" breakdownFunction="p75()" />);
  43. // starts by rendering loading
  44. expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
  45. // switches to the no functions view
  46. expect(await screen.findByText('No functions found')).toBeInTheDocument();
  47. });
  48. it('renders example transactions', async function () {
  49. // for the slowest functions query
  50. MockApiClient.addMockResponse({
  51. url: '/organizations/org-slug/events/',
  52. body: {
  53. data: [
  54. {
  55. 'project.id': 1,
  56. fingerprint: 123,
  57. package: 'foo',
  58. function: 'bar',
  59. 'sum()': 150,
  60. },
  61. {
  62. 'project.id': 1,
  63. fingerprint: 456,
  64. package: 'baz',
  65. function: 'qux',
  66. 'sum()': 100,
  67. },
  68. ],
  69. },
  70. match: [
  71. MockApiClient.matchQuery({
  72. dataset: 'profileFunctions',
  73. field: ['project.id', 'fingerprint', 'package', 'function', 'count()', 'sum()'],
  74. }),
  75. ],
  76. });
  77. // for the totals query
  78. MockApiClient.addMockResponse({
  79. url: '/organizations/org-slug/events/',
  80. body: {data: [{'project.id': 1, 'sum()': 2500000}]},
  81. match: [
  82. MockApiClient.matchQuery({
  83. dataset: 'profileFunctions',
  84. field: ['project.id', 'sum()'],
  85. project: [1],
  86. }),
  87. ],
  88. });
  89. // first function examples
  90. MockApiClient.addMockResponse({
  91. url: '/organizations/org-slug/events/',
  92. body: {
  93. data: [
  94. {
  95. transaction: 'transaction-1',
  96. 'count()': 1000,
  97. 'p75()': 100000,
  98. 'sum()': 1000000,
  99. 'examples()': [
  100. 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
  101. 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
  102. ],
  103. },
  104. {
  105. transaction: 'transaction-2',
  106. 'count()': 2500,
  107. 'p75()': 50000,
  108. 'sum()': 500000,
  109. 'examples()': ['cccccccccccccccccccccccccccccccc'],
  110. },
  111. ],
  112. },
  113. match: [
  114. MockApiClient.matchQuery({
  115. dataset: 'profileFunctions',
  116. query: 'project.id:1 fingerprint:123',
  117. field: ['transaction', 'count()', 'sum()', 'examples()', 'p75()'],
  118. }),
  119. ],
  120. });
  121. // second function examples
  122. MockApiClient.addMockResponse({
  123. url: '/organizations/org-slug/events/',
  124. body: {
  125. data: [
  126. {
  127. transaction: 'transaction-3',
  128. 'count()': 2000,
  129. 'p75()': 200000,
  130. 'sum()': 2000000,
  131. 'examples()': [
  132. 'dddddddddddddddddddddddddddddddd',
  133. 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
  134. ],
  135. },
  136. {
  137. transaction: 'transaction-4',
  138. 'count()': 3500,
  139. 'p75()': 70000,
  140. 'sum()': 700000,
  141. 'examples()': ['ffffffffffffffffffffffffffffffff'],
  142. },
  143. ],
  144. },
  145. match: [
  146. MockApiClient.matchQuery({
  147. dataset: 'profileFunctions',
  148. query: 'project.id:1 fingerprint:456',
  149. field: ['transaction', 'count()', 'sum()', 'examples()', 'p75()'],
  150. }),
  151. ],
  152. });
  153. render(<SlowestFunctionsWidget widgetHeight="100px" breakdownFunction="p75()" />);
  154. // starts by rendering loading
  155. expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
  156. // switches to the transactions list once the api responds with data
  157. expect(await screen.findByTestId('transactions-list')).toBeInTheDocument();
  158. // headers
  159. expect(screen.getByText('Transaction')).toBeInTheDocument();
  160. expect(screen.getByText('Count')).toBeInTheDocument();
  161. expect(screen.getByText('Time Spent')).toBeInTheDocument();
  162. // first row
  163. const transaction1 = screen.getByText('transaction-1');
  164. expect(transaction1).toBeInTheDocument();
  165. expect(transaction1).toHaveAttribute(
  166. 'href',
  167. '/organizations/org-slug/profiling/profile/proj-slug/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/flamegraph/?frameName=bar&framePackage=foo'
  168. );
  169. expect(screen.getByText('1k')).toBeInTheDocument();
  170. expect(screen.getByText('1.00ms')).toBeInTheDocument();
  171. // second row
  172. const transaction2 = screen.getByText('transaction-2');
  173. expect(transaction2).toBeInTheDocument();
  174. expect(transaction2).toHaveAttribute(
  175. 'href',
  176. '/organizations/org-slug/profiling/profile/proj-slug/cccccccccccccccccccccccccccccccc/flamegraph/?frameName=bar&framePackage=foo'
  177. );
  178. expect(screen.getByText('2.5k')).toBeInTheDocument();
  179. expect(screen.getByText('0.50ms')).toBeInTheDocument();
  180. // toggle the second function
  181. const toggles = screen.getAllByRole('button', {});
  182. expect(toggles.length).toEqual(2);
  183. await userEvent.click(toggles[1]);
  184. // first row
  185. const transaction3 = await screen.findByText('transaction-3');
  186. expect(transaction3).toBeInTheDocument();
  187. expect(transaction3).toHaveAttribute(
  188. 'href',
  189. '/organizations/org-slug/profiling/profile/proj-slug/dddddddddddddddddddddddddddddddd/flamegraph/?frameName=qux&framePackage=baz'
  190. );
  191. expect(screen.getByText('2k')).toBeInTheDocument();
  192. expect(screen.getByText('2.00ms')).toBeInTheDocument();
  193. // second row
  194. const transaction4 = screen.getByText('transaction-4');
  195. expect(transaction4).toBeInTheDocument();
  196. expect(transaction4).toHaveAttribute(
  197. 'href',
  198. '/organizations/org-slug/profiling/profile/proj-slug/ffffffffffffffffffffffffffffffff/flamegraph/?frameName=qux&framePackage=baz'
  199. );
  200. expect(screen.getByText('3.5k')).toBeInTheDocument();
  201. expect(screen.getByText('0.70ms')).toBeInTheDocument();
  202. });
  203. });