ref(test): Convert Notification settings to rtl (#39785)

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

@@ -1,14 +1,18 @@
-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 {
+  NotificationSettingsObject,
+  SELF_NOTIFICATION_SETTINGS_TYPES,
+} from 'sentry/views/settings/account/notifications/constants';
+import {NOTIFICATION_SETTING_FIELDS} from 'sentry/views/settings/account/notifications/fields2';
 import NotificationSettings from 'sentry/views/settings/account/notifications/notificationSettings';
 
-const createWrapper = (
-  notificationSettings: NotificationSettingsObject,
-  orgProps?: any
-) => {
-  const {routerContext, organization} = initializeOrg({organization: orgProps} as any);
+function renderMockRequests({
+  notificationSettings,
+}: {
+  notificationSettings: NotificationSettingsObject;
+}) {
   MockApiClient.addMockResponse({
     url: '/users/me/notification-settings/',
     method: 'GET',
@@ -24,51 +28,119 @@ const createWrapper = (
       weeklyReports: true,
     },
   });
-
-  return mountWithTheme(
-    <NotificationSettings organizations={[organization]} />,
-    routerContext
-  );
-};
+}
 
 describe('NotificationSettings', function () {
   it('should render', function () {
-    const wrapper = createWrapper({
-      alerts: {user: {me: {email: 'never', slack: 'never'}}},
-      deploy: {user: {me: {email: 'never', slack: 'never'}}},
-      workflow: {user: {me: {email: 'never', slack: 'never'}}},
+    const {routerContext, organization} = initializeOrg();
+
+    renderMockRequests({
+      notificationSettings: {
+        alerts: {user: {me: {email: 'never', slack: 'never'}}},
+        deploy: {user: {me: {email: 'never', slack: 'never'}}},
+        workflow: {user: {me: {email: 'never', slack: 'never'}}},
+      },
+    });
+
+    render(<NotificationSettings organizations={[organization]} />, {
+      context: routerContext,
     });
 
     // There are 8 notification setting Selects/Toggles.
-    const fields = wrapper.find('Field');
-    expect(fields).toHaveLength(8);
+    [
+      'alerts',
+      'workflow',
+      'deploy',
+      'approval',
+      'reports',
+      'email',
+      ...SELF_NOTIFICATION_SETTINGS_TYPES,
+    ].forEach(field => {
+      expect(
+        screen.getByText(String(NOTIFICATION_SETTING_FIELDS[field].label))
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Issue Alerts')).toBeInTheDocument();
   });
+
   it('renders quota section with feature flag', function () {
-    const wrapper = createWrapper(
-      {
+    const {routerContext, organization} = initializeOrg({
+      ...initializeOrg(),
+      organization: {
+        ...initializeOrg().organization,
+        features: ['slack-overage-notifications'],
+      },
+    });
+
+    renderMockRequests({
+      notificationSettings: {
         alerts: {user: {me: {email: 'never', slack: 'never'}}},
         deploy: {user: {me: {email: 'never', slack: 'never'}}},
         workflow: {user: {me: {email: 'never', slack: 'never'}}},
       },
-      {features: ['slack-overage-notifications']}
-    );
+    });
+
+    render(<NotificationSettings organizations={[organization]} />, {
+      context: routerContext,
+    });
 
     // There are 9 notification setting Selects/Toggles.
-    const fields = wrapper.find('Field');
-    expect(fields).toHaveLength(9);
+    [
+      'alerts',
+      'workflow',
+      'deploy',
+      'approval',
+      'quota',
+      'reports',
+      'email',
+      ...SELF_NOTIFICATION_SETTINGS_TYPES,
+    ].forEach(field => {
+      expect(
+        screen.getByText(String(NOTIFICATION_SETTING_FIELDS[field].label))
+      ).toBeInTheDocument();
+    });
   });
+
   it('renders active release monitor', function () {
-    const wrapper = createWrapper(
-      {
+    const {routerContext, organization} = initializeOrg({
+      ...initializeOrg(),
+      organization: {
+        ...initializeOrg().organization,
+        features: ['active-release-monitor-alpha'],
+      },
+    });
+
+    renderMockRequests({
+      notificationSettings: {
         alerts: {user: {me: {email: 'never', slack: 'never'}}},
         deploy: {user: {me: {email: 'never', slack: 'never'}}},
         workflow: {user: {me: {email: 'never', slack: 'never'}}},
       },
-      {features: ['active-release-monitor-alpha']}
-    );
+    });
+
+    render(<NotificationSettings organizations={[organization]} />, {
+      context: routerContext,
+    });
 
     // There are 9 notification setting Selects/Toggles.
-    const fields = wrapper.find('Field');
-    expect(fields).toHaveLength(9);
+    [
+      'alerts',
+      'activeRelease',
+      'workflow',
+      'deploy',
+      'approval',
+      'reports',
+      'email',
+      ...SELF_NOTIFICATION_SETTINGS_TYPES,
+    ].forEach(field => {
+      if (field === 'activeRelease') {
+        expect(screen.getByText('Release Issues')).toBeInTheDocument();
+        return;
+      }
+      expect(
+        screen.getByText(String(NOTIFICATION_SETTING_FIELDS[field].label))
+      ).toBeInTheDocument();
+    });
   });
 });

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

@@ -168,9 +168,11 @@ class NotificationSettings extends AsyncComponent<Props, State> {
         fields.push(field);
       }
     }
+
     const legacyField = SELF_NOTIFICATION_SETTINGS_TYPES.map(
       type => NOTIFICATION_SETTING_FIELDS[type] as FieldObject
     );
+
     fields.push(...legacyField);
 
     const allFields = [...fields, ...endOfFields];