groupReplays.spec.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
  3. import ProjectsStore from 'sentry/stores/projectsStore';
  4. import GroupReplays from 'sentry/views/issueDetails/groupReplays';
  5. jest.mock('sentry/utils/useMedia', () => ({
  6. __esModule: true,
  7. default: jest.fn(() => true),
  8. }));
  9. const mockReplayCountUrl = '/organizations/org-slug/replay-count/';
  10. const mockReplayUrl = '/organizations/org-slug/replays/';
  11. type InitializeOrgProps = {
  12. organizationProps?: {
  13. features?: string[];
  14. };
  15. };
  16. const REPLAY_ID_1 = '346789a703f6454384f1de473b8b9fcc';
  17. const REPLAY_ID_2 = 'b05dae9b6be54d21a4d5ad9f8f02b780';
  18. function init({organizationProps = {features: ['session-replay']}}: InitializeOrgProps) {
  19. const mockProject = TestStubs.Project();
  20. const {router, organization, routerContext} = initializeOrg({
  21. organization: {
  22. ...organizationProps,
  23. },
  24. project: mockProject,
  25. projects: [mockProject],
  26. router: {
  27. routes: [
  28. {path: '/'},
  29. {path: '/organizations/:orgId/issues/:groupId/'},
  30. {path: 'replays/'},
  31. ],
  32. location: {
  33. pathname: '/organizations/org-slug/replays/',
  34. query: {},
  35. },
  36. },
  37. });
  38. ProjectsStore.init();
  39. ProjectsStore.loadInitialData(organization.projects);
  40. return {router, organization, routerContext};
  41. }
  42. describe('GroupReplays', () => {
  43. beforeEach(() => {
  44. MockApiClient.clearMockResponses();
  45. });
  46. describe('Replay Feature Disabled', () => {
  47. const mockGroup = TestStubs.Group();
  48. const {router, organization, routerContext} = init({
  49. organizationProps: {features: []},
  50. });
  51. it("should show a message when the organization doesn't have access to the replay feature", () => {
  52. render(<GroupReplays group={mockGroup} />, {
  53. context: routerContext,
  54. organization,
  55. router,
  56. });
  57. expect(
  58. screen.getByText("You don't have access to this feature")
  59. ).toBeInTheDocument();
  60. });
  61. });
  62. describe('Replay Feature Enabled', () => {
  63. const {router, organization, routerContext} = init({});
  64. it('should query the replay-count endpoint with the fetched replayIds', async () => {
  65. const mockGroup = TestStubs.Group();
  66. const mockReplayCountApi = MockApiClient.addMockResponse({
  67. url: mockReplayCountUrl,
  68. body: {
  69. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  70. },
  71. });
  72. const mockReplayApi = MockApiClient.addMockResponse({
  73. url: mockReplayUrl,
  74. body: {
  75. data: [],
  76. },
  77. });
  78. render(<GroupReplays group={mockGroup} />, {
  79. context: routerContext,
  80. organization,
  81. router,
  82. });
  83. await waitFor(() => {
  84. expect(mockReplayCountApi).toHaveBeenCalledWith(
  85. mockReplayCountUrl,
  86. expect.objectContaining({
  87. query: {
  88. returnIds: true,
  89. query: `issue.id:[${mockGroup.id}]`,
  90. statsPeriod: '14d',
  91. project: '2',
  92. },
  93. })
  94. );
  95. // Expect api path to have the correct query params
  96. expect(mockReplayApi).toHaveBeenCalledWith(
  97. mockReplayUrl,
  98. expect.objectContaining({
  99. query: expect.objectContaining({
  100. environment: [],
  101. field: [
  102. 'activity',
  103. 'browser',
  104. 'count_errors',
  105. 'duration',
  106. 'finished_at',
  107. 'id',
  108. 'is_archived',
  109. 'os',
  110. 'project_id',
  111. 'started_at',
  112. 'urls',
  113. 'user',
  114. ],
  115. per_page: 50,
  116. project: ['2'],
  117. query: `id:[${REPLAY_ID_1},${REPLAY_ID_2}]`,
  118. sort: '-started_at',
  119. statsPeriod: '14d',
  120. }),
  121. })
  122. );
  123. });
  124. });
  125. it('should show empty message when no replays are found', async () => {
  126. const mockGroup = TestStubs.Group();
  127. const mockReplayCountApi = MockApiClient.addMockResponse({
  128. url: mockReplayCountUrl,
  129. body: {
  130. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  131. },
  132. });
  133. const mockReplayApi = MockApiClient.addMockResponse({
  134. url: mockReplayUrl,
  135. body: {
  136. data: [],
  137. },
  138. });
  139. const {container} = render(<GroupReplays group={mockGroup} />, {
  140. context: routerContext,
  141. organization,
  142. router,
  143. });
  144. expect(
  145. await screen.findByText('There are no items to display')
  146. ).toBeInTheDocument();
  147. expect(mockReplayCountApi).toHaveBeenCalledTimes(1);
  148. expect(mockReplayApi).toHaveBeenCalledTimes(1);
  149. expect(container).toSnapshot();
  150. });
  151. it('should display error message when api call fails', async () => {
  152. const mockGroup = TestStubs.Group();
  153. const mockReplayCountApi = MockApiClient.addMockResponse({
  154. url: mockReplayCountUrl,
  155. body: {
  156. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  157. },
  158. });
  159. const mockReplayApi = MockApiClient.addMockResponse({
  160. url: mockReplayUrl,
  161. statusCode: 500,
  162. body: {
  163. detail: 'Invalid number: asdf. Expected number.',
  164. },
  165. });
  166. render(<GroupReplays group={mockGroup} />, {
  167. context: routerContext,
  168. organization,
  169. router,
  170. });
  171. await waitFor(() => {
  172. expect(mockReplayCountApi).toHaveBeenCalledTimes(1);
  173. expect(mockReplayApi).toHaveBeenCalledTimes(1);
  174. expect(
  175. screen.getByText('Invalid number: asdf. Expected number.')
  176. ).toBeInTheDocument();
  177. });
  178. });
  179. it('should display default error message when api call fails without a body', async () => {
  180. const mockGroup = TestStubs.Group();
  181. const mockReplayCountApi = MockApiClient.addMockResponse({
  182. url: mockReplayCountUrl,
  183. body: {
  184. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  185. },
  186. });
  187. const mockReplayApi = MockApiClient.addMockResponse({
  188. url: mockReplayUrl,
  189. statusCode: 500,
  190. body: {},
  191. });
  192. render(<GroupReplays group={mockGroup} />, {
  193. context: routerContext,
  194. organization,
  195. router,
  196. });
  197. await waitFor(() => {
  198. expect(mockReplayCountApi).toHaveBeenCalledTimes(1);
  199. expect(mockReplayApi).toHaveBeenCalledTimes(1);
  200. expect(
  201. screen.getByText(
  202. 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.'
  203. )
  204. ).toBeInTheDocument();
  205. });
  206. });
  207. it('should show loading indicator when loading replays', async () => {
  208. const mockGroup = TestStubs.Group();
  209. const mockReplayCountApi = MockApiClient.addMockResponse({
  210. url: mockReplayCountUrl,
  211. body: {
  212. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  213. },
  214. });
  215. const mockReplayApi = MockApiClient.addMockResponse({
  216. url: mockReplayUrl,
  217. statusCode: 200,
  218. body: {
  219. data: [],
  220. },
  221. });
  222. render(<GroupReplays group={mockGroup} />, {
  223. context: routerContext,
  224. organization,
  225. router,
  226. });
  227. expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
  228. await waitFor(() => {
  229. expect(mockReplayCountApi).toHaveBeenCalledTimes(1);
  230. expect(mockReplayApi).toHaveBeenCalledTimes(1);
  231. });
  232. });
  233. it('should show a list of replays and have the correct values', async () => {
  234. const mockGroup = TestStubs.Group();
  235. const mockReplayCountApi = MockApiClient.addMockResponse({
  236. url: mockReplayCountUrl,
  237. body: {
  238. [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
  239. },
  240. });
  241. const mockReplayApi = MockApiClient.addMockResponse({
  242. url: mockReplayUrl,
  243. statusCode: 200,
  244. body: {
  245. data: [
  246. {
  247. ...TestStubs.ReplayList()[0],
  248. count_errors: 1,
  249. duration: 52346,
  250. finished_at: new Date('2022-09-15T06:54:00+00:00'),
  251. id: '346789a703f6454384f1de473b8b9fcc',
  252. started_at: new Date('2022-09-15T06:50:00+00:00'),
  253. urls: [
  254. 'https://dev.getsentry.net:7999/organizations/sentry-emerging-tech/replays/',
  255. '/organizations/sentry-emerging-tech/replays/?project=2',
  256. ],
  257. },
  258. {
  259. ...TestStubs.ReplayList()[0],
  260. count_errors: 4,
  261. duration: 400,
  262. finished_at: new Date('2022-09-21T21:40:38+00:00'),
  263. id: 'b05dae9b6be54d21a4d5ad9f8f02b780',
  264. started_at: new Date('2022-09-21T21:30:44+00:00'),
  265. urls: [
  266. 'https://dev.getsentry.net:7999/organizations/sentry-emerging-tech/replays/?project=2&statsPeriod=24h',
  267. '/organizations/sentry-emerging-tech/issues/',
  268. '/organizations/sentry-emerging-tech/issues/?project=2',
  269. ],
  270. },
  271. ].map(hydrated => ({
  272. ...hydrated,
  273. started_at: hydrated.started_at.toString(),
  274. finished_at: hydrated.finished_at.toString(),
  275. })),
  276. },
  277. });
  278. // Mock the system date to be 2022-09-28
  279. jest.useFakeTimers().setSystemTime(new Date('Sep 28, 2022 11:29:13 PM UTC'));
  280. render(<GroupReplays group={mockGroup} />, {
  281. context: routerContext,
  282. organization,
  283. router,
  284. });
  285. await waitFor(() => {
  286. expect(mockReplayCountApi).toHaveBeenCalledTimes(1);
  287. expect(mockReplayApi).toHaveBeenCalledTimes(1);
  288. });
  289. // Expect the table to have 2 rows
  290. expect(screen.getAllByText('testDisplayName')).toHaveLength(2);
  291. const expectedQuery =
  292. 'query=&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29';
  293. // Expect the first row to have the correct href
  294. expect(screen.getAllByRole('link', {name: 'testDisplayName'})[0]).toHaveAttribute(
  295. 'href',
  296. `/organizations/org-slug/replays/project-slug:${REPLAY_ID_1}/?${expectedQuery}`
  297. );
  298. // Expect the second row to have the correct href
  299. expect(screen.getAllByRole('link', {name: 'testDisplayName'})[1]).toHaveAttribute(
  300. 'href',
  301. `/organizations/org-slug/replays/project-slug:${REPLAY_ID_2}/?${expectedQuery}`
  302. );
  303. // Expect the first row to have the correct duration
  304. expect(screen.getByText('14:32:26')).toBeInTheDocument();
  305. // Expect the second row to have the correct duration
  306. expect(screen.getByText('06:40')).toBeInTheDocument();
  307. // Expect the first row to have the correct errors
  308. expect(screen.getAllByTestId('replay-table-count-errors')[0]).toHaveTextContent(
  309. '1'
  310. );
  311. // Expect the second row to have the correct errors
  312. expect(screen.getAllByTestId('replay-table-count-errors')[1]).toHaveTextContent(
  313. '4'
  314. );
  315. // Expect the first row to have the correct date
  316. expect(screen.getByText('14 days ago')).toBeInTheDocument();
  317. // Expect the second row to have the correct date
  318. expect(screen.getByText('7 days ago')).toBeInTheDocument();
  319. });
  320. });
  321. });