ref(test): Convert API Application to RTL + TS (#38993)

static/app/views/settings/account/apiApplications/index.spec.jsx

@@ -1,89 +0,0 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {initializeOrg} from 'sentry-test/initializeOrg';
-
-import ApiApplications from 'sentry/views/settings/account/apiApplications';
-
-describe('ApiApplications', function () {
-  let requestMock;
-  let wrapper;
-  const {router, routerContext} = initializeOrg();
-
-  const createWrapper = props => {
-    wrapper = mountWithTheme(
-      <ApiApplications {...props} router={router} />,
-      routerContext
-    );
-  };
-
-  beforeEach(function () {
-    MockApiClient.clearMockResponses();
-    requestMock = MockApiClient.addMockResponse({
-      url: '/api-applications/',
-      body: [TestStubs.ApiApplication()],
-    });
-  });
-
-  afterEach(function () {
-    if (wrapper) {
-      wrapper.unmount();
-      wrapper = null;
-    }
-  });
-
-  it('renders empty', function () {
-    requestMock = MockApiClient.addMockResponse({
-      url: '/api-applications/',
-      body: [],
-    });
-    createWrapper();
-    expect(wrapper.find('EmptyMessage')).toHaveLength(1);
-  });
-
-  it('renders', function () {
-    createWrapper();
-
-    expect(requestMock).toHaveBeenCalled();
-
-    expect(wrapper.find('Row')).toHaveLength(1);
-  });
-
-  it('creates application', async function () {
-    const createApplicationRequest = MockApiClient.addMockResponse({
-      url: '/api-applications/',
-      body: TestStubs.ApiApplication({
-        id: '234',
-      }),
-      method: 'POST',
-    });
-    createWrapper();
-
-    wrapper.find('button[aria-label="Create New Application"]').simulate('click');
-
-    await tick();
-
-    expect(createApplicationRequest).toHaveBeenCalledWith(
-      '/api-applications/',
-      expect.objectContaining({method: 'POST'})
-    );
-    expect(router.push).toHaveBeenLastCalledWith(
-      '/settings/account/api/applications/234/'
-    );
-  });
-
-  it('deletes application', async function () {
-    const deleteApplicationRequest = MockApiClient.addMockResponse({
-      url: '/api-applications/123/',
-      method: 'DELETE',
-    });
-    createWrapper();
-
-    wrapper.find('button[aria-label="Remove"]').simulate('click');
-    await tick();
-    wrapper.update();
-    expect(deleteApplicationRequest).toHaveBeenCalledWith(
-      '/api-applications/123/',
-      expect.objectContaining({method: 'DELETE'})
-    );
-    expect(wrapper.find('EmptyMessage')).toHaveLength(1);
-  });
-});

static/app/views/settings/account/apiApplications/index.spec.tsx

@@ -0,0 +1,123 @@
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import ApiApplications from 'sentry/views/settings/account/apiApplications';
+
+describe('ApiApplications', function () {
+  it('renders empty', function () {
+    const {router} = initializeOrg();
+
+    MockApiClient.addMockResponse({
+      url: '/api-applications/',
+      body: [],
+    });
+
+    render(
+      <ApiApplications
+        router={router}
+        params={{}}
+        location={router.location}
+        routes={router.routes}
+        route={{}}
+        routeParams={{}}
+      />
+    );
+
+    expect(
+      screen.getByText("You haven't created any applications yet.")
+    ).toBeInTheDocument();
+  });
+
+  it('renders', function () {
+    const {router} = initializeOrg();
+
+    const requestMock = MockApiClient.addMockResponse({
+      url: '/api-applications/',
+      body: [TestStubs.ApiApplication()],
+    });
+
+    render(
+      <ApiApplications
+        router={router}
+        params={{}}
+        location={router.location}
+        routes={router.routes}
+        route={{}}
+        routeParams={{}}
+      />
+    );
+
+    expect(requestMock).toHaveBeenCalled();
+
+    expect(screen.getByText('Adjusted Shrimp')).toBeInTheDocument();
+  });
+
+  it('creates application', async function () {
+    const {router} = initializeOrg();
+
+    const createApplicationRequest = MockApiClient.addMockResponse({
+      url: '/api-applications/',
+      body: TestStubs.ApiApplication({
+        id: '234',
+      }),
+      method: 'POST',
+    });
+
+    render(
+      <ApiApplications
+        router={router}
+        params={{}}
+        location={router.location}
+        routes={router.routes}
+        route={{}}
+        routeParams={{}}
+      />
+    );
+
+    userEvent.click(screen.getByLabelText('Create New Application'));
+
+    expect(createApplicationRequest).toHaveBeenCalledWith(
+      '/api-applications/',
+      expect.objectContaining({method: 'POST'})
+    );
+
+    await waitFor(() => {
+      expect(router.push).toHaveBeenLastCalledWith(
+        '/settings/account/api/applications/234/'
+      );
+    });
+  });
+
+  it('deletes application', async function () {
+    const deleteApplicationRequest = MockApiClient.addMockResponse({
+      url: '/api-applications/123/',
+      method: 'DELETE',
+    });
+
+    const {router} = initializeOrg();
+
+    render(
+      <ApiApplications
+        router={router}
+        params={{}}
+        location={router.location}
+        routes={router.routes}
+        route={{}}
+        routeParams={{}}
+      />
+    );
+
+    userEvent.click(screen.getByLabelText('Remove'));
+
+    expect(deleteApplicationRequest).toHaveBeenCalledWith(
+      '/api-applications/123/',
+      expect.objectContaining({method: 'DELETE'})
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("You haven't created any applications yet.")
+      ).toBeInTheDocument();
+    });
+  });
+});

static/app/views/settings/account/apiApplications/index.tsx

@@ -41,7 +41,7 @@ class ApiApplications extends AsyncView<Props, State> {
 
       addSuccessMessage(t('Created a new API Application'));
       this.props.router.push(`${ROUTE_PREFIX}applications/${app.id}/`);
-    } catch (_err) {
+    } catch {
       addErrorMessage(t('Unable to remove application. Please try again.'));
     }
   };
@@ -53,22 +53,23 @@ class ApiApplications extends AsyncView<Props, State> {
   };
 
   renderBody() {
-    const action = (
-      <Button
-        priority="primary"
-        size="sm"
-        onClick={this.handleCreateApplication}
-        icon={<IconAdd size="xs" isCircled />}
-      >
-        {t('Create New Application')}
-      </Button>
-    );
-
     const isEmpty = this.state.appList.length === 0;
 
     return (
       <div>
-        <SettingsPageHeader title="API Applications" action={action} />
+        <SettingsPageHeader
+          title="API Applications"
+          action={
+            <Button
+              priority="primary"
+              size="sm"
+              onClick={this.handleCreateApplication}
+              icon={<IconAdd size="xs" isCircled />}
+            >
+              {t('Create New Application')}
+            </Button>
+          }
+        />
 
         <Panel>
           <PanelHeader>{t('Application Name')}</PanelHeader>