test(ui): Convert application dashboard to RTL (#40725)

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/index.spec.jsx

@@ -1,24 +1,21 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {render, screen, within} from 'sentry-test/reactTestingLibrary';
 
-import {Client} from 'sentry/api';
-import SentryApplicationDashboard from 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationDashboard';
+import SentryApplicationDashboard from './index';
+
+jest.mock('sentry/components/charts/baseChart', () => {
+  return jest.fn().mockImplementation(() => <div data-test-id="chart" />);
+});
 
 describe('Sentry Application Dashboard', function () {
   const NUM_INSTALLS = 5;
   const NUM_UNINSTALLS = 2;
 
-  let org;
-  let orgId;
+  const org = TestStubs.Organization();
   let sentryApp;
-  let request;
-
-  let wrapper;
+  let webhookRequest;
 
-  beforeEach(() => {
-    Client.clearMockResponses();
-
-    org = TestStubs.Organization();
-    orgId = org.slug;
+  afterEach(() => {
+    MockApiClient.clearMockResponses();
   });
 
   describe('Viewing the Sentry App Dashboard for a published integration', () => {
@@ -36,9 +33,9 @@ describe('Sentry Application Dashboard', function () {
           ],
         },
       });
-      request = TestStubs.SentryAppWebhookRequest();
+      webhookRequest = TestStubs.SentryAppWebhookRequest();
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/stats/`,
         body: {
           totalInstalls: NUM_INSTALLS,
@@ -48,12 +45,12 @@ describe('Sentry Application Dashboard', function () {
         },
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/requests/`,
-        body: [request],
+        body: [webhookRequest],
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/interaction/`,
         body: {
           componentInteractions: {
@@ -64,106 +61,55 @@ describe('Sentry Application Dashboard', function () {
         },
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/`,
         body: sentryApp,
       });
-
-      wrapper = mountWithTheme(
-        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId}} />
-      );
     });
 
     it('shows the total install/uninstall stats', () => {
-      const installsStat = wrapper
-        .find('StatsSection')
-        .filterWhere(h => h.text().includes('Total installs'))
-        .find('p');
-
-      const uninstallsStat = wrapper
-        .find('StatsSection')
-        .filterWhere(h => h.text().includes('Total uninstalls'))
-        .find('p');
-
-      expect(installsStat.text()).toEqual(`${NUM_INSTALLS}`);
-      expect(uninstallsStat.text()).toEqual(`${NUM_UNINSTALLS}`);
-    });
-
-    it('shows the installation stats in a graph', () => {
-      const chart = wrapper.find('BarChart');
-      const chartSeries = chart.props().series;
-
-      expect(chart.exists()).toBeTruthy();
-      expect(chartSeries).toHaveLength(2);
-      expect(chartSeries).toContainEqual({
-        data: [{name: 1569783600 * 1000, value: NUM_INSTALLS}],
-        seriesName: 'installed',
-      });
-      expect(chartSeries).toContainEqual({
-        data: [{name: 1569783600 * 1000, value: NUM_UNINSTALLS}],
-        seriesName: 'uninstalled',
-      });
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
+      );
+      expect(screen.getByTestId('installs')).toHaveTextContent('Total installs5');
+      expect(screen.getByTestId('uninstalls')).toHaveTextContent('Total uninstalls2');
     });
 
     it('shows the request log', () => {
-      const requestLog = wrapper.find('PanelBody');
-      const requestLogText = requestLog.find('PanelItem').text();
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
+      );
       // The mock response has 1 request
-      expect(requestLog.find('PanelItem')).toHaveLength(1);
+      expect(screen.getByTestId('request-item')).toBeInTheDocument();
+      const requestLog = within(screen.getByTestId('request-item'));
       // Make sure that all the info is displayed
-      expect(requestLogText).toEqual(
-        expect.stringContaining('https://example.com/webhook')
-      );
-      expect(requestLogText).toEqual(expect.stringContaining('400'));
-      expect(requestLogText).toEqual(expect.stringContaining('issue.assigned'));
-      expect(requestLogText).toEqual(expect.stringContaining('Test Org'));
+      expect(requestLog.getByText('https://example.com/webhook')).toBeInTheDocument();
+      expect(requestLog.getByText('400')).toBeInTheDocument();
+      expect(requestLog.getByText('issue.assigned')).toBeInTheDocument();
+      expect(requestLog.getByText('Test Org')).toBeInTheDocument();
     });
 
     it('shows an empty message if there are no requests', () => {
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/requests/`,
         body: [],
       });
 
-      wrapper = mountWithTheme(
-        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId}} />
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
       );
 
-      expect(wrapper.find('PanelBody').exists('PanelItem')).toBeFalsy();
-      expect(wrapper.find('EmptyMessage').text()).toEqual(
-        expect.stringContaining('No requests found in the last 30 days.')
-      );
+      expect(
+        screen.getByText('No requests found in the last 30 days.')
+      ).toBeInTheDocument();
     });
 
-    it('shows the integration views in a line chart', () => {
-      const chart = wrapper
-        .find('Panel')
-        .filterWhere(h => h.text().includes('Integration Views'))
-        .find('LineChart');
-      const chartData = chart.props().series[0].data;
-
-      expect(chart.exists()).toBeTruthy();
-      expect(chartData).toHaveLength(1);
-      expect(chartData).toContainEqual({name: 1569783600 * 1000, value: 1});
-    });
-
-    it('shows the component interactions in a line chart', () => {
-      const chart = wrapper
-        .find('Panel')
-        .filterWhere(h => h.text().includes('Component Interactions'))
-        .find('LineChart');
-      const chartSeries = chart.props().series;
+    it('shows integration and interactions chart', () => {
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
+      );
 
-      expect(chart.exists()).toBeTruthy();
-      expect(chartSeries).toHaveLength(2);
-      expect(chartSeries).toContainEqual({
-        data: [{name: 1569783600 * 1000, value: 1}],
-        seriesName: 'stacktrace-link',
-      });
-      expect(chartSeries).toContainEqual({
-        data: [{name: 1569783600 * 1000, value: 1}],
-        seriesName: 'issue-link',
-      });
+      expect(screen.getAllByTestId('chart')).toHaveLength(3);
     });
   });
 
@@ -175,9 +121,9 @@ describe('Sentry Application Dashboard', function () {
           elements: [{type: 'stacktrace-link', uri: '/test'}],
         },
       });
-      request = TestStubs.SentryAppWebhookRequest();
+      webhookRequest = TestStubs.SentryAppWebhookRequest();
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/stats/`,
         body: {
           totalInstalls: 1,
@@ -187,12 +133,12 @@ describe('Sentry Application Dashboard', function () {
         },
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/requests/`,
-        body: [request],
+        body: [webhookRequest],
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/interaction/`,
         body: {
           componentInteractions: {
@@ -202,68 +148,48 @@ describe('Sentry Application Dashboard', function () {
         },
       });
 
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/`,
         body: sentryApp,
       });
-
-      wrapper = mountWithTheme(
-        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId}} />
-      );
-    });
-
-    it('does not show the installation stats or graph', () => {
-      expect(wrapper.exists('StatsSection')).toBeFalsy();
-      expect(wrapper.exists('BarChart')).toBeFalsy();
     });
 
     it('shows the request log', () => {
-      const requestLog = wrapper.find('PanelBody');
-      const requestLogText = requestLog.find('PanelItem').text();
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
+      );
       // The mock response has 1 request
-      expect(requestLog.find('PanelItem')).toHaveLength(1);
+      expect(screen.getByTestId('request-item')).toBeInTheDocument();
+      const requestLog = within(screen.getByTestId('request-item'));
       // Make sure that all the info is displayed
-      expect(requestLogText).toEqual(
-        expect.stringContaining('https://example.com/webhook')
-      );
-      expect(requestLogText).toEqual(expect.stringContaining('400'));
-      expect(requestLogText).toEqual(expect.stringContaining('issue.assigned'));
+      expect(requestLog.getByText('https://example.com/webhook')).toBeInTheDocument();
+      expect(requestLog.getByText('400')).toBeInTheDocument();
+      expect(requestLog.getByText('issue.assigned')).toBeInTheDocument();
+
+      // Does not show the integration views
+      expect(screen.queryByText('Integration Views')).not.toBeInTheDocument();
     });
 
     it('shows an empty message if there are no requests', () => {
-      Client.addMockResponse({
+      MockApiClient.addMockResponse({
         url: `/sentry-apps/${sentryApp.slug}/requests/`,
         body: [],
       });
 
-      wrapper = mountWithTheme(
-        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId}} />
-      );
-
-      expect(wrapper.find('PanelBody').exists('PanelItem')).toBeFalsy();
-      expect(wrapper.find('EmptyMessage').text()).toEqual(
-        expect.stringContaining('No requests found in the last 30 days.')
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
       );
-    });
-
-    it('does not show the integration views', () => {
-      const chart = wrapper.findWhere(h => h.text().includes('Integration Views'));
-      expect(chart.exists()).toBeFalsy();
+      expect(
+        screen.getByText('No requests found in the last 30 days.')
+      ).toBeInTheDocument();
     });
 
     it('shows the component interactions in a line chart', () => {
-      const chart = wrapper
-        .find('Panel')
-        .filterWhere(h => h.text().includes('Component Interactions'))
-        .find('LineChart');
-      const chartSeries = chart.props().series;
+      render(
+        <SentryApplicationDashboard params={{appSlug: sentryApp.slug, orgId: org.slug}} />
+      );
 
-      expect(chart.exists()).toBeTruthy();
-      expect(chartSeries).toHaveLength(1);
-      expect(chartSeries).toContainEqual({
-        data: [{name: 1569783600 * 1000, value: 1}],
-        seriesName: 'stacktrace-link',
-      });
+      expect(screen.getByTestId('chart')).toBeInTheDocument();
     });
   });
 });

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/index.tsx

@@ -74,11 +74,11 @@ export default class SentryApplicationDashboard extends AsyncView<Props, State>
               <DateTime dateOnly date={app.datePublished} />
             </StatsSection>
           ) : null}
-          <StatsSection>
+          <StatsSection data-test-id="installs">
             <StatsHeader>{t('Total installs')}</StatsHeader>
             <p>{totalInstalls}</p>
           </StatsSection>
-          <StatsSection>
+          <StatsSection data-test-id="uninstalls">
             <StatsHeader>{t('Total uninstalls')}</StatsHeader>
             <p>{totalUninstalls}</p>
           </StatsSection>

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx

@@ -241,7 +241,7 @@ export default class RequestLog extends AsyncComponent<Props, State> {
             <PanelBody>
               {currentRequests.length > 0 ? (
                 currentRequests.map((request, idx) => (
-                  <PanelItem key={idx}>
+                  <PanelItem key={idx} data-test-id="request-item">
                     <TableLayout hasOrganization={app.status !== 'internal'}>
                       <TimestampLink date={request.date} link={request.errorUrl} />
                       <ResponseCode code={request.responseCode} />