import {browserHistory} from 'react-router'; import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary'; import ConfigStore from 'sentry/stores/configStore'; import {MockConfig} from 'sentry/types/__fixtures__/MockConfig'; import * as useMedia from 'sentry/utils/useMedia'; import {GroupEventCarousel} from 'sentry/views/issueDetails/groupEventCarousel'; describe('GroupEventCarousel', () => { const testEvent = TestStubs.Event({ id: 'event-id', size: 7, dateCreated: '2019-03-20T00:00:00.000Z', errors: [], entries: [], tags: [{key: 'environment', value: 'dev'}], previousEventID: 'prev-event-id', nextEventID: 'next-event-id', }); const singleTestEvent = {...testEvent, previousEventID: null, nextEventID: null}; const defaultProps = { event: testEvent, group: TestStubs.Group({id: 'group-id'}), projectSlug: 'project-slug', }; const singleEventProps = {...defaultProps, event: singleTestEvent}; beforeEach(() => { jest.restoreAllMocks(); Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(''), }, }); window.open = jest.fn(); }); describe('recommended event ui', () => { const orgWithRecommendedEvent = TestStubs.Organization({ features: [ 'issue-details-most-helpful-event', 'issue-details-most-helpful-event-ui', ], }); const recommendedUser = TestStubs.User({ options: { defaultIssueEvent: 'recommended', }, }); const latestUser = TestStubs.User({ options: { defaultIssueEvent: 'latest', }, }); const oldestUser = TestStubs.User({ options: { defaultIssueEvent: 'oldest', }, }); it('can navigate to the oldest event', async () => { jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); await userEvent.click(screen.getByRole('button', {name: /recommended/i})); await userEvent.click(screen.getByRole('option', {name: /oldest/i})); expect(browserHistory.push).toHaveBeenCalledWith({ pathname: '/organizations/org-slug/issues/group-id/events/oldest/', query: {referrer: 'oldest-event'}, }); }); it('can navigate to the latest event', async () => { jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); await userEvent.click(screen.getByRole('button', {name: /recommended/i})); await userEvent.click(screen.getByRole('option', {name: /latest/i})); expect(browserHistory.push).toHaveBeenCalledWith({ pathname: '/organizations/org-slug/issues/group-id/events/latest/', query: {referrer: 'latest-event'}, }); }); it('can navigate to the recommended event', async () => { jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, router: { params: {eventId: 'latest'}, }, }); await userEvent.click(screen.getByRole('button', {name: /latest/i})); await userEvent.click(screen.getByRole('option', {name: /recommended/i})); expect(browserHistory.push).toHaveBeenCalledWith({ pathname: '/organizations/org-slug/issues/group-id/events/recommended/', query: {referrer: 'recommended-event'}, }); }); it('will disable the dropdown if there is only one event', async () => { jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); expect(await screen.getByRole('button', {name: 'Recommended'})).toBeDisabled(); }); it('if user default is recommended, it will show it as default', async () => { ConfigStore.loadInitialData(MockConfig({user: recommendedUser})); jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); expect(await screen.getByText('Recommended')).toBeInTheDocument(); }); it('if user default is latest, it will show it as default', async () => { ConfigStore.loadInitialData(MockConfig({user: latestUser})); jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); expect(await screen.getByText('Latest')).toBeInTheDocument(); }); it('if user default is oldest, it will show it as default', async () => { ConfigStore.loadInitialData(MockConfig({user: oldestUser})); jest.spyOn(useMedia, 'default').mockReturnValue(true); render(, { organization: orgWithRecommendedEvent, }); expect(await screen.getByText('Oldest')).toBeInTheDocument(); }); }); it('can navigate next/previous events', () => { render(); expect(screen.getByLabelText(/Previous Event/)).toHaveAttribute( 'href', `/organizations/org-slug/issues/group-id/events/prev-event-id/?referrer=previous-event` ); expect(screen.getByLabelText(/Next Event/)).toHaveAttribute( 'href', `/organizations/org-slug/issues/group-id/events/next-event-id/?referrer=next-event` ); }); it('can copy event ID', async () => { render(); await userEvent.click(screen.getByText(testEvent.id)); expect(navigator.clipboard.writeText).toHaveBeenCalledWith(testEvent.id); }); it('can copy event link', async () => { render(); await userEvent.click(screen.getByRole('button', {name: /event actions/i})); await userEvent.click(screen.getByRole('menuitemradio', {name: /copy event link/i})); expect(navigator.clipboard.writeText).toHaveBeenCalledWith( `http://localhost/organizations/org-slug/issues/group-id/events/event-id/` ); }); it('links to full event details when org has discover', async () => { render(, { organization: TestStubs.Organization({features: ['discover-basic']}), }); await userEvent.click(screen.getByRole('button', {name: /event actions/i})); expect( within(screen.getByRole('menuitemradio', {name: /full event details/i})).getByRole( 'link' ) ).toHaveAttribute('href', `/organizations/org-slug/discover/project-slug:event-id/`); }); it('can open event JSON', async () => { render(); await userEvent.click(screen.getByRole('button', {name: /event actions/i})); await userEvent.click(screen.getByRole('menuitemradio', {name: 'JSON (7 B)'})); expect(window.open).toHaveBeenCalledWith( `/api/0/projects/org-slug/project-slug/events/event-id/json/` ); }); });