123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603 |
- import {GroupFixture} from 'sentry-fixture/group';
- import {ProjectFixture} from 'sentry-fixture/project';
- import {initializeOrg} from 'sentry-test/initializeOrg';
- import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
- import ProjectsStore from 'sentry/stores/projectsStore';
- import GroupReplays from 'sentry/views/issueDetails/groupReplays';
- jest.mock('sentry/utils/useMedia', () => ({
- __esModule: true,
- default: jest.fn(() => true),
- }));
- const mockReplayCountUrl = '/organizations/org-slug/replay-count/';
- const mockReplayUrl = '/organizations/org-slug/replays/';
- type InitializeOrgProps = {
- organizationProps?: {
- features?: string[];
- };
- };
- import {duration} from 'moment-timezone';
- import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
- import {ReplayListFixture} from 'sentry-fixture/replayList';
- import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
- import {resetMockDate, setMockDate} from 'sentry-test/utils';
- import {browserHistory} from 'sentry/utils/browserHistory';
- import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
- import ReplayReader from 'sentry/utils/replays/replayReader';
- const REPLAY_ID_1 = '346789a703f6454384f1de473b8b9fcc';
- const REPLAY_ID_2 = 'b05dae9b6be54d21a4d5ad9f8f02b780';
- jest.mock('sentry/utils/replays/hooks/useReplayReader');
- const mockUseReplayReader = jest.mocked(useReplayReader);
- const mockEventTimestamp = new Date('2022-09-22T16:59:41Z');
- const mockEventTimestampMs = mockEventTimestamp.getTime();
- // Get replay data with the mocked replay reader params
- const mockReplay = ReplayReader.factory({
- replayRecord: ReplayRecordFixture({
- id: REPLAY_ID_1,
- browser: {
- name: 'Chrome',
- version: '110.0.0',
- },
- started_at: new Date('Sep 22, 2022 4:58:39 PM UTC'),
- finished_at: new Date(mockEventTimestampMs + 5_000),
- duration: duration(10, 'seconds'),
- }),
- errors: [],
- fetching: false,
- attachments: RRWebInitFrameEventsFixture({
- timestamp: new Date('Sep 22, 2022 4:58:39 PM UTC'),
- }),
- clipWindow: {
- startTimestampMs: mockEventTimestampMs - 5_000,
- endTimestampMs: mockEventTimestampMs + 5_000,
- },
- });
- mockUseReplayReader.mockImplementation(() => {
- return {
- attachments: [],
- errors: [],
- fetchError: undefined,
- fetching: false,
- onRetry: jest.fn(),
- projectSlug: ProjectFixture().slug,
- replay: mockReplay,
- replayId: REPLAY_ID_1,
- replayRecord: ReplayRecordFixture({id: REPLAY_ID_1}),
- };
- });
- function init({organizationProps = {features: ['session-replay']}}: InitializeOrgProps) {
- const mockProject = ProjectFixture();
- const {router, projects, organization} = initializeOrg({
- organization: {
- ...organizationProps,
- },
- projects: [mockProject],
- router: {
- routes: [
- {path: '/'},
- {path: '/organizations/:orgId/issues/:groupId/'},
- {path: 'replays/'},
- ],
- location: {
- pathname: '/organizations/org-slug/replays/',
- query: {},
- },
- },
- });
- ProjectsStore.init();
- ProjectsStore.loadInitialData(projects);
- return {router, organization};
- }
- describe('GroupReplays', () => {
- beforeEach(() => {
- MockApiClient.clearMockResponses();
- MockApiClient.addMockResponse({
- method: 'GET',
- url: `/organizations/org-slug/sdk-updates/`,
- body: [],
- });
- });
- afterEach(() => {
- resetMockDate();
- });
- describe('Replay Feature Disabled', () => {
- const mockGroup = GroupFixture();
- it("should show a message when the organization doesn't have access to the replay feature", () => {
- const {router, organization} = init({organizationProps: {features: []}});
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(
- screen.getByText("You don't have access to this feature")
- ).toBeInTheDocument();
- });
- });
- describe('Replay Feature Enabled', () => {
- it('should query the replay-count endpoint with the fetched replayIds', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- body: {
- data: [],
- },
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalledWith(
- mockReplayCountUrl,
- expect.objectContaining({
- query: {
- returnIds: true,
- data_source: 'discover',
- query: `issue.id:[${mockGroup.id}]`,
- statsPeriod: '90d',
- project: -1,
- },
- })
- );
- // Expect api path to have the correct query params
- expect(mockReplayApi).toHaveBeenCalledWith(
- mockReplayUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- environment: [],
- field: [
- 'activity',
- 'browser',
- 'count_dead_clicks',
- 'count_errors',
- 'count_rage_clicks',
- 'duration',
- 'finished_at',
- 'has_viewed',
- 'id',
- 'is_archived',
- 'os',
- 'project_id',
- 'started_at',
- 'user',
- ],
- per_page: 50,
- project: -1,
- queryReferrer: 'issueReplays',
- query: `id:[${REPLAY_ID_1},${REPLAY_ID_2}]`,
- sort: '-started_at',
- statsPeriod: '90d',
- }),
- })
- );
- });
- });
- it('should show empty message when no replays are found', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- body: {
- data: [],
- },
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(
- await screen.findByText('There are no items to display')
- ).toBeInTheDocument();
- expect(mockReplayCountApi).toHaveBeenCalled();
- expect(mockReplayApi).toHaveBeenCalledTimes(1);
- });
- it('should display error message when api call fails', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 500,
- body: {
- detail: 'Invalid number: asdf. Expected number.',
- },
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(
- await screen.findByText(
- 'Sorry, the list of replays could not be loaded. Invalid number: asdf. Expected number.'
- )
- ).toBeInTheDocument();
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalled();
- expect(mockReplayApi).toHaveBeenCalledTimes(1);
- });
- });
- it('should display default error message when api call fails without a body', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 500,
- body: {},
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(
- await screen.findByText(
- 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.'
- )
- ).toBeInTheDocument();
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalled();
- expect(mockReplayApi).toHaveBeenCalledTimes(1);
- });
- });
- it('should show loading indicator when loading replays', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 200,
- body: {
- data: [],
- },
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalled();
- expect(mockReplayApi).toHaveBeenCalledTimes(1);
- });
- });
- it('should show a list of replays and have the correct values', async () => {
- const {router, organization} = init({});
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- const mockReplayApi = MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 200,
- body: {
- data: [
- {
- ...ReplayListFixture()[0],
- count_errors: 1,
- duration: 52346,
- finished_at: new Date('2022-09-15T06:54:00+00:00'),
- id: REPLAY_ID_1,
- started_at: new Date('2022-09-15T06:50:00+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/replays/',
- '/organizations/org-slug/replays/?project=2',
- ],
- },
- {
- ...ReplayListFixture()[0],
- count_errors: 4,
- duration: 400,
- finished_at: new Date('2022-09-21T21:40:38+00:00'),
- id: REPLAY_ID_2,
- started_at: new Date('2022-09-21T21:30:44+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
- '/organizations/org-slug/issues/',
- '/organizations/org-slug/issues/?project=2',
- ],
- },
- ].map(hydrated => ({
- ...hydrated,
- started_at: hydrated.started_at.toString(),
- finished_at: hydrated.finished_at.toString(),
- })),
- },
- });
- // Mock the system date to be 2022-09-28
- setMockDate(new Date('Sep 28, 2022 11:29:13 PM UTC'));
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalled();
- expect(mockReplayApi).toHaveBeenCalledTimes(1);
- });
- // Expect the table to have 2 rows
- expect(await screen.findAllByText('testDisplayName')).toHaveLength(2);
- const expectedQuery =
- 'query=&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29';
- // Expect the first row to have the correct href
- expect(screen.getAllByRole('link', {name: 'testDisplayName'})[0]).toHaveAttribute(
- 'href',
- `/organizations/org-slug/replays/${REPLAY_ID_1}/?${expectedQuery}`
- );
- // Expect the second row to have the correct href
- expect(screen.getAllByRole('link', {name: 'testDisplayName'})[1]).toHaveAttribute(
- 'href',
- `/organizations/org-slug/replays/${REPLAY_ID_2}/?${expectedQuery}`
- );
- // Expect the first row to have the correct duration
- expect(screen.getByText('14:32:26')).toBeInTheDocument();
- // Expect the second row to have the correct duration
- expect(screen.getByText('06:40')).toBeInTheDocument();
- // Expect the first row to have the correct errors
- expect(screen.getAllByTestId('replay-table-count-errors')[0]).toHaveTextContent(
- '1'
- );
- // Expect the second row to have the correct errors
- expect(screen.getAllByTestId('replay-table-count-errors')[1]).toHaveTextContent(
- '4'
- );
- // Expect the first row to have the correct date
- expect(screen.getByText('14 days ago')).toBeInTheDocument();
- // Expect the second row to have the correct date
- expect(screen.getByText('7 days ago')).toBeInTheDocument();
- });
- it('Should render the replay player when replay-play-from-replay-tab is enabled', async () => {
- const {router, organization} = init({
- organizationProps: {features: ['replay-play-from-replay-tab', 'session-replay']},
- });
- const mockGroup = GroupFixture();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 200,
- body: {
- data: [
- {
- ...ReplayListFixture()[0],
- count_errors: 1,
- duration: 52346,
- finished_at: new Date('2022-09-15T06:54:00+00:00'),
- id: REPLAY_ID_1,
- started_at: new Date('2022-09-15T06:50:00+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/replays/',
- '/organizations/org-slug/replays/?project=2',
- ],
- },
- {
- ...ReplayListFixture()[0],
- count_errors: 4,
- duration: 400,
- finished_at: new Date('2022-09-21T21:40:38+00:00'),
- id: REPLAY_ID_2,
- started_at: new Date('2022-09-21T21:30:44+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
- '/organizations/org-slug/issues/',
- '/organizations/org-slug/issues/?project=2',
- ],
- },
- ].map(hydrated => ({
- ...hydrated,
- started_at: hydrated.started_at.toString(),
- finished_at: hydrated.finished_at.toString(),
- })),
- },
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- expect(await screen.findByText('See Full Replay')).toBeInTheDocument();
- expect(mockReplayCountApi).toHaveBeenCalledWith(
- mockReplayCountUrl,
- expect.objectContaining({
- query: {
- returnIds: true,
- data_source: 'discover',
- query: `issue.id:[${mockGroup.id}]`,
- statsPeriod: '90d',
- project: -1,
- },
- })
- );
- });
- it('Should switch replays when clicking and replay-play-from-replay-tab is enabled', async () => {
- const {router, organization} = init({
- organizationProps: {features: ['session-replay']},
- });
- const mockGroup = GroupFixture();
- const mockReplayRecord = mockReplay?.getReplay();
- const mockReplayCountApi = MockApiClient.addMockResponse({
- url: mockReplayCountUrl,
- body: {
- [mockGroup.id]: [REPLAY_ID_1, REPLAY_ID_2],
- },
- });
- MockApiClient.addMockResponse({
- url: mockReplayUrl,
- statusCode: 200,
- body: {
- data: [
- {
- ...ReplayListFixture()[0],
- count_errors: 1,
- duration: 52346,
- finished_at: new Date('2022-09-15T06:54:00+00:00'),
- id: REPLAY_ID_1,
- started_at: new Date('2022-09-15T06:50:00+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/replays/',
- '/organizations/org-slug/replays/?project=2',
- ],
- },
- {
- ...ReplayListFixture()[0],
- count_errors: 4,
- duration: 400,
- finished_at: new Date('2022-09-21T21:40:38+00:00'),
- id: REPLAY_ID_2,
- started_at: new Date('2022-09-21T21:30:44+00:00'),
- urls: [
- 'https://dev.getsentry.net:7999/organizations/org-slug/replays/?project=2&statsPeriod=24h',
- '/organizations/org-slug/issues/',
- '/organizations/org-slug/issues/?project=2',
- ],
- },
- ].map(hydrated => ({
- ...hydrated,
- started_at: hydrated.started_at.toString(),
- finished_at: hydrated.finished_at.toString(),
- })),
- },
- });
- MockApiClient.addMockResponse({
- method: 'POST',
- url: `/projects/${organization.slug}/${mockReplayRecord?.project_id}/replays/${mockReplayRecord?.id}/viewed-by/`,
- });
- render(<GroupReplays group={mockGroup} />, {
- router,
- organization,
- });
- await waitFor(() => {
- expect(mockReplayCountApi).toHaveBeenCalledWith(
- mockReplayCountUrl,
- expect.objectContaining({
- query: {
- returnIds: true,
- data_source: 'discover',
- query: `issue.id:[${mockGroup.id}]`,
- statsPeriod: '90d',
- project: -1,
- },
- })
- );
- });
- const mockReplace = jest.mocked(browserHistory.replace);
- const replayPlayPlause = (
- await screen.findAllByTestId('replay-table-play-button')
- )[0];
- await userEvent.click(replayPlayPlause);
- await waitFor(() =>
- expect(mockReplace).toHaveBeenCalledWith(
- expect.objectContaining({
- pathname: '/organizations/org-slug/replays/',
- query: {
- selected_replay_index: 1,
- },
- })
- )
- );
- });
- });
- });
|