From e6af811771d16b6cd80b7702092beaff35cc442a Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 24 Apr 2020 12:40:06 +0200 Subject: [PATCH] add polyfill for SVGElement.prototype.getBBox (not supported in JSDOM) --- .../src/components/Radar/Radar.test.tsx | 63 +++++++++++++++++++ .../src/components/RadarGrid/RadarGrid.js | 2 +- .../src/example/ExampleRadar.test.tsx | 19 ++++-- .../tech-radar/src/utils/polyfills/getBBox.ts | 39 ++++++++++++ 4 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 plugins/tech-radar/src/components/Radar/Radar.test.tsx create mode 100644 plugins/tech-radar/src/utils/polyfills/getBBox.ts diff --git a/plugins/tech-radar/src/components/Radar/Radar.test.tsx b/plugins/tech-radar/src/components/Radar/Radar.test.tsx new file mode 100644 index 0000000000..f68002ade2 --- /dev/null +++ b/plugins/tech-radar/src/components/Radar/Radar.test.tsx @@ -0,0 +1,63 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { ThemeProvider } from '@material-ui/core'; +import { lightTheme } from '@backstage/theme'; +import GetBBoxPolyfill from '../../utils/polyfills/getBBox'; + +import Radar from './Radar'; + +const minProps = { + width: 500, + height: 200, + quadrants: [{ id: 'languages', name: 'Languages' }], + rings: [{ id: 'use', name: 'USE', color: '#93c47d' }], + entries: [ + { + id: 'typescript', + title: 'TypeScript', + quadrant: 'languages', + moved: 0, + ring: 'use', + url: '#', + }, + ], +}; + +describe('Radar', () => { + beforeAll(() => { + GetBBoxPolyfill.create(0, 0, 1000, 500); + }); + + afterAll(() => { + GetBBoxPolyfill.remove(); + }); + + it('should render', () => { + const rendered = render( + + + , + ); + + const svg = rendered.container.querySelector('svg'); + expect(svg).not.toBeNull(); + expect(svg!.getAttribute('width')).toEqual('500'); + expect(svg!.getAttribute('height')).toEqual('200'); + }); +}); diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.js b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.js index 99a3d95fc0..ce6c046242 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.js +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.js @@ -93,7 +93,7 @@ class RadarGrid extends React.PureComponent { RadarGrid.propTypes = { radius: PropTypes.number.isRequired, rings: PropTypes.arrayOf(PropTypes.shape(CommonPropTypes.RING)).isRequired, - classes: PropTypes.array.isRequired, // this is the withStyles HOC + classes: PropTypes.object.isRequired, // this is the withStyles HOC }; export default withStyles(styles)(RadarGrid); diff --git a/plugins/tech-radar/src/example/ExampleRadar.test.tsx b/plugins/tech-radar/src/example/ExampleRadar.test.tsx index ed8e678060..c5eb0655a0 100644 --- a/plugins/tech-radar/src/example/ExampleRadar.test.tsx +++ b/plugins/tech-radar/src/example/ExampleRadar.test.tsx @@ -16,19 +16,28 @@ import React from 'react'; import { render } from '@testing-library/react'; -import mockFetch from 'jest-fetch-mock'; -import ExampleRadar from './ExampleRadar'; import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; +import GetBBoxPolyfill from '../utils/polyfills/getBBox'; + +import ExampleRadar from './ExampleRadar'; describe('ExampleRadar', () => { + beforeAll(() => { + GetBBoxPolyfill.create(0, 0, 1000, 500); + }); + + afterAll(() => { + GetBBoxPolyfill.remove(); + }); + it('should render', () => { - mockFetch.mockResponse(() => new Promise(() => {})); - const rendered = render( + const { getByText } = render( , ); - expect(rendered.getByText('Welcome to the Tech Radar')).toBeInTheDocument(); + + expect(getByText('Welcome to the Tech Radar!')).toBeInTheDocument(); }); }); diff --git a/plugins/tech-radar/src/utils/polyfills/getBBox.ts b/plugins/tech-radar/src/utils/polyfills/getBBox.ts new file mode 100644 index 0000000000..664b72302e --- /dev/null +++ b/plugins/tech-radar/src/utils/polyfills/getBBox.ts @@ -0,0 +1,39 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// For testing with Jest and JSDOM +// SVGGElement.prototype.getBBox to calculate boundaries. +// JSDOM doesn't support this: https://github.com/jsdom/jsdom/issues/1664 +class GetBBoxPolyfill { + static create( + x: number = 0, + y: number = 0, + width: number = 1000, + height: number = 500, + ) { + Object.defineProperty(window.Element.prototype, 'getBBox', { + writable: false, + value: () => ({ x, y, width, height }), + }); + } + + static remove() { + // @ts-ignore + delete window.Element.prototype.getBBox; + } +} + +export default GetBBoxPolyfill;