@pie-lib/graphing 2.14.22 → 2.15.1-beta.0

package/src/__tests__/__snapshots__/grid.test.jsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid snapshot renders 1`] = `
+<Fragment>
+  <r
+    columnTickValues={
+      Array [
+        0,
+        1,
+      ]
+    }
+    height={400}
+    innerRef={[Function]}
+    rowTickValues={
+      Array [
+        0,
+        1,
+      ]
+    }
+    stroke="#E1E6EC"
+    width={400}
+    xScale={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            0,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": 0,
+          },
+        ],
+      }
+    }
+    yScale={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            0,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": 0,
+          },
+        ],
+      }
+    }
+  />
+</Fragment>
+`;

package/src/__tests__/__snapshots__/labels.test.jsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Labels snapshot renders 1`] = `
+<Fragment>
+  <WithStyles(RawLabel)
+    key="left"
+    mathMlOptions={Object {}}
+    onChange={[Function]}
+    side="left"
+  />
+  <WithStyles(RawLabel)
+    key="top"
+    mathMlOptions={Object {}}
+    onChange={[Function]}
+    side="top"
+  />
+  <WithStyles(RawLabel)
+    key="bottom"
+    mathMlOptions={Object {}}
+    onChange={[Function]}
+    side="bottom"
+  />
+  <WithStyles(RawLabel)
+    key="right"
+    mathMlOptions={Object {}}
+    onChange={[Function]}
+    side="right"
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkLabel snapshot renders 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "display": "flex",
+      "gap": "3px",
+      "left": 6,
+      "pointerEvents": "auto",
+      "position": "fixed",
+      "top": -4,
+    }
+  }
+>
+  <LabelInput
+    _ref={[Function]}
+    inputClassName=""
+    onChange={[Function]}
+  />
+</div>
+`;
+
+exports[`MarkLabel snapshot renders 2`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "display": "flex",
+      "gap": "3px",
+      "left": 5,
+      "pointerEvents": "auto",
+      "position": "fixed",
+      "top": 5,
+    }
+  }
+>
+  <LabelInput
+    _ref={[Function]}
+    inputClassName=""
+    onChange={[Function]}
+  />
+</div>
+`;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleBar snapshot renders 1`] = `
+<div
+  className="className"
+/>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolMenu snapshot renders 1`] = `
+<div
+  className="className"
+>
+  <Component
+    onChange={[MockFunction]}
+    onChangeToolsOrder={[Function]}
+    options={Array []}
+  />
+</div>
+`;

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UndoRedo snapshot renders 1`] = `
+<UndoRedo
+  classes={
+    Object {
+      "button": "UndoRedo-button-1",
+    }
+  }
+  onRedo={[MockFunction]}
+  onReset={[MockFunction]}
+  onUndo={[MockFunction]}
+/>
+`;

package/src/__tests__/graph-with-controls.test.jsx

@@ -0,0 +1,147 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { xy } from './utils';
+
+import {
+  GraphWithControls,
+  setToolbarAvailability,
+  toolIsAvailable,
+  getAvailableTool,
+  filterByValidToolTypes,
+  filterByVisibleToolTypes,
+} from '../graph-with-controls';
+import { toolsArr, allTools, line as lineTool, point as pointTool } from '@pie-lib/tools';
+
+const point = {
+  type: 'point',
+  x: 2,
+  y: 2,
+  label: 'Point',
+  showLabel: true,
+};
+
+const line = {
+  type: 'line',
+  from: { x: 0, y: 0 },
+  to: { x: 1, y: 1 },
+  label: 'Line',
+  building: true,
+};
+
+const circle = {
+  type: 'line',
+  edge: { x: 0, y: 0 },
+  root: { x: 2, y: 2 },
+};
+
+const marks = [point, line, circle];
+
+describe('setToolbarAvailability', () => {
+  it('sets `toolbar: true` if tool should be displayed in toolbar - all tools', () => {
+    const result = setToolbarAvailability(allTools);
+    const allTrue = new Array(toolsArr.length).fill(true);
+
+    expect(result.map((r) => r.toolbar)).toEqual(allTrue);
+  });
+
+  it('sets `toolbar: true` if tool should be displayed in toolbar - few tools', () => {
+    const result = setToolbarAvailability(['line', 'circle']);
+    const allOthersFalse = new Array(toolsArr.length - 2).fill(false);
+
+    expect(result.filter((r) => r.type === 'line' || r.type === 'circle').map((r) => r.toolbar)).toEqual([true, true]);
+    expect(result.filter((r) => r.type !== 'line' && r.type !== 'circle').map((r) => r.toolbar)).toEqual(
+      allOthersFalse,
+    );
+  });
+});
+
+describe('toolIsAvailable', () => {
+  const tools = setToolbarAvailability(['line', 'circle']);
+
+  it('returns true if tool is available', () => {
+    expect(toolIsAvailable(tools, lineTool())).toEqual(true);
+  });
+
+  it('returns false if tool is not available', () => {
+    expect(toolIsAvailable(tools, pointTool())).toEqual(false);
+  });
+});
+
+describe('getAvailableTool', () => {
+  it('returns the first available tool in list if there is any', () => {
+    const tools = setToolbarAvailability(['line', 'circle']);
+
+    expect(getAvailableTool(tools).toolbar).toEqual(true);
+  });
+
+  it('returns undefined list if there is no available tool', () => {
+    const tools = setToolbarAvailability([]);
+
+    expect(getAvailableTool(tools)).toEqual(undefined);
+  });
+});
+
+describe('filterByValidToolTypes', () => {
+  it('filters marks by valid types', () => {
+    const marks = [{ type: 'point' }, { type: 'a' }, { type: 'b' }, { type: 'line' }, { type: 'c' }];
+
+    expect(filterByValidToolTypes(marks)).toEqual([{ type: 'point' }, { type: 'line' }]);
+  });
+});
+
+describe('filterByVisibleToolTypes', () => {
+  it('filters marks by the types that should be visible', () => {
+    expect(
+      filterByVisibleToolTypes(['line', 'circle'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }]),
+    ).toEqual([{ type: 'line' }, { type: 'circle' }]);
+
+    expect(
+      filterByVisibleToolTypes(['line', 'circle', 'point'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }]),
+    ).toEqual([{ type: 'point' }, { type: 'line' }, { type: 'circle' }]);
+
+    expect(filterByVisibleToolTypes(['line'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }])).toEqual([
+      { type: 'line' },
+    ]);
+
+    expect(filterByVisibleToolTypes(['segment'], [{ type: 'point' }, { type: 'line' }, { type: 'circle' }])).toEqual(
+      [],
+    );
+  });
+});
+
+describe('GraphWithControls', () => {
+  let w;
+  let onChangeMarks = jest.fn();
+
+  const defaultProps = () => ({
+    axesSettings: { includeArrows: true },
+    backgroundMarks: [point, line, circle],
+    classes: {},
+    className: '',
+    coordinatesOnHover: false,
+    domain: { min: 0, max: 10, step: 1 },
+    labels: { top: 'a', left: 'b', right: 'c', bottom: 'd' },
+    labelModeEnabled: true,
+    marks,
+    onChangeMarks,
+    range: { min: 0, max: 10, step: 1 },
+    size: { width: 500, height: 500 },
+    title: 'Title',
+    toolbarTools: allTools,
+  });
+  const initialProps = defaultProps();
+
+  const wrapper = (extras, opts) => {
+    const props = { ...initialProps, ...extras };
+
+    return shallow(<GraphWithControls {...props} />, opts);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

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,
+  });
+});