import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; import {trackAnalyticsEvent} from 'sentry/utils/analytics'; import IssueListHeader from 'sentry/views/issueList/header'; import {Query} from 'sentry/views/issueList/utils'; jest.mock('sentry/utils/analytics', () => ({ trackAnalyticsEvent: jest.fn(), })); const queryCounts = { 'is:unresolved is:for_review assigned_or_suggested:[me, none]': { count: 22, hasMore: false, }, 'is:unresolved': { count: 1, hasMore: false, }, 'is:ignored': { count: 0, hasMore: false, }, 'is:reprocessing': { count: 0, hasMore: false, }, }; const queryCountsMaxed = { 'is:unresolved is:for_review assigned_or_suggested:[me, none]': { count: 321, hasMore: false, }, 'is:unresolved': { count: 100, hasMore: true, }, 'is:ignored': { count: 100, hasMore: true, }, }; describe('IssueListHeader', () => { let organization; beforeEach(() => { organization = TestStubs.Organization(); }); afterEach(() => { jest.resetAllMocks(); }); it('renders active tab with count when query matches inbox', () => { render( ); expect(screen.getByText('For Review')).toHaveTextContent('For Review 22'); }); it('renders reprocessing tab', () => { organization.features = ['reprocessing-v2']; render( ); expect(screen.getByText('Reprocessing')).toHaveTextContent('Reprocessing 1'); }); it("renders all tabs inactive when query doesn't match", () => { render( ); expect(screen.getByText('Custom Search')).toBeInTheDocument(); }); it('renders all tabs with counts', () => { render( ); const tabs = screen.getAllByRole('listitem'); expect(tabs[0]).toHaveTextContent('All Unresolved 1'); expect(tabs[1]).toHaveTextContent('For Review 22'); expect(tabs[2]).toHaveTextContent('Ignored'); }); it('renders limited counts for tabs and exact for selected', () => { render( ); const tabs = screen.getAllByRole('listitem'); expect(tabs[0]).toHaveTextContent('All Unresolved 99+'); expect(tabs[1]).toHaveTextContent('For Review 321'); expect(tabs[2]).toHaveTextContent('Ignored 99+'); }); it('transitions to new query on tab click', () => { const routerContext = TestStubs.routerContext(); render( , {context: routerContext} ); const pathname = '/organizations/org-slug/issues/'; userEvent.click(screen.getByText('All Unresolved')); expect(routerContext.context.router.push).toHaveBeenCalledWith({ pathname, query: {query: 'is:unresolved'}, }); userEvent.click(screen.getByText('For Review')); expect(routerContext.context.router.push).toHaveBeenCalledWith({ pathname, query: { query: 'is:unresolved is:for_review assigned_or_suggested:[me, none]', sort: 'inbox', }, }); }); it('removes inbox sort for non-inbox tabs', () => { const routerContext = TestStubs.routerContext(); render( , {context: routerContext} ); const pathname = '/organizations/org-slug/issues/'; userEvent.click(screen.getByText('All Unresolved')); expect(routerContext.context.router.push).toHaveBeenCalledWith({ pathname, query: {query: 'is:unresolved'}, }); userEvent.click(screen.getByText('For Review')); expect(routerContext.context.router.push).toHaveBeenCalledWith({ pathname, query: { query: 'is:unresolved is:for_review assigned_or_suggested:[me, none]', sort: 'inbox', }, }); }); it('changes sort for inbox tab', () => { const routerContext = TestStubs.routerContext(); render( , {context: routerContext} ); userEvent.click(screen.getByText('For Review')); expect(routerContext.context.router.push).toHaveBeenCalledWith({ pathname: '/organizations/org-slug/issues/', query: { query: 'is:unresolved is:for_review assigned_or_suggested:[me, none]', sort: 'inbox', }, }); }); it('tracks clicks on inbox tab', () => { render( , {context: TestStubs.routerContext()} ); userEvent.click(screen.getByText('For Review')); expect(trackAnalyticsEvent).toHaveBeenCalledTimes(1); }); it('ignores clicks on inbox tab when already on inbox tab', () => { render( , {context: TestStubs.routerContext()} ); userEvent.click(screen.getByText('For Review')); expect(trackAnalyticsEvent).toHaveBeenCalledTimes(0); }); it('should indicate when query is a custom search and display count', () => { render( ); expect(screen.getByRole('button', {name: 'Custom Search 13'})).toBeInTheDocument(); }); it('should display saved search name and count', () => { const query = 'saved search query'; render( ); expect(screen.getByRole('button', {name: 'Saved Search 13'})).toBeInTheDocument(); }); it('lists saved searches in dropdown', () => { render( ); expect(screen.queryByText('Unresolved TypeError')).not.toBeInTheDocument(); userEvent.click(screen.getByText('Saved Searches')); expect(screen.getByText('Unresolved TypeError')).toBeInTheDocument(); }); });