test-utils: migrate theme usage and switch to actual MUI icons

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

packages/test-utils/package.json

@@ -34,6 +34,7 @@
     "@backstage/theme": "^0.2.13",
     "@backstage/types": "^0.1.1",
     "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -18,6 +18,9 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react';
 import { MemoryRouter } from 'react-router';
 import { Route } from 'react-router-dom';
 import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { CssBaseline } from '@material-ui/core';
+import MockIcon from '@material-ui/icons/AcUnit';
 import { createSpecializedApp } from '@backstage/core-app-api';
 import {
   BootErrorPageProps,
@@ -32,28 +35,28 @@ import { defaultApis } from './defaultApis';
 import { mockApis } from './mockApis';
 
 const mockIcons = {
-  'kind:api': () => <svg />,
-  'kind:component': () => <svg />,
-  'kind:domain': () => <svg />,
-  'kind:group': () => <svg />,
-  'kind:location': () => <svg />,
-  'kind:system': () => <svg />,
-  'kind:user': () => <svg />,
+  'kind:api': MockIcon,
+  'kind:component': MockIcon,
+  'kind:domain': MockIcon,
+  'kind:group': MockIcon,
+  'kind:location': MockIcon,
+  'kind:system': MockIcon,
+  'kind:user': MockIcon,
 
-  brokenImage: () => <svg />,
-  catalog: () => <svg />,
-  scaffolder: () => <svg />,
-  techdocs: () => <svg />,
-  search: () => <svg />,
-  chat: () => <svg />,
-  dashboard: () => <svg />,
-  docs: () => <svg />,
-  email: () => <svg />,
-  github: () => <svg />,
-  group: () => <svg />,
-  help: () => <svg />,
-  user: () => <svg />,
-  warning: () => <svg />,
+  brokenImage: MockIcon,
+  catalog: MockIcon,
+  scaffolder: MockIcon,
+  techdocs: MockIcon,
+  search: MockIcon,
+  chat: MockIcon,
+  dashboard: MockIcon,
+  docs: MockIcon,
+  email: MockIcon,
+  github: MockIcon,
+  group: MockIcon,
+  help: MockIcon,
+  user: MockIcon,
+  warning: MockIcon,
 };
 
 const ErrorBoundaryFallback = ({ error }: { error: Error }) => {
@@ -136,9 +139,13 @@ export function wrapInTestApp(
     themes: [
       {
         id: 'light',
-        theme: lightTheme,
         title: 'Test App Theme',
         variant: 'light',
+        Provider: ({ children }) => (
+          <ThemeProvider theme={lightTheme}>
+            <CssBaseline>{children}</CssBaseline>
+          </ThemeProvider>
+        ),
       },
     ],
     bindRoutes: ({ bind }) => {