Merge pull request #6956 from backstage/freben/chromatic-ownership-fix

Fix the chromatic error in OwnershipCard

.github/workflows/chromatic-storybook-test.yml

@@ -5,6 +5,7 @@ on:
       - '.github/workflows/chromatic-storybook-test.yml'
       - 'packages/storybook/**'
       - 'packages/core-components/src/**'
+      - '**/*.stories.tsx'
 
 jobs:
   chromatic:

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx

@@ -19,8 +19,10 @@ import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import {
   CatalogApi,
   catalogApiRef,
+  catalogRouteRef,
   EntityContext,
 } from '@backstage/plugin-catalog-react';
+import { wrapInTestApp } from '@backstage/test-utils';
 import {
   BackstageTheme,
   createTheme,
@@ -29,7 +31,6 @@ import {
 } from '@backstage/theme';
 import { Grid, ThemeProvider } from '@material-ui/core';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
 import { OwnershipCard } from './OwnershipCard';
 
 export default {
@@ -87,8 +88,8 @@ const catalogApi: Partial<CatalogApi> = {
 
 const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
 
-export const Default = () => (
-  <MemoryRouter>
+export const Default = () =>
+  wrapInTestApp(
     <ApiProvider apis={apiRegistry}>
       <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
         <Grid container spacing={4}>
@@ -97,9 +98,11 @@ export const Default = () => (
           </Grid>
         </Grid>
       </EntityContext.Provider>
-    </ApiProvider>
-  </MemoryRouter>
-);
+    </ApiProvider>,
+    {
+      mountedRoutes: { '/catalog': catalogRouteRef },
+    },
+  );
 
 const monochromeTheme = (outer: BackstageTheme) =>
   createTheme({
@@ -117,8 +120,8 @@ const monochromeTheme = (outer: BackstageTheme) =>
     },
   });
 
-export const Themed = () => (
-  <MemoryRouter>
+export const Themed = () =>
+  wrapInTestApp(
     <ThemeProvider theme={monochromeTheme}>
       <ApiProvider apis={apiRegistry}>
         <EntityContext.Provider
@@ -131,6 +134,8 @@ export const Themed = () => (
           </Grid>
         </EntityContext.Provider>
       </ApiProvider>
-    </ThemeProvider>
-  </MemoryRouter>
-);
+    </ThemeProvider>,
+    {
+      mountedRoutes: { '/catalog': catalogRouteRef },
+    },
+  );