ref(test): Convert projectPlugins to RTL (#40336)

static/app/views/settings/projectPlugins/index.spec.jsx

@@ -1,7 +1,7 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {getByRole, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {disablePlugin, enablePlugin, fetchPlugins} from 'sentry/actionCreators/plugins';
-import ProjectPlugins from 'sentry/views/settings/projectPlugins';
+import {ProjectPluginsContainer} from 'sentry/views/settings/projectPlugins';
 
 jest.mock('sentry/actionCreators/plugins', () => ({
   fetchPlugins: jest.fn().mockResolvedValue([]),
@@ -10,12 +10,20 @@ jest.mock('sentry/actionCreators/plugins', () => ({
 }));
 
 describe('ProjectPluginsContainer', function () {
-  let org, project, plugins, wrapper, params, organization;
+  let org, project, plugins, params, organization;
 
   beforeEach(function () {
     org = TestStubs.Organization();
     project = TestStubs.Project();
-    plugins = TestStubs.Plugins();
+    plugins = TestStubs.Plugins([
+      {
+        enabled: true,
+        id: 'disableable plugin',
+        name: 'Disableable Plugin',
+        slug: 'disableable plugin',
+        canDisable: true,
+      },
+    ]);
     params = {
       orgId: org.slug,
       projectId: project.slug,
@@ -48,8 +56,12 @@ describe('ProjectPluginsContainer', function () {
       url: `/projects/${org.slug}/${project.slug}/plugins/github/`,
       method: 'DELETE',
     });
-    wrapper = mountWithTheme(
-      <ProjectPlugins params={params} organization={organization} />
+    render(
+      <ProjectPluginsContainer
+        plugins={{plugins, loading: false}}
+        params={params}
+        organization={organization}
+      />
     );
   });
 
@@ -57,22 +69,26 @@ describe('ProjectPluginsContainer', function () {
     expect(fetchPlugins).toHaveBeenCalled();
   });
 
-  it('calls `enablePlugin` action creator when enabling plugin', function () {
-    const onChange = wrapper.find('ProjectPlugins').prop('onChange');
+  it('calls `enablePlugin` action creator when enabling plugin', async function () {
+    const pluginItem = (await screen.findByText('Amazon SQS')).parentElement.parentElement
+      .parentElement;
+    const button = getByRole(pluginItem, 'checkbox');
 
     expect(enablePlugin).not.toHaveBeenCalled();
 
-    onChange('pluginId', true);
+    userEvent.click(button);
 
     expect(enablePlugin).toHaveBeenCalled();
   });
 
-  it('calls `disablePlugin` action creator when disabling plugin', function () {
-    const onChange = wrapper.find('ProjectPlugins').prop('onChange');
+  it('calls `disablePlugin` action creator when disabling plugin', async function () {
+    const pluginItem = (await screen.findByText('Disableable Plugin')).parentElement
+      .parentElement.parentElement;
+    const button = getByRole(pluginItem, 'checkbox');
 
     expect(disablePlugin).not.toHaveBeenCalled();
 
-    onChange('pluginId', false);
+    userEvent.click(button);
 
     expect(disablePlugin).toHaveBeenCalled();
   });

static/app/views/settings/projectPlugins/index.tsx

@@ -73,4 +73,6 @@ class ProjectPluginsContainer extends Component<Props> {
   }
 }
 
+export {ProjectPluginsContainer};
+
 export default withPlugins(ProjectPluginsContainer);