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;