From fe2287bc80ff40510453a6523b18d88d180d1249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Mon, 19 Oct 2020 08:36:57 +0200 Subject: [PATCH] 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('', () => { 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('', () => { }); 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('', () => { 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('', () => { it('renders without exploding', () => { @@ -31,6 +27,7 @@ describe('', () => { ); getByText('10%'); }); + it('handles fractional prop', () => { const { getByText } = render( wrapInTestApp(), @@ -61,14 +58,14 @@ describe('', () => { }; 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('', () => { }); it('handles invalid numbers', () => { - const badProps = { title: 'Tingle upgrade', progress: 'hejjo' }; + const badProps = { title: 'Tingle upgrade', progress: 'hejjo' } as any; const { getByText } = render(wrapInTestApp()); 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('', () => { it('renders without exploding', () => { @@ -31,40 +30,34 @@ describe('', () => { 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( , ); - 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( , ); - 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( , ); @@ -87,22 +80,19 @@ describe('', () => { }); it('Supports object elements', () => { - const metadata: { [prop: string]: { [prop: string]: number } } = { + const metadata = { config: { a: 1, b: 2 }, - }; + } as const; const { getByText } = render( , ); - 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(); - }); + } }); }); });