test(js): Convert NotificationSettingsByOrganization test to RTL (#40174)

static/app/views/settings/account/notifications/notificationSettingsByOrganization.spec.tsx

@@ -1,31 +1,30 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {NotificationSettingsObject} from 'sentry/views/settings/account/notifications/constants';
 import NotificationSettingsByOrganization from 'sentry/views/settings/account/notifications/notificationSettingsByOrganization';
 
-const createWrapper = (notificationSettings: NotificationSettingsObject) => {
-  const {organization, routerContext} = initializeOrg();
-  return mountWithTheme(
-    <NotificationSettingsByOrganization
-      notificationType="alerts"
-      notificationSettings={notificationSettings}
-      organizations={[organization]}
-      onChange={jest.fn()}
-      onSubmitSuccess={jest.fn()}
-    />,
-    routerContext
-  );
-};
-
 describe('NotificationSettingsByOrganization', function () {
   it('should render', function () {
-    const wrapper = createWrapper({
+    const settings = {
       alerts: {
         user: {me: {email: 'always', slack: 'always'}},
         organization: {1: {email: 'always', slack: 'always'}},
       },
-    });
-    expect(wrapper.find('Select')).toHaveLength(1);
+    };
+
+    const {organization, routerContext} = initializeOrg();
+
+    render(
+      <NotificationSettingsByOrganization
+        notificationType="alerts"
+        notificationSettings={settings}
+        organizations={[organization]}
+        onChange={jest.fn()}
+        onSubmitSuccess={jest.fn()}
+      />,
+      {context: routerContext}
+    );
+
+    expect(screen.getByRole('textbox', {name: 'org-slug'})).toBeInTheDocument();
   });
 });

static/app/views/settings/account/notifications/notificationSettingsByOrganization.tsx

@@ -1,5 +1,3 @@
-import {Component} from 'react';
-
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import {t} from 'sentry/locale';
@@ -25,35 +23,29 @@ type Props = {
   organizations: OrganizationSummary[];
 };
 
-type State = {};
-
-class NotificationSettingsByOrganization extends Component<Props, State> {
-  render() {
-    const {
-      notificationType,
-      notificationSettings,
-      onChange,
-      onSubmitSuccess,
-      organizations,
-    } = this.props;
-
-    return (
-      <Form
-        saveOnBlur
-        apiMethod="PUT"
-        apiEndpoint="/users/me/notification-settings/"
-        initialData={getParentData(notificationType, notificationSettings, organizations)}
-        onSubmitSuccess={onSubmitSuccess}
-      >
-        <JsonForm
-          title={t('Organizations')}
-          fields={organizations.map(organization =>
-            getParentField(notificationType, notificationSettings, organization, onChange)
-          )}
-        />
-      </Form>
-    );
-  }
+function NotificationSettingsByOrganization({
+  notificationType,
+  notificationSettings,
+  onChange,
+  onSubmitSuccess,
+  organizations,
+}: Props) {
+  return (
+    <Form
+      saveOnBlur
+      apiMethod="PUT"
+      apiEndpoint="/users/me/notification-settings/"
+      initialData={getParentData(notificationType, notificationSettings, organizations)}
+      onSubmitSuccess={onSubmitSuccess}
+    >
+      <JsonForm
+        title={t('Organizations')}
+        fields={organizations.map(organization =>
+          getParentField(notificationType, notificationSettings, organization, onChange)
+        )}
+      />
+    </Form>
+  );
 }
 
 export default withOrganizations(NotificationSettingsByOrganization);