refactor tests to use renderInTestApp

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

plugins/tech-radar/src/components/Radar/Radar.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import Radar, { Props } from './Radar';
@@ -48,12 +46,8 @@ describe('Radar', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <Radar {...minProps} />
-      </ThemeProvider>,
-    );
+  it('should render', async () => {
+    const rendered = await renderInTestApp(<Radar {...minProps} />);
 
     const svg = rendered.container.querySelector('svg');
     expect(svg).not.toBeNull();

plugins/tech-radar/src/components/RadarBubble/RadarBubble.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarBubble, { Props } from './RadarBubble';
@@ -38,13 +36,11 @@ describe('RadarBubble', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarBubble {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarBubble {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByText(minProps.text)).toBeInTheDocument();

plugins/tech-radar/src/components/RadarComponent.test.tsx

@@ -15,10 +15,7 @@
  */
 
 import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
-import { TestApiProvider, withLogCollector } from '@backstage/test-utils';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
 import { RadarComponent } from './RadarComponent';
@@ -36,7 +33,9 @@ describe('RadarComponent', () => {
   });
 
   class MockClient implements TechRadarApi {
+    constructor(private delay = 0) {}
     async load(): Promise<TechRadarLoaderResponse> {
+      await new Promise(resolve => setTimeout(resolve, this.delay));
       return {
         entries: [],
         quadrants: [],
@@ -45,87 +44,52 @@ describe('RadarComponent', () => {
     }
   }
 
-  const mockClient = new MockClient();
-
   it('should render a progress bar', async () => {
     jest.useFakeTimers();
 
-    const errorApi = { post: () => {} };
-    const { getByTestId, findByTestId } = render(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarComponent
-            width={1200}
-            height={800}
-            svgProps={{ 'data-testid': 'tech-radar-svg' }}
-          />
-        </TestApiProvider>
-      </ThemeProvider>,
+    const { findByTestId } = await renderInTestApp(
+      <TestApiProvider apis={[[techRadarApiRef, new MockClient(500)]]}>
+        <RadarComponent
+          width={1200}
+          height={800}
+          svgProps={{ 'data-testid': 'tech-radar-svg' }}
+        />
+      </TestApiProvider>,
     );
 
-    act(() => {
-      jest.advanceTimersByTime(250);
-    });
-    expect(getByTestId('progress')).toBeInTheDocument();
+    jest.advanceTimersByTime(250);
+    await expect(findByTestId('progress')).resolves.toBeInTheDocument();
+
+    jest.advanceTimersByTime(250);
+    await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
 
-    await findByTestId('tech-radar-svg');
     jest.useRealTimers();
   });
 
   it('should call the errorApi if load fails', async () => {
     const errorApi = { post: jest.fn() };
+    const mockClient = new MockClient();
     jest
       .spyOn(mockClient, 'load')
       .mockRejectedValue(new Error('404 Page Not Found'));
 
-    const { queryByTestId } = render(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarComponent
-            width={1200}
-            height={800}
-            svgProps={{ 'data-testid': 'tech-radar-svg' }}
-          />
-        </TestApiProvider>
-      </ThemeProvider>,
+    const { queryByTestId } = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [errorApiRef, errorApi],
+          [techRadarApiRef, mockClient],
+        ]}
+      >
+        <RadarComponent
+          width={1200}
+          height={800}
+          svgProps={{ 'data-testid': 'tech-radar-svg' }}
+        />
+      </TestApiProvider>,
     );
 
-    await waitFor(() => !queryByTestId('progress'));
-
     expect(errorApi.post).toHaveBeenCalledTimes(1);
     expect(errorApi.post).toHaveBeenCalledWith(new Error('404 Page Not Found'));
     expect(queryByTestId('tech-radar-svg')).not.toBeInTheDocument();
   });
-
-  it('should not render without errorApiRef', () => {
-    expect(
-      withLogCollector(['error'], () => {
-        expect(() => {
-          render(
-            <ThemeProvider theme={lightTheme}>
-              <TestApiProvider apis={[]}>
-                <RadarComponent
-                  width={1200}
-                  height={800}
-                  svgProps={{ 'data-testid': 'tech-radar-svg' }}
-                />
-              </TestApiProvider>
-            </ThemeProvider>,
-          );
-        }).toThrow();
-      }).error[0],
-    ).toMatchObject({
-      detail: new Error('No implementation available for apiRef{core.error}'),
-    });
-  });
 });

plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx

@@ -15,11 +15,10 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { screen } from '@testing-library/react';
 
 import { Props, RadarDescription } from './RadarDescription';
+import { renderInTestApp } from '@backstage/test-utils';
 
 const minProps: Props = {
   open: true,
@@ -29,12 +28,8 @@ const minProps: Props = {
 };
 
 describe('RadarDescription', () => {
-  it('should render', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <RadarDescription {...minProps} />
-      </ThemeProvider>,
-    );
+  it('should render', async () => {
+    await renderInTestApp(<RadarDescription {...minProps} />);
 
     const radarDescription = screen.getByTestId('radar-description');
     expect(radarDescription).toBeInTheDocument();

plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx

@@ -15,10 +15,9 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarEntry, { Props } from './RadarEntry';
@@ -45,13 +44,11 @@ describe('RadarEntry', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render link only', () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render link only', async () => {
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...minProps} />
+      </svg>,
     );
 
     const radarEntry = screen.getByTestId('radar-entry');
@@ -62,12 +59,10 @@ describe('RadarEntry', () => {
   });
 
   it('should render with description', async () => {
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...optionalProps} />
-        </svg>
-      </ThemeProvider>,
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...optionalProps} />
+      </svg>,
     );
 
     await userEvent.click(screen.getByRole('button'));
@@ -80,17 +75,15 @@ describe('RadarEntry', () => {
     expect(screen.getByText(String(minProps.value))).toBeInTheDocument();
   });
 
-  it('should render blip with url equal to # if description present', () => {
+  it('should render blip with url equal to # if description present', async () => {
     const withUrl = {
       ...optionalProps,
       url: 'http://backstage.io',
     };
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarEntry {...withUrl} />
-        </svg>
-      </ThemeProvider>,
+    await renderInTestApp(
+      <svg>
+        <RadarEntry {...withUrl} />
+      </svg>,
     );
 
     expect(screen.getByRole('button')).toHaveAttribute('href', '#');

plugins/tech-radar/src/components/RadarFooter/RadarFooter.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarFooter, { Props } from './RadarFooter';
@@ -36,13 +34,11 @@ describe('RadarFooter', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarFooter {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarFooter {...minProps} />
+      </svg>,
     );
     const radarFooter = rendered.getByTestId('radar-footer');
     const { x, y } = minProps;

plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarGrid, { Props } from './RadarGrid';
@@ -36,13 +34,11 @@ describe('RadarGrid', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarGrid {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarGrid {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument();

plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-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 GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
@@ -47,13 +45,11 @@ describe('RadarLegend', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarLegend {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarLegend {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();

plugins/tech-radar/src/components/RadarPlot/RadarPlot.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
+import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';
 
 import RadarPlot, { Props } from './RadarPlot';
@@ -49,13 +47,11 @@ describe('RadarPlot', () => {
     GetBBoxPolyfill.remove();
   });
 
-  it('should render', () => {
-    const rendered = render(
-      <ThemeProvider theme={lightTheme}>
-        <svg>
-          <RadarPlot {...minProps} />
-        </svg>
-      </ThemeProvider>,
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarPlot {...minProps} />
+      </svg>,
     );
 
     expect(rendered.getByTestId('radar-plot')).toBeInTheDocument();