refactor tests to use renderInTestApp

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx

@@ -16,11 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   lighthouseApiRef,
   LighthouseRestApi,
@@ -30,36 +27,18 @@ import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import * as data from '../../__fixtures__/website-list-response.json';
 import { AuditListForEntity } from './AuditListForEntity';
 
-import { ApiProvider } from '@backstage/core-app-api';
-import { errorApiRef } from '@backstage/core-plugin-api';
-import { TestApiRegistry } from '@backstage/test-utils';
-
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
 }));
 
+const useWebsiteForEntityMock = useWebsiteForEntity as jest.Mock;
+
 const websiteListResponse = data as WebsiteListResponse;
 const entityWebsite = websiteListResponse.items[0];
 
 describe('<AuditListTableForEntity />', () => {
-  let apis: TestApiRegistry;
-
-  const mockErrorApi: jest.Mocked<typeof errorApiRef.T> = {
-    post: jest.fn(),
-    error$: jest.fn(),
-  };
-
-  beforeEach(() => {
-    apis = TestApiRegistry.from(
-      [lighthouseApiRef, new LighthouseRestApi('http://lighthouse')],
-      [errorApiRef, mockErrorApi],
-    );
-
-    (useWebsiteForEntity as jest.Mock).mockReturnValue({
-      value: entityWebsite,
-      loading: false,
-      error: null,
-    });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   const entity: Entity = {
@@ -78,66 +57,55 @@ describe('<AuditListTableForEntity />', () => {
     },
   };
 
-  const subject = () =>
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <ApiProvider apis={apis}>
-            <EntityProvider entity={entity}>
-              <AuditListForEntity />
-            </EntityProvider>
-          </ApiProvider>
-        </MemoryRouter>
-      </ThemeProvider>,
-    );
+  const subject = () => (
+    <TestApiProvider
+      apis={[[lighthouseApiRef, new LighthouseRestApi('http://lighthouse')]]}
+    >
+      <EntityProvider entity={entity}>
+        <AuditListForEntity />
+      </EntityProvider>
+    </TestApiProvider>
+  );
 
   it('renders the audit list for the entity', async () => {
-    const { findByText } = subject();
+    useWebsiteForEntityMock.mockReturnValue({
+      value: entityWebsite,
+      loading: false,
+      error: null,
+    });
+    const { findByText } = await renderInTestApp(subject());
     expect(await findByText(entityWebsite.url)).toBeInTheDocument();
   });
 
-  describe('where the data is loading', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: true,
-        error: null,
-      });
+  it('renders a Progress element where the data is loading', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: true,
+      error: null,
     });
 
-    it('renders a Progress element', async () => {
-      const { findByTestId } = subject();
-      expect(await findByTestId('progress')).toBeInTheDocument();
-    });
+    const { findByTestId } = await renderInTestApp(subject());
+    expect(await findByTestId('progress')).toBeInTheDocument();
   });
 
-  describe('where there is an error loading data', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: false,
-        error: 'error',
-      });
-    });
-
-    it('renders nothing', async () => {
-      const { queryByTestId } = subject();
-      expect(queryByTestId('AuditListTable')).toBeNull();
+  it('renders nothing where there is an error loading data', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: false,
+      error: 'error',
     });
+    const { queryByTestId } = await renderInTestApp(subject());
+    expect(queryByTestId('AuditListTable')).toBeNull();
   });
 
-  describe('where there is not data', () => {
-    beforeEach(() => {
-      (useWebsiteForEntity as jest.Mock).mockReturnValue({
-        value: null,
-        loading: false,
-        error: null,
-      });
+  it('renders nothing where there is not data', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: false,
+      error: null,
     });
 
-    it('renders nothing', async () => {
-      const { queryByTestId } = subject();
-      expect(queryByTestId('AuditListTable')).toBeNull();
-    });
+    const { queryByTestId } = await renderInTestApp(subject());
+    expect(queryByTestId('AuditListTable')).toBeNull();
   });
 });

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx

@@ -16,11 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   AuditCompleted,
   LighthouseCategoryId,
@@ -64,22 +61,15 @@ describe('<LastLighthouseAuditCard />', () => {
     },
   };
 
-  const subject = () =>
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <EntityProvider entity={entity}>
-            <LastLighthouseAuditCard />
-          </EntityProvider>
-        </MemoryRouter>
-      </ThemeProvider>,
-    );
-
   describe('where the last audit completed successfully', () => {
     const audit = entityWebsite.lastAudit as AuditCompleted;
 
     it('renders the performance data for the audit', async () => {
-      const { findByText } = subject();
+      const { findByText } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByText(audit.url)).toBeInTheDocument();
       expect(await findByText(audit.status)).toBeInTheDocument();
       for (const category of Object.keys(audit.categories)) {
@@ -101,7 +91,11 @@ describe('<LastLighthouseAuditCard />', () => {
       });
 
       it('renders the performance data for the audit', async () => {
-        const { findByText } = subject();
+        const { findByText } = await renderInTestApp(
+          <EntityProvider entity={entity}>
+            <LastLighthouseAuditCard />
+          </EntityProvider>,
+        );
         expect(await findByText('N/A')).toBeInTheDocument();
       });
     });
@@ -119,7 +113,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders the url and status of the audit', async () => {
-      const { findByText } = subject();
+      const { findByText } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByText(audit.url)).toBeInTheDocument();
       expect(await findByText(audit.status)).toBeInTheDocument();
     });
@@ -135,7 +133,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders a Progress element', async () => {
-      const { findByTestId } = subject();
+      const { findByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(await findByTestId('progress')).toBeInTheDocument();
     });
   });
@@ -150,7 +152,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders nothing', async () => {
-      const { queryByTestId } = subject();
+      const { queryByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(queryByTestId('AuditListTable')).toBeNull();
     });
   });
@@ -165,7 +171,11 @@ describe('<LastLighthouseAuditCard />', () => {
     });
 
     it('renders nothing', async () => {
-      const { queryByTestId } = subject();
+      const { queryByTestId } = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
       expect(queryByTestId('AuditListTable')).toBeNull();
     });
   });