From 069d69290cca9a442c360d5f52de2297457c02aa Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sun, 30 Jan 2022 21:26:50 +0100
Subject: [PATCH] tech-radar: fix tests to work with @testing-library/react 12

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../src/components/RadarComponent.test.tsx       |  4 ++--
 .../tech-radar/src/components/RadarPage.test.tsx | 16 ++++++----------
 .../tech-radar/src/utils/polyfills/getBBox.ts    |  1 +
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/plugins/tech-radar/src/components/RadarComponent.test.tsx b/plugins/tech-radar/src/components/RadarComponent.test.tsx
index 38d289cf1e..6b8bd944b8 100644
--- a/plugins/tech-radar/src/components/RadarComponent.test.tsx
+++ b/plugins/tech-radar/src/components/RadarComponent.test.tsx
@@ -51,7 +51,7 @@ describe('RadarComponent', () => {
     jest.useFakeTimers();
 
     const errorApi = { post: () => {} };
-    const { getByTestId, queryByTestId } = render(
+    const { getByTestId, findByTestId } = render(
       <ThemeProvider theme={lightTheme}>
         <TestApiProvider
           apis={[
@@ -73,7 +73,7 @@ describe('RadarComponent', () => {
     });
     expect(getByTestId('progress')).toBeInTheDocument();
 
-    await waitFor(() => queryByTestId('tech-radar-svg'));
+    await findByTestId('tech-radar-svg');
     jest.useRealTimers();
   });
 
diff --git a/plugins/tech-radar/src/components/RadarPage.test.tsx b/plugins/tech-radar/src/components/RadarPage.test.tsx
index 490a61ee76..c0ebde17c8 100644
--- a/plugins/tech-radar/src/components/RadarPage.test.tsx
+++ b/plugins/tech-radar/src/components/RadarPage.test.tsx
@@ -59,7 +59,7 @@ describe('RadarPage', () => {
       svgProps: { 'data-testid': 'tech-radar-svg' },
     };
 
-    const { getByTestId, queryByTestId } = render(
+    const { getByTestId, findByTestId } = render(
       wrapInTestApp(
         <ThemeProvider theme={lightTheme}>
           <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
@@ -74,7 +74,7 @@ describe('RadarPage', () => {
     });
     expect(getByTestId('progress')).toBeInTheDocument();
 
-    await waitFor(() => queryByTestId('tech-radar-svg'));
+    await findByTestId('tech-radar-svg');
     jest.useRealTimers();
   });
 
@@ -86,7 +86,7 @@ describe('RadarPage', () => {
     };
     jest.spyOn(mockClient, 'load');
 
-    const { getByText, getByTestId } = await renderInTestApp(
+    const { getByText, findByTestId } = await renderInTestApp(
       <ThemeProvider theme={lightTheme}>
         <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
           <RadarPage {...techRadarProps} />
@@ -94,12 +94,10 @@ describe('RadarPage', () => {
       </ThemeProvider>,
     );
 
-    await waitFor(() => getByTestId('tech-radar-svg'));
-
+    await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
     expect(
       getByText('Pick the recommended technologies for your projects'),
     ).toBeInTheDocument();
-    expect(getByTestId('tech-radar-svg')).toBeInTheDocument();
     expect(mockClient.load).toBeCalledWith(undefined);
   });
 
@@ -112,7 +110,7 @@ describe('RadarPage', () => {
     };
     jest.spyOn(mockClient, 'load');
 
-    const { getByTestId } = await renderInTestApp(
+    const { findByTestId } = await renderInTestApp(
       <ThemeProvider theme={lightTheme}>
         <TestApiProvider apis={[[techRadarApiRef, mockClient]]}>
           <RadarPage {...techRadarProps} />
@@ -120,9 +118,7 @@ describe('RadarPage', () => {
       </ThemeProvider>,
     );
 
-    await waitFor(() => getByTestId('tech-radar-svg'));
-
-    expect(getByTestId('tech-radar-svg')).toBeInTheDocument();
+    await expect(findByTestId('tech-radar-svg')).resolves.toBeInTheDocument();
     expect(mockClient.load).toBeCalledWith('myId');
   });
 
diff --git a/plugins/tech-radar/src/utils/polyfills/getBBox.ts b/plugins/tech-radar/src/utils/polyfills/getBBox.ts
index 7102d3d653..6e52995e80 100644
--- a/plugins/tech-radar/src/utils/polyfills/getBBox.ts
+++ b/plugins/tech-radar/src/utils/polyfills/getBBox.ts
@@ -34,6 +34,7 @@ class GetBBoxPolyfill {
 
     Object.defineProperty(window.Element.prototype, 'getBBox', {
       writable: false,
+      configurable: true,
       value: () => ({ x, y, width, height }),
     });
   }