test(js): Convert ProjectMapperField to RTL and TS (#39876)

static/app/components/deprecatedforms/projectMapperField.spec.jsx

@@ -1,93 +0,0 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {findOption, openMenu, selectByValue} from 'sentry-test/select-new';
-
-import {RenderField} from 'sentry/components/forms/projectMapperField';
-
-describe('ProjectMapperField', () => {
-  let wrapper;
-  const mappedDropdown = {
-    placholder: 'hi',
-    items: [
-      {value: '1', label: 'label 1'},
-      {value: '2', label: 'label 2'},
-      {value: '3', label: 'label 3'},
-    ],
-  };
-
-  const sentryProjects = [
-    {id: '23', slug: 'cool', platform: 'javascript', name: 'Cool'},
-    {id: '24', slug: 'beans', platform: 'python', name: 'Beans'},
-  ];
-  let onBlur, onChange, props, existingValues;
-
-  beforeEach(() => {
-    existingValues = [['23', '2']];
-    onBlur = jest.fn();
-    onChange = jest.fn();
-    props = {
-      mappedDropdown,
-      sentryProjects,
-      nextButton: {
-        url: 'https://vercel.com/dashboard/integrations/icfg_fuqLnwH3IYmcpAKAWY8eoYlR',
-        next: 'Return to Vercel',
-      },
-      value: existingValues,
-      onChange,
-      onBlur,
-    };
-  });
-
-  it('clicking add updates values with current dropdown values', () => {
-    wrapper = mountWithTheme(<RenderField {...props} />);
-    selectByValue(wrapper, '24', {control: true, name: 'project'});
-    selectByValue(wrapper, '1', {control: true, name: 'mappedDropdown'});
-
-    wrapper.find('AddProjectWrapper Button').simulate('click');
-
-    expect(onBlur).toHaveBeenCalledWith(
-      [
-        ['23', '2'],
-        ['24', '1'],
-      ],
-      []
-    );
-    expect(onChange).toHaveBeenCalledWith(
-      [
-        ['23', '2'],
-        ['24', '1'],
-      ],
-      []
-    );
-  });
-
-  it('can delete item', () => {
-    existingValues = [
-      ['23', '2'],
-      ['24', '1'],
-    ];
-    wrapper = mountWithTheme(<RenderField {...props} value={existingValues} />);
-    wrapper.find('Button[aria-label="Delete"]').first().simulate('click');
-
-    expect(onBlur).toHaveBeenCalledWith([['24', '1']], []);
-    expect(onChange).toHaveBeenCalledWith([['24', '1']], []);
-  });
-
-  it('allows a single Sentry project to map to multiple items but not the value', () => {
-    existingValues = [['24', '1']];
-    wrapper = mountWithTheme(<RenderField {...props} value={existingValues} />);
-    // can find the same project again
-    openMenu(wrapper, {control: true, name: 'project'});
-    expect(
-      findOption(wrapper, {value: '24'}, {control: true, name: 'project'})
-    ).toHaveLength(1);
-    // but not the value
-    openMenu(wrapper, {control: true, name: 'mappedDropdown'});
-    expect(
-      findOption(wrapper, {value: '1'}, {control: true, name: 'mappedDropdown'})
-    ).toHaveLength(0);
-    // validate we can still find 2
-    expect(
-      findOption(wrapper, {value: '2'}, {control: true, name: 'mappedDropdown'})
-    ).toHaveLength(1);
-  });
-});

static/app/components/deprecatedforms/projectMapperField.spec.tsx

@@ -0,0 +1,96 @@
+import {ComponentProps} from 'react';
+import selectEvent from 'react-select-event';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {RenderField} from 'sentry/components/forms/projectMapperField';
+
+import FormModel from '../forms/model';
+
+describe('ProjectMapperField', () => {
+  const defaultProps: ComponentProps<typeof RenderField> = {
+    mappedDropdown: {
+      placeholder: 'mapped-dropdown-placeholder',
+      items: [
+        {value: 1, label: 'label 1', url: ''},
+        {value: 2, label: 'label 2', url: ''},
+        {value: 3, label: 'label 3', url: ''},
+      ],
+    },
+    nextButton: {
+      text: 'next',
+      allowedDomain: '',
+    },
+    sentryProjects: [
+      {id: 23, slug: 'cool', platform: 'javascript', name: 'Cool'},
+      {id: 24, slug: 'beans', platform: 'python', name: 'Beans'},
+    ],
+    model: new FormModel(),
+    name: '',
+    iconType: '',
+    type: 'project_mapper',
+
+    value: [[23, 2]],
+    onChange: jest.fn(),
+    onBlur: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('clicking add updates values with current dropdown values', async () => {
+    render(<RenderField {...defaultProps} />);
+
+    await selectEvent.select(screen.getByText(/Sentry project/), 'beans');
+    await selectEvent.select(screen.getByText('mapped-dropdown-placeholder'), 'label 1');
+
+    userEvent.click(screen.getByLabelText('Add project'));
+
+    expect(defaultProps.onBlur).toHaveBeenCalledWith(
+      [
+        [23, 2],
+        [24, 1],
+      ],
+      []
+    );
+    expect(defaultProps.onChange).toHaveBeenCalledWith(
+      [
+        [23, 2],
+        [24, 1],
+      ],
+      []
+    );
+  });
+
+  it('can delete item', () => {
+    render(
+      <RenderField
+        {...defaultProps}
+        value={[
+          [23, 2],
+          [24, 1],
+        ]}
+      />
+    );
+    userEvent.click(screen.getAllByLabelText('Delete')[0]);
+
+    expect(defaultProps.onBlur).toHaveBeenCalledWith([[24, 1]], []);
+    expect(defaultProps.onChange).toHaveBeenCalledWith([[24, 1]], []);
+  });
+
+  it('allows a single Sentry project to map to multiple items but not the value', () => {
+    render(<RenderField {...defaultProps} value={[[24, 1]]} />);
+
+    // can find the same project again
+    selectEvent.openMenu(screen.getByText(/Sentry project/));
+    expect(screen.getAllByText('beans')).toHaveLength(2);
+
+    // but not the value
+    selectEvent.openMenu(screen.getByText('mapped-dropdown-placeholder'));
+    expect(screen.getByText('label 1')).toBeInTheDocument();
+
+    // validate we can still find 2
+    expect(screen.getByText('label 2')).toBeInTheDocument();
+  });
+});