add polyfill for SVGElement.prototype.getBBox (not supported in JSDOM)

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(
+      <ThemeProvider theme={lightTheme}>
+        <Radar {...minProps} />
+      </ThemeProvider>,
+    );
+
+    const svg = rendered.container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg!.getAttribute('width')).toEqual('500');
+    expect(svg!.getAttribute('height')).toEqual('200');
+  });
+});

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

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(
       <ThemeProvider theme={lightTheme}>
         <ExampleRadar />
       </ThemeProvider>,
     );
-    expect(rendered.getByText('Welcome to the Tech Radar')).toBeInTheDocument();
+
+    expect(getByText('Welcome to the Tech Radar!')).toBeInTheDocument();
   });
 });

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;