remove unnecessary usages of ThemeProvider

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

.changeset/blue-carrots-cross.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Removed unnecessary usage of `ThemeProvider` from the `ExampleComponent` test in the plugin template.

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -1,7 +1,5 @@
 import React from 'react';
 import { ExampleComponent } from './ExampleComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
@@ -23,11 +21,7 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <ExampleComponent />
-      </ThemeProvider>,
-    );
+    await renderInTestApp(<ExampleComponent />);
     expect(screen.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
   });
 });

plugins/allure/src/components/AllureReportComponent/AllureReportComponent.test.tsx

@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { AllureReportComponent } from './AllureReportComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import {
@@ -39,17 +37,15 @@ describe('ExampleComponent', () => {
 
   it('should render', async () => {
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <EntityProvider
-          entity={{
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'Component',
-            metadata: { name: 'test' },
-          }}
-        >
-          <AllureReportComponent />
-        </EntityProvider>
-      </ThemeProvider>,
+      <EntityProvider
+        entity={{
+          apiVersion: 'backstage.io/v1alpha1',
+          kind: 'Component',
+          metadata: { name: 'test' },
+        }}
+      >
+        <AllureReportComponent />
+      </EntityProvider>,
     );
     expect(rendered.getByText('Missing Annotation')).toBeInTheDocument();
   });

plugins/codescene/src/components/CodeScenePageComponent/CodeScenePageComponent.test.tsx

@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { CodeScenePageComponent } from './CodeScenePageComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { rootRouteRef } from '../../routes';
@@ -54,9 +52,7 @@ describe('CodeScenePageComponent', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <CodeScenePageComponent />
-        </ThemeProvider>
+        <CodeScenePageComponent />
       </ApiProvider>,
       {
         mountedRoutes: {

plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.test.tsx

@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { CodeSceneProjectDetailsPage } from './CodeSceneProjectDetailsPage';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import {
@@ -90,9 +88,7 @@ describe('CodeSceneProjectDetailsPage', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <CodeSceneProjectDetailsPage />
-        </ThemeProvider>
+        <CodeSceneProjectDetailsPage />
       </ApiProvider>,
     );
     expect(rendered.getByText('CodeScene: test-project')).toBeInTheDocument();

plugins/codescene/src/components/ProjectsComponent/ProjectsComponent.test.tsx

@@ -15,8 +15,6 @@
  */
 import React from 'react';
 import { ProjectsComponent } from './ProjectsComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { rootRouteRef } from '../../routes';
@@ -90,9 +88,7 @@ describe('ProjectsComponent', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <ProjectsComponent />
-        </ThemeProvider>
+        <ProjectsComponent />
       </ApiProvider>,
       {
         mountedRoutes: {

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.test.tsx

@@ -16,8 +16,6 @@
 
 import { ExploreTool } from '@backstage/plugin-explore-common';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
 import { exploreApiRef } from '../../api';
@@ -29,11 +27,9 @@ describe('<ToolExplorerContent />', () => {
   };
 
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <ThemeProvider theme={lightTheme}>
-      <TestApiProvider apis={[[exploreApiRef, exploreApi]]}>
-        {children}
-      </TestApiProvider>
-    </ThemeProvider>
+    <TestApiProvider apis={[[exploreApiRef, exploreApi]]}>
+      {children}
+    </TestApiProvider>
   );
 
   beforeEach(() => {

plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.test.tsx

@@ -15,8 +15,6 @@
  */
 
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 import { gitOpsApiRef, GitOpsRestApi } from '../../api';
 import ProfileCatalog from './ProfileCatalog';
@@ -47,11 +45,9 @@ describe('ProfileCatalog', () => {
     );
 
     const { getByText } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <ApiProvider apis={apis}>
-          <ProfileCatalog />
-        </ApiProvider>
-      </ThemeProvider>,
+      <ApiProvider apis={apis}>
+        <ProfileCatalog />
+      </ApiProvider>,
     );
 
     expect(getByText('Create GitOps-managed Cluster')).toBeInTheDocument();

plugins/home/src/homePageComponents/HeaderWorldClock/HeaderWorldClock.test.tsx

@@ -17,8 +17,6 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderWorldClock, ClockConfig } from './HeaderWorldClock';
 import React from 'react';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 
 describe('HeaderWorldClock with valid Time Zones', () => {
   it('displays Time Zones as expected', async () => {
@@ -42,9 +40,7 @@ describe('HeaderWorldClock with valid Time Zones', () => {
     ];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.getByText('NYC')).toBeInTheDocument();
@@ -59,9 +55,7 @@ describe('HeaderWorldClock with no Time Zones provided', () => {
     const clockConfigs: ClockConfig[] = [];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.container).toBeEmptyDOMElement();
@@ -78,9 +72,7 @@ describe('HeaderWorldClock with invalid Time Zone', () => {
     ];
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock clockConfigs={clockConfigs} />
-      </ThemeProvider>,
+      <HeaderWorldClock clockConfigs={clockConfigs} />,
     );
 
     expect(rendered.getByText('GMT')).toBeInTheDocument();
@@ -105,12 +97,10 @@ describe('HeaderWorldClock with custom Time Format', () => {
     };
 
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <HeaderWorldClock
-          clockConfigs={clockConfigs}
-          customTimeFormat={timeFormat}
-        />
-      </ThemeProvider>,
+      <HeaderWorldClock
+        clockConfigs={clockConfigs}
+        customTimeFormat={timeFormat}
+      />,
     );
 
     expect(rendered.getByText('09:10')).toBeInTheDocument();

plugins/playlist/src/components/PlaylistCard/PlaylistCard.test.tsx

@@ -16,8 +16,6 @@
 
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 
 import { rootRouteRef } from '../../routes';
@@ -26,20 +24,18 @@ import { PlaylistCard } from './PlaylistCard';
 describe('<PlaylistCard/>', () => {
   it('renders playlist info', async () => {
     const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <PlaylistCard
-          playlist={{
-            id: 'id1',
-            name: 'playlist-1',
-            description: 'test description',
-            owner: 'group:default/some-owner',
-            public: true,
-            entities: 3,
-            followers: 2,
-            isFollowing: false,
-          }}
-        />
-      </ThemeProvider>,
+      <PlaylistCard
+        playlist={{
+          id: 'id1',
+          name: 'playlist-1',
+          description: 'test description',
+          owner: 'group:default/some-owner',
+          public: true,
+          entities: 3,
+          followers: 2,
+          isFollowing: false,
+        }}
+      />,
       {
         mountedRoutes: {
           '/playlists': rootRouteRef,

plugins/sonarqube/src/components/SonarQubeContentPage/SonarQubeContentPage.test.tsx

@@ -16,8 +16,6 @@
 
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import React from 'react';
 import {
   isSonarQubeAvailable,
@@ -44,7 +42,7 @@ const Providers = ({
         kind: 'Component',
       }}
     >
-      <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>
+      {children}
     </EntityProvider>
   </TestApiProvider>
 );

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

@@ -20,8 +20,6 @@ import {
   TestApiProvider,
   wrapInTestApp,
 } from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { act, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
@@ -61,11 +59,9 @@ describe('RadarPage', () => {
 
     const { getByTestId, findByTestId } = render(
       wrapInTestApp(
-        <ThemeProvider theme={lightTheme}>
-          <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-            <RadarPage {...techRadarProps} />
-          </TestApiProvider>
-        </ThemeProvider>,
+        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+          <RadarPage {...techRadarProps} />
+        </TestApiProvider>,
       ),
     );
 
@@ -87,11 +83,9 @@ describe('RadarPage', () => {
     jest.spyOn(mockClient, 'load');
 
     const { getByText, findByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
@@ -111,11 +105,9 @@ describe('RadarPage', () => {
     jest.spyOn(mockClient, 'load');
 
     const { findByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
@@ -136,16 +128,14 @@ describe('RadarPage', () => {
     };
 
     const { queryByTestId } = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <TestApiProvider
-          apis={[
-            [errorApiRef, errorApi],
-            [techRadarApiRef, mockClient],
-          ]}
-        >
-          <RadarPage {...techRadarProps} />
-        </TestApiProvider>
-      </ThemeProvider>,
+      <TestApiProvider
+        apis={[
+          [errorApiRef, errorApi],
+          [techRadarApiRef, mockClient],
+        ]}
+      >
+        <RadarPage {...techRadarProps} />
+      </TestApiProvider>,
     );
 
     await waitFor(() => !queryByTestId('progress'));

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx

@@ -15,10 +15,8 @@
  */
 import React from 'react';
 import { act } from '@testing-library/react';
-import { ThemeProvider } from '@material-ui/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 
-import { lightTheme } from '@backstage/theme';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 
@@ -84,17 +82,15 @@ jest.mock('@backstage/core-components', () => ({
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ThemeProvider theme={lightTheme}>
-      <TestApiProvider
-        apis={[
-          [scmIntegrationsApiRef, {}],
-          [techdocsApiRef, techdocsApiMock],
-          [techdocsStorageApiRef, techdocsStorageApiMock],
-        ]}
-      >
-        {children}
-      </TestApiProvider>
-    </ThemeProvider>
+    <TestApiProvider
+      apis={[
+        [scmIntegrationsApiRef, {}],
+        [techdocsApiRef, techdocsApiMock],
+        [techdocsStorageApiRef, techdocsStorageApiMock],
+      ]}
+    >
+      {children}
+    </TestApiProvider>
   );
 };
 

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx

@@ -16,9 +16,6 @@
 import React from 'react';
 import { act, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from '@material-ui/core';
-
-import { lightTheme } from '@backstage/theme';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import {
   techdocsApiRef,
@@ -79,13 +76,11 @@ const Wrapper = ({
   entityRef?: CompoundEntityRef;
   children: React.ReactNode;
 }) => (
-  <ThemeProvider theme={lightTheme}>
-    <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
-      <TechDocsReaderPageProvider entityRef={entityRef}>
-        {children}
-      </TechDocsReaderPageProvider>
-    </TestApiProvider>
-  </ThemeProvider>
+  <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
+    <TechDocsReaderPageProvider entityRef={entityRef}>
+      {children}
+    </TechDocsReaderPageProvider>
+  </TestApiProvider>
 );
 
 describe('<TechDocsReaderPageContent />', () => {

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx

@@ -16,9 +16,6 @@
 import React from 'react';
 import { act, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from '@material-ui/core';
-
-import { lightTheme } from '@backstage/theme';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import {
@@ -71,13 +68,11 @@ const Wrapper = ({
   entityRef?: CompoundEntityRef;
   children: React.ReactNode;
 }) => (
-  <ThemeProvider theme={lightTheme}>
-    <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
-      <TechDocsReaderPageProvider entityRef={entityRef}>
-        {children}
-      </TechDocsReaderPageProvider>
-    </TestApiProvider>
-  </ThemeProvider>
+  <TestApiProvider apis={[[techdocsApiRef, techdocsApiMock]]}>
+    <TechDocsReaderPageProvider entityRef={entityRef}>
+      {children}
+    </TechDocsReaderPageProvider>
+  </TestApiProvider>
 );
 
 describe('<TechDocsReaderPageHeader />', () => {