Increase ddg test coverage, fix typos

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap

@@ -56,7 +56,7 @@ exports[`<DdgNodeContent> DdgNodeContent.getNodeRenderer() returns a <DdgNodeCon
   >
     <a
       className="DdgNodeContent--actionsItem"
-      href="/deep-dependencies?operation=the-operation&service=the-service&showOp=0"
+      href="testBaseUrl?density=ppe&maxDuration=100ms&operation=the-operation&service=the-service&showOp=1"
     >
       <svg
         className="DdgNode--SetFocusIcon"
@@ -108,6 +108,78 @@ exports[`<DdgNodeContent> DdgNodeContent.getNodeRenderer() returns a <DdgNodeCon
 </div>
 `;
 
+exports[`<DdgNodeContent> DdgNodeContent.getNodeRenderer() returns a focal <DdgNodeContent /> 1`] = `
+<div
+  className="DdgNodeContent"
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+>
+  <div
+    className="DdgNodeContent--core is-focalNode"
+    style={
+      Object {
+        "height": "100px",
+        "transform": "translate(25px, 25px) scale(1.5)",
+        "width": "100px",
+      }
+    }
+  >
+    <div
+      className="DdgNodeContent--labelWrapper"
+    >
+      <h4
+        className="DdgNodeContent--label"
+        style={
+          Object {
+            "marginTop": "10px",
+            "width": "20px",
+          }
+        }
+      >
+        <BreakableText
+          className="BreakableText"
+          text="the-service"
+          wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
+        />
+      </h4>
+      <div
+        className="DdgNodeContent--label"
+        style={
+          Object {
+            "paddingTop": "5px",
+            "width": "30px",
+          }
+        }
+      >
+        <BreakableText
+          className="BreakableText"
+          text="the-operation"
+          wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="DdgNodeContent--actionsWrapper"
+  >
+    <a
+      className="DdgNodeContent--actionsItem"
+      onClick={[Function]}
+      role="button"
+    >
+      <NewWindowIcon
+        isLarge={false}
+      />
+      <span
+        className="DdgNodeContent--actionsItemText"
+      >
+        View traces
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
 exports[`<DdgNodeContent> omits the operation if it is null 1`] = `
 <div
   className="DdgNodeContent"

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.test.js

@@ -24,25 +24,29 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import DdgNodeContent from '.';
-import { EViewModifier } from '../../../../model/ddg/types';
+import { MAX_LENGTH, MAX_LINKED_TRACES, MIN_LENGTH, PARAM_NAME_LENGTH, RADIUS } from './constants';
+import * as getSearchUrl from '../../../SearchTracePage/url';
+
+import { EDdgDensity, EViewModifier } from '../../../../model/ddg/types';
 
 describe('<DdgNodeContent>', () => {
   const vertexKey = 'some-key';
   const service = 'some-service';
   const operation = 'some-operation';
+  const props = {
+    focalNodeUrl: 'some-url',
+    getVisiblePathElems: jest.fn(),
+    isFocalNode: false,
+    operation,
+    setViewModifier: jest.fn(),
+    service,
+    vertexKey,
+  };
 
   let wrapper;
-  let props;
 
   beforeEach(() => {
-    props = {
-      vertexKey,
-      service,
-      operation,
-      isFocalNode: false,
-      focalNodeUrl: 'some-url',
-      setViewModifier: jest.fn(),
-    };
+    props.getVisiblePathElems.mockReset();
     wrapper = shallow(<DdgNodeContent {...props} />);
   });
 
@@ -72,23 +76,191 @@ describe('<DdgNodeContent>', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  describe('DdgNodeContent.getNodeRenderer()', () => {
-    let ddgVertex;
+  describe('measureNode', () => {
+    it('returns twice the RADIUS with a buffer for svg border', () => {
+      const diameterWithBuffer = 2 * RADIUS + 2;
+      expect(DdgNodeContent.measureNode()).toEqual({
+        height: diameterWithBuffer,
+        width: diameterWithBuffer,
+      });
+    });
+  });
+
+  describe('viewTraces', () => {
+    const click = () =>
+      wrapper
+        .find('.DdgNodeContent--actionsItem')
+        .at(1)
+        .simulate('click');
+    const pad = num => `000${num}`.slice(-4);
+    const mockReturn = ids =>
+      props.getVisiblePathElems.mockReturnValue(ids.map(traceIDs => ({ memberOf: { traceIDs } })));
+    const calcIdxWithinLimit = arr => Math.floor(0.75 * arr.length);
+    const falsifyDuplicateAndMock = ids => {
+      const withFalsyAndDuplicate = ids.map(arr => arr.slice());
+      withFalsyAndDuplicate[0].splice(
+        calcIdxWithinLimit(withFalsyAndDuplicate[0]),
+        0,
+        withFalsyAndDuplicate[1][calcIdxWithinLimit(withFalsyAndDuplicate[1])],
+        ''
+      );
+      withFalsyAndDuplicate[1].splice(
+        calcIdxWithinLimit(withFalsyAndDuplicate[1]),
+        0,
+        withFalsyAndDuplicate[0][calcIdxWithinLimit(withFalsyAndDuplicate[0])],
+        ''
+      );
+      mockReturn(withFalsyAndDuplicate);
+    };
+    const makeIDsAndMock = (idCounts, makeID = count => `test traceID${count}`) => {
+      let idCount = 0;
+      const ids = idCounts.map(count => {
+        const rv = [];
+        for (let i = 0; i < count; i++) {
+          rv.push(makeID(pad(idCount++)));
+        }
+        return rv;
+      });
+      mockReturn(ids);
+      return ids;
+    };
+    let getSearchUrlSpy;
+    const lastIDs = () => getSearchUrlSpy.mock.calls[getSearchUrlSpy.mock.calls.length - 1][0].traceID;
+    let originalOpen;
+
+    beforeAll(() => {
+      originalOpen = window.open;
+      window.open = jest.fn();
+      getSearchUrlSpy = jest.spyOn(getSearchUrl, 'getUrl');
+    });
 
     beforeEach(() => {
-      ddgVertex = {
-        isFocalNode: false,
-        key: 'some-key',
-        operation: 'the-operation',
-        service: 'the-service',
-      };
+      window.open.mockReset();
+    });
+
+    afterAll(() => {
+      window.open = originalOpen;
+    });
+
+    it('no-ops if there are no elems for key', () => {
+      props.getVisiblePathElems.mockReturnValue();
+      click();
+      expect(window.open).not.toHaveBeenCalled();
+    });
+
+    it('opens new tab viewing single traceID from single elem', () => {
+      const ids = makeIDsAndMock([1]);
+      click();
+
+      expect(lastIDs().sort()).toEqual([].concat(...ids).sort());
+      expect(props.getVisiblePathElems).toHaveBeenCalledTimes(1);
+      expect(props.getVisiblePathElems).toHaveBeenCalledWith(vertexKey);
+    });
+
+    it('opens new tab viewing multiple traceIDs from single elem', () => {
+      const ids = makeIDsAndMock([3]);
+      click();
+
+      expect(lastIDs().sort()).toEqual([].concat(...ids).sort());
+    });
+
+    it('opens new tab viewing multiple traceIDs from multiple elems', () => {
+      const ids = makeIDsAndMock([3, 2]);
+      click();
+
+      expect(lastIDs().sort()).toEqual([].concat(...ids).sort());
+    });
+
+    it('ignores falsy and duplicate IDs', () => {
+      const ids = makeIDsAndMock([3, 3]);
+      falsifyDuplicateAndMock(ids);
+      click();
+
+      expect(lastIDs().sort()).toEqual([].concat(...ids).sort());
+    });
+
+    describe('MAX_LINKED_TRACES', () => {
+      const ids = makeIDsAndMock([MAX_LINKED_TRACES, MAX_LINKED_TRACES, 1]);
+      const expected = [
+        ...ids[0].slice(MAX_LINKED_TRACES / 2 + 1),
+        ...ids[1].slice(MAX_LINKED_TRACES / 2 + 1),
+        ids[2][0],
+      ].sort();
+
+      it('limits link to only include MAX_LINKED_TRACES, taking equal from each pathElem', () => {
+        mockReturn(ids);
+        click();
+
+        expect(lastIDs().sort()).toEqual(expected);
+      });
+
+      it('does not count falsy and duplicate IDs towards MAX_LINKED_TRACES', () => {
+        falsifyDuplicateAndMock(ids);
+        click();
+
+        expect(lastIDs().sort()).toEqual(expected);
+      });
     });
 
+    describe('MAX_LENGTH', () => {
+      const effectiveMaxLength = MAX_LENGTH - MIN_LENGTH;
+      const TARGET_ID_COUNT = 31;
+      const paddingLength = Math.floor(effectiveMaxLength / TARGET_ID_COUNT) - PARAM_NAME_LENGTH;
+      const idPadding = 'x'.repeat(paddingLength - pad(0).length);
+      const ids = makeIDsAndMock([TARGET_ID_COUNT, TARGET_ID_COUNT, 1], num => `${idPadding}${num}`);
+      const expected = [
+        ...ids[0].slice(TARGET_ID_COUNT / 2 + 1),
+        ...ids[1].slice(TARGET_ID_COUNT / 2 + 1),
+        ids[2][0],
+      ].sort();
+
+      it('limits link to only include MAX_LENGTH, taking equal from each pathElem', () => {
+        mockReturn(ids);
+        click();
+
+        expect(lastIDs().sort()).toEqual(expected);
+      });
+
+      it('does not count falsy and duplicate IDs towards MAX_LEN', () => {
+        falsifyDuplicateAndMock(ids);
+        click();
+
+        expect(lastIDs().sort()).toEqual(expected);
+      });
+    });
+  });
+
+  describe('DdgNodeContent.getNodeRenderer()', () => {
+    const ddgVertex = {
+      isFocalNode: false,
+      key: 'some-key',
+      operation: 'the-operation',
+      service: 'the-service',
+    };
+    const noOp = () => {};
+
     it('returns a <DdgNodeContent />', () => {
-      const ddgNode = DdgNodeContent.getNodeRenderer(() => undefined)(ddgVertex);
+      const ddgNode = DdgNodeContent.getNodeRenderer(
+        noOp,
+        noOp,
+        EDdgDensity.PreventPathEntanglement,
+        true,
+        'testBaseUrl',
+        { maxDuration: '100ms' }
+      )(ddgVertex);
       expect(ddgNode).toBeDefined();
       expect(shallow(ddgNode)).toMatchSnapshot();
       expect(ddgNode.type).toBe(DdgNodeContent);
     });
+
+    it('returns a focal <DdgNodeContent />', () => {
+      const focalNode = DdgNodeContent.getNodeRenderer(noOp, noOp)({
+        ...ddgVertex,
+        isFocalNode: true,
+      });
+      expect(focalNode).toBeDefined();
+      expect(shallow(focalNode)).toMatchSnapshot();
+      expect(focalNode.type).toBe(DdgNodeContent);
+    });
   });
 });

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx

@@ -90,7 +90,7 @@ export default class DdgNodeContent extends React.PureComponent<TProps> {
       const urlIds: Set<string> = new Set();
       let currLength = MIN_LENGTH;
       // Because there is a limit on traceIDs, attempt to get some from each elem rather than all from one.
-      const allIDs = elems.map(({ memberOf: m }) => m.traceIDs.slice());
+      const allIDs = elems.map(({ memberOf }) => memberOf.traceIDs.slice());
       while (allIDs.length) {
         const ids = allIDs.shift();
         if (ids && ids.length) {