import {browserHistory} from 'react-router'; import {initializeOrg} from 'sentry-test/initializeOrg'; import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; import ReleaseComparisonChart from 'sentry/views/releases/detail/overview/releaseComparisonChart'; describe('Releases > Detail > Overview > ReleaseComparison', () => { const {routerContext, organization, project} = initializeOrg(); const api = new MockApiClient(); const release = TestStubs.Release(); const releaseSessions = TestStubs.SessionUserCountByStatus(); const allSessions = TestStubs.SessionUserCountByStatus2(); it('displays correct all/release/change data', () => { render( , {context: routerContext} ); expect(screen.getByLabelText('Chart Title')).toHaveTextContent( 'Crash Free Session Rate' ); expect(screen.getByLabelText('Chart Value')).toHaveTextContent(/95\.006% 4\.51%/); expect(screen.getAllByRole('radio').length).toBe(2); // lazy way to make sure that all percentages are calculated correctly expect( screen.getByTestId('release-comparison-table').textContent ).toMatchInlineSnapshot( `"DescriptionAll ReleasesThis ReleaseChangeCrash Free Session Rate 99.516%95.006%4.51% Crash Free User Rate 99.908%75%24.908% Show 2 Others"` // eslint-disable-line no-irregular-whitespace ); }); it('can change chart by clicking on a row', async () => { const {rerender} = render( , {context: routerContext} ); await userEvent.click(screen.getByLabelText(/crash free user rate/i)); expect(browserHistory.push).toHaveBeenCalledWith({query: {chart: 'crashFreeUsers'}}); rerender( ); expect(screen.getByLabelText('Chart Title')).toHaveTextContent( 'Crash Free User Rate' ); expect(screen.getByLabelText('Chart Value')).toHaveTextContent(/75% 24\.908%/); }); it('can expand row to show more charts', async () => { render( , {context: routerContext} ); for (const toggle of screen.getAllByLabelText(/toggle chart/i)) { await userEvent.click(toggle); } await userEvent.click(screen.getByLabelText(/toggle additional/i)); expect(screen.getAllByRole('radio').length).toBe(12); // lazy way to make sure that all percentages are calculated correctly expect( screen.getByTestId('release-comparison-table').textContent ).toMatchInlineSnapshot( `"DescriptionAll ReleasesThis ReleaseChangeCrash Free Session Rate 99.516%95.006%4.51% Healthy 98.564%94.001%4.563% Abnormal 0%0%0% Errored 0.953%1.005%0.052% Crashed Session Rate 0.484%4.994%4.511% Crash Free User Rate 99.908%75%24.908% Healthy 98.994%72.022%26.972% Abnormal 0%0%0% Errored 0.914%2.493%1.579% Crashed User Rate 0.092%25.485%25.393% Session Count 205k9.8k—User Count 100k361—Hide 2 Others"` // eslint-disable-line no-irregular-whitespace ); // toggle back for (const toggle of screen.getAllByLabelText(/toggle chart/i)) { await userEvent.click(toggle); } await userEvent.click(screen.getByLabelText(/toggle additional/i)); expect(screen.getAllByRole('radio').length).toBe(2); }); it('does not show expanders if there is no health data', async () => { MockApiClient.addMockResponse({ url: `/organizations/${organization.slug}/events-stats/`, body: [], }); MockApiClient.addMockResponse({ url: `/organizations/${organization.slug}/events/`, body: [], }); MockApiClient.addMockResponse({ url: `/organizations/${organization.slug}/issues-count/`, body: 0, }); render( , {context: routerContext} ); expect(screen.getAllByRole('radio').length).toBe(1); expect(screen.queryByLabelText(/toggle chart/i)).not.toBeInTheDocument(); expect(screen.queryByLabelText(/toggle additional/i)).not.toBeInTheDocument(); // Wait for api requests to propegate await act(tick); }); });