From 6480278da9a0180648beba0157021eff1804c85c Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 15 Oct 2020 16:53:35 +0200
Subject: [PATCH 1/9] change jsx to tsx

---
 .../components/Button/{Button.test.jsx => Button.test.tsx}    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)
 rename packages/core/src/components/Button/{Button.test.jsx => Button.test.tsx} (94%)

diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.tsx
similarity index 94%
rename from packages/core/src/components/Button/Button.test.jsx
rename to packages/core/src/components/Button/Button.test.tsx
index 115835be3f..8bae5f2767 100644
--- a/packages/core/src/components/Button/Button.test.jsx
+++ b/packages/core/src/components/Button/Button.test.tsx
@@ -34,7 +34,9 @@ describe('<Button />', () => {
     );
 
     expect(() => getByText(testString)).toThrow();
-    await act(async () => fireEvent.click(getByText(buttonLabel)));
+    await act(async () => {
+      fireEvent.click(getByText(buttonLabel));
+    });
     expect(getByText(testString)).toBeInTheDocument();
   });
 });

From 70a8dc923da6f18ab92d786abb14747c13d0766f Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 15 Oct 2020 16:57:10 +0200
Subject: [PATCH 2/9] change test file to tsx

---
 .../core/src/components/Link/{Link.test.jsx => Link.test.tsx} | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)
 rename packages/core/src/components/Link/{Link.test.jsx => Link.test.tsx} (94%)

diff --git a/packages/core/src/components/Link/Link.test.jsx b/packages/core/src/components/Link/Link.test.tsx
similarity index 94%
rename from packages/core/src/components/Link/Link.test.jsx
rename to packages/core/src/components/Link/Link.test.tsx
index 4bb78ef6d4..23d2728bf6 100644
--- a/packages/core/src/components/Link/Link.test.jsx
+++ b/packages/core/src/components/Link/Link.test.tsx
@@ -34,7 +34,9 @@ describe('<Link />', () => {
       ),
     );
     expect(() => getByText(testString)).toThrow();
-    await act(async () => fireEvent.click(getByText(linkText)));
+    await act(async () => {
+      fireEvent.click(getByText(linkText));
+    });
     expect(getByText(testString)).toBeInTheDocument();
   });
 });

From 94802c14eb493c5f2d42d9851aa757d6ad2f50a3 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 15 Oct 2020 17:03:02 +0200
Subject: [PATCH 3/9] change test file to tsx

---
 .../ProgressBars/{GaugeCard.test.jsx => GaugeCard.test.tsx}       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/core/src/components/ProgressBars/{GaugeCard.test.jsx => GaugeCard.test.tsx} (100%)

diff --git a/packages/core/src/components/ProgressBars/GaugeCard.test.jsx b/packages/core/src/components/ProgressBars/GaugeCard.test.tsx
similarity index 100%
rename from packages/core/src/components/ProgressBars/GaugeCard.test.jsx
rename to packages/core/src/components/ProgressBars/GaugeCard.test.tsx

From c3b0483957eef4d60dbb8a82e5b0b090d0e19d43 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 15 Oct 2020 17:04:00 +0200
Subject: [PATCH 4/9] change test file to tsx

---
 .../Lifecycle/{Lifecycle.test.jsx => Lifecycle.test.tsx}          | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/core/src/components/Lifecycle/{Lifecycle.test.jsx => Lifecycle.test.tsx} (100%)

diff --git a/packages/core/src/components/Lifecycle/Lifecycle.test.jsx b/packages/core/src/components/Lifecycle/Lifecycle.test.tsx
similarity index 100%
rename from packages/core/src/components/Lifecycle/Lifecycle.test.jsx
rename to packages/core/src/components/Lifecycle/Lifecycle.test.tsx

From 0f95336c050edaf31fa6715d211fceafd540e570 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 15 Oct 2020 17:22:16 +0200
Subject: [PATCH 5/9] change test file to tsx

---
 .../src/components/ProgressBars/Gauge.test.jsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/ProgressBars/Gauge.test.jsx b/packages/core/src/components/ProgressBars/Gauge.test.jsx
index 709de7b0c4..94ce2783fc 100644
--- a/packages/core/src/components/ProgressBars/Gauge.test.jsx
+++ b/packages/core/src/components/ProgressBars/Gauge.test.jsx
@@ -17,7 +17,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
+<<<<<<< HEAD:packages/core/src/components/ProgressBars/Gauge.test.jsx
 import { Gauge, getProgressColor } from './Gauge';
+=======
+import { GaugeProgress, getProgressColor } from './GaugeProgress';
+import * as theme from '@backstage/theme';
+>>>>>>> change test file to tsx:packages/core/src/components/ProgressBars/GaugeProgress.test.tsx
 
 describe('<Gauge />', () => {
   it('renders without exploding', () => {
@@ -50,17 +55,20 @@ describe('<Gauge />', () => {
   const ok = '#111';
   const warning = '#222';
   const error = '#333';
-  const palette = { status: { ok, warning, error } };
+  const palette = {
+    ...theme.lightTheme.palette,
+    status: { ...theme.lightTheme.palette.status, ok, warning, error },
+  };
 
   it('colors the progress correctly', () => {
-    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 'Not a Number')).toBe('#ddd');
     expect(getProgressColor(palette, 10)).toBe(error);
     expect(getProgressColor(palette, 50)).toBe(warning);
     expect(getProgressColor(palette, 90)).toBe(ok);
   });
 
   it('colors the inverse progress correctly', () => {
-    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 'Not a Number')).toBe('#ddd');
     expect(getProgressColor(palette, 10, true)).toBe(ok);
     expect(getProgressColor(palette, 50, true)).toBe(warning);
     expect(getProgressColor(palette, 90, true)).toBe(error);

From 789e15d1c0cd0093d0f57ae029f2439a57146a25 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 16 Oct 2020 13:57:27 +0200
Subject: [PATCH 6/9] change test file to tsx

---
 ...st.jsx => StructuredMetadataTable.test.tsx} | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)
 rename packages/core/src/components/StructuredMetadataTable/{StructuredMetadataTable.test.jsx => StructuredMetadataTable.test.tsx} (87%)

diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
similarity index 87%
rename from packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx
rename to packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
index 1ae810ca17..e300e36078 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
@@ -31,7 +31,13 @@ describe('<StructuredMetadataTable />', () => {
 
   describe('Item Mappings', () => {
     it('Iterates over and displays every field in the map', () => {
-      const metadata = { field1: 'one', field2: 'two', field3: 'three' };
+      const metadata: {
+        [prop: string]: string;
+      } = {
+        field1: 'one',
+        field2: 'two',
+        field3: 'three',
+      };
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
@@ -42,8 +48,10 @@ describe('<StructuredMetadataTable />', () => {
       });
     });
 
-    it('Supports primative value fields', () => {
-      const metadata = { strField: 'my field', intField: 1 };
+    it('Supports primitive value fields', () => {
+      const metadata: {
+        [prop: string]: string | number;
+      } = { strField: 'my field', intField: 1 };
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
@@ -79,7 +87,9 @@ describe('<StructuredMetadataTable />', () => {
     });
 
     it('Supports object elements', () => {
-      const metadata = { config: { a: 1, b: 2 } };
+      const metadata: { [prop: string]: { [prop: string]: number } } = {
+        config: { a: 1, b: 2 },
+      };
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );

From b2efd1ecc24c3845848392320337ceacd62b9474 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 16 Oct 2020 14:03:50 +0200
Subject: [PATCH 7/9] change test file to tsx

---
 ...test.jsx => HorizontalScrollGrid.test.tsx} | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)
 rename packages/core/src/components/HorizontalScrollGrid/{HorizontalScrollGrid.test.jsx => HorizontalScrollGrid.test.tsx} (79%)

diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
similarity index 79%
rename from packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx
rename to packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
index 83cec85fc5..b75b28700d 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
@@ -48,6 +48,8 @@ describe('<HorizontalScrollGrid />', () => {
   });
 
   it('should show scroll buttons', async () => {
+    const originalPrototype = HTMLElement.prototype;
+
     Object.defineProperties(HTMLElement.prototype, {
       scrollLeft: {
         configurable: true,
@@ -64,13 +66,13 @@ describe('<HorizontalScrollGrid />', () => {
     });
 
     let lastScroll = 0;
-    HTMLElement.prototype.scrollBy = ({ left }) => {
-      lastScroll = left;
+    HTMLElement.prototype.scrollBy = ({ left }: ScrollToOptions): void => {
+      lastScroll = left || 0;
     };
 
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <HorizontalScrollGrid style={{ maxWidth: 300 }}>
+        <HorizontalScrollGrid>
           <Grid item style={{ minWidth: 200 }}>
             item1
           </Grid>
@@ -89,9 +91,21 @@ describe('<HorizontalScrollGrid />', () => {
     fireEvent.click(rendered.getByTitle('Scroll Left'));
     expect(lastScroll).toBeLessThan(0);
 
-    delete HTMLElement.prototype.scrollLeft;
-    delete HTMLElement.prototype.offsetWidth;
-    delete HTMLElement.prototype.scrollWidth;
-    delete HTMLElement.prototype.scrollBy;
+    // reset to original values
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollLeft: {
+        configurable: true,
+        value: originalPrototype.scrollLeft,
+      },
+      offsetWidth: {
+        configurable: true,
+        value: originalPrototype.offsetWidth,
+      },
+      scrollWidth: {
+        configurable: true,
+        value: originalPrototype.scrollWidth,
+      },
+    });
+    HTMLElement.prototype.scrollBy = originalPrototype.scrollBy;
   });
 });

From fe2287bc80ff40510453a6523b18d88d180d1249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Mon, 19 Oct 2020 08:36:57 +0200
Subject: [PATCH 8/9] address comments

---
 .../HorizontalScrollGrid.test.tsx             | 54 ++++++-------------
 .../{Gauge.test.jsx => Gauge.test.tsx}        |  9 ++--
 .../ProgressBars/GaugeCard.test.tsx           |  2 +-
 .../StructuredMetadataTable.test.tsx          | 50 +++++++----------
 4 files changed, 41 insertions(+), 74 deletions(-)
 rename packages/core/src/components/ProgressBars/{Gauge.test.jsx => Gauge.test.tsx} (85%)

diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
index b75b28700d..1dbdbcc3b9 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx
@@ -23,9 +23,10 @@ import { Grid } from '@material-ui/core';
 describe('<HorizontalScrollGrid />', () => {
   beforeEach(() => {
     jest.spyOn(window.performance, 'now').mockReturnValue(5);
-    jest
-      .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation(cb => cb(20));
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+      cb(20);
+      return 1;
+    });
   });
 
   afterEach(() => {
@@ -48,27 +49,21 @@ describe('<HorizontalScrollGrid />', () => {
   });
 
   it('should show scroll buttons', async () => {
-    const originalPrototype = HTMLElement.prototype;
-
-    Object.defineProperties(HTMLElement.prototype, {
-      scrollLeft: {
-        configurable: true,
-        value: 5,
-      },
-      offsetWidth: {
-        configurable: true,
-        value: 10,
-      },
-      scrollWidth: {
-        configurable: true,
-        value: 20,
-      },
-    });
+    jest
+      .spyOn(HTMLElement.prototype, 'scrollLeft', 'get')
+      .mockImplementation(() => 5);
+    jest
+      .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+      .mockImplementation(() => 10);
+    jest
+      .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+      .mockImplementation(() => 20);
 
     let lastScroll = 0;
-    HTMLElement.prototype.scrollBy = ({ left }: ScrollToOptions): void => {
+    const scrollBy = HTMLElement.prototype.scrollBy;
+    HTMLElement.prototype.scrollBy = (({ left }: ScrollToOptions): void => {
       lastScroll = left || 0;
-    };
+    }) as any;
 
     const rendered = await renderWithEffects(
       wrapInTestApp(
@@ -91,21 +86,6 @@ describe('<HorizontalScrollGrid />', () => {
     fireEvent.click(rendered.getByTitle('Scroll Left'));
     expect(lastScroll).toBeLessThan(0);
 
-    // reset to original values
-    Object.defineProperties(HTMLElement.prototype, {
-      scrollLeft: {
-        configurable: true,
-        value: originalPrototype.scrollLeft,
-      },
-      offsetWidth: {
-        configurable: true,
-        value: originalPrototype.offsetWidth,
-      },
-      scrollWidth: {
-        configurable: true,
-        value: originalPrototype.scrollWidth,
-      },
-    });
-    HTMLElement.prototype.scrollBy = originalPrototype.scrollBy;
+    HTMLElement.prototype.scrollBy = scrollBy;
   });
 });
diff --git a/packages/core/src/components/ProgressBars/Gauge.test.jsx b/packages/core/src/components/ProgressBars/Gauge.test.tsx
similarity index 85%
rename from packages/core/src/components/ProgressBars/Gauge.test.jsx
rename to packages/core/src/components/ProgressBars/Gauge.test.tsx
index 94ce2783fc..3d2ac17506 100644
--- a/packages/core/src/components/ProgressBars/Gauge.test.jsx
+++ b/packages/core/src/components/ProgressBars/Gauge.test.tsx
@@ -17,12 +17,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-<<<<<<< HEAD:packages/core/src/components/ProgressBars/Gauge.test.jsx
 import { Gauge, getProgressColor } from './Gauge';
-=======
-import { GaugeProgress, getProgressColor } from './GaugeProgress';
 import * as theme from '@backstage/theme';
->>>>>>> change test file to tsx:packages/core/src/components/ProgressBars/GaugeProgress.test.tsx
 
 describe('<Gauge />', () => {
   it('renders without exploding', () => {
@@ -31,6 +27,7 @@ describe('<Gauge />', () => {
     );
     getByText('10%');
   });
+
   it('handles fractional prop', () => {
     const { getByText } = render(
       wrapInTestApp(<Gauge value={0.1} fractional />),
@@ -61,14 +58,14 @@ describe('<Gauge />', () => {
   };
 
   it('colors the progress correctly', () => {
-    expect(getProgressColor(palette, 'Not a Number')).toBe('#ddd');
+    expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
     expect(getProgressColor(palette, 10)).toBe(error);
     expect(getProgressColor(palette, 50)).toBe(warning);
     expect(getProgressColor(palette, 90)).toBe(ok);
   });
 
   it('colors the inverse progress correctly', () => {
-    expect(getProgressColor(palette, 'Not a Number')).toBe('#ddd');
+    expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
     expect(getProgressColor(palette, 10, true)).toBe(ok);
     expect(getProgressColor(palette, 50, true)).toBe(warning);
     expect(getProgressColor(palette, 90, true)).toBe(error);
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.test.tsx b/packages/core/src/components/ProgressBars/GaugeCard.test.tsx
index 27ef0bb188..496a620170 100644
--- a/packages/core/src/components/ProgressBars/GaugeCard.test.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.test.tsx
@@ -40,7 +40,7 @@ describe('<GaugeCard />', () => {
   });
 
   it('handles invalid numbers', () => {
-    const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
+    const badProps = { title: 'Tingle upgrade', progress: 'hejjo' } as any;
     const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
     expect(getByText(/N\/A.*/)).toBeInTheDocument();
   });
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
index e300e36078..68d4262c3e 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
-
-import { StructuredMetadataTable } from './StructuredMetadataTable';
 import { startCase } from 'lodash';
+import React from 'react';
+import { StructuredMetadataTable } from './StructuredMetadataTable';
 
 describe('<StructuredMetadataTable />', () => {
   it('renders without exploding', () => {
@@ -31,40 +30,34 @@ describe('<StructuredMetadataTable />', () => {
 
   describe('Item Mappings', () => {
     it('Iterates over and displays every field in the map', () => {
-      const metadata: {
-        [prop: string]: string;
-      } = {
+      const metadata = {
         field1: 'one',
         field2: 'two',
         field3: 'three',
-      };
+      } as const;
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
-      const keys = Object.keys(metadata);
-      keys.forEach(value => {
-        expect(getByText(startCase(value))).toBeInTheDocument();
-        expect(getByText(metadata[value])).toBeInTheDocument();
-      });
+      for (const [key, value] of Object.entries(metadata)) {
+        expect(getByText(startCase(key))).toBeInTheDocument();
+        expect(getByText(value)).toBeInTheDocument();
+      }
     });
 
     it('Supports primitive value fields', () => {
-      const metadata: {
-        [prop: string]: string | number;
-      } = { strField: 'my field', intField: 1 };
+      const metadata = { strField: 'my field', intField: 1 } as const;
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
 
-      const keys = Object.keys(metadata);
-      keys.forEach(value => {
-        expect(getByText(startCase(value))).toBeInTheDocument();
-        expect(getByText(metadata[value].toString())).toBeInTheDocument();
-      });
+      for (const [key, value] of Object.entries(metadata)) {
+        expect(getByText(startCase(key))).toBeInTheDocument();
+        expect(getByText(value.toString())).toBeInTheDocument();
+      }
     });
 
     it('Supports array fields', () => {
-      const metadata = { arrayField: ['arrVal1', 'arrVal2'] };
+      const metadata = { arrayField: ['arrVal1', 'arrVal2'] } as const;
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
@@ -87,22 +80,19 @@ describe('<StructuredMetadataTable />', () => {
     });
 
     it('Supports object elements', () => {
-      const metadata: { [prop: string]: { [prop: string]: number } } = {
+      const metadata = {
         config: { a: 1, b: 2 },
-      };
+      } as const;
       const { getByText } = render(
         <StructuredMetadataTable metadata={metadata} />,
       );
 
-      const keys = Object.keys(metadata.config);
-      keys.forEach(value => {
+      for (const [key, value] of Object.entries(metadata.config)) {
+        expect(getByText(startCase(key), { exact: false })).toBeInTheDocument();
         expect(
-          getByText(startCase(value), { exact: false }),
+          getByText(value.toString(), { exact: false }),
         ).toBeInTheDocument();
-        expect(
-          getByText(metadata.config[value].toString(), { exact: false }),
-        ).toBeInTheDocument();
-      });
+      }
     });
   });
 });

From d8e5be1a4bd72349f43b5a2bca084565860cb625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Mon, 19 Oct 2020 09:59:28 +0200
Subject: [PATCH 9/9] two more converted to tsx

---
 .../src/components/Status/{Status.test.jsx => Status.test.tsx}    | 0
 packages/core/src/layout/ErrorPage/{MicDrop.jsx => MicDrop.tsx}   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/core/src/components/Status/{Status.test.jsx => Status.test.tsx} (100%)
 rename packages/core/src/layout/ErrorPage/{MicDrop.jsx => MicDrop.tsx} (100%)

diff --git a/packages/core/src/components/Status/Status.test.jsx b/packages/core/src/components/Status/Status.test.tsx
similarity index 100%
rename from packages/core/src/components/Status/Status.test.jsx
rename to packages/core/src/components/Status/Status.test.tsx
diff --git a/packages/core/src/layout/ErrorPage/MicDrop.jsx b/packages/core/src/layout/ErrorPage/MicDrop.tsx
similarity index 100%
rename from packages/core/src/layout/ErrorPage/MicDrop.jsx
rename to packages/core/src/layout/ErrorPage/MicDrop.tsx