Merge pull request #2930 from spotify/samiram/testJsxToTsx

rewrite test in typescript

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

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,29 +49,25 @@ describe('<HorizontalScrollGrid />', () => {
   });
 
   it('should show scroll buttons', async () => {
-    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 }) => {
-      lastScroll = left;
-    };
+    const scrollBy = HTMLElement.prototype.scrollBy;
+    HTMLElement.prototype.scrollBy = (({ left }: ScrollToOptions): void => {
+      lastScroll = left || 0;
+    }) as any;
 
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <HorizontalScrollGrid style={{ maxWidth: 300 }}>
+        <HorizontalScrollGrid>
           <Grid item style={{ minWidth: 200 }}>
             item1
           </Grid>
@@ -89,9 +86,6 @@ 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;
+    HTMLElement.prototype.scrollBy = scrollBy;
   });
 });

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

packages/core/src/components/ProgressBars/Gauge.test.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Gauge, getProgressColor } from './Gauge';
+import * as theme from '@backstage/theme';
 
 describe('<Gauge />', () => {
   it('renders without exploding', () => {
@@ -26,6 +27,7 @@ describe('<Gauge />', () => {
     );
     getByText('10%');
   });
+
   it('handles fractional prop', () => {
     const { getByText } = render(
       wrapInTestApp(<Gauge value={0.1} fractional />),
@@ -50,17 +52,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' 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)).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,32 +30,34 @@ 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 = {
+        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 primative value fields', () => {
-      const metadata = { strField: 'my field', intField: 1 };
+    it('Supports primitive value fields', () => {
+      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} />,
       );
@@ -79,20 +80,19 @@ describe('<StructuredMetadataTable />', () => {
     });
 
     it('Supports object elements', () => {
-      const metadata = { config: { a: 1, b: 2 } };
+      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();
-      });
+      }
     });
   });
 });