diff --git a/static/app/views/releases/detail/overview/index.tsx b/static/app/views/releases/detail/overview/index.tsx
index aa4ad0e0fd3425..6c1d041dfa6bfd 100644
--- a/static/app/views/releases/detail/overview/index.tsx
+++ b/static/app/views/releases/detail/overview/index.tsx
@@ -368,12 +368,10 @@ function ReleaseOverview() {
releaseSessions={thisRelease}
allSessions={allReleases}
platform={project.platform}
- location={location}
loading={loading}
reloading={reloading}
errored={errored}
project={project}
- organization={organization}
api={api}
hasHealthData={hasHealthData}
/>
diff --git a/static/app/views/releases/detail/overview/releaseComparisonChart/index.spec.tsx b/static/app/views/releases/detail/overview/releaseComparisonChart/index.spec.tsx
index b276f6249a19b1..4849003e17caec 100644
--- a/static/app/views/releases/detail/overview/releaseComparisonChart/index.spec.tsx
+++ b/static/app/views/releases/detail/overview/releaseComparisonChart/index.spec.tsx
@@ -1,19 +1,29 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
import {ReleaseFixture} from 'sentry-fixture/release';
import {
SessionUserCountByStatus2Fixture,
SessionUserCountByStatusFixture,
} from 'sentry-fixture/sessions';
-import {initializeOrg} from 'sentry-test/initializeOrg';
-import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import type {RouterConfig} from 'sentry-test/reactTestingLibrary';
import type {ReleaseProject} from 'sentry/types/release';
import ReleaseComparisonChart from 'sentry/views/releases/detail/overview/releaseComparisonChart';
describe('Releases > Detail > Overview > ReleaseComparison', () => {
- const {router, organization, project: rawProject} = initializeOrg();
- const api = new MockApiClient();
+ const organization = OrganizationFixture();
+ const rawProject = ProjectFixture();
const release = ReleaseFixture();
+ const initialRouterConfig: RouterConfig = {
+ location: {
+ pathname: `/organizations/${organization.slug}/releases/${release.version}/`,
+ query: {},
+ },
+ routes: ['/organizations/:orgId/releases/:release/'],
+ };
+ const api = new MockApiClient();
const releaseSessions = SessionUserCountByStatusFixture();
const allSessions = SessionUserCountByStatus2Fixture();
@@ -32,18 +42,16 @@ describe('Releases > Detail > Overview > ReleaseComparison', () => {
releaseSessions={releaseSessions}
allSessions={allSessions}
platform="javascript"
- location={{...router.location, query: {}}}
loading={false}
reloading={false}
errored={false}
project={project}
- organization={organization}
api={api}
hasHealthData
/>,
{
- router,
- deprecatedRouterMocks: true,
+ organization,
+ initialRouterConfig,
}
);
@@ -63,48 +71,29 @@ describe('Releases > Detail > Overview > ReleaseComparison', () => {
});
it('can change chart by clicking on a row', async () => {
- const {rerender} = render(
+ const {router} = render(
,
{
- router,
- deprecatedRouterMocks: true,
+ organization,
+ initialRouterConfig,
}
);
await userEvent.click(screen.getByLabelText(/crash free user rate/i));
- expect(router.push).toHaveBeenCalledWith(
- expect.objectContaining({query: {chart: 'crashFreeUsers'}})
- );
-
- rerender(
-
+ expect(router.location.query).toEqual(
+ expect.objectContaining({chart: 'crashFreeUsers'})
);
expect(screen.getByLabelText('Chart Title')).toHaveTextContent(
@@ -120,18 +109,16 @@ describe('Releases > Detail > Overview > ReleaseComparison', () => {
releaseSessions={releaseSessions}
allSessions={allSessions}
platform="javascript"
- location={{...router.location, query: {}}}
loading={false}
reloading={false}
errored={false}
project={project}
- organization={organization}
api={api}
hasHealthData
/>,
{
- router,
- deprecatedRouterMocks: true,
+ organization,
+ initialRouterConfig,
}
);
@@ -171,6 +158,9 @@ describe('Releases > Detail > Overview > ReleaseComparison', () => {
url: `/organizations/${organization.slug}/issues-count/`,
body: 0,
});
+ const noHealthDataOrganization = OrganizationFixture({
+ features: [...organization.features, 'discover-basic'],
+ });
render(
Detail > Overview > ReleaseComparison', () => {
releaseSessions={null}
allSessions={null}
platform="javascript"
- location={{...router.location, query: {}}}
loading={false}
reloading={false}
errored={false}
project={project}
- organization={{
- ...organization,
- features: [...organization.features, 'discover-basic'],
- }}
api={api}
hasHealthData={false}
/>,
{
- router,
- deprecatedRouterMocks: true,
+ organization: noHealthDataOrganization,
+ initialRouterConfig,
}
);
- expect(screen.getAllByRole('radio')).toHaveLength(1);
+ expect(await screen.findAllByRole('radio')).toHaveLength(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);
});
});
diff --git a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
index a51960208184de..0ce895d8425a8d 100644
--- a/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
+++ b/static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx
@@ -1,7 +1,6 @@
import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
import styled from '@emotion/styled';
import * as Sentry from '@sentry/react';
-import type {Location} from 'history';
import type {Client} from 'sentry/api';
import ErrorPanel from 'sentry/components/charts/errorPanel';
@@ -20,7 +19,6 @@ import {space} from 'sentry/styles/space';
import {
SessionFieldWithOperation,
SessionStatus,
- type Organization,
type SessionApiResponse,
} from 'sentry/types/organization';
import type {PlatformKey} from 'sentry/types/project';
@@ -38,7 +36,9 @@ import {decodeList, decodeScalar} from 'sentry/utils/queryString';
import {getCount, getCrashFreeRate, getSessionStatusRate} from 'sentry/utils/sessions';
import type {Color} from 'sentry/utils/theme';
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useLocation} from 'sentry/utils/useLocation';
import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
import {
displaySessionStatusPercent,
getReleaseBounds,
@@ -69,8 +69,6 @@ type Props = {
errored: boolean;
hasHealthData: boolean;
loading: boolean;
- location: Location;
- organization: Organization;
platform: PlatformKey;
project: ReleaseProject;
release: ReleaseWithHealth;
@@ -98,14 +96,14 @@ export default function ReleaseComparisonChart({
releaseSessions,
allSessions,
platform,
- location,
loading,
reloading,
errored,
api,
- organization,
hasHealthData,
}: Props) {
+ const organization = useOrganization();
+ const location = useLocation();
const navigate = useNavigate();
const [issuesTotals, setIssuesTotals] = useState(null);
const [eventsTotals, setEventsTotals] = useState(null);