@pie-lib/plot 2.7.4-next.0 → 2.7.4-next.1618

package/src/__tests__/grid-draggable.test.jsx

@@ -0,0 +1,326 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { gridDraggable } from '../grid-draggable';
+import { getDelta } from '../utils';
+
+import { clientPoint } from 'd3-selection';
+
+jest.mock('d3-selection', () => ({
+  clientPoint: jest.fn().mockReturnValue([0, 0]),
+}));
+
+jest.mock('../draggable', () => ({
+  DraggableCore: jest.fn((type, props, children) => children),
+}));
+
+jest.mock('../utils', () => ({
+  getDelta: jest.fn(),
+}));
+
+const xyFn = () => {
+  const out = jest.fn((n) => n);
+  out.invert = jest.fn((n) => n);
+  return out;
+};
+const getGraphProps = () => ({
+  scale: {
+    x: xyFn(),
+    y: xyFn(),
+  },
+  snap: {
+    x: xyFn(),
+    y: xyFn(),
+  },
+  domain: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  range: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  size: {
+    width: 500,
+    height: 500,
+  },
+  getRootNode: () => ({}),
+});
+
+describe('gridDraggable', () => {
+  const wrapper = (opts, extras) => {
+    const defaults = {
+      graphProps: getGraphProps(),
+    };
+
+    defaults.graphProps.scale.x.invert = jest.fn((x) => x);
+    defaults.graphProps.scale.y.invert = jest.fn((x) => x);
+
+    const props = { ...defaults, ...extras };
+
+    opts = {
+      anchorPoint: jest.fn().mockReturnValue({ x: 0, y: 0 }),
+      bounds: jest.fn().mockReturnValue({ left: 0, top: 0, bottom: 0, right: 0 }),
+      fromDelta: jest.fn(),
+      ...opts,
+    };
+
+    const Comp = gridDraggable(opts)(() => <div />);
+    return shallow(<Comp {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('reqular', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('render with decimals', () => {
+      const w = wrapper(
+        {},
+        {
+          domain: {
+            min: -1.5,
+            max: 1.6,
+            step: 0.3,
+          },
+          range: {
+            min: -2,
+            max: 3,
+            step: 0.2,
+          },
+        },
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('grid', () => {
+      it('returns the grid', () => {
+        const w = wrapper();
+        const g = w.instance().grid();
+        expect(g).toEqual({ x: 1, y: 1 });
+      });
+    });
+
+    describe('onStart', () => {
+      it('sets the drag state', () => {
+        const w = wrapper();
+        w.instance().onStart({ clientX: 100, clientY: 100 });
+        expect(w.state().startX).toEqual(100);
+        expect(w.state().startY).toEqual(100);
+      });
+
+      it('calls the handler', () => {
+        const onDragStart = jest.fn();
+        const w = wrapper(
+          {},
+          {
+            onDragStart,
+          },
+        );
+        w.instance().onStart({ clientX: 100, clientY: 100 });
+        expect(onDragStart).toHaveBeenCalled();
+      });
+    });
+
+    describe('position', () => {
+      it('returns position object', () => {
+        const w = wrapper();
+        const pos = w.instance().position();
+
+        const anchorPoint = {
+          x: 0,
+          y: 0,
+        };
+        expect(pos).toEqual({
+          anchorPoint,
+          x: expect.any(Function),
+          y: expect.any(Function),
+        });
+      });
+    });
+
+    describe('tiny', () => {
+      it('returns true for 10 ', () => {
+        const w = wrapper();
+        w.setState({ startX: 0 });
+        const result = w.instance().tiny('x', { clientX: 10 });
+        expect(result).toBe(false);
+      });
+      it('returns true for 0.01', () => {
+        const w = wrapper();
+        w.setState({ startX: 0 });
+        const result = w.instance().tiny('x', { clientX: 0.01 });
+        expect(result).toBe(true);
+      });
+    });
+
+    describe('onDrag', () => {
+      let onDrag, w;
+
+      beforeEach(() => {
+        onDrag = jest.fn();
+        w = wrapper({}, { onDrag });
+        w.instance().applyDelta = jest.fn().mockReturnValue(0);
+        w.instance().props.graphProps.getRootNode = jest.fn().mockReturnValue({
+          ownerSVGElement: null,
+          getBoundingClientRect: jest.fn(() => ({
+            left: 0,
+            top: 0,
+            right: 100,
+            bottom: 100,
+          })),
+        });
+        w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]); // Mocking getClientPoint
+        w.instance().onDrag({}, { x: 1, y: 1 });
+      });
+
+      it('calls applyDelta', () => {
+        expect(w.instance().applyDelta).toHaveBeenCalled();
+      });
+
+      it('calls callback', () => {
+        expect(onDrag).toHaveBeenCalledWith(0);
+      });
+
+      const bounds = (left, right, top, bottom) => ({ left, right, top, bottom });
+      describe('bounds', () => {
+        const assertEarlyExit = (bounds, dd) => {
+          it(`${JSON.stringify(bounds)}, ${dd.deltaX}, ${dd.deltaY} `, () => {
+            w = wrapper({}, { onDrag });
+            w.instance().getScaledBounds = jest.fn().mockReturnValue(bounds);
+            w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]);
+            w.instance().onDrag({}, dd);
+            expect(w.instance().getClientPoint).not.toHaveBeenCalled();
+          });
+        };
+        assertEarlyExit(bounds(0, 0, 0, 0), { deltaX: -10 });
+        assertEarlyExit(bounds(0, 0, 0, 0), { deltaX: 10 });
+        assertEarlyExit(bounds(-100, 100, 0, 0), { deltaY: -10 });
+        assertEarlyExit(bounds(-100, 100, -100, 0), { deltaY: 10 });
+        it('calls client point if it doesnt exit early bounds', () => {
+          w = wrapper({}, { onDrag });
+          w.instance().getScaledBounds = jest.fn().mockReturnValue(bounds(100, 100, 100, 100));
+          w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]);
+          w.instance().onDrag({}, { deltaX: 10 });
+          expect(w.instance().getClientPoint).toHaveBeenCalled(); // Asserting that getClientPoint is called
+        });
+      });
+    });
+
+    describe('skipDragOutsideOfBounds', () => {
+      let w;
+      const assertSkipDrag = (dd, rawXFn, rawYFn, expected) => {
+        rawXFn = rawXFn || ((x) => x);
+        rawYFn = rawYFn || ((y) => y);
+
+        it(`${dd.deltaX}, ${dd.deltaY}, ${expected}`, () => {
+          w = wrapper({});
+          const gp = getGraphProps();
+
+          const mockGetBoundingClientRect = jest.fn(() => ({
+            left: 0,
+            top: 0,
+            right: 100,
+            bottom: 100,
+          }));
+
+          w.instance().getClientPoint = jest.fn(() => [
+            rawXFn(gp.domain.min, gp.domain.max),
+            rawYFn(gp.range.min, gp.range.max),
+          ]);
+
+          const rootNode = {
+            ownerSVGElement: null,
+            getBoundingClientRect: mockGetBoundingClientRect,
+          };
+
+          const result = w.instance().skipDragOutsideOfBounds(dd, {}, { ...gp, getRootNode: () => rootNode });
+          expect(result).toEqual(expected);
+        });
+      };
+      assertSkipDrag(
+        { deltaX: 1 },
+        (min, max) => min - 1,
+        (min, max) => min,
+        true,
+      );
+      assertSkipDrag(
+        { deltaX: -1 },
+        (min, max) => max + 1,
+        (min, max) => min,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: 1 },
+        (min, max) => max,
+        (min, max) => max + 1,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: -1 },
+        (min, max) => max,
+        (min, max) => min - 1,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: 1 },
+        (min, max) => max,
+        (min, max) => max,
+        false,
+      );
+      assertSkipDrag(
+        { deltaY: -1 },
+        (min, max) => max,
+        (min, max) => min,
+        false,
+      );
+    });
+
+    describe('getDelta', () => {
+      it('calls utils.getDelta', () => {
+        const w = wrapper();
+        w.instance().position = jest.fn().mockReturnValue({
+          anchorPoint: {
+            x: 0,
+            y: 0,
+          },
+          x: jest.fn((x) => x),
+          y: jest.fn((y) => y),
+        });
+        w.instance().getDelta({ x: 1, y: 1 });
+        expect(getDelta).toHaveBeenCalledWith({ x: 0, y: 0 }, { x: 1, y: 1 });
+      });
+    });
+    describe('applyDelta', () => {
+      it('calls fromDelta', () => {
+        const fromDelta = jest.fn();
+        const w = wrapper({ fromDelta });
+        w.instance().getDelta = jest.fn();
+        w.instance().applyDelta({ x: 1, y: 1 });
+        expect(fromDelta).toHaveBeenCalledWith(expect.anything(), undefined);
+      });
+    });
+    describe('onStop', () => {
+      it('calls onDragStop', () => {
+        const onDragStop = jest.fn();
+        const w = wrapper({}, { onDragStop });
+        w.setState({ startX: 0, startY: 0 });
+        w.instance().onStop({}, {});
+        expect(onDragStop).toHaveBeenCalled();
+      });
+
+      it('calls onClick if tiny', () => {
+        const onClick = jest.fn();
+        const w = wrapper({}, { onClick });
+        w.instance().tiny = jest.fn().mockReturnValue(true);
+        clientPoint.mockReturnValue([0, 0]);
+        w.instance().onStop({}, {});
+        expect(onClick).toHaveBeenCalledWith({ x: 0, y: 0 });
+      });
+    });
+  });
+});

package/src/__tests__/root.test.jsx

@@ -0,0 +1,118 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Root } from '../root';
+import { select, mouse } from 'd3-selection';
+
+const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+const graphProps = () => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  range: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});
+
+const wrapper = (props) => {
+  props = {
+    classes: {},
+    graphProps: graphProps(),
+    ...props,
+  };
+
+  return shallow(<Root {...props}>hi</Root>, { disableLifecycleMethods: true });
+};
+
+jest.mock('d3-selection', () => ({
+  select: jest.fn(),
+  mouse: jest.fn(),
+}));
+
+describe('root', () => {
+  describe('snapshot', () => {
+    it('matches', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('mousemove', () => {
+      describe('mount/unmount', () => {
+        it('adds mousemove listener on compenentDidMount', () => {
+          const w = wrapper();
+          const g = {
+            on: jest.fn(),
+          };
+          select.mockReturnValue(g);
+          w.instance().componentDidMount();
+          expect(g.on).toHaveBeenCalledWith('mousemove', expect.any(Function));
+        });
+        it('unsets mousemove listener on componentWillUnmount', () => {
+          const w = wrapper();
+          const g = {
+            on: jest.fn(),
+          };
+          select.mockReturnValue(g);
+          w.instance().componentWillUnmount();
+          expect(g.on).toHaveBeenCalledWith('mousemove', null);
+        });
+      });
+
+      describe('mouseMove function', () => {
+        let onMouseMove, w, gp;
+        beforeEach(() => {
+          onMouseMove = jest.fn();
+          gp = graphProps();
+          w = wrapper({
+            onMouseMove,
+            graphProps: gp,
+          });
+          mouse.mockReturnValue([0, 0]);
+          const g = { _groups: [[[0, 0]]] };
+          w.instance().mouseMove(g);
+        });
+        it('calls mouse', () => {
+          expect(mouse).toHaveBeenCalledWith([0, 0]);
+        });
+        it('calls, scale.x.invert', () => {
+          expect(gp.scale.x.invert).toHaveBeenCalledWith(0);
+        });
+        it('calls, scale.y.invert', () => {
+          expect(gp.scale.y.invert).toHaveBeenCalledWith(0);
+        });
+        it('calls, snap.x', () => {
+          expect(gp.snap.x).toHaveBeenCalledWith(0);
+        });
+        it('calls, snap.y', () => {
+          expect(gp.snap.y).toHaveBeenCalledWith(0);
+        });
+
+        it('calls handler', () => {
+          expect(onMouseMove).toHaveBeenCalledWith({ x: 0, y: 0 });
+        });
+      });
+    });
+  });
+});

package/src/__tests__/trig.test.js

@@ -0,0 +1,174 @@
+import {
+  angle,
+  edge,
+  edges,
+  maxEdge,
+  minEdge,
+  toRadians,
+  toDegrees,
+  acuteXAngle,
+  acuteYAngle,
+  diffEdge,
+} from '../trig';
+import { xy } from '../utils';
+import debug from 'debug';
+import { getOpposingSide } from '../trig';
+const log = debug('pie-lib:plot:trig:test');
+
+const vs = (v) => {
+  if (!v) {
+    return '';
+  }
+
+  if (Number.isFinite(v.x) && Number.isFinite(v.y)) {
+    return `[${v.x},${v.y}]`;
+  }
+  return JSON.stringify(v);
+};
+const p = (strings, ...values) => {
+  return strings.reduce((acc, s, index) => {
+    return `${acc}${s}${vs(values[index])}`;
+  }, '');
+};
+describe('trig', () => {
+  describe('angle', () => {
+    const assertAngle = (a, b, expected) => {
+      it(p`${a}, ${b} => ${toDegrees(expected)}`, () => {
+        const result = angle(a, b);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAngle(xy(0, 0), xy(1, 1), toRadians(45));
+    assertAngle(xy(0, 0), xy(0, 1), toRadians(90));
+    assertAngle(xy(0, 0), xy(-1, 1), toRadians(135));
+    assertAngle(xy(0, 0), xy(-1, 0), toRadians(180));
+    assertAngle(xy(0, 0), xy(-1, -1), toRadians(225));
+    assertAngle(xy(0, 0), xy(0, -1), toRadians(270));
+    assertAngle(xy(0, 0), xy(1, -1), toRadians(315));
+    assertAngle(xy(1, 1), xy(0, 0), toRadians(225));
+    assertAngle(xy(0, 0), xy(1, 1), toRadians(45));
+    assertAngle(xy(0, 0), xy(2, 1), toRadians(26.565));
+    assertAngle(xy(0, 0), xy(3, 1), toRadians(18.434));
+    assertAngle(xy(0, 0), xy(4, 1), toRadians(14.036));
+    assertAngle(xy(0, 0), xy(5, 1), toRadians(11.309));
+  });
+
+  describe('acuteXAngle', () => {
+    const assertAcute = (input, expected) => {
+      it(`${toDegrees(input)} => ${toDegrees(expected)}`, () => {
+        const result = acuteXAngle(input);
+        log(`result: ${toDegrees(result)}`);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAcute(toRadians(45), toRadians(45));
+    assertAcute(toRadians(100), toRadians(80));
+    assertAcute(toRadians(190), toRadians(10));
+    assertAcute(toRadians(350), toRadians(10));
+  });
+
+  describe('acuteYAngle', () => {
+    const assertAcute = (input, expected) => {
+      it(`${toDegrees(input)} => ${toDegrees(expected)}`, () => {
+        const result = acuteYAngle(input);
+        log(`result: ${toDegrees(result)}`);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAcute(toRadians(45), toRadians(45));
+    assertAcute(toRadians(100), toRadians(10));
+    assertAcute(toRadians(190), toRadians(80));
+    assertAcute(toRadians(350), toRadians(80));
+  });
+
+  describe('edges', () => {
+    const assertEdges = (domain, range) => (from, to, expected) => {
+      it(p`${domain}, ${range} + ${from} -> ${to} => ${expected[0]}${expected[1]}`, () => {
+        const result = edges(domain, range)(from, to);
+        expect(result[0].x).toBeCloseTo(expected[0].x);
+        expect(result[0].y).toBeCloseTo(expected[0].y);
+        expect(result[1].x).toBeCloseTo(expected[1].x);
+        expect(result[1].y).toBeCloseTo(expected[1].y);
+      });
+    };
+
+    const one = assertEdges({ min: -4, max: 4 }, { min: -4, max: 4 });
+    one(xy(0, 0), xy(1, 1), [xy(4, 4), xy(-4, -4)]);
+    one(xy(0, 0), xy(2, 1), [xy(4, 2), xy(-4, -2)]);
+    one(xy(1, 1), xy(2, 2), [xy(4, 4), xy(-4, -4)]);
+    one(xy(1, 0), xy(2, 0), [xy(4, 0), xy(-4, 0)]);
+    one(xy(1, 0), xy(-2, 0), [xy(-4, 0), xy(4, 0)]);
+
+    /**
+     * domain {min: -5, max: 5, padding: 0, step: 1, labelStep: 1}labelStep: 1max: 5min: -5padding: 0step: 1__proto__: Object range:  {min: -5, max: 5, padding: 0, step: 1, labelStep: 1} a: {x: -5, y: 0} b: {x: -5, y: 2} edges: Point {x: -5, y: 5} Point {x: -5, y: 2}
+     */
+    const lineIssue = assertEdges({ min: -5, max: 5 }, { min: -5, max: 5 });
+    lineIssue(xy(-5, -0), xy(-5, 2), [xy(-5, 5), xy(-5, -5)]);
+  });
+
+  describe('diffEdge', () => {
+    const assertDiffEdge = (bounds, from, to, expected) => {
+      it(p`<${bounds}> ${from} -> ${to} => ${expected}`, () => {
+        const result = diffEdge(bounds, from, to);
+        expect(result.x).toBeCloseTo(expected.x);
+        expect(result.y).toBeCloseTo(expected.y);
+      });
+    };
+
+    const twoTwo = assertDiffEdge.bind(null, xy(2, 2));
+    twoTwo(xy(0, 0), xy(1, 1), xy(2, 2));
+    twoTwo(xy(0, 0), xy(1, 2), xy(1, 2));
+    twoTwo(xy(0, 0), xy(2, 2), xy(2, 2));
+    twoTwo(xy(0, 0), xy(2, 2), xy(2, 2));
+    twoTwo(xy(0, 0), xy(-1, 1), xy(-2, 2));
+    twoTwo(xy(0, 0), xy(-1, -1), xy(-2, -2));
+    const fourFour = assertDiffEdge.bind(null, xy(4, 4));
+
+    fourFour(xy(0, 0), xy(1, 1), xy(4, 4));
+    fourFour(xy(0, 0), xy(1, 2), xy(2, 4));
+    fourFour(xy(0, 0), xy(2, 1), xy(4, 2));
+    fourFour(xy(0, 0), xy(-1, 1), xy(-4, 4));
+    fourFour(xy(0, 0), xy(-1, 1), xy(-4, 4));
+
+    assertDiffEdge(xy(-4, -4), xy(0, 0), xy(-1, -1), xy(-4, -4));
+    assertDiffEdge(xy(4, 4), xy(1, 1), xy(2, 2), xy(4, 4));
+    assertDiffEdge(xy(4, 4), xy(2, 2), xy(3, 3), xy(4, 4));
+    assertDiffEdge(xy(-4, -4), xy(-1, -1), xy(-2, -2), xy(-4, -4));
+    assertDiffEdge(xy(-4, 4), xy(-1, -1), xy(-2, 0), xy(-4, 2));
+
+    const lineIssue = assertDiffEdge.bind(null, xy(-5, -5));
+
+    lineIssue(xy(-5, 2), xy(-5, 0), xy(-5, -5));
+    //Top Right
+    assertDiffEdge(xy(5, 5), xy(0, 5), xy(2, 5), xy(5, 5));
+    assertDiffEdge(xy(5, 5), xy(5, 0), xy(5, 1), xy(5, 5));
+
+    // //Bottom Right
+    assertDiffEdge(xy(5, -5), xy(5, 0), xy(5, -0.1), xy(5, -5));
+    assertDiffEdge(xy(5, -5), xy(0, -5), xy(1, -5), xy(5, -5));
+
+    //Top Left
+    assertDiffEdge(xy(-5, 5), xy(-5, 0), xy(-5, 0.1), xy(-5, 5));
+    assertDiffEdge(xy(-5, 5), xy(0, 5), xy(-1, 5), xy(-5, 5));
+
+    //Bottom Left
+    assertDiffEdge(xy(-5, -5), xy(-5, 0), xy(-5, -0.1), xy(-5, -5));
+    assertDiffEdge(xy(-5, -5), xy(0, -5), xy(-1, -5), xy(-5, -5));
+  });
+
+  describe('getOpposingSide', () => {
+    const assertOpposingSide = (hyp, angle, expected) => {
+      it(`${hyp}, ${angle} = ${expected}`, () => {
+        const radians = toRadians(angle);
+        const result = getOpposingSide(hyp, radians);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertOpposingSide(1, 45, 0.707);
+    assertOpposingSide(1.25, 45, 0.88);
+  });
+});