address comments

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;
   });
 });

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);

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();
   });

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();
-      });
+      }
     });
   });
 });