ref(test): Convert add code owner modal to rtl and ts (#40384)

static/app/views/settings/project/projectOwnership/addCodeOwnerModal.spec.jsx

@@ -1,125 +0,0 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {selectByValue} from 'sentry-test/select-new';
-
-import {Client} from 'sentry/api';
-import {AddCodeOwnerModal} from 'sentry/views/settings/project/projectOwnership/addCodeOwnerModal';
-
-describe('AddCodeOwnerModal', function () {
-  const modalProps = {
-    Body: p => p.children,
-    Header: p => p.children,
-    Footer: p => p.children,
-    closeModal: jest.fn(() => null),
-  };
-
-  const org = TestStubs.Organization({features: ['integrations-codeowners']});
-  const project = TestStubs.ProjectDetails();
-  const integration = TestStubs.GitHubIntegration();
-  const repo = TestStubs.Repository({
-    integrationId: integration.id,
-    id: '5',
-    name: 'example/hello-there',
-  });
-  const codeMapping = TestStubs.RepositoryProjectPathConfig({
-    project,
-    repo,
-    integration,
-    stackRoot: 'stack/root',
-    sourceRoot: 'source/root',
-  });
-
-  beforeEach(function () {
-    Client.clearMockResponses();
-    Client.addMockResponse({
-      url: `/organizations/${org.slug}/code-mappings/`,
-      method: 'GET',
-      query: {project: '2'},
-      body: [codeMapping],
-    });
-    Client.addMockResponse({
-      url: `/organizations/${org.slug}/integrations/`,
-      method: 'GET',
-      query: {features: ['codeowners']},
-      body: [integration],
-    });
-  });
-
-  it('renders', function () {
-    const wrapper = mountWithTheme(
-      <AddCodeOwnerModal {...modalProps} organization={org} project={project} />
-    );
-    expect(wrapper.find('Button').prop('disabled')).toBe(true);
-  });
-
-  it('renders codeowner file', async function () {
-    Client.addMockResponse({
-      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
-      method: 'GET',
-      body: {html_url: 'blah', filepath: 'CODEOWNERS', raw: '* @MeredithAnya\n'},
-    });
-    const wrapper = mountWithTheme(
-      <AddCodeOwnerModal {...modalProps} organization={org} project={project} />
-    );
-
-    selectByValue(wrapper, codeMapping.id, {name: 'codeMappingId'});
-    await tick();
-    wrapper.update();
-
-    expect(wrapper.find('IconCheckmark').exists()).toBe(true);
-    expect(wrapper.find('SourceFileBody').find('Button').prop('href')).toEqual('blah');
-    expect(wrapper.find('SourceFileBody').text()).toContain('CODEOWNERS');
-    expect(wrapper.state('codeownersFile').raw).toEqual('* @MeredithAnya\n');
-  });
-
-  it('renders no codeowner file found', async function () {
-    Client.addMockResponse({
-      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
-      method: 'GET',
-      statusCode: 404,
-    });
-    const wrapper = mountWithTheme(
-      <AddCodeOwnerModal {...modalProps} organization={org} project={project} />
-    );
-
-    selectByValue(wrapper, codeMapping.id, {name: 'codeMappingId'});
-    await tick();
-    wrapper.update();
-
-    expect(wrapper.find('IconNot').exists()).toBe(true);
-    expect(wrapper.find('NoSourceFileBody').text()).toEqual('No codeowner file found.');
-    expect(wrapper.state('codeownersFile')).toBe(null);
-  });
-
-  it('adds codeowner file', async function () {
-    Client.addMockResponse({
-      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
-      method: 'GET',
-      body: {html_url: 'blah', filepath: 'CODEOWNERS', raw: '* @MeredithAnya\n'},
-    });
-    const addFileRequest = Client.addMockResponse({
-      url: `/projects/${org.slug}/${project.slug}/codeowners/`,
-      method: 'POST',
-      body: {},
-    });
-    const wrapper = mountWithTheme(
-      <AddCodeOwnerModal {...modalProps} organization={org} project={project} />
-    );
-
-    selectByValue(wrapper, codeMapping.id, {name: 'codeMappingId'});
-    await tick();
-    wrapper.update();
-
-    wrapper.find('Footer').find('Button').simulate('click');
-    await tick();
-    wrapper.update();
-
-    expect(addFileRequest).toHaveBeenCalledWith(
-      `/projects/${org.slug}/${project.slug}/codeowners/`,
-      expect.objectContaining({
-        data: {raw: '* @MeredithAnya\n', codeMappingId: codeMapping.id},
-      })
-    );
-    const closeModal = wrapper.prop('closeModal');
-    expect(closeModal).toHaveBeenCalled();
-  });
-});

static/app/views/settings/project/projectOwnership/addCodeOwnerModal.spec.tsx

@@ -0,0 +1,156 @@
+import selectEvent from 'react-select-event';
+
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {
+  makeClosableHeader,
+  makeCloseButton,
+  ModalBody,
+  ModalFooter,
+} from 'sentry/components/globalModal/components';
+import {AddCodeOwnerModal} from 'sentry/views/settings/project/projectOwnership/addCodeOwnerModal';
+
+describe('AddCodeOwnerModal', function () {
+  const org = TestStubs.Organization({features: ['integrations-codeowners']});
+  const project = TestStubs.ProjectDetails();
+  const integration = TestStubs.GitHubIntegration();
+  const repo = TestStubs.Repository({
+    integrationId: integration.id,
+    id: '5',
+    name: 'example/hello-there',
+  });
+
+  const codeMapping = TestStubs.RepositoryProjectPathConfig({
+    project,
+    repo,
+    integration,
+    stackRoot: 'stack/root',
+    sourceRoot: 'source/root',
+  });
+
+  beforeEach(function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/code-mappings/`,
+      method: 'GET',
+      body: [codeMapping],
+    });
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/integrations/`,
+      method: 'GET',
+      body: [integration],
+    });
+  });
+
+  it('renders', function () {
+    render(
+      <AddCodeOwnerModal
+        Body={ModalBody}
+        closeModal={jest.fn()}
+        CloseButton={makeCloseButton(jest.fn())}
+        Header={makeClosableHeader(jest.fn())}
+        Footer={ModalFooter}
+        organization={org}
+        project={project}
+      />
+    );
+
+    expect(screen.getByRole('button', {name: 'Add File'})).toBeDisabled();
+  });
+
+  it('renders codeowner file', async function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
+      method: 'GET',
+      body: {html_url: 'blah', filepath: 'CODEOWNERS', raw: '* @MeredithAnya\n'},
+    });
+
+    render(
+      <AddCodeOwnerModal
+        Body={ModalBody}
+        closeModal={jest.fn()}
+        CloseButton={makeCloseButton(jest.fn())}
+        Header={makeClosableHeader(jest.fn())}
+        Footer={ModalFooter}
+        organization={org}
+        project={project}
+      />
+    );
+
+    await selectEvent.select(screen.getByText('--'), 'example/hello-there');
+
+    expect(screen.getByTestId('icon-check-mark')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', {name: 'Preview File'})).toHaveAttribute(
+      'href',
+      'blah'
+    );
+  });
+
+  it('renders no codeowner file found', async function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
+      method: 'GET',
+      statusCode: 404,
+    });
+
+    render(
+      <AddCodeOwnerModal
+        Body={ModalBody}
+        closeModal={jest.fn()}
+        CloseButton={makeCloseButton(jest.fn())}
+        Header={makeClosableHeader(jest.fn())}
+        Footer={ModalFooter}
+        organization={org}
+        project={project}
+      />
+    );
+
+    await selectEvent.select(screen.getByText('--'), 'example/hello-there');
+
+    expect(screen.getByText('No codeowner file found.')).toBeInTheDocument();
+  });
+
+  it('adds codeowner file', async function () {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/code-mappings/${codeMapping.id}/codeowners/`,
+      method: 'GET',
+      body: {html_url: 'blah', filepath: 'CODEOWNERS', raw: '* @MeredithAnya\n'},
+    });
+
+    const addFileRequest = MockApiClient.addMockResponse({
+      url: `/projects/${org.slug}/${project.slug}/codeowners/`,
+      method: 'POST',
+      body: {},
+    });
+
+    const handleCloseModal = jest.fn();
+
+    render(
+      <AddCodeOwnerModal
+        Body={ModalBody}
+        closeModal={handleCloseModal}
+        CloseButton={makeCloseButton(jest.fn())}
+        Header={makeClosableHeader(jest.fn())}
+        Footer={ModalFooter}
+        organization={org}
+        project={project}
+      />
+    );
+
+    await selectEvent.select(screen.getByText('--'), 'example/hello-there');
+
+    userEvent.click(screen.getByRole('button', {name: 'Add File'}));
+
+    await waitFor(() => {
+      expect(addFileRequest).toHaveBeenCalledWith(
+        `/projects/${org.slug}/${project.slug}/codeowners/`,
+        expect.objectContaining({
+          data: {codeMappingId: '2', raw: '* @MeredithAnya\n'},
+        })
+      );
+    });
+
+    expect(handleCloseModal).toHaveBeenCalled();
+  });
+});

static/app/views/settings/project/projectOwnership/addCodeOwnerModal.tsx

@@ -113,9 +113,11 @@ class AddCodeOwnerModal extends AsyncComponent<Props, State> {
             data: postData,
           }
         );
+
         const codeMapping = codeMappings.find(
           mapping => mapping.id === codeMappingId?.toString()
         );
+
         this.handleAddedFile({...data, codeMapping});
       } catch (err) {
         if (err.responseJSON.raw) {