ref(js): Remove ModalStore calls from tests (#98054)

evanpurkhiser · lzhao-sentry · commit 8bda18c363f3 · 2025-08-25T12:58:52.000-04:00
Any open modals will now always be closed for tests
diff --git a/static/app/actionCreators/redirectToProject.tsx b/static/app/actionCreators/redirectToProject.tsx
@@ -1,7 +1,7 @@
-import ModalStore from 'sentry/stores/modalStore';
+import {openModal} from 'sentry/actionCreators/modal';
 
 export async function redirectToProject(newProjectSlug: string) {
   const {default: Modal} = await import('sentry/components/modals/redirectToProject');
 
-  ModalStore.openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});
+  openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});
 }
diff --git a/static/app/actionCreators/sudoModal.tsx b/static/app/actionCreators/sudoModal.tsx
@@ -1,5 +1,4 @@
-import type {ModalOptions} from 'sentry/actionCreators/modal';
-import ModalStore from 'sentry/stores/modalStore';
+import {openModal, type ModalOptions} from 'sentry/actionCreators/modal';
 
 type OpenSudoModalOptions = ModalOptions & {
   closeButton?: boolean;
@@ -17,5 +16,5 @@ export async function openSudo({
 }: OpenSudoModalOptions = {}) {
   const {default: Modal} = await import('sentry/components/modals/sudoModal');
 
-  ModalStore.openModal(deps => <Modal {...deps} {...args} />, {onClose, closeEvents});
+  openModal(deps => <Modal {...deps} {...args} />, {onClose, closeEvents});
 }
diff --git a/static/app/components/acl/featureDisabledModal.spec.tsx b/static/app/components/acl/featureDisabledModal.spec.tsx
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {FeatureDisabledModal} from 'sentry/components/acl/featureDisabledModal';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('FeatureTourModal', () => {
   const onCloseModal = jest.fn();
@@ -26,7 +25,6 @@ describe('FeatureTourModal', () => {
     );
 
   beforeEach(() => {
-    ModalStore.reset();
     jest.clearAllMocks();
   });
 
diff --git a/static/app/components/actions/resolve.spec.tsx b/static/app/components/actions/resolve.spec.tsx
@@ -10,13 +10,9 @@ import {
 import selectEvent from 'sentry-test/selectEvent';
 
 import ResolveActions from 'sentry/components/actions/resolve';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('ResolveActions', () => {
   const spy = jest.fn();
-  beforeEach(() => {
-    ModalStore.reset();
-  });
   afterEach(() => {
     spy.mockClear();
     MockApiClient.clearMockResponses();
diff --git a/static/app/components/confirm.spec.tsx b/static/app/components/confirm.spec.tsx
@@ -10,15 +10,11 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import Confirm from 'sentry/components/confirm';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('Confirm', () => {
   beforeEach(() => {
     jest.useRealTimers();
   });
-  afterEach(() => {
-    ModalStore.reset();
-  });
 
   it('renders', () => {
     const mock = jest.fn();
diff --git a/static/app/components/confirmDelete.spec.tsx b/static/app/components/confirmDelete.spec.tsx
@@ -6,13 +6,8 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import ConfirmDelete from 'sentry/components/confirmDelete';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('ConfirmDelete', () => {
-  afterEach(() => {
-    ModalStore.reset();
-  });
-
   it('renders', async () => {
     const mock = jest.fn();
     render(
diff --git a/static/app/components/events/eventTags/eventTagsTree.spec.tsx b/static/app/components/events/eventTags/eventTagsTree.spec.tsx
@@ -13,7 +13,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {EventTags} from 'sentry/components/events/eventTags';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('EventTagsTree', () => {
   const {organization, project} = initializeOrg();
@@ -67,7 +66,6 @@ describe('EventTagsTree', () => {
   let mockDetailedProject: jest.Mock;
 
   beforeEach(() => {
-    ModalStore.reset();
     MockApiClient.clearMockResponses();
     mockDetailedProject = MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/${project.slug}/`,
diff --git a/static/app/components/events/highlights/editHighlightsModal.spec.tsx b/static/app/components/events/highlights/editHighlightsModal.spec.tsx
@@ -14,7 +14,6 @@ import {openModal} from 'sentry/actionCreators/modal';
 import EditHighlightsModal, {
   type EditHighlightsModalProps,
 } from 'sentry/components/events/highlights/editHighlightsModal';
-import ModalStore from 'sentry/stores/modalStore';
 import type {Project} from 'sentry/types/project';
 import * as analytics from 'sentry/utils/analytics';
 
@@ -77,7 +76,6 @@ describe('EditHighlightsModal', () => {
   beforeEach(() => {
     MockApiClient.clearMockResponses();
     jest.resetAllMocks();
-    ModalStore.reset();
   });
 
   it('should renders with basic functions', async () => {
diff --git a/static/app/components/events/interfaces/debugMeta/index.spec.tsx b/static/app/components/events/interfaces/debugMeta/index.spec.tsx
@@ -12,15 +12,13 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {DebugMeta} from 'sentry/components/events/interfaces/debugMeta';
-import ModalStore from 'sentry/stores/modalStore';
 import {ImageStatus} from 'sentry/types/debugImage';
 
 describe('DebugMeta', () => {
   const {organization, project} = initializeOrg();
 
   beforeEach(() => {
     MockApiClient.clearMockResponses();
-    ModalStore.reset();
   });
 
   it('opens details modal', async () => {
diff --git a/static/app/components/featureFeedback/index.spec.tsx b/static/app/components/featureFeedback/index.spec.tsx
@@ -6,13 +6,8 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {FeatureFeedback} from 'sentry/components/featureFeedback';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('FeatureFeedback', () => {
-  beforeEach(() => {
-    ModalStore.reset();
-  });
-
   it('shows the modal on click', async () => {
     render(<FeatureFeedback featureName="test" />);
     renderGlobalModal();
diff --git a/static/app/components/globalModal/index.spec.tsx b/static/app/components/globalModal/index.spec.tsx
@@ -8,12 +8,10 @@ import {
 
 import {closeModal, openModal} from 'sentry/actionCreators/modal';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import ModalStore from 'sentry/stores/modalStore';
 
 describe('GlobalModal', () => {
   beforeEach(() => {
     jest.resetAllMocks();
-    ModalStore.reset();
   });
 
   it('uses actionCreators to open and close Modal', async () => {
diff --git a/static/app/components/globalModal/index.tsx b/static/app/components/globalModal/index.tsx
@@ -6,7 +6,6 @@ import type {FocusTrap} from 'focus-trap';
 import {createFocusTrap} from 'focus-trap';
 import {AnimatePresence, motion} from 'framer-motion';
 
-import {closeModal as actionCloseModal} from 'sentry/actionCreators/modal';
 import {TooltipContext} from 'sentry/components/core/tooltip';
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 import {ROOT_ELEMENT} from 'sentry/constants';
@@ -121,8 +120,8 @@ function GlobalModal({onClose}: Props) {
       // Option close callback, from the thing which opened the modal
       options.onClose?.(reason);
 
-      // Action creator, actually closes the modal
-      actionCloseModal();
+      // actually closes the modal
+      ModalStore.closeModal();
 
       // GlobalModal onClose prop callback
       onClose?.();
@@ -193,7 +192,7 @@ function GlobalModal({onClose}: Props) {
   // XXX: We're using useEffectAfterFirstRender primarily to support tests
   // which render the GlobalModal after a modal has already been registered in
   // the modal store, meaning it would be closed immediately.
-  useEffectAfterFirstRender(() => actionCloseModal(), [location.pathname]);
+  useEffectAfterFirstRender(() => ModalStore.closeModal(), [location.pathname]);
 
   // Default to enabled backdrop
   const backdrop = options.backdrop ?? true;
diff --git a/static/app/components/modals/featureTourModal.spec.tsx b/static/app/components/modals/featureTourModal.spec.tsx
@@ -4,7 +4,6 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import GlobalModal from 'sentry/components/globalModal';
 import FeatureTourModal from 'sentry/components/modals/featureTourModal';
-import ModalStore from 'sentry/stores/modalStore';
 
 const steps = [
   {
@@ -49,7 +48,6 @@ describe('FeatureTourModal', () => {
   }
 
   beforeEach(() => {
-    ModalStore.reset();
     onAdvance = jest.fn();
     onCloseModal = jest.fn();
   });
diff --git a/static/app/components/modals/sudoModal.spec.tsx b/static/app/components/modals/sudoModal.spec.tsx
@@ -4,7 +4,6 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ConfigStore from 'sentry/stores/configStore';
-import ModalStore from 'sentry/stores/modalStore';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import App from 'sentry/views/app';
 
@@ -60,7 +59,6 @@ describe('Sudo Modal', () => {
       url: '/authenticators/',
       body: [],
     });
-    ModalStore.reset();
     OrganizationStore.reset();
   });
 
diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.spec.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetBuilderSlideout.spec.tsx
@@ -12,7 +12,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
-import ModalStore from 'sentry/stores/modalStore';
 import useCustomMeasurements from 'sentry/utils/useCustomMeasurements';
 import {useParams} from 'sentry/utils/useParams';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
@@ -53,7 +52,6 @@ describe('WidgetBuilderSlideout', () => {
   });
 
   afterEach(() => {
-    ModalStore.reset();
     jest.clearAllMocks();
   });
 
diff --git a/static/app/views/issueDetails/actions/index.spec.tsx b/static/app/views/issueDetails/actions/index.spec.tsx
@@ -56,7 +56,6 @@ describe('GroupActions', () => {
 
   beforeEach(() => {
     ConfigStore.init();
-    ModalStore.init();
   });
   afterEach(() => {
     MockApiClient.clearMockResponses();
diff --git a/static/app/views/issueDetails/actions/shareModal.spec.tsx b/static/app/views/issueDetails/actions/shareModal.spec.tsx
@@ -7,7 +7,6 @@ import {act, renderGlobalModal, screen, userEvent} from 'sentry-test/reactTestin
 
 import {openModal} from 'sentry/actionCreators/modal';
 import GroupStore from 'sentry/stores/groupStore';
-import ModalStore from 'sentry/stores/modalStore';
 import ShareIssueModal from 'sentry/views/issueDetails/actions/shareModal';
 
 describe('ShareIssueModal', () => {
@@ -24,7 +23,6 @@ describe('ShareIssueModal', () => {
     });
   });
   afterEach(() => {
-    ModalStore.reset();
     GroupStore.reset();
     MockApiClient.clearMockResponses();
     jest.clearAllMocks();
diff --git a/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.spec.tsx b/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.spec.tsx
@@ -17,7 +17,6 @@ import {
 
 import ConfigStore from 'sentry/stores/configStore';
 import GroupStore from 'sentry/stores/groupStore';
-import ModalStore from 'sentry/stores/modalStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import type {Project} from 'sentry/types/project';
 
@@ -64,7 +63,6 @@ describe('GroupEventAttachments', () => {
 
   afterEach(() => {
     MockApiClient.clearMockResponses();
-    ModalStore.reset();
   });
 
   it('calls attachments api with screenshot filter', async () => {
diff --git a/static/app/views/settings/components/dataScrubbing/index.spec.tsx b/static/app/views/settings/components/dataScrubbing/index.spec.tsx
@@ -6,16 +6,11 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import GlobalModal from 'sentry/components/globalModal';
-import ModalStore from 'sentry/stores/modalStore';
 import {DataScrubbing} from 'sentry/views/settings/components/dataScrubbing';
 
 const relayPiiConfig = JSON.stringify(DataScrubbingRelayPiiConfigFixture());
 
 describe('Data Scrubbing', () => {
-  beforeEach(() => {
-    ModalStore.reset();
-  });
-
   describe('Organization level', () => {
     const {organization} = initializeOrg();
     const additionalContext = 'These rules can be configured for each project.';
diff --git a/static/app/views/settings/organizationDeveloperSettings/permissionSelection.spec.tsx b/static/app/views/settings/organizationDeveloperSettings/permissionSelection.spec.tsx
@@ -3,7 +3,6 @@ import selectEvent from 'sentry-test/selectEvent';
 
 import Form from 'sentry/components/forms/form';
 import FormModel from 'sentry/components/forms/model';
-import ModalStore from 'sentry/stores/modalStore';
 import PermissionSelection from 'sentry/views/settings/organizationDeveloperSettings/permissionSelection';
 
 describe('PermissionSelection', () => {
@@ -29,7 +28,6 @@ describe('PermissionSelection', () => {
         />
       </Form>
     );
-    ModalStore.reset();
   }
 
   it('renders a row for each resource', () => {
diff --git a/static/app/views/settings/organizationIntegrations/integrationCodeMappings.spec.tsx b/static/app/views/settings/organizationIntegrations/integrationCodeMappings.spec.tsx
@@ -13,7 +13,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 import selectEvent from 'sentry-test/selectEvent';
 
-import ModalStore from 'sentry/stores/modalStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import IntegrationCodeMappings from 'sentry/views/settings/organizationIntegrations/integrationCodeMappings';
 
@@ -59,7 +58,6 @@ describe('IntegrationCodeMappings', () => {
   });
 
   beforeEach(() => {
-    ModalStore.init();
     ProjectsStore.loadInitialData(projects);
 
     MockApiClient.addMockResponse({
@@ -77,8 +75,6 @@ describe('IntegrationCodeMappings', () => {
   });
 
   afterEach(() => {
-    // Clear the fields from the GlobalModal after every test
-    ModalStore.reset();
     ProjectsStore.reset();
     MockApiClient.clearMockResponses();
   });
diff --git a/static/app/views/settings/organizationMembers/organizationMembersList.spec.tsx b/static/app/views/settings/organizationMembers/organizationMembersList.spec.tsx
@@ -18,7 +18,6 @@ import selectEvent from 'sentry-test/selectEvent';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import ConfigStore from 'sentry/stores/configStore';
-import ModalStore from 'sentry/stores/modalStore';
 import OrganizationsStore from 'sentry/stores/organizationsStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
@@ -157,7 +156,6 @@ describe('OrganizationMembersList', () => {
       },
     });
     OrganizationsStore.load([organization]);
-    ModalStore.init();
   });
 
   it('can remove a member', async () => {
diff --git a/static/app/views/settings/project/projectTeams.spec.tsx b/static/app/views/settings/project/projectTeams.spec.tsx
@@ -9,7 +9,6 @@ import {
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
 
-import ModalStore from 'sentry/stores/modalStore';
 import TeamStore from 'sentry/stores/teamStore';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -66,7 +65,6 @@ describe('ProjectTeams', () => {
 
   afterEach(() => {
     MockApiClient.clearMockResponses();
-    ModalStore.reset();
   });
 
   it('can remove a team from project', async () => {
diff --git a/static/app/views/settings/projectDebugFiles/sources/customRepositories/index.spec.tsx b/static/app/views/settings/projectDebugFiles/sources/customRepositories/index.spec.tsx
@@ -6,7 +6,6 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import GlobalModal from 'sentry/components/globalModal';
 import {DEBUG_SOURCE_TYPES} from 'sentry/data/debugFileSources';
-import ModalStore from 'sentry/stores/modalStore';
 import type {CustomRepo, CustomRepoHttp} from 'sentry/types/debugFiles';
 import {CustomRepoType} from 'sentry/types/debugFiles';
 import CustomRepositories from 'sentry/views/settings/projectDebugFiles/sources/customRepositories';
@@ -56,10 +55,6 @@ describe('Custom Repositories', () => {
     username: 'admin',
   };
 
-  beforeEach(() => {
-    ModalStore.reset();
-  });
-
   beforeAll(async () => {
     // TODO: figure out why this transpile is so slow
     // transpile the modal upfront so the test runs fast
diff --git a/static/app/views/settings/projectSeer/index.spec.tsx b/static/app/views/settings/projectSeer/index.spec.tsx
@@ -13,7 +13,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import type {SeerPreferencesResponse} from 'sentry/components/events/autofix/preferences/hooks/useProjectSeerPreferences';
-import ModalStore from 'sentry/stores/modalStore';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import ProjectSeer from 'sentry/views/settings/projectSeer';
@@ -36,7 +35,6 @@ describe('ProjectSeer', () => {
   let organization: Organization;
 
   beforeEach(() => {
-    ModalStore.init();
     project = ProjectFixture();
     organization = OrganizationFixture({
       features: ['autofix-seer-preferences'],
diff --git a/static/gsAdmin/components/adminConfirmationModal.spec.tsx b/static/gsAdmin/components/adminConfirmationModal.spec.tsx
diff --git a/static/gsAdmin/components/deleteBillingMetricHistory.spec.tsx b/static/gsAdmin/components/deleteBillingMetricHistory.spec.tsx
diff --git a/static/gsAdmin/components/provisionSubscriptionAction.spec.tsx b/static/gsAdmin/components/provisionSubscriptionAction.spec.tsx
diff --git a/static/gsAdmin/views/broadcasts.spec.tsx b/static/gsAdmin/views/broadcasts.spec.tsx
diff --git a/static/gsAdmin/views/customerDetails.spec.tsx b/static/gsAdmin/views/customerDetails.spec.tsx
diff --git a/static/gsApp/components/gsBanner.spec.tsx b/static/gsApp/components/gsBanner.spec.tsx
diff --git a/static/gsApp/views/onDemandBudgets/onDemandBudgets.spec.tsx b/static/gsApp/views/onDemandBudgets/onDemandBudgets.spec.tsx
diff --git a/tests/js/setup.ts b/tests/js/setup.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-import ModalStore from 'sentry/stores/modalStore';`
	`1`	`+import {openModal} from 'sentry/actionCreators/modal';`
`2`	`2`
`3`	`3`	`export async function redirectToProject(newProjectSlug: string) {`
`4`	`4`	`const {default: Modal} = await import('sentry/components/modals/redirectToProject');`
`5`	`5`
`6`		`- ModalStore.openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});`
	`6`	`+ openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});`
`7`	`7`	`}`