@pie-lib/graphing 2.14.22 → 2.15.0-beta.2

package/src/__tests__/graph.test.jsx

@@ -0,0 +1,230 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { xy } from './utils';
+
+import Graph, { removeBuildingToolIfCurrentToolDiffers } from '../graph';
+import { toolsArr } from '@pie-lib/tools';
+
+describe('removeBuildingToolIfCurrentToolDiffers', () => {
+  let marks = [
+    {
+      type: 'point',
+      x: 2,
+      y: 2,
+      label: 'Point',
+      showLabel: true,
+    },
+    {
+      type: 'line',
+      from: { x: 0, y: 0 },
+      label: 'Line',
+      building: true,
+    },
+  ];
+
+  it('keeps all marks if currentTool is the same', () => {
+    expect(removeBuildingToolIfCurrentToolDiffers({ marks, currentTool: { type: 'line' } })).toEqual(marks);
+  });
+
+  it('removes building marks if currentTool is different', () => {
+    expect(removeBuildingToolIfCurrentToolDiffers({ marks, currentTool: { type: 'different' } })).toEqual([marks[0]]);
+  });
+});
+
+describe('Graph', () => {
+  let onChangeMarks = jest.fn();
+  let wrapper;
+
+  const complete = jest.fn();
+  const addPoint = jest.fn();
+  const currentTool = toolsArr[0];
+  currentTool.complete = complete;
+  currentTool.addPoint = addPoint;
+
+  const props = {
+    classes: {},
+    className: 'className',
+    onChangeMarks,
+    tools: toolsArr,
+    domain: { min: 0, max: 1, step: 1 },
+    range: { min: 0, max: 1, step: 1 },
+    size: { width: 400, height: 400 },
+    currentTool,
+  };
+
+  beforeEach(() => {
+    wrapper = (extras, opts) => {
+      const properties = {
+        ...props,
+        marks: [
+          {
+            type: 'point',
+            x: 2,
+            y: 2,
+            label: 'Point',
+            showLabel: true,
+          },
+          {
+            type: 'line',
+            from: { x: 0, y: 0 },
+            label: 'Line',
+            building: true,
+          },
+        ],
+        ...extras,
+      };
+      console.log('props', props.marks);
+      return shallow(<Graph {...properties} />, opts);
+    };
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      jest.spyOn(Graph.prototype, 'generateMaskId').mockReturnValue('graph-1618');
+      let w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('componentDidMount', () => {
+      it('sets the labelNode to state', () => {
+        let w = shallow(<Graph {...props} />, { disableLifecycleMethods: true });
+
+        w.instance().labelNode = {};
+        w.instance().componentDidMount();
+        expect(w.state('labelNode')).toEqual(w.instance().labelNode);
+      });
+    });
+
+    describe('changeMark', () => {
+      it('does not call onChangeMarks', () => {
+        const newMark = { type: 'mark', x: 2, y: 2 };
+
+        let w = wrapper();
+        w.instance().changeMark(newMark, newMark);
+        expect(onChangeMarks).not.toBeCalled();
+      });
+
+      it('calls onChangeMarks', () => {
+        const newMark = { type: 'mark', x: 2, y: 2 };
+
+        let w = wrapper();
+        let marks = w.instance().props.marks;
+
+        console.log('w model', w.instance().props.marks);
+        w.instance().changeMark(marks[0], newMark);
+        expect(onChangeMarks).toHaveBeenCalledWith([newMark, marks[1]]);
+      });
+    });
+
+    describe('completeMark', () => {
+      it('does not call updateMarks if no building mark', () => {
+        const updateMarks = jest.fn();
+        let w = wrapper({ marks: [{ type: 'point', x: 1, y: 1 }] });
+
+        w.instance().updateMarks = updateMarks;
+        w.instance().completeMark({ x: 3, y: 3 });
+
+        expect(complete).not.toBeCalled();
+        expect(updateMarks).not.toBeCalled();
+      });
+
+      it('does not call updateMarks if no current tool', () => {
+        const updateMarks = jest.fn();
+        let w = wrapper({ currentTool: null });
+
+        w.instance().updateMarks = updateMarks;
+        w.instance().completeMark({ x: 3, y: 3 });
+
+        expect(complete).not.toBeCalled();
+        expect(updateMarks).not.toBeCalled();
+      });
+
+      it('calls updateMarks', () => {
+        const updateMarks = jest.fn();
+        let w = wrapper();
+
+        w.instance().updateMarks = updateMarks;
+        w.instance().completeMark({ x: 3, y: 3 });
+
+        expect(complete).toHaveBeenCalled();
+        expect(updateMarks).toHaveBeenCalled();
+      });
+    });
+
+    describe('updateMarks', () => {
+      it('calls onChangeMarks', () => {
+        const marks = [{ type: 'mark', ...xy(2, 2) }];
+        const update = { type: 'mark', ...xy(4, 4) };
+
+        wrapper({ marks })
+          .instance()
+          .updateMarks(marks[0], update, false);
+      });
+
+      it('calls onChangeMarks with added mark', () => {
+        const marks = [];
+        const update = { type: 'mark', ...xy(4, 4) };
+
+        wrapper({ marks })
+          .instance()
+          .updateMarks(marks[0], [update], true);
+      });
+    });
+
+    describe('getComponent', () => {
+      let compMock = jest.fn();
+
+      it('returns null if no mark', () => {
+        let w = wrapper();
+
+        expect(w.instance().getComponent()).toEqual(null);
+        expect(w.instance().getComponent(undefined)).toEqual(null);
+        expect(w.instance().getComponent(null)).toEqual(null);
+      });
+
+      it('returns the component', () => {
+        let w = wrapper();
+        w.instance().props.tools[0].Component = compMock;
+
+        const Comp = w.instance().getComponent({ type: toolsArr[0].type });
+        expect(Comp).toEqual(compMock);
+      });
+
+      it('returns null if there is no tool', () => {
+        let w = wrapper();
+        expect(w.instance().getComponent({ type: 'mark' })).toEqual(null);
+      });
+
+      it('returns null if there is no tool.Component', () => {
+        let w = wrapper();
+        w.instance().props.tools[0].Component = undefined;
+
+        expect(w.instance().getComponent({ type: toolsArr[0].type })).toEqual(null);
+      });
+    });
+
+    describe('onBgClick', () => {
+      it('calls updateMarks', () => {
+        const buildingMark = { type: 'mark', building: true, x: 1, y: 1 };
+        const marks = [{ type: 'mark' }, buildingMark];
+
+        const updateMarks = jest.fn();
+
+        let w = wrapper({ marks });
+        w.instance().updateMarks = updateMarks;
+        w.instance().onBgClick({ x: 3, y: 3 });
+        expect(w.instance().updateMarks).toHaveBeenCalled();
+      });
+
+      it('returns early of labelModeEnabled', () => {
+        let w = wrapper({ labelModeEnabled: true });
+        w.instance().updateMarks = jest.fn();
+        w.instance().onBgClick({ x: 3, y: 3 });
+        expect(w.instance().updateMarks).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/__tests__/grid.test.jsx

@@ -0,0 +1,20 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Grid } from '../grid';
+import { graphProps } from './utils';
+
+describe('Grid', () => {
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Grid {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});

package/src/__tests__/labels.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import Labels, { getTransform } from '../labels';
+
+describe('Labels', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Labels {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('getTransform', () => {
+  const assertTransform = (side, expected) => {
+    it(`returns ${expected} for ${side}`, () => {
+      const r = getTransform('left', 100, 100);
+      expect(r).toEqual('translate(-20, 50), rotate(-90)');
+    });
+  };
+
+  assertTransform('left', 'translate(-20, 50), rotate(-90)');
+  assertTransform('right', 'translate(130, 50), rotate(90)');
+  assertTransform('top', 'translate(50, -20), rotate(0)');
+  assertTransform('bottom', 'translate(50, 130), rotate(0)');
+});

package/src/__tests__/mark-label.test.jsx

@@ -0,0 +1,68 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { MarkLabel, position, coordinates } from '../mark-label';
+import { graphProps as getGraphProps } from './utils';
+
+const xyFn = () => {
+  const out = jest.fn((n) => n);
+  out.invert = jest.fn((n) => n);
+  return out;
+};
+
+describe('MarkLabel', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      mark: { x: 1, y: 1 },
+      graphProps: getGraphProps(0, 10, 0, 10),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<MarkLabel {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+    it('renders', () => {
+      w = wrapper({ mark: { x: 10, y: 10 } });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('position', () => {
+  const assertPosition = (mark, rect, expected) => {
+    it(`${mark.x},${mark.y} + ${rect.width},${rect.height} => ${expected}`, () => {
+      // we set range.min to a value because in pixels - the greater the Y the lower down on the screen.
+      const graphProps = getGraphProps(0, 12, 12, 0);
+      const result = position(graphProps, mark, rect);
+      expect(result).toEqual(expected);
+    });
+  };
+
+  assertPosition({ x: 0, y: 0 }, { width: 10, height: 10 }, 'top-left');
+  assertPosition({ x: 0, y: 0 }, { width: 1, height: 1 }, 'bottom-right');
+  assertPosition({ x: 0, y: 0 }, { width: 10, height: 0 }, 'bottom-left');
+  assertPosition({ x: 0, y: 0 }, { width: 0, height: 10 }, 'top-right');
+});
+
+describe('coordinates', () => {
+  const assertCoordinates = (mark, rect, pos, expected) => {
+    it(`${mark.x}, ${mark.y} -> ${pos} = ${expected.left}, ${expected.top}`, () => {
+      const result = coordinates(getGraphProps(), mark, rect, pos);
+      expect(result).toEqual(expected);
+    });
+  };
+  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-left', { left: -5, top: -5 });
+  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-left', { left: -5, top: 5 });
+  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-right', { left: 5, top: -5 });
+  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-right', {
+    left: 5,
+    top: 5,
+  });
+});

package/src/__tests__/toggle-bar.test.jsx

@@ -0,0 +1,36 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ToggleBar } from '../toggle-bar';
+
+describe('ToggleBar', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      options: ['one', 'two'],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ToggleBar {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('select', () => {
+      it('calls onChange', () => {
+        w = wrapper();
+        w.instance().select({ target: { textContent: 'two' } });
+        expect(onChange).toHaveBeenLastCalledWith('two');
+      });
+    });
+  });
+});

package/src/__tests__/tool-menu.test.jsx

@@ -0,0 +1,29 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import ToolMenu from '../tool-menu';
+
+describe('ToolMenu', () => {
+  let w;
+  let onChange = jest.fn();
+  const tools = ['one', 'two'];
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      currentTool: tools[0],
+      tools,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ToolMenu {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/undo-redo.test.jsx

@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import UndoRedo from '../undo-redo';
+
+describe('UndoRedo', () => {
+  let w;
+  let onUndo = jest.fn();
+  let onRedo = jest.fn();
+  let onReset = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      onUndo,
+      onRedo,
+      onReset,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<UndoRedo {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/use-debounce.test.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { useDebounce } from '../use-debounce';
+
+jest.useFakeTimers();
+
+jest.mock('react', () => ({
+  useState: jest.fn(),
+  useEffect: jest.fn((fn, deps) => fn()),
+}));
+
+describe('useDebounce', () => {
+  it('..', () => {
+    const debouncedValue = null;
+    const setDebouncedValue = jest.fn();
+
+    useState.mockReturnValue([debouncedValue, setDebouncedValue]);
+    useDebounce('foo', 1000);
+    jest.runAllTimers();
+    expect(setDebouncedValue).toHaveBeenCalledWith('foo');
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1,38 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});
+
+export const xy = (x, y, index) => {
+  const out = { x, y, index };
+  if (!Number.isFinite(index)) {
+    delete out.index;
+  }
+  return out;
+};

package/src/__tests__/utils.test.js

@@ -0,0 +1,151 @@
+import * as utils from '../utils';
+
+const xy = (x, y) => ({ x, y });
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('lineToArea', () => {
+    const assertLine = (from, to, expected) => {
+      it(`${from},${to} => ${expected}`, () => {
+        const result = utils.lineToArea(from, to);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertLine(xy(1, 1), xy(2, 2), { left: 1, top: 2, bottom: 1, right: 2 });
+    assertLine(xy(-1, 4), xy(4, -3), {
+      left: -1,
+      top: 4,
+      bottom: -3,
+      right: 4,
+    });
+  });
+
+  describe('getTickValues', () => {
+    const assertGetTickValues = (props, expected) => {
+      it(` => ${expected}`, () => {
+        const result = utils.getTickValues(props);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertGetTickValues({ min: 0, max: 10, step: 1 }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.5 }, [0, 0.5, 1, 1.5, 2, 2.5, 3]);
+    assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
+    assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
+
+    assertGetTickValues({ min: 0.6, max: 4.8, step: 0.3 }, [
+      0.6,
+      0.9,
+      1.2,
+      1.5,
+      1.8,
+      2.1,
+      2.4,
+      2.7,
+      3.0,
+      3.3,
+      3.6,
+      3.9,
+      4.2,
+      4.5,
+      4.8,
+    ]);
+    assertGetTickValues({ min: 0.5, max: 4.9, step: 0.3 }, [
+      0.6,
+      0.9,
+      1.2,
+      1.5,
+      1.8,
+      2.1,
+      2.4,
+      2.7,
+      3.0,
+      3.3,
+      3.6,
+      3.9,
+      4.2,
+      4.5,
+      4.8,
+    ]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.125 }, [
+      0,
+      0.125,
+      0.25,
+      0.375,
+      0.5,
+      0.625,
+      0.75,
+      0.875,
+      1,
+      1.125,
+      1.25,
+      1.375,
+      1.5,
+      1.625,
+      1.75,
+      1.875,
+      2,
+      2.125,
+      2.25,
+      2.375,
+      2.5,
+      2.625,
+      2.75,
+      2.875,
+      3,
+    ]);
+  });
+
+  describe('countWords', () => {
+    it('should return 1 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 1 if label is null', () => {
+      const label = null;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 3 if label has 3 words', () => {
+      const label = 'Number of months';
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(3);
+    });
+  });
+});

package/src/axis/__tests__/__snapshots__/arrow.test.jsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Arrow snapshot down 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(0, 15) rotate(270)"
+/>
+`;
+
+exports[`Arrow snapshot left 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(-15, 0) rotate(0)"
+/>
+`;
+
+exports[`Arrow snapshot right 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(15, 0) rotate(180)"
+/>
+`;
+
+exports[`Arrow snapshot up 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(0, -15) rotate(90)"
+/>
+`;