From 4679ac5b342ad6493d00f640501d08f6d5cb1768 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Wed, 25 Aug 2021 15:08:23 +0200
Subject: [PATCH] Fix the chromatic error in OwnershipCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../workflows/chromatic-storybook-test.yml    |  1 +
 .../OwnershipCard/OwnershipCard.stories.tsx   | 27 +++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/chromatic-storybook-test.yml b/.github/workflows/chromatic-storybook-test.yml
index 043777601f..4c64db309d 100644
--- a/.github/workflows/chromatic-storybook-test.yml
+++ b/.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:
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
index b40ef6d54b..7ebdf31ae4 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+++ b/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 },
+    },
+  );