From 87de8ed3f7e6784381f2eab535c3d8399e99c472 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sun, 11 Sep 2022 16:57:35 +0200
Subject: [PATCH] core-components: fix usage of invalid elements in
 DependencyGrape tests

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../components/DependencyGraph/Edge.test.tsx  | 27 ++++++++++++++-----
 .../components/DependencyGraph/Node.test.tsx  | 23 +++++++++++-----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx
index 82f0435ebd..db6fbe7552 100644
--- a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx
+++ b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx
@@ -38,7 +38,7 @@ const id = {
 
 const setEdge = jest.fn();
 const renderElement = jest.fn((props: RenderLabelProps) => (
-  <text>{props.edge.label}</text>
+  <div>{props.edge.label}</div>
 ));
 
 const minProps = {
@@ -53,8 +53,7 @@ const edgeWithLabel = { ...edge, label };
 
 describe('<Edge />', () => {
   beforeEach(() => {
-    // jsdom does not support SVG elements so we have to fall back to HTMLUnknownElement
-    Object.defineProperty(window.HTMLUnknownElement.prototype, 'getBBox', {
+    Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
       configurable: true,
     });
@@ -63,26 +62,40 @@ describe('<Edge />', () => {
   afterEach(jest.clearAllMocks);
 
   it('does not render the supplied label element if label is missing', () => {
-    const { container } = render(<Edge {...minProps} />);
+    const { container } = render(
+      <svg>
+        <Edge {...minProps} />
+      </svg>,
+    );
     expect(container.getElementsByTagName('g')).toHaveLength(0);
   });
 
   it('renders the supplied label element if label is present', () => {
-    const { getByText } = render(<Edge {...minProps} edge={edgeWithLabel} />);
+    const { getByText } = render(
+      <svg>
+        <Edge {...minProps} edge={edgeWithLabel} />
+      </svg>,
+    );
     expect(getByText(label)).toBeInTheDocument();
   });
 
   it('passes down edge properties to the render method if label is present', () => {
     const edgeWithRandomProp = { ...edge, label, randomProp: true };
     render(
-      <Edge {...minProps} render={renderElement} edge={edgeWithRandomProp} />,
+      <svg>
+        <Edge {...minProps} render={renderElement} edge={edgeWithRandomProp} />
+      </svg>,
     );
 
     expect(renderElement).toHaveBeenCalledWith({ edge: edgeWithRandomProp });
   });
 
   it('calls setEdge with edge ID and actual label size after rendering', () => {
-    const { getByText } = render(<Edge {...minProps} edge={edgeWithLabel} />);
+    const { getByText } = render(
+      <svg>
+        <Edge {...minProps} edge={edgeWithLabel} />
+      </svg>,
+    );
     expect(getByText(label)).toBeInTheDocument();
 
     // Updates the edge in the graph
diff --git a/packages/core-components/src/components/DependencyGraph/Node.test.tsx b/packages/core-components/src/components/DependencyGraph/Node.test.tsx
index aaba09c004..ea69220336 100644
--- a/packages/core-components/src/components/DependencyGraph/Node.test.tsx
+++ b/packages/core-components/src/components/DependencyGraph/Node.test.tsx
@@ -23,7 +23,7 @@ import { RenderNodeProps } from './types';
 const node = { id: 'abc', x: 0, y: 0, width: 0, height: 0 };
 const setNode = jest.fn(() => new dagre.graphlib.Graph());
 const renderElement = jest.fn((props: RenderNodeProps) => (
-  <text>{props.node.id}</text>
+  <div>{props.node.id}</div>
 ));
 
 const minProps = {
@@ -34,8 +34,7 @@ const minProps = {
 
 describe('<Node />', () => {
   beforeEach(() => {
-    // jsdom does not support SVG elements so we have to fall back to HTMLUnknownElement
-    Object.defineProperty(window.HTMLUnknownElement.prototype, 'getBBox', {
+    Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
       configurable: true,
     });
@@ -44,19 +43,31 @@ describe('<Node />', () => {
   afterEach(jest.clearAllMocks);
 
   it('renders the supplied element', () => {
-    const { getByText } = render(<Node {...minProps} />);
+    const { getByText } = render(
+      <svg>
+        <Node {...minProps} />
+      </svg>,
+    );
     expect(getByText(minProps.node.id)).toBeInTheDocument();
   });
 
   it('passes down node properties to the render method', () => {
     const nodeWithRandomProp = { ...node, randomProp: true };
-    render(<Node {...minProps} node={nodeWithRandomProp} />);
+    render(
+      <svg>
+        <Node {...minProps} node={nodeWithRandomProp} />
+      </svg>,
+    );
 
     expect(renderElement).toHaveBeenCalledWith({ node: nodeWithRandomProp });
   });
 
   it('calls setNode with node ID and actual size after rendering', () => {
-    const { getByText } = render(<Node {...minProps} />);
+    const { getByText } = render(
+      <svg>
+        <Node {...minProps} />
+      </svg>,
+    );
     expect(getByText(minProps.node.id)).toBeInTheDocument();
 
     // Updates the node in the graph