test(ui): Use built-in test providers (#70795)

static/app/components/events/eventReplay/replayClipPreview.spec.tsx

@@ -1,5 +1,4 @@
 import {duration} from 'moment';
-import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
@@ -11,8 +10,6 @@ import type {DetailedOrganization} from 'sentry/types/organization';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import ReplayReader from 'sentry/utils/replays/replayReader';
 import type RequestError from 'sentry/utils/requestError/requestError';
-import {OrganizationContext} from 'sentry/views/organizationContext';
-import {RouteContext} from 'sentry/views/routeContext';
 
 import ReplayClipPreview from './replayClipPreview';
 
@@ -68,7 +65,8 @@ const render = (
   children: React.ReactElement,
   orgParams: Partial<DetailedOrganization> = {}
 ) => {
-  const {router, routerContext} = initializeOrg({
+  const {routerContext, organization} = initializeOrg({
+    organization: {slug: mockOrgSlug, ...orgParams},
     router: {
       routes: [
         {path: '/'},
@@ -82,23 +80,10 @@ const render = (
     },
   });
 
-  return baseRender(
-    <RouteContext.Provider
-      value={{
-        router,
-        location: router.location,
-        params: router.params,
-        routes: router.routes,
-      }}
-    >
-      <OrganizationContext.Provider
-        value={OrganizationFixture({slug: mockOrgSlug, ...orgParams})}
-      >
-        {children}
-      </OrganizationContext.Provider>
-    </RouteContext.Provider>,
-    {context: routerContext}
-  );
+  return baseRender(children, {
+    context: routerContext,
+    organization,
+  });
 };
 
 const mockIsFullscreen = jest.fn();

static/app/components/featureFeedback/feedbackModal.spec.tsx

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import * as Sentry from '@sentry/react';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
   act,
   renderGlobalModal,
@@ -14,24 +13,6 @@ import * as indicators from 'sentry/actionCreators/indicator';
 import {openModal} from 'sentry/actionCreators/modal';
 import {FeedbackModal} from 'sentry/components/featureFeedback/feedbackModal';
 import TextField from 'sentry/components/forms/fields/textField';
-import {RouteContext} from 'sentry/views/routeContext';
-
-function ComponentProviders({children}: {children: React.ReactNode}) {
-  const {router} = initializeOrg();
-
-  return (
-    <RouteContext.Provider
-      value={{
-        router,
-        location: router.location,
-        params: {},
-        routes: [],
-      }}
-    >
-      {children}
-    </RouteContext.Provider>
-  );
-}
 
 describe('FeatureFeedback', function () {
   describe('default', function () {
@@ -47,11 +28,7 @@ describe('FeatureFeedback', function () {
       renderGlobalModal();
 
       act(() =>
-        openModal(modalProps => (
-          <ComponentProviders>
-            <FeedbackModal {...modalProps} featureName="test" />
-          </ComponentProviders>
-        ))
+        openModal(modalProps => <FeedbackModal {...modalProps} featureName="test" />)
       );
 
       // Form fields
@@ -105,13 +82,11 @@ describe('FeatureFeedback', function () {
 
       act(() =>
         openModal(modalProps => (
-          <ComponentProviders>
-            <FeedbackModal
-              {...modalProps}
-              featureName="test"
-              feedbackTypes={['Custom feedback type A', 'Custom feedback type B']}
-            />
-          </ComponentProviders>
+          <FeedbackModal
+            {...modalProps}
+            featureName="test"
+            feedbackTypes={['Custom feedback type A', 'Custom feedback type B']}
+          />
         ))
       );
 
@@ -130,13 +105,11 @@ describe('FeatureFeedback', function () {
 
       act(() =>
         openModal(modalProps => (
-          <ComponentProviders>
-            <FeedbackModal
-              {...modalProps}
-              featureName="test"
-              secondaryAction={<a href="#">Test Secondary Action Link</a>}
-            />
-          </ComponentProviders>
+          <FeedbackModal
+            {...modalProps}
+            featureName="test"
+            secondaryAction={<a href="#">Test Secondary Action Link</a>}
+          />
         ))
       );
 
@@ -161,53 +134,51 @@ describe('FeatureFeedback', function () {
 
       act(() =>
         openModal(modalProps => (
-          <ComponentProviders>
-            <FeedbackModal
-              {...modalProps}
-              featureName="test"
-              initialData={{step: 0, name: null, surname: null}}
-            >
-              {({Header, Body, Footer, state, onFieldChange}) => {
-                if (state.step === 0) {
-                  return (
-                    <Fragment>
-                      <Header>First Step</Header>
-                      <Body>
-                        <TextField
-                          label="Name"
-                          value={state.name}
-                          name="name"
-                          onChange={value => onFieldChange('name', value)}
-                        />
-                      </Body>
-                      <Footer onNext={() => onFieldChange('step', 1)} />
-                    </Fragment>
-                  );
-                }
-
+          <FeedbackModal
+            {...modalProps}
+            featureName="test"
+            initialData={{step: 0, name: null, surname: null}}
+          >
+            {({Header, Body, Footer, state, onFieldChange}) => {
+              if (state.step === 0) {
                 return (
                   <Fragment>
-                    <Header>Last Step</Header>
+                    <Header>First Step</Header>
                     <Body>
                       <TextField
-                        label="Surname"
-                        value={state.surname}
-                        name="surname"
-                        onChange={value => onFieldChange('surname', value)}
+                        label="Name"
+                        value={state.name}
+                        name="name"
+                        onChange={value => onFieldChange('name', value)}
                       />
                     </Body>
-                    <Footer
-                      onBack={() => onFieldChange('step', 0)}
-                      primaryDisabledReason={
-                        !state.surname ? 'Please answer at least one question' : undefined
-                      }
-                      submitEventData={{message: 'Feedback: test'}}
-                    />
+                    <Footer onNext={() => onFieldChange('step', 1)} />
                   </Fragment>
                 );
-              }}
-            </FeedbackModal>
-          </ComponentProviders>
+              }
+
+              return (
+                <Fragment>
+                  <Header>Last Step</Header>
+                  <Body>
+                    <TextField
+                      label="Surname"
+                      value={state.surname}
+                      name="surname"
+                      onChange={value => onFieldChange('surname', value)}
+                    />
+                  </Body>
+                  <Footer
+                    onBack={() => onFieldChange('step', 0)}
+                    primaryDisabledReason={
+                      !state.surname ? 'Please answer at least one question' : undefined
+                    }
+                    submitEventData={{message: 'Feedback: test'}}
+                  />
+                </Fragment>
+              );
+            }}
+          </FeedbackModal>
         ))
       );
 

static/app/views/performance/content.spec.tsx

@@ -2,7 +2,6 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {makeTestQueryClient} from 'sentry-test/queryClient';
 import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import * as pageFilters from 'sentry/actionCreators/pageFilters';
@@ -11,32 +10,16 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 import TeamStore from 'sentry/stores/teamStore';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import {QueryClientProvider} from 'sentry/utils/queryClient';
-import {OrganizationContext} from 'sentry/views/organizationContext';
 import PerformanceContent from 'sentry/views/performance/content';
 import {DEFAULT_MAX_DURATION} from 'sentry/views/performance/trends/utils';
-import {RouteContext} from 'sentry/views/routeContext';
 
 const FEATURES = ['performance-view'];
 
-function WrappedComponent({organization, router}) {
+function WrappedComponent({router}) {
   return (
-    <QueryClientProvider client={makeTestQueryClient()}>
-      <RouteContext.Provider
-        value={{
-          location: router.location,
-          params: {},
-          router,
-          routes: [],
-        }}
-      >
-        <OrganizationContext.Provider value={organization}>
-          <MEPSettingProvider>
-            <PerformanceContent router={router} location={router.location} />
-          </MEPSettingProvider>
-        </OrganizationContext.Provider>
-      </RouteContext.Provider>
-    </QueryClientProvider>
+    <MEPSettingProvider>
+      <PerformanceContent router={router} location={router.location} />
+    </MEPSettingProvider>
   );
 }
 
@@ -293,7 +276,7 @@ describe('Performance > Content', function () {
     const projects = [ProjectFixture({firstTransactionEvent: true})];
     const data = initializeData(projects, {});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -309,7 +292,7 @@ describe('Performance > Content', function () {
     ];
     const data = initializeData(projects, {project: [1]});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -325,7 +308,7 @@ describe('Performance > Content', function () {
     ];
     const data = initializeData(projects, {project: ['-1']});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
     expect(await screen.findByTestId('performance-landing-v3')).toBeInTheDocument();
@@ -336,7 +319,7 @@ describe('Performance > Content', function () {
     const projects = [ProjectFixture({id: '1', firstTransactionEvent: true})];
     const data = initializeData(projects, {project: ['1'], query: 'sentry:yes'});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -357,7 +340,7 @@ describe('Performance > Content', function () {
 
   it('Default period for trends does not call updateDateTime', async function () {
     const data = initializeTrendsData({query: 'tag:value'}, false);
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -372,7 +355,7 @@ describe('Performance > Content', function () {
       statsPeriod: '24h',
     });
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -401,7 +384,7 @@ describe('Performance > Content', function () {
     ];
     const data = initializeData(projects, {view: undefined});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
     expect(await screen.findByTestId('performance-landing-v3')).toBeInTheDocument();
@@ -412,7 +395,7 @@ describe('Performance > Content', function () {
   it('Default page (transactions) with trends feature will not update filters if none are set', async function () {
     const data = initializeTrendsData({view: undefined}, false);
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
     expect(await screen.findByTestId('performance-landing-v3')).toBeInTheDocument();
@@ -422,7 +405,7 @@ describe('Performance > Content', function () {
   it('Tags are replaced with trends default query if navigating to trends', async function () {
     const data = initializeTrendsData({query: 'device.family:Mac'}, false);
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 
@@ -447,7 +430,7 @@ describe('Performance > Content', function () {
     ];
     const data = initializeData(projects, {view: undefined});
 
-    render(<WrappedComponent organization={data.organization} router={data.router} />, {
+    render(<WrappedComponent router={data.router} />, {
       context: data.routerContext,
     });
 

static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx

@@ -10,9 +10,7 @@ import {
   SPAN_OP_BREAKDOWN_FIELDS,
   SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
 } from 'sentry/utils/discover/fields';
-import {OrganizationContext} from 'sentry/views/organizationContext';
 import TransactionReplays from 'sentry/views/performance/transactionSummary/transactionReplays';
-import {RouteContext} from 'sentry/views/routeContext';
 
 type InitializeOrgProps = {
   location?: {
@@ -32,16 +30,11 @@ jest.mock('sentry/utils/useMedia', () => ({
 const mockEventsUrl = '/organizations/org-slug/events/';
 const mockReplaysUrl = '/organizations/org-slug/replays/';
 
-let mockRouterContext: {
-  childContextTypes?: any;
-  context?: any;
-} = {};
-
-const getComponent = ({
+const renderComponent = ({
   location,
   organizationProps = {features: ['performance-view', 'session-replay']},
-}: InitializeOrgProps) => {
-  const {router, organization, routerContext} = initializeOrg({
+}: InitializeOrgProps = {}) => {
+  const {organization, routerContext} = initializeOrg({
     organization: {
       ...organizationProps,
     },
@@ -67,26 +60,7 @@ const getComponent = ({
   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,
-        }}
-      >
-        <TransactionReplays />
-      </RouteContext.Provider>
-    </OrganizationContext.Provider>
-  );
-};
-
-const renderComponent = (componentProps: InitializeOrgProps = {}) => {
-  return render(getComponent(componentProps), {context: mockRouterContext});
+  return render(<TransactionReplays />, {context: routerContext, organization});
 };
 
 describe('TransactionReplays', () => {

static/app/views/performance/transactionSummary/transactionVitals/index.spec.tsx

@@ -1,4 +1,4 @@
-import type {Location, Query} from 'history';
+import type {Query} from 'history';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
@@ -12,9 +12,8 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
-import type {Organization as TOrganization, Project} from 'sentry/types';
+import type {Project} from 'sentry/types';
 import {browserHistory} from 'sentry/utils/browserHistory';
-import {OrganizationContext} from 'sentry/views/organizationContext';
 import TransactionVitals from 'sentry/views/performance/transactionSummary/transactionVitals';
 import {
   VITAL_GROUPS,
@@ -59,20 +58,6 @@ function initialize({
   return data;
 }
 
-function WrappedComponent({
-  location,
-  organization,
-}: {
-  location: Location;
-  organization: TOrganization;
-}) {
-  return (
-    <OrganizationContext.Provider value={organization}>
-      <TransactionVitals location={location} organization={organization} />
-    </OrganizationContext.Provider>
-  );
-}
-
 /**
  * These values are what we expect to see on the page based on the
  * mocked api responses below.
@@ -193,8 +178,9 @@ describe('Performance > Web Vitals', function () {
       features: [],
     });
 
-    render(<WrappedComponent organization={organization} location={router.location} />, {
+    render(<TransactionVitals organization={organization} location={router.location} />, {
       context: routerContext,
+      organization,
     });
     expect(screen.getByText("You don't have access to this feature")).toBeInTheDocument();
   });
@@ -204,8 +190,9 @@ describe('Performance > Web Vitals', function () {
       transaction: '/organizations/:orgId/',
     });
 
-    render(<WrappedComponent organization={organization} location={router.location} />, {
+    render(<TransactionVitals organization={organization} location={router.location} />, {
       context: routerContext,
+      organization,
     });
 
     expect(
@@ -220,8 +207,9 @@ describe('Performance > Web Vitals', function () {
   it('renders the correct bread crumbs', function () {
     const {organization, router, routerContext} = initialize();
 
-    render(<WrappedComponent organization={organization} location={router.location} />, {
+    render(<TransactionVitals organization={organization} location={router.location} />, {
       context: routerContext,
+      organization,
     });
 
     expect(screen.getByRole('navigation')).toHaveTextContent('PerformanceWeb Vitals');
@@ -232,8 +220,8 @@ describe('Performance > Web Vitals', function () {
 
     beforeEach(() => {
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
     });
 
@@ -248,8 +236,8 @@ describe('Performance > Web Vitals', function () {
       const {organization, router, routerContext} = initialize();
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       expect(screen.getByRole('button', {name: 'Reset View'})).toBeDisabled();
@@ -263,8 +251,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       expect(screen.getByRole('button', {name: 'Reset View'})).toBeEnabled();
@@ -278,8 +266,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       expect(screen.getByRole('button', {name: 'Reset View'})).toBeEnabled();
@@ -294,8 +282,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       expect(screen.getByRole('button', {name: 'Reset View'})).toBeEnabled();
@@ -310,8 +298,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       await userEvent.click(screen.getByRole('button', {name: 'Reset View'}));
@@ -342,8 +330,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       await waitForElementToBeRemoved(() =>
@@ -365,8 +353,8 @@ describe('Performance > Web Vitals', function () {
       });
 
       render(
-        <WrappedComponent organization={organization} location={router.location} />,
-        {context: routerContext}
+        <TransactionVitals organization={organization} location={router.location} />,
+        {context: routerContext, organization}
       );
 
       await waitForElementToBeRemoved(() =>
@@ -399,8 +387,9 @@ describe('Performance > Web Vitals', function () {
       },
     });
 
-    render(<WrappedComponent organization={organization} location={router.location} />, {
+    render(<TransactionVitals organization={organization} location={router.location} />, {
       context: routerContext,
+      organization,
     });
 
     await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-placeholder'));

static/app/views/releases/thresholdsList/thresholdGroupRows.spec.tsx

@@ -4,7 +4,6 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import type {Organization} from 'sentry/types/organization';
-import {OrganizationContext} from 'sentry/views/organizationContext';
 import type {Threshold} from 'sentry/views/releases/utils/types';
 
 import {ThresholdGroupRows, type ThresholdGroupRowsProps} from './thresholdGroupRows';
@@ -34,35 +33,21 @@ describe('ThresholdGroupRows', () => {
     ...thresholdData,
   });
 
-  const wrapper = (org: Organization = organization) => {
-    return function WrappedComponent({children}) {
-      return (
-        <OrganizationContext.Provider value={org}>
-          {children}
-        </OrganizationContext.Provider>
-      );
-    };
-  };
-
-  type RenderProps = ThresholdGroupRowsProps & {org: Organization};
-  const DEFAULT_PROPS: RenderProps = {
+  const DEFAULT_PROPS: ThresholdGroupRowsProps = {
     allEnvironmentNames: ['test'],
     project: ProjectFixture(),
     refetch: () => {},
     setTempError: () => {},
-    org: organization,
     threshold: undefined,
   };
 
-  const renderComponent = (props: Partial<RenderProps> = DEFAULT_PROPS) => {
-    const {org, ...thresholdProps} = props;
-    const Wrapper = wrapper(org);
-
-    return render(
-      <Wrapper>
-        <ThresholdGroupRows {...DEFAULT_PROPS} {...thresholdProps} />
-      </Wrapper>
-    );
+  const renderComponent = (
+    thresholdProps: Partial<ThresholdGroupRowsProps> = DEFAULT_PROPS,
+    org: Organization = organization
+  ) => {
+    return render(<ThresholdGroupRows {...DEFAULT_PROPS} {...thresholdProps} />, {
+      organization: org,
+    });
   };
 
   const mockThresholdApis = (data = {}) => {
@@ -145,7 +130,7 @@ describe('ThresholdGroupRows', () => {
     });
 
     const mocks = mockThresholdApis();
-    renderComponent({threshold, org});
+    renderComponent({threshold}, org);
 
     expect(await screen.findByText(threshold.value)).toBeInTheDocument();
 
@@ -183,7 +168,7 @@ describe('ThresholdGroupRows', () => {
     });
 
     const mocks = mockThresholdApis();
-    renderComponent({threshold, org});
+    renderComponent({threshold}, org);
 
     expect(await screen.findByText(threshold.value)).toBeInTheDocument();
 
@@ -229,7 +214,7 @@ describe('ThresholdGroupRows', () => {
       },
     });
 
-    renderComponent({threshold, org});
+    renderComponent({threshold}, org);
     await createThreshold();
 
     expect(mockApi).toHaveBeenCalled();