Refactoring: DAG migrated to Plexus's Digraph

packages/jaeger-ui/package.json

@@ -55,9 +55,6 @@
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",
     "copy-to-clipboard": "^3.1.0",
-    "cytoscape": "^3.2.1",
-    "cytoscape-dagre": "^2.0.0",
-    "dagre": "^0.8.5",
     "dayjs": "^1.11.9",
     "deep-freeze": "^0.0.1",
     "drange": "^2.0.0",

packages/jaeger-ui/src/components/DependencyGraph/DAG.test.js

@@ -13,8 +13,10 @@
 // limitations under the License.
 
 import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
 import { render, screen } from '@testing-library/react';
-import DAG from './DAG';
+import { shallow } from 'enzyme';
+import DAG, { renderNode } from './DAG';
 
 // mock canvas API (we don't care about canvas results)
 
@@ -54,28 +56,124 @@ window.HTMLCanvasElement.prototype.getContext = function getContext() {
     clip() {},
   };
 };
+
 describe('<DAG>', () => {
-  it('does not explode', () => {
+  let renderer;
+
+  beforeEach(() => {
+    renderer = new ShallowRenderer();
+  });
+
+  it('shows correct number of nodes and vertices', () => {
     const serviceCalls = [
       {
         callCount: 1,
         child: 'child-id',
         parent: 'parent-id',
       },
     ];
-    render(<DAG serviceCalls={serviceCalls} />);
-    expect(screen.getByTestId('cy')).toBeDefined();
+
+    renderer.render(<DAG serviceCalls={serviceCalls} />);
+    const element = renderer.getRenderOutput();
+
+    expect(element.props.children.props.vertices.length).toBe(2);
+    expect(element.props.children.props.edges.length).toBe(1);
   });
 
-  it('does not explode with empty strings or string with only spaces', () => {
+  it('does not show nodes with empty strings or string with only spaces', () => {
     const serviceCalls = [
       {
         callCount: 1,
         child: '',
         parent: ' ',
       },
     ];
-    render(<DAG serviceCalls={serviceCalls} />);
-    expect(screen.getByTestId('cy')).toBeDefined();
+
+    renderer.render(<DAG serviceCalls={serviceCalls} />);
+    const element = renderer.getRenderOutput();
+
+    // Empty or blank strings getting skipped is desirable
+    // But should not cause the component to break
+    expect(element.props.children.props.vertices.length).toBe(0);
+    expect(element.props.children.props.edges.length).toBe(0);
+  });
+});
+
+describe('renderNode', () => {
+  it('correctly displays the vertex key', async () => {
+    const vertex = {
+      key: 'Test',
+    };
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('Test');
+  });
+
+  it('correctly displays the vertex key if it is number', async () => {
+    const vertex = {
+      key: 2,
+    };
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('2');
+  });
+
+  it('displays nothing if vertext is undefined', async () => {
+    const vertex = undefined;
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('');
+  });
+
+  it('displays nothing if vertext is null', async () => {
+    const vertex = null;
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('');
+  });
+
+  it('displays nothing if vertext key is undefined', async () => {
+    const vertex = {
+      key: undefined,
+    };
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('');
+  });
+
+  it('displays nothing if vertext key is null', async () => {
+    const vertex = {
+      key: null,
+    };
+
+    render(renderNode(vertex));
+
+    const element = await screen.findByTestId('dagNodeLabel');
+
+    expect(element.textContent).toBe('');
+  });
+});
+
+describe('clean up', () => {
+  it('stops LayoutManager before unmounting', () => {
+    const wrapper = shallow(<DAG serviceCalls={[]} />);
+    const stopAndReleaseSpy = jest.spyOn(wrapper.instance().layoutManager, 'stopAndRelease');
+    wrapper.unmount();
+    expect(stopAndReleaseSpy).toHaveBeenCalledTimes(1);
   });
 });