From c79857ae25c8dba188413b7aa922d7e17e0980e3 Mon Sep 17 00:00:00 2001
From: Claire Casey <ccasey@spotify.com>
Date: Tue, 21 Feb 2023 13:03:25 -0500
Subject: [PATCH] fix tests broken by OverflowToolTip changes

Signed-off-by: Claire Casey <ccasey@spotify.com>
---
 .../MembersList/MembersListCard.test.tsx      | 15 +++++++++-
 .../OwnershipCard/OwnershipCard.test.tsx      | 29 ++++++++++++++-----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
index c98cc3eb32..cc524b60a2 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
@@ -28,6 +28,19 @@ import {
 import React from 'react';
 import { MembersListCard } from './MembersListCard';
 
+// Mock needed because jsdom doesn't correctly implement box-sizing
+// https://github.com/ShinyChang/React-Text-Truncate/issues/70
+// https://stackoverflow.com/questions/71916701/how-to-mock-a-react-function-component-that-takes-a-ref-prop
+jest.mock('react-text-truncate', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return {
+    __esModule: true,
+    default: forwardRef((props: any, ref: any) => (
+      <div ref={ref}>{props.text}</div>
+    )),
+  };
+});
+
 describe('MemberTab Test', () => {
   const groupEntity: GroupEntity = {
     apiVersion: 'backstage.io/v1alpha1',
@@ -95,7 +108,7 @@ describe('MemberTab Test', () => {
     expect(
       rendered.getByText('tara-macgovern@example.com'),
     ).toBeInTheDocument();
-    expect(rendered.getByText('Tara MacGovern')).toHaveAttribute(
+    expect(rendered.getByText('Tara MacGovern').closest('a')).toHaveAttribute(
       'href',
       '/catalog/foo-bar/user/tara.macgovern',
     );
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx
index 84f27fa183..30b7dee2de 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx
@@ -120,6 +120,19 @@ const getEntitiesMock = (
   } as GetEntitiesResponse);
 };
 
+// Mock needed because jsdom doesn't correctly implement box-sizing
+// https://github.com/ShinyChang/React-Text-Truncate/issues/70
+// https://stackoverflow.com/questions/71916701/how-to-mock-a-react-function-component-that-takes-a-ref-prop
+jest.mock('react-text-truncate', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return {
+    __esModule: true,
+    default: forwardRef((props: any, ref: any) => (
+      <div ref={ref}>{props.text}</div>
+    )),
+  };
+});
+
 describe('OwnershipCard', () => {
   const groupEntity: GroupEntity = {
     apiVersion: 'backstage.io/v1alpha1',
@@ -177,19 +190,19 @@ describe('OwnershipCard', () => {
 
     expect(getByText('OPENAPI')).toBeInTheDocument();
     expect(
-      queryByText(getByText('OPENAPI').parentElement!, '1'),
+      queryByText(getByText('OPENAPI').closest('a')!, '1'),
     ).toBeInTheDocument();
     expect(getByText('SERVICE')).toBeInTheDocument();
     expect(
-      queryByText(getByText('SERVICE').parentElement!, '1'),
+      queryByText(getByText('SERVICE').closest('a')!, '1'),
     ).toBeInTheDocument();
     expect(getByText('LIBRARY')).toBeInTheDocument();
     expect(
-      queryByText(getByText('LIBRARY').parentElement!, '1'),
+      queryByText(getByText('LIBRARY').closest('a')!, '1'),
     ).toBeInTheDocument();
     expect(getByText('SYSTEM')).toBeInTheDocument();
     expect(
-      queryByText(getByText('SYSTEM').parentElement!, '1'),
+      queryByText(getByText('SYSTEM').closest('a')!, '1'),
     ).toBeInTheDocument();
   });
 
@@ -215,17 +228,17 @@ describe('OwnershipCard', () => {
 
     expect(getByText('SYSTEM')).toBeInTheDocument();
     expect(
-      queryByText(getByText('SYSTEM').parentElement!, '1'),
+      queryByText(getByText('SYSTEM').closest('a')!, '1'),
     ).toBeInTheDocument();
     expect(
-      queryByText(getByText('SYSTEM').parentElement!, 'System'),
+      queryByText(getByText('SYSTEM').closest('a')!, 'System'),
     ).not.toBeInTheDocument();
     expect(getByText('OPENAPI')).toBeInTheDocument();
     expect(
-      queryByText(getByText('OPENAPI').parentElement!, '1'),
+      queryByText(getByText('OPENAPI').closest('a')!, '1'),
     ).toBeInTheDocument();
     expect(
-      queryByText(getByText('OPENAPI').parentElement!, 'API'),
+      queryByText(getByText('OPENAPI').closest('a')!, 'API'),
     ).toBeInTheDocument();
     expect(() => getByText('LIBRARY')).toThrow();
   });