ref(test): Convert addIntegrationButton to rtl (#38195)

static/app/views/onboarding/integrationSetup.tsx

@@ -20,7 +20,7 @@ import getDynamicText from 'sentry/utils/getDynamicText';
 import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
-import AddIntegrationButton from 'sentry/views/organizationIntegrations/addIntegrationButton';
+import {AddIntegrationButton} from 'sentry/views/organizationIntegrations/addIntegrationButton';
 
 import FirstEventFooter from './components/firstEventFooter';
 import AddInstallationInstructions from './components/integrations/addInstallationInstructions';

static/app/views/organizationIntegrations/addIntegration.tsx

@@ -32,7 +32,7 @@ export default class AddIntegration extends Component<Props> {
 
   componentWillUnmount() {
     window.removeEventListener('message', this.didReceiveMessage);
-    this.dialog && this.dialog.close();
+    this.dialog?.close();
   }
 
   dialog: Window | null = null;

static/app/views/organizationIntegrations/addIntegrationButton.tsx

@@ -1,5 +1,3 @@
-import {Component} from 'react';
-
 import Button, {ButtonPropsWithoutAriaLabel} from 'sentry/components/button';
 import Tooltip from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
@@ -18,46 +16,41 @@ interface AddIntegrationButtonProps
   reinstall?: boolean;
 }
 
-export default class AddIntegrationButton extends Component<AddIntegrationButtonProps> {
-  render() {
-    const {
-      provider,
-      buttonText,
-      onAddIntegration,
-      organization,
-      reinstall,
-      analyticsParams,
-      modalParams,
-      ...buttonProps
-    } = this.props;
-
-    const label =
-      buttonText || t(reinstall ? 'Enable' : 'Add %s', provider.metadata.noun);
+export function AddIntegrationButton({
+  provider,
+  buttonText,
+  onAddIntegration,
+  organization,
+  reinstall,
+  analyticsParams,
+  modalParams,
+  ...buttonProps
+}: AddIntegrationButtonProps) {
+  const label = buttonText || t(reinstall ? 'Enable' : 'Add %s', provider.metadata.noun);
 
-    return (
-      <Tooltip
-        disabled={provider.canAdd}
-        title={`Integration cannot be added on Sentry. Enable this integration via the ${provider.name} instance.`}
+  return (
+    <Tooltip
+      disabled={provider.canAdd}
+      title={`Integration cannot be added on Sentry. Enable this integration via the ${provider.name} instance.`}
+    >
+      <AddIntegration
+        provider={provider}
+        onInstall={onAddIntegration}
+        organization={organization}
+        analyticsParams={analyticsParams}
+        modalParams={modalParams}
       >
-        <AddIntegration
-          provider={provider}
-          onInstall={onAddIntegration}
-          organization={organization}
-          analyticsParams={analyticsParams}
-          modalParams={modalParams}
-        >
-          {onClick => (
-            <Button
-              disabled={!provider.canAdd}
-              {...buttonProps}
-              onClick={() => onClick()}
-              aria-label={t('Add integration')}
-            >
-              {label}
-            </Button>
-          )}
-        </AddIntegration>
-      </Tooltip>
-    );
-  }
+        {onClick => (
+          <Button
+            disabled={!provider.canAdd}
+            {...buttonProps}
+            onClick={() => onClick()}
+            aria-label={t('Add integration')}
+          >
+            {label}
+          </Button>
+        )}
+      </AddIntegration>
+    </Tooltip>
+  );
 }

static/app/views/organizationIntegrations/installedIntegration.tsx

@@ -14,7 +14,7 @@ import space from 'sentry/styles/space';
 import {Integration, IntegrationProvider, ObjectStatus, Organization} from 'sentry/types';
 import {IntegrationAnalyticsKey} from 'sentry/utils/analytics/integrations';
 
-import AddIntegrationButton from './addIntegrationButton';
+import {AddIntegrationButton} from './addIntegrationButton';
 import IntegrationItem from './integrationItem';
 
 type Props = {

static/app/views/organizationIntegrations/integrationDetailedView.tsx

@@ -15,7 +15,7 @@ import {getAlertText} from 'sentry/utils/integrationUtil';
 import withOrganization from 'sentry/utils/withOrganization';
 
 import AbstractIntegrationDetailedView from './abstractIntegrationDetailedView';
-import AddIntegrationButton from './addIntegrationButton';
+import {AddIntegrationButton} from './addIntegrationButton';
 import InstalledIntegration from './installedIntegration';
 
 const FirstPartyIntegrationAlert = HookOrDefault({

static/app/views/projectInstall/platformIntegrationSetup.tsx

@@ -18,7 +18,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import FirstEventFooter from 'sentry/views/onboarding/components/firstEventFooter';
 import AddInstallationInstructions from 'sentry/views/onboarding/components/integrations/addInstallationInstructions';
 import PostInstallCodeSnippet from 'sentry/views/onboarding/components/integrations/postInstallCodeSnippet';
-import AddIntegrationButton from 'sentry/views/organizationIntegrations/addIntegrationButton';
+import {AddIntegrationButton} from 'sentry/views/organizationIntegrations/addIntegrationButton';
 
 import PlatformHeaderButtonBar from './components/platformHeaderButtonBar';
 

tests/js/spec/views/settings/organizationIntegrations/addIntegrationButton.spec.jsx

@@ -1,27 +0,0 @@
-/* global global */
-import {mountWithTheme} from 'sentry-test/enzyme';
-
-import AddIntegrationButton from 'sentry/views/organizationIntegrations/addIntegrationButton';
-
-describe('AddIntegrationButton', function () {
-  const provider = TestStubs.GitHubIntegrationProvider();
-
-  it('Opens the setup dialog on click', function () {
-    const onAdd = jest.fn();
-
-    const focus = jest.fn();
-    const open = jest.fn().mockReturnValue({focus});
-    global.open = open;
-
-    const wrapper = mountWithTheme(
-      <AddIntegrationButton provider={provider} onAddIntegration={onAdd} />
-    );
-
-    wrapper.find('Button').simulate('click');
-    expect(open.mock.calls).toHaveLength(1);
-    expect(focus.mock.calls).toHaveLength(1);
-    expect(open.mock.calls[0][2]).toBe(
-      'scrollbars=yes,width=100,height=100,top=334,left=462'
-    );
-  });
-});

tests/js/spec/views/settings/organizationIntegrations/addIntegrationButton.spec.tsx

@@ -0,0 +1,30 @@
+/* global global */
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {AddIntegrationButton} from 'sentry/views/organizationIntegrations/addIntegrationButton';
+
+describe('AddIntegrationButton', function () {
+  const provider = TestStubs.GitHubIntegrationProvider();
+
+  it('Opens the setup dialog on click', function () {
+    const focus = jest.fn();
+    const open = jest.fn().mockReturnValue({focus, close: jest.fn()});
+    // any is needed here because getSentry has different types for global
+    (global as any).open = open;
+
+    render(
+      <AddIntegrationButton
+        provider={provider}
+        onAddIntegration={jest.fn()}
+        organization={TestStubs.Organization()}
+      />
+    );
+
+    userEvent.click(screen.getByLabelText('Add integration'));
+    expect(open.mock.calls).toHaveLength(1);
+    expect(focus.mock.calls).toHaveLength(1);
+    expect(open.mock.calls[0][2]).toBe(
+      'scrollbars=yes,width=100,height=100,top=334,left=462'
+    );
+  });
+});