ref(js): Remove legacy context withOrganizationMock (#63815)

There's one test failing still for the widgetCard

static/app/components/acl/feature.spec.tsx

@@ -34,6 +34,7 @@ describe('Feature', function () {
 
       render(<Feature features={features}>{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -52,7 +53,7 @@ describe('Feature', function () {
         <Feature features={features} requireAll={false}>
           {childrenMock}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -67,6 +68,7 @@ describe('Feature', function () {
     it('has no features', function () {
       render(<Feature features="org-baz">{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -84,7 +86,7 @@ describe('Feature', function () {
         <Feature features="org-baz" renderDisabled={noFeatureRenderer}>
           {childrenMock}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(childrenMock).not.toHaveBeenCalled();
@@ -103,7 +105,7 @@ describe('Feature', function () {
         <Feature organization={customOrg} features="org-bazar">
           {childrenMock}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -121,7 +123,7 @@ describe('Feature', function () {
         <Feature project={customProject} features="project-baz">
           {childrenMock}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -137,6 +139,7 @@ describe('Feature', function () {
       const features = ['org-foo', 'project-foo'];
       render(<Feature features={features}>{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith(
@@ -153,6 +156,7 @@ describe('Feature', function () {
     it('handles features prefixed with org/project', function () {
       render(<Feature features="organizations:org-bar">{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -165,6 +169,7 @@ describe('Feature', function () {
 
       render(<Feature features="projects:bar">{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -183,6 +188,7 @@ describe('Feature', function () {
 
       render(<Feature features="organizations:create">{childrenMock}</Feature>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -201,7 +207,7 @@ describe('Feature', function () {
         <Feature features="nope" renderDisabled={() => <span>disabled</span>}>
           <div>The Child</div>
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
       expect(screen.getByText('disabled')).toBeInTheDocument();
     });
@@ -211,7 +217,7 @@ describe('Feature', function () {
         <Feature features="org-bar" renderDisabled={() => <span>disabled</span>}>
           <div>The Child</div>
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
       expect(screen.queryByText('disabled')).not.toBeInTheDocument();
     });
@@ -223,7 +229,7 @@ describe('Feature', function () {
         <Feature features="org-bar">
           <div>The Child</div>
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.getByText('The Child')).toBeInTheDocument();
@@ -234,7 +240,7 @@ describe('Feature', function () {
         <Feature features="org-baz">
           <div>The Child</div>
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.queryByText('The Child')).not.toBeInTheDocument();
@@ -245,7 +251,7 @@ describe('Feature', function () {
         <Feature features="org-baz" renderDisabled>
           <div>The Child</div>
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.getByText('This feature is coming soon!')).toBeInTheDocument();
@@ -259,7 +265,7 @@ describe('Feature', function () {
         <Feature features="org-baz" renderDisabled={noFeatureRenderer}>
           {children}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.queryByText('The Child')).not.toBeInTheDocument();
@@ -292,7 +298,7 @@ describe('Feature', function () {
         <Feature features="org-bazar" hookName="feature-disabled:sso-basic">
           {children}
         </Feature>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.queryByText('The Child')).not.toBeInTheDocument();

static/app/components/acl/role.spec.tsx

@@ -51,7 +51,10 @@ describe('Role', function () {
     });
 
     it('has a sufficient role', function () {
-      render(<Role role="admin">{childrenMock}</Role>, {context: routerContext});
+      render(<Role role="admin">{childrenMock}</Role>, {
+        context: routerContext,
+        organization,
+      });
 
       expect(childrenMock).toHaveBeenCalledWith({
         hasRole: true,
@@ -61,6 +64,7 @@ describe('Role', function () {
     it('has an insufficient role', function () {
       render(<Role role="manager">{childrenMock}</Role>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -72,7 +76,10 @@ describe('Role', function () {
       organization.access = ['org:superuser'];
       OrganizationStore.onUpdate(organization, {replace: true});
 
-      render(<Role role="owner">{childrenMock}</Role>, {context: routerContext});
+      render(<Role role="owner">{childrenMock}</Role>, {
+        context: routerContext,
+        organization,
+      });
 
       expect(childrenMock).toHaveBeenCalledWith({
         hasRole: true,
@@ -82,6 +89,7 @@ describe('Role', function () {
     it('does not give access to a made up role', function () {
       render(<Role role="abcdefg">{childrenMock}</Role>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -92,7 +100,10 @@ describe('Role', function () {
     it('handles no user', function () {
       const user = {...ConfigStore.config.user};
       ConfigStore.config.user = undefined as any;
-      render(<Role role="member">{childrenMock}</Role>, {context: routerContext});
+      render(<Role role="member">{childrenMock}</Role>, {
+        context: routerContext,
+        organization,
+      });
 
       expect(childrenMock).toHaveBeenCalledWith({
         hasRole: false,
@@ -105,6 +116,7 @@ describe('Role', function () {
       ConfigStore.config.user = undefined as any;
       const {rerender} = render(<Role role="member">{childrenMock}</Role>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -123,7 +135,7 @@ describe('Role', function () {
         <Role role="member" organization={{...organization, orgRoleList: []}}>
           {childrenMock}
         </Role>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -138,7 +150,7 @@ describe('Role', function () {
         <Role role="member">
           <div>The Child</div>
         </Role>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.getByText('The Child')).toBeInTheDocument();
@@ -149,7 +161,7 @@ describe('Role', function () {
         <Role role="owner">
           <div>The Child</div>
         </Role>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.queryByText('The Child')).not.toBeInTheDocument();

static/app/components/dataExport.spec.tsx

@@ -5,7 +5,7 @@ import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrar
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import WrappedDataExport, {ExportQueryType} from 'sentry/components/dataExport';
-import type {Organization as TOrganization} from 'sentry/types';
+import type {Organization} from 'sentry/types';
 
 jest.mock('sentry/actionCreators/indicator');
 
@@ -22,24 +22,23 @@ const mockPayload = {
   queryInfo: {project_id: '1', group_id: '1027', key: 'user'},
 };
 
-const mockRouterContext = (mockOrganization: TOrganization) =>
-  RouterContextFixture([
-    {
-      organization: mockOrganization,
-    },
-  ]);
+const mockContext = (organization: Organization) => {
+  const routerContext = RouterContextFixture([{organization}]);
+
+  return {context: routerContext, organization};
+};
 
 describe('DataExport', function () {
   it('should not render anything for an unauthorized organization', function () {
     render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockUnauthorizedOrg),
+      ...mockContext(mockUnauthorizedOrg),
     });
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   it('should render the button for an authorized organization', function () {
     render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
     expect(screen.getByText(/Export All to CSV/)).toBeInTheDocument();
   });
@@ -49,7 +48,7 @@ describe('DataExport', function () {
       <WrappedDataExport payload={mockPayload}>
         This is an example string
       </WrappedDataExport>,
-      {context: mockRouterContext(mockAuthorizedOrg)}
+      {...mockContext(mockAuthorizedOrg)}
     );
     expect(screen.getByText(/This is an example string/)).toBeInTheDocument();
   });
@@ -62,7 +61,7 @@ describe('DataExport', function () {
     });
 
     render(<WrappedDataExport payload={mockPayload} disabled />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
 
     await userEvent.click(screen.getByRole('button'));
@@ -77,7 +76,7 @@ describe('DataExport', function () {
       body: {id: 721},
     });
     render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
 
     await userEvent.click(screen.getByRole('button'));
@@ -108,7 +107,7 @@ describe('DataExport', function () {
     });
 
     const {rerender} = render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
 
     await userEvent.click(screen.getByText(/Export All to CSV/));
@@ -135,7 +134,7 @@ describe('DataExport', function () {
     });
 
     render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
 
     await userEvent.click(screen.getByRole('button'));
@@ -160,7 +159,7 @@ describe('DataExport', function () {
     });
 
     render(<WrappedDataExport payload={mockPayload} />, {
-      context: mockRouterContext(mockAuthorizedOrg),
+      ...mockContext(mockAuthorizedOrg),
     });
 
     await userEvent.click(screen.getByRole('button'));

static/app/components/modals/helpSearchModal.spec.tsx

@@ -3,11 +3,9 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {TeamFixture} from 'sentry-fixture/team';
 
-import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {renderGlobalModal, screen} from 'sentry-test/reactTestingLibrary';
 
 import {openHelpSearchModal} from 'sentry/actionCreators/modal';
-import App from 'sentry/views/app';
 
 describe('Docs Search Modal', function () {
   beforeEach(function () {
@@ -55,16 +53,7 @@ describe('Docs Search Modal', function () {
   });
 
   it('can open help search modal', async function () {
-    const {routerContext, routerProps} = initializeOrg();
-
-    render(
-      <App {...routerProps}>
-        <div>placeholder content</div>
-      </App>,
-      {
-        context: routerContext,
-      }
-    );
+    renderGlobalModal();
 
     // No Modal
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

static/app/utils/__mocks__/withOrganization.tsx

@@ -1,22 +0,0 @@
-import {Component} from 'react';
-import {OrganizationFixture} from 'sentry-fixture/organization';
-
-import {SentryPropTypeValidators} from 'sentry/sentryPropTypeValidators';
-
-const withOrganizationMock = WrappedComponent =>
-  class WithOrganizationMockWrapper extends Component {
-    static contextTypes = {
-      organization: SentryPropTypeValidators.isOrganization,
-    };
-
-    render() {
-      return (
-        <WrappedComponent
-          organization={this.context.organization || OrganizationFixture()}
-          {...this.props}
-        />
-      );
-    }
-  };
-
-export default withOrganizationMock;

static/app/views/alerts/rules/issue/index.spec.tsx

@@ -108,7 +108,7 @@ const createWrapper = (props = {}) => {
         userTeamIds={[]}
       />
     </ProjectAlerts>,
-    {context: routerContext}
+    {context: routerContext, organization}
   );
 
   return {

static/app/views/alerts/rules/metric/ruleForm.spec.tsx

@@ -36,7 +36,7 @@ describe('Incident Rules Form', () => {
         project={project}
         {...props}
       />,
-      {context: routerContext}
+      {context: routerContext, organization}
     );
 
   beforeEach(() => {

static/app/views/dashboards/widgetCard/index.spec.tsx

@@ -32,7 +32,7 @@ describe('Dashboards > WidgetCard', function () {
     router: {orgId: 'orgId'},
   } as Parameters<typeof initializeOrg>[0]);
 
-  const renderWithProviders = component =>
+  const renderWithProviders = (component: React.ReactNode) =>
     render(
       <MEPSettingProvider forceTransactions={false}>{component}</MEPSettingProvider>,
       {organization, router, context: routerContext}
@@ -100,7 +100,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={multipleQueryWidget}
         selection={selection}
         isEditingDashboard={false}
@@ -127,7 +126,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{...multipleQueryWidget, queries: [multipleQueryWidget.queries[0]]}}
         selection={selection}
         isEditingDashboard={false}
@@ -152,7 +150,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={multipleQueryWidget}
         selection={selection}
         isEditingDashboard={false}
@@ -172,7 +169,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           queries: [
@@ -211,7 +207,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.TOP_N,
@@ -247,7 +242,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.LINE,
@@ -285,7 +279,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.AREA,
@@ -313,7 +306,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.AREA,
@@ -341,7 +333,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.AREA,
@@ -369,7 +360,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.AREA,
@@ -404,7 +394,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.TABLE,
@@ -439,7 +428,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={{
           ...multipleQueryWidget,
           displayType: DisplayType.TABLE,
@@ -489,7 +477,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={tableWidget}
         selection={selection}
         isEditingDashboard={false}
@@ -522,7 +509,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={widget}
         selection={selection}
         isEditingDashboard={false}
@@ -550,7 +536,6 @@ describe('Dashboards > WidgetCard', function () {
     renderWithProviders(
       <WidgetCard
         api={api}
-        organization={organization}
         widget={widget}
         selection={selection}
         isEditingDashboard={false}

static/app/views/projectInstall/createProject.spec.tsx

@@ -1,5 +1,4 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
-import {RouterContextFixture} from 'sentry-fixture/routerContextFixture';
 import {MOCK_RESP_VERBOSE} from 'sentry-fixture/ruleConditions';
 import {TeamFixture} from 'sentry-fixture/team';
 
@@ -80,7 +79,7 @@ describe('CreateProject', function () {
     TeamStore.loadUserTeams([teamNoAccess]);
 
     MockApiClient.addMockResponse({
-      url: `/projects/testOrg/rule-conditions/`,
+      url: `/projects/org-slug/rule-conditions/`,
       body: {},
       // Not required for these tests
       statusCode: 500,
@@ -92,18 +91,14 @@ describe('CreateProject', function () {
   });
 
   it('should block if you have access to no teams without team-roles', function () {
-    render(<CreateProject />, {
-      context: RouterContextFixture([
-        {
-          organization: {
-            id: '1',
-            slug: 'testOrg',
-            access: ['project:read'],
-            features: [],
-          },
-        },
-      ]),
+    const organization = OrganizationFixture({
+      id: '1',
+      slug: 'org-slug',
+      access: ['project:read'],
+      features: [],
     });
+
+    render(<CreateProject />, {organization});
   });
 
   it('can create a new project as member with team-roles', async function () {
@@ -118,16 +113,6 @@ describe('CreateProject', function () {
     TeamStore.loadUserTeams([TeamFixture({id: '2', slug: 'team-two', access: []})]);
 
     render(<CreateProject />, {
-      context: RouterContextFixture([
-        {
-          organization: {
-            id: '1',
-            slug: 'testOrg',
-            access: ['project:read'],
-            features: [],
-          },
-        },
-      ]),
       organization,
     });
 
@@ -153,7 +138,6 @@ describe('CreateProject', function () {
       TeamFixture({id: '3', slug: 'team-three', access: ['team:admin']}),
     ]);
     render(<CreateProject />, {
-      context: RouterContextFixture([{organization}]),
       organization,
     });
 
@@ -166,21 +150,12 @@ describe('CreateProject', function () {
   it('should fill in project name if its empty when platform is chosen', async function () {
     const {organization} = initializeOrg({
       organization: {
-        access: ['project:admin'],
+        access: ['project:read'],
+        features: ['team-roles'],
       },
     });
 
     render(<CreateProject />, {
-      context: RouterContextFixture([
-        {
-          organization: {
-            id: '1',
-            slug: 'testOrg',
-            access: ['project:read'],
-            features: [],
-          },
-        },
-      ]),
       organization,
     });
 
@@ -283,16 +258,6 @@ describe('CreateProject', function () {
       teamSlug: teamNoAccess.slug,
     });
     render(<CreateProject />, {
-      context: RouterContextFixture([
-        {
-          organization: {
-            id: '1',
-            slug: 'testOrg',
-            access: ['project:read'],
-            features: [],
-          },
-        },
-      ]),
       organization,
     });
 
@@ -411,7 +376,7 @@ describe('CreateProject', function () {
     });
 
     it('should enabled the submit button if and only if all the required information has been filled', async function () {
-      render(<CreateProject />);
+      render(<CreateProject />, {organization});
 
       // We need to query for the submit button every time we want to access it
       // as re-renders can create new DOM nodes

static/app/views/settings/organizationAuth/providerItem.spec.tsx

@@ -17,6 +17,7 @@ describe('ProviderItem', function () {
   it('renders', function () {
     render(<ProviderItem active={false} provider={provider} onConfigure={() => {}} />, {
       context: routerContext,
+      organization: org,
     });
 
     expect(
@@ -28,6 +29,7 @@ describe('ProviderItem', function () {
     const mock = jest.fn();
     render(<ProviderItem active={false} provider={provider} onConfigure={mock} />, {
       context: routerContext,
+      organization: org,
     });
 
     await userEvent.click(screen.getByRole('button', {name: 'Configure'}));
@@ -35,9 +37,9 @@ describe('ProviderItem', function () {
   });
 
   it('renders a disabled Tag when disabled', function () {
-    const noFeatureRouterContext = RouterContextFixture();
     render(<ProviderItem active={false} provider={provider} onConfigure={() => {}} />, {
-      context: noFeatureRouterContext,
+      context: RouterContextFixture(),
+      organization: OrganizationFixture(),
     });
 
     expect(screen.getByRole('status')).toHaveTextContent('disabled');