From b2efb8d544cf5f97d3d36445e542e5a6f53dafd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Thu, 24 Feb 2022 13:11:40 +0100
Subject: [PATCH] attempt to unbreak storybook tests for GroupProfileCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../GroupProfile/GroupProfileCard.stories.tsx | 52 ++++++++++++------
 .../UserProfileCard.stories.tsx               | 55 +++++++++++--------
 2 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
index cdf6240fc0..fc45d9a8fe 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx
@@ -15,17 +15,17 @@
  */
 
 import { GroupEntity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog-react';
+import {
+  CatalogApi,
+  catalogApiRef,
+  EntityProvider,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 import { Grid } from '@material-ui/core';
-import React from 'react';
-import { MemoryRouter } from 'react-router';
+import React, { ComponentType } from 'react';
 import { GroupProfileCard } from './GroupProfileCard';
 
-export default {
-  title: 'Plugins/Org/Group Profile Card',
-  component: GroupProfileCard,
-};
-
 const dummyDepartment = {
   type: 'childOf',
   targetRef: 'group:default/department-a',
@@ -56,14 +56,34 @@ const defaultEntity: GroupEntity = {
   relations: [dummyDepartment],
 };
 
+const catalogApi: Partial<CatalogApi> = {
+  async refreshEntity() {},
+};
+
 export const Default = () => (
-  <MemoryRouter>
-    <EntityProvider entity={defaultEntity}>
-      <Grid container spacing={4}>
-        <Grid item xs={12} md={4}>
-          <GroupProfileCard variant="gridItem" />
-        </Grid>
+  <EntityProvider entity={defaultEntity}>
+    <Grid container spacing={4}>
+      <Grid item xs={12} md={4}>
+        <GroupProfileCard variant="gridItem" />
       </Grid>
-    </EntityProvider>
-  </MemoryRouter>
+    </Grid>
+  </EntityProvider>
 );
+
+export default {
+  title: 'Plugins/Org/Group Profile Card',
+  component: GroupProfileCard,
+  decorators: [
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(
+        <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+          <Story />
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/a': entityRouteRef,
+          },
+        },
+      ),
+  ],
+};
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
index 0b2d2790a0..eb7b8fadda 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
@@ -15,17 +15,15 @@
  */
 
 import { UserEntity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog-react';
+import {
+  EntityProvider,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
+import { wrapInTestApp } from '@backstage/test-utils';
 import { Grid } from '@material-ui/core';
-import React from 'react';
-import { MemoryRouter } from 'react-router';
+import React, { ComponentType } from 'react';
 import { UserProfileCard } from './UserProfileCard';
 
-export default {
-  title: 'Plugins/Org/User Profile Card',
-  component: UserProfileCard,
-};
-
 const dummyGroup = {
   type: 'memberOf',
   targetRef: 'group:default/team-a',
@@ -56,15 +54,13 @@ const defaultEntity: UserEntity = {
 };
 
 export const Default = () => (
-  <MemoryRouter>
-    <EntityProvider entity={defaultEntity}>
-      <Grid container spacing={4}>
-        <Grid item xs={12} md={4}>
-          <UserProfileCard variant="gridItem" />
-        </Grid>
+  <EntityProvider entity={defaultEntity}>
+    <Grid container spacing={4}>
+      <Grid item xs={12} md={4}>
+        <UserProfileCard variant="gridItem" />
       </Grid>
-    </EntityProvider>
-  </MemoryRouter>
+    </Grid>
+  </EntityProvider>
 );
 
 const noImageEntity: UserEntity = {
@@ -85,13 +81,24 @@ const noImageEntity: UserEntity = {
 };
 
 export const NoImage = () => (
-  <MemoryRouter>
-    <EntityProvider entity={noImageEntity}>
-      <Grid container spacing={4}>
-        <Grid item xs={12} md={4}>
-          <UserProfileCard variant="gridItem" />
-        </Grid>
+  <EntityProvider entity={noImageEntity}>
+    <Grid container spacing={4}>
+      <Grid item xs={12} md={4}>
+        <UserProfileCard variant="gridItem" />
       </Grid>
-    </EntityProvider>
-  </MemoryRouter>
+    </Grid>
+  </EntityProvider>
 );
+
+export default {
+  title: 'Plugins/Org/User Profile Card',
+  component: UserProfileCard,
+  decorators: [
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(<Story />, {
+        mountedRoutes: {
+          '/a': entityRouteRef,
+        },
+      }),
+  ],
+};