Update the tests to use renderGlobalModal

Author: saponifi3d

static/app/views/automations/components/actions/ticketActionSettingsButton.spec.tsx

@@ -5,18 +5,20 @@ import {
 } from 'sentry-fixture/automations';
 import {ActionHandlerFixture} from 'sentry-fixture/workflowEngine';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
-import {openModal} from 'sentry/actionCreators/modal';
 import type {Action} from 'sentry/types/workflowEngine/actions';
 import {ActionGroup, ActionType} from 'sentry/types/workflowEngine/actions';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
 import {ActionNodeContext} from 'sentry/views/automations/components/actionNodes';
 import {TicketActionSettingsButton} from 'sentry/views/automations/components/actions/ticketActionSettingsButton';
 import {AutomationFormProvider} from 'sentry/views/automations/components/forms/context';
 
-jest.mock('sentry/actionCreators/modal');
-
 function renderComponent({
   action,
   automation,
@@ -29,6 +31,8 @@ function renderComponent({
     handlerGroup: ActionGroup.TICKET_CREATION,
   });
 
+  renderGlobalModal();
+
   render(
     <AutomationFormProvider automation={automation}>
       <ActionNodeContext.Provider
@@ -45,19 +49,28 @@ function renderComponent({
   );
 }
 
-async function getModalInstance() {
-  await userEvent.click(screen.getByRole('button', {name: 'Action Settings'}));
-  const renderer = (openModal as jest.Mock).mock.calls[0][0];
-  const modalElement = renderer({closeModal: jest.fn()});
-  return modalElement.props.instance;
+/**
+ * Mock the integration config API to return string fields for the given field
+ * names. When the modal opens, instance values for these fields will be set as
+ * the form input defaults, so we can assert on them.
+ */
+function mockIntegrationConfig(integrationId: string, fieldNames: string[] = []) {
+  return MockApiClient.addMockResponse({
+    url: `/organizations/org-slug/integrations/${integrationId}/`,
+    body: {
+      createIssueConfig: fieldNames.map(name => ({
+        name,
+        label: name,
+        type: 'string',
+      })),
+    },
+  });
 }
 
 describe('TicketActionSettingsButton', () => {
-  beforeEach(() => {
-    (openModal as jest.Mock).mockClear();
-  });
-
   it('uses additional_fields and dynamic_form_fields from ticketAction.data', async () => {
+    mockIntegrationConfig('int-1', ['project', 'issuetype']);
+
     const action = ActionFixture({
       id: '42',
       type: ActionType.JIRA,
@@ -70,18 +83,16 @@ describe('TicketActionSettingsButton', () => {
 
     renderComponent({action});
 
-    const instance = await getModalInstance();
-    expect(instance).toEqual(
-      expect.objectContaining({
-        project: '10000',
-        issuetype: '10001',
-        integration: 'int-1',
-        dynamic_form_fields: [{name: 'priority', label: 'Priority', type: 'select'}],
-      })
-    );
+    await userEvent.click(screen.getByRole('button', {name: 'Action Settings'}));
+
+    // Modal opens and form fields render with instance values as defaults
+    expect(await screen.findByRole('textbox', {name: 'project'})).toHaveValue('10000');
+    expect(screen.getByRole('textbox', {name: 'issuetype'})).toHaveValue('10001');
   });
 
   it('falls back to savedActionData with camelCase keys from API response', async () => {
+    mockIntegrationConfig('int-1', ['project', 'reporter']);
+
     const action = ActionFixture({
       id: '42',
       type: ActionType.JIRA,
@@ -107,18 +118,15 @@ describe('TicketActionSettingsButton', () => {
 
     renderComponent({action, automation});
 
-    const instance = await getModalInstance();
-    expect(instance).toEqual(
-      expect.objectContaining({
-        project: 'CAMEL',
-        reporter: 'me',
-        integration: 'int-1',
-        dynamic_form_fields: [{name: 'camelField', label: 'Camel', type: 'text'}],
-      })
-    );
+    await userEvent.click(screen.getByRole('button', {name: 'Action Settings'}));
+
+    expect(await screen.findByRole('textbox', {name: 'project'})).toHaveValue('CAMEL');
+    expect(screen.getByRole('textbox', {name: 'reporter'})).toHaveValue('me');
   });
 
   it('falls back to savedActionData with snake_case keys from frontend write', async () => {
+    mockIntegrationConfig('int-1', ['project', 'reporter']);
+
     const action = ActionFixture({
       id: '42',
       type: ActionType.JIRA,
@@ -144,18 +152,15 @@ describe('TicketActionSettingsButton', () => {
 
     renderComponent({action, automation});
 
-    const instance = await getModalInstance();
-    expect(instance).toEqual(
-      expect.objectContaining({
-        project: 'SNAKE',
-        reporter: 'them',
-        integration: 'int-1',
-        dynamic_form_fields: [{name: 'snakeField', label: 'Snake', type: 'text'}],
-      })
-    );
+    await userEvent.click(screen.getByRole('button', {name: 'Action Settings'}));
+
+    expect(await screen.findByRole('textbox', {name: 'project'})).toHaveValue('SNAKE');
+    expect(screen.getByRole('textbox', {name: 'reporter'})).toHaveValue('them');
   });
 
   it('uses savedActionData dynamic_form_fields when ticketAction has empty array', async () => {
+    mockIntegrationConfig('int-1', ['project']);
+
     const action = ActionFixture({
       id: '42',
       type: ActionType.JIRA,
@@ -185,13 +190,8 @@ describe('TicketActionSettingsButton', () => {
 
     renderComponent({action, automation});
 
-    const instance = await getModalInstance();
-    expect(instance).toEqual(
-      expect.objectContaining({
-        project: 'DIRECT',
-        integration: 'int-1',
-        dynamic_form_fields: [{name: 'fromSaved', label: 'From Saved', type: 'select'}],
-      })
-    );
+    await userEvent.click(screen.getByRole('button', {name: 'Action Settings'}));
+
+    expect(await screen.findByRole('textbox', {name: 'project'})).toHaveValue('DIRECT');
   });
 });