123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483 |
- import {initializeOrg} from 'sentry-test/initializeOrg';
- import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
- import ProjectsStore from 'sentry/stores/projectsStore';
- import {OrganizationContext} from 'sentry/views/organizationContext';
- import GroupReplays from 'sentry/views/organizationGroupDetails/groupReplays';
- import {RouteContext} from 'sentry/views/routeContext';
- type InitializeOrgProps = {
- location?: {
- pathname?: string;
- query?: {[key: string]: string};
- };
- organizationProps?: {
- features?: string[];
- };
- };
- const mockUrl = '/organizations/org-slug/replays/';
- const mockProps = {
- group: TestStubs.Group(),
- replayIds: ['346789a703f6454384f1de473b8b9fcc', 'b05dae9b6be54d21a4d5ad9f8f02b780'],
- };
- let mockRouterContext: {
- childContextTypes?: any;
- context?: any;
- } = {};
- const getComponent = ({
- location,
- organizationProps = {features: ['session-replay-ui']},
- }: InitializeOrgProps) => {
- const {router, organization, routerContext} = initializeOrg({
- organization: {
- ...organizationProps,
- },
- project: TestStubs.Project(),
- projects: [TestStubs.Project()],
- router: {
- routes: [
- {path: '/'},
- {path: '/organizations/:orgId/issues/:groupId/'},
- {path: 'replays/'},
- ],
- location: {
- pathname: '/organizations/org-slug/replays/',
- query: {},
- ...location,
- },
- },
- });
- ProjectsStore.init();
- ProjectsStore.loadInitialData(organization.projects);
- mockRouterContext = routerContext;
- return (
- <OrganizationContext.Provider value={organization}>
- <RouteContext.Provider
- value={{
- router,
- location: router.location,
- params: router.params,
- routes: router.routes,
- }}
- >
- <GroupReplays {...mockProps} />
- </RouteContext.Provider>
- </OrganizationContext.Provider>
- );
- };
- const renderComponent = (componentProps: InitializeOrgProps = {}) => {
- return render(getComponent(componentProps), {context: mockRouterContext});
- };
- describe('GroupReplays', () => {
- beforeEach(() => {
- MockApiClient.clearMockResponses();
- });
- it('should query the events endpoint with the passed in replayIds', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- // Expect api path to have the correct query params
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- statsPeriod: '14d',
- project: ['2'],
- environment: [],
- field: [
- 'countErrors',
- 'duration',
- 'finishedAt',
- 'id',
- 'projectId',
- 'startedAt',
- 'urls',
- 'user',
- ],
- sort: '-startedAt',
- per_page: 50,
- query:
- 'id:[346789a703f6454384f1de473b8b9fcc,b05dae9b6be54d21a4d5ad9f8f02b780]',
- }),
- })
- );
- });
- });
- it('should snapshot empty state', async () => {
- MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- const {container} = renderComponent();
- await waitFor(() => {
- expect(container).toSnapshot();
- });
- });
- it('should show empty message when no replays are found', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- expect(screen.getByText('There are no items to display')).toBeInTheDocument();
- });
- });
- it('should display error message when api call fails', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- statusCode: 500,
- body: {
- detail: 'Invalid number: asdf. Expected number.',
- },
- });
- renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- expect(
- screen.getByText('Invalid number: asdf. Expected number.')
- ).toBeInTheDocument();
- });
- });
- it('should display default error message when api call fails without a body', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- statusCode: 500,
- body: {},
- });
- renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- expect(
- screen.getByText(
- 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.'
- )
- ).toBeInTheDocument();
- });
- });
- it('should show loading indicator when loading replays', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- statusCode: 200,
- body: {
- data: [],
- },
- });
- renderComponent();
- expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- });
- });
- it('should show a list of replays and have the correct values', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- statusCode: 200,
- body: {
- data: [
- {
- countErrors: 1,
- duration: 52346,
- finishedAt: '2022-09-15T06:54:00+00:00',
- id: '346789a703f6454384f1de473b8b9fcc',
- projectId: '2',
- startedAt: '2022-09-15T06:50:03+00:00',
- urls: [
- 'https://dev.getsentry.net:7999/organizations/sentry-emerging-tech/replays/',
- '/organizations/sentry-emerging-tech/replays/?project=2',
- ],
- user: {
- id: '147086',
- name: '',
- email: '',
- ip_address: '127.0.0.1',
- displayName: 'testDisplayName',
- },
- },
- {
- countErrors: 4,
- duration: 400,
- finishedAt: '2022-09-21T21:40:38+00:00',
- id: 'b05dae9b6be54d21a4d5ad9f8f02b780',
- projectId: '2',
- startedAt: '2022-09-21T21:30:44+00:00',
- urls: [
- 'https://dev.getsentry.net:7999/organizations/sentry-emerging-tech/replays/?project=2&statsPeriod=24h',
- '/organizations/sentry-emerging-tech/issues/',
- '/organizations/sentry-emerging-tech/issues/?project=2',
- ],
- user: {
- id: '147086',
- name: '',
- email: '',
- ip_address: '127.0.0.1',
- displayName: 'testDisplayName',
- },
- },
- ],
- },
- });
- // Mock the system date to be 2022-09-28
- jest.useFakeTimers().setSystemTime(new Date('Sep 28, 2022 11:29:13 PM UTC'));
- renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(1);
- });
- // Expect the table to have 2 rows
- expect(screen.getAllByText('testDisplayName')).toHaveLength(2);
- // Expect the first row to have the correct href
- expect(screen.getAllByRole('link', {name: 'testDisplayName'})[0]).toHaveAttribute(
- 'href',
- '/organizations/org-slug/replays/project-slug:346789a703f6454384f1de473b8b9fcc/?referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F'
- );
- // Expect the second row to have the correct href
- expect(screen.getAllByRole('link', {name: 'testDisplayName'})[1]).toHaveAttribute(
- 'href',
- '/organizations/org-slug/replays/project-slug:b05dae9b6be54d21a4d5ad9f8f02b780/?referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F'
- );
- // Expect the first row to have the correct duration
- expect(screen.getByText('14hr 32min 26s')).toBeInTheDocument();
- // Expect the second row to have the correct duration
- expect(screen.getByText('6min 40s')).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 be able to click the `Start Time` column and request data sorted by startedAt query', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- const {rerender} = renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: '-startedAt',
- }),
- })
- );
- });
- // Click on the start time header and expect the sort to be startedAt
- userEvent.click(screen.getByRole('columnheader', {name: 'Start Time'}));
- expect(mockRouterContext.context.router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/replays/',
- query: {
- sort: 'startedAt',
- },
- });
- // Need to simulate a rerender to get the new sort
- rerender(
- getComponent({
- location: {
- query: {
- sort: 'startedAt',
- },
- },
- })
- );
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(2);
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: 'startedAt',
- }),
- })
- );
- });
- });
- it('should be able to click the `Duration` column and request data sorted by duration query', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- const {rerender} = renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: '-startedAt',
- }),
- })
- );
- });
- // Click on the duration header and expect the sort to be duration
- userEvent.click(screen.getByRole('columnheader', {name: 'Duration'}));
- expect(mockRouterContext.context.router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/replays/',
- query: {
- sort: 'duration',
- },
- });
- // Need to simulate a rerender to get the new sort
- rerender(
- getComponent({
- location: {
- query: {
- sort: 'duration',
- },
- },
- })
- );
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(2);
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: 'duration',
- }),
- })
- );
- });
- });
- it('should be able to click the `Errors` column and request data sorted by countErrors query', async () => {
- const mockApi = MockApiClient.addMockResponse({
- url: mockUrl,
- body: {
- data: [],
- },
- statusCode: 200,
- });
- const {rerender} = renderComponent();
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: '-startedAt',
- }),
- })
- );
- });
- // Click on the errors header and expect the sort to be countErrors
- userEvent.click(screen.getByRole('columnheader', {name: 'Errors'}));
- expect(mockRouterContext.context.router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/replays/',
- query: {
- sort: 'countErrors',
- },
- });
- // Need to simulate a rerender to get the new sort
- rerender(
- getComponent({
- location: {
- query: {
- sort: 'countErrors',
- },
- },
- })
- );
- await waitFor(() => {
- expect(mockApi).toHaveBeenCalledTimes(2);
- expect(mockApi).toHaveBeenCalledWith(
- mockUrl,
- expect.objectContaining({
- query: expect.objectContaining({
- sort: 'countErrors',
- }),
- })
- );
- });
- });
- it("should show a message when the organization doesn't have access to the replay feature", () => {
- renderComponent({
- organizationProps: {
- features: [],
- },
- });
- expect(screen.getByText("You don't have access to this feature")).toBeInTheDocument();
- });
- });
|