packages/test-utils: do app wrapping with actual app + remove wrapInThemedTestApp

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

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
 
 import AuditListTable from './AuditListTable';
@@ -50,12 +50,10 @@ describe('AuditListTable', () => {
     );
   };
   it('renders the link to each website', () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
     const link = rendered.queryByText('https://anchor.fm');
     const website = websiteListResponse.items.find(
-      (w) => w.url === 'https://anchor.fm',
+      w => w.url === 'https://anchor.fm',
     );
     if (!website)
       throw new Error('https://anchor.fm must be present in fixture');
@@ -67,11 +65,9 @@ describe('AuditListTable', () => {
   });
 
   it('renders the dates that are available for a given row', () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
     const website = websiteListResponse.items.find(
-      (w) => w.url === 'https://anchor.fm',
+      w => w.url === 'https://anchor.fm',
     );
     if (!website)
       throw new Error('https://anchor.fm must be present in fixture');
@@ -81,35 +77,30 @@ describe('AuditListTable', () => {
   });
 
   it('renders the status for a given row', async () => {
-    const rendered = render(
-      wrapInThemedTestApp(auditList(websiteListResponse)),
-    );
+    const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
 
     const completed = await rendered.findAllByText('COMPLETED');
     expect(completed).toHaveLength(
-      websiteListResponse.items.filter(
-        (w) => w.lastAudit.status === 'COMPLETED',
-      ).length,
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'COMPLETED')
+        .length,
     );
 
     const failed = await rendered.findAllByText('FAILED');
     expect(failed).toHaveLength(
-      websiteListResponse.items.filter((w) => w.lastAudit.status === 'FAILED')
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'FAILED')
         .length,
     );
 
     const running = await rendered.findAllByText('FAILED');
     expect(running).toHaveLength(
-      websiteListResponse.items.filter((w) => w.lastAudit.status === 'RUNNING')
+      websiteListResponse.items.filter(w => w.lastAudit.status === 'RUNNING')
         .length,
     );
   });
 
   describe('sparklines', () => {
     it('correctly maps the data from the website payload', () => {
-      const rendered = render(
-        wrapInThemedTestApp(auditList(websiteListResponse)),
-      );
+      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
       const backstageSEO = rendered.getByTitle(
         'trendline for SEO category of https://backstage.io',
       );
@@ -117,9 +108,7 @@ describe('AuditListTable', () => {
     });
 
     it('does not break when no data is available', () => {
-      const rendered = render(
-        wrapInThemedTestApp(auditList(websiteListResponse)),
-      );
+      const rendered = render(wrapInTestApp(auditList(websiteListResponse)));
       const anchorSEO = rendered.queryByTitle(
         'trendline for SEO category of https://anchor.fm',
       );

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

@@ -27,11 +27,10 @@ jest.mock('react-router-dom', () => {
 });
 
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import mockFetch from 'jest-fetch-mock';
 import { render, fireEvent } from '@testing-library/react';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
-import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import {
   lighthouseApiRef,
@@ -57,7 +56,7 @@ describe('AuditList', () => {
 
   it('should render the table', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditList />
         </ApiProvider>,
@@ -69,7 +68,7 @@ describe('AuditList', () => {
 
   it('renders a link to create a new audit', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditList />
         </ApiProvider>,
@@ -87,12 +86,11 @@ describe('AuditList', () => {
     it('requests the correct limit and offset from the api based on the query', () => {
       mockFetch.mockClear();
       render(
-        wrapInTheme(
-          <MemoryRouter initialEntries={['/lighthouse?page=2']}>
-            <ApiProvider apis={apis}>
-              <AuditList />
-            </ApiProvider>
-          </MemoryRouter>,
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <AuditList />
+          </ApiProvider>,
+          { routeEntries: ['/lighthouse?page=2'] },
         ),
       );
       expect(mockFetch).toHaveBeenLastCalledWith(
@@ -104,7 +102,7 @@ describe('AuditList', () => {
     describe('when only one page is needed', () => {
       it('hides pagination elements', () => {
         const rendered = render(
-          wrapInThemedTestApp(
+          wrapInTestApp(
             <ApiProvider apis={apis}>
               <AuditList />
             </ApiProvider>,
@@ -125,7 +123,7 @@ describe('AuditList', () => {
 
       it('shows pagination elements', async () => {
         const rendered = render(
-          wrapInThemedTestApp(
+          wrapInTestApp(
             <ApiProvider apis={apis}>
               <AuditList />
             </ApiProvider>,
@@ -138,12 +136,11 @@ describe('AuditList', () => {
 
       it('changes the page on click', async () => {
         const rendered = render(
-          wrapInTheme(
-            <MemoryRouter initialEntries={['/lighthouse?page=2']}>
-              <ApiProvider apis={apis}>
-                <AuditList />
-              </ApiProvider>
-            </MemoryRouter>,
+          wrapInTestApp(
+            <ApiProvider apis={apis}>
+              <AuditList />
+            </ApiProvider>,
+            { routeEntries: ['/lighthouse?page=2'] },
           ),
         );
         const element = await rendered.findByLabelText(/Go to page 1/);
@@ -157,7 +154,7 @@ describe('AuditList', () => {
     it('should render the loader', async () => {
       mockFetch.mockResponseOnce(() => new Promise(() => {}));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditList />
           </ApiProvider>,
@@ -172,7 +169,7 @@ describe('AuditList', () => {
     it('should render an error', async () => {
       mockFetch.mockRejectOnce(new Error('failed to fetch'));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditList />
           </ApiProvider>,

plugins/lighthouse/src/components/AuditView/index.test.tsx

@@ -27,7 +27,7 @@ jest.mock('react-router-dom', () => {
 import React from 'react';
 import mockFetch from 'jest-fetch-mock';
 import { render } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { ApiRegistry, ApiProvider } from '@backstage/core';
 
 import AuditView from '.';
@@ -56,7 +56,7 @@ describe('AuditView', () => {
 
   it('renders the iframe for the selected audit', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditView />
         </ApiProvider>,
@@ -72,7 +72,7 @@ describe('AuditView', () => {
 
   it('renders a link to create a new audit for this website', async () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <AuditView />
         </ApiProvider>,
@@ -92,7 +92,7 @@ describe('AuditView', () => {
   describe('sidebar', () => {
     it('renders a list of all audits for the website', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -110,7 +110,7 @@ describe('AuditView', () => {
 
     it('sets the current audit as active', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -138,7 +138,7 @@ describe('AuditView', () => {
 
     it('navigates to the next report when an audit is clicked', async () => {
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -160,7 +160,7 @@ describe('AuditView', () => {
     it('it shows the loading', async () => {
       mockFetch.mockImplementationOnce(() => new Promise(() => {}));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -174,7 +174,7 @@ describe('AuditView', () => {
     it('it shows an error', async () => {
       mockFetch.mockRejectOnce(new Error('failed to fetch'));
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -191,7 +191,7 @@ describe('AuditView', () => {
       useParams.mockReturnValueOnce({ id });
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,
@@ -211,7 +211,7 @@ describe('AuditView', () => {
       useParams.mockReturnValueOnce({ id });
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <AuditView />
           </ApiProvider>,

plugins/lighthouse/src/components/CreateAudit/index.test.tsx

@@ -29,14 +29,13 @@ jest.mock('react-router-dom', () => {
 import React from 'react';
 import mockFetch from 'jest-fetch-mock';
 import { wait, render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
 import {
   ApiRegistry,
   ApiProvider,
   ErrorApi,
   errorApiRef,
 } from '@backstage/core';
-import { wrapInThemedTestApp, wrapInTheme } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import { lighthouseApiRef, LighthouseRestApi, Audit } from '../../api';
 import CreateAudit from '.';
@@ -62,7 +61,7 @@ describe('CreateAudit', () => {
 
   it('renders the form', () => {
     const rendered = render(
-      wrapInThemedTestApp(
+      wrapInTestApp(
         <ApiProvider apis={apis}>
           <CreateAudit />
         </ApiProvider>,
@@ -77,16 +76,15 @@ describe('CreateAudit', () => {
     it('prefills the url into the form', () => {
       const url = 'https://spotify.com';
       const rendered = render(
-        wrapInTheme(
-          <MemoryRouter
-            initialEntries={[
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <CreateAudit />
+          </ApiProvider>,
+          {
+            routeEntries: [
               `/lighthouse/create-audit?url=${encodeURIComponent(url)}`,
-            ]}
-          >
-            <ApiProvider apis={apis}>
-              <CreateAudit />
-            </ApiProvider>
-          </MemoryRouter>,
+            ],
+          },
         ),
       );
       expect(rendered.getByLabelText(/URL/)).toHaveAttribute('value', url);
@@ -98,7 +96,7 @@ describe('CreateAudit', () => {
       mockFetch.mockResponseOnce(() => new Promise(() => {}));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,
@@ -121,7 +119,7 @@ describe('CreateAudit', () => {
       mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,
@@ -152,7 +150,7 @@ describe('CreateAudit', () => {
       mockFetch.mockRejectOnce(new Error('failed to post'));
 
       const rendered = render(
-        wrapInThemedTestApp(
+        wrapInTestApp(
           <ApiProvider apis={apis}>
             <CreateAudit />
           </ApiProvider>,

plugins/lighthouse/src/components/Intro/index.test.tsx

@@ -18,13 +18,13 @@
 
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 import LighthouseIntro from '.';
 
 describe('LighthouseIntro', () => {
   it('renders successfully', () => {
-    const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+    const rendered = render(wrapInTestApp(<LighthouseIntro />));
     expect(
       rendered.queryByText('Welcome to Lighthouse in Backstage!'),
     ).toBeInTheDocument();
@@ -35,13 +35,13 @@ describe('LighthouseIntro', () => {
     const secondTabRe = /you will need a running instance of/;
 
     it('selects the first text element', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       expect(rendered.queryByText(firstTabRe)).toBeInTheDocument();
       expect(rendered.queryByText(secondTabRe)).not.toBeInTheDocument();
     });
 
     it('shows the other text when the tab is clicked', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       fireEvent.click(rendered.getByText('Setup'));
       expect(rendered.queryByText(firstTabRe)).not.toBeInTheDocument();
       expect(rendered.queryByText(secondTabRe)).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe('LighthouseIntro', () => {
 
   describe('closing', () => {
     it('hides the content on click', () => {
-      const rendered = render(wrapInThemedTestApp(<LighthouseIntro />));
+      const rendered = render(wrapInTestApp(<LighthouseIntro />));
       const welcomeMessage = rendered.queryByText(
         'Welcome to Lighthouse in Backstage!',
       );