@pie-lib/graphing-solution-set 4.0.13 → 4.1.0-beta.1

package/lib/tools/shared/line/__tests__/index.test.js

@@ -0,0 +1,725 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("../index");
+var _plot = require("@pie-lib/plot");
+var _testUtils = require("@pie-lib/test-utils");
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../../../__tests__/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var xy = _plot.utils.xy;
+var xyLabel = function xyLabel(x, y, label) {
+  return {
+    x: x,
+    y: y,
+    label: label
+  };
+};
+describe('lineTool', function () {
+  describe('addPoint', function () {
+    var toolbar;
+    beforeEach(function () {
+      toolbar = (0, _index.lineTool)('lineType', function () {
+        return /*#__PURE__*/_react["default"].createElement("div", null);
+      })();
+    });
+    it('returns a building mark when no existing mark', function () {
+      var result = toolbar.addPoint(xy(1, 1));
+      expect(result).toEqual({
+        type: 'lineType',
+        building: true,
+        from: xy(1, 1)
+      });
+    });
+    it('returns a complete mark when adding second point', function () {
+      var result = toolbar.addPoint(xy(1, 1), {
+        from: xy(0, 0)
+      });
+      expect(result).toEqual({
+        building: false,
+        from: xy(0, 0),
+        to: xy(1, 1)
+      });
+    });
+    it('returns same mark if point equals existing from point', function () {
+      var existingMark = {
+        from: xy(1, 1),
+        building: true
+      };
+      var result = toolbar.addPoint(xy(1, 1), existingMark);
+      expect(result).toEqual(existingMark);
+    });
+    it('handles adding point with root property', function () {
+      var existingMark = {
+        root: xy(1, 1),
+        building: true
+      };
+      var result = toolbar.addPoint(xy(1, 1), existingMark);
+      expect(result).toEqual(existingMark);
+    });
+    it('creates different types correctly', function () {
+      var lineA = (0, _index.lineTool)('lineA', function () {
+        return /*#__PURE__*/_react["default"].createElement("div", null);
+      })();
+      var lineB = (0, _index.lineTool)('lineB', function () {
+        return /*#__PURE__*/_react["default"].createElement("div", null);
+      })();
+      var resultA = lineA.addPoint(xy(1, 1));
+      var resultB = lineB.addPoint(xy(1, 1));
+      expect(resultA.type).toBe('lineA');
+      expect(resultB.type).toBe('lineB');
+    });
+    it('preserves building state correctly', function () {
+      var building = toolbar.addPoint(xy(1, 1));
+      expect(building.building).toBe(true);
+      var complete = toolbar.addPoint(xy(2, 2), building);
+      expect(complete.building).toBe(false);
+    });
+  });
+  describe('Component property', function () {
+    it('stores the provided Component', function () {
+      var TestComp = function TestComp() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Test");
+      };
+      var tool = (0, _index.lineTool)('test', TestComp)();
+      expect(tool.Component).toBe(TestComp);
+    });
+    it('stores the correct type', function () {
+      var tool = (0, _index.lineTool)('customType', function () {
+        return /*#__PURE__*/_react["default"].createElement("div", null);
+      })();
+      expect(tool.type).toBe('customType');
+    });
+  });
+});
+describe('lineToolComponent', function () {
+  var Comp;
+  var mark;
+  var onChange;
+  beforeEach(function () {
+    onChange = jest.fn();
+    Comp = (0, _index.lineToolComponent)(function () {
+      return /*#__PURE__*/_react["default"].createElement("text", {
+        "data-testid": "line-component"
+      });
+    });
+    mark = {
+      from: xy(0, 0),
+      to: xy(1, 1),
+      type: 'line'
+    };
+  });
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      mark: mark,
+      onChange: onChange,
+      graphProps: (0, _utils.graphProps)()
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, props));
+  };
+  describe('rendering', function () {
+    it('renders without crashing', function () {
+      var _renderComponent = renderComponent(),
+        container = _renderComponent.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with building mark', function () {
+      var buildingMark = {
+        from: xy(0, 0),
+        building: true,
+        type: 'line'
+      };
+      var _renderComponent2 = renderComponent({
+          mark: buildingMark
+        }),
+        container = _renderComponent2.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with background mark', function () {
+      var bgMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        isBackground: true,
+        type: 'line'
+      };
+      var _renderComponent3 = renderComponent({
+          mark: bgMark
+        }),
+        container = _renderComponent3.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with disabled mark', function () {
+      var disabledMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        disabled: true,
+        type: 'line'
+      };
+      var _renderComponent4 = renderComponent({
+          mark: disabledMark
+        }),
+        container = _renderComponent4.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with correctness states', function () {
+      var correctMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        correctness: 'correct',
+        type: 'line'
+      };
+      var _renderComponent5 = renderComponent({
+          mark: correctMark
+        }),
+        container = _renderComponent5.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with middle point', function () {
+      var markWithMiddle = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        middle: xy(0.5, 0.5),
+        type: 'line'
+      };
+      var _renderComponent6 = renderComponent({
+          mark: markWithMiddle
+        }),
+        container = _renderComponent6.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with fill color', function () {
+      var coloredMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        fill: '#ff0000',
+        type: 'line'
+      };
+      var _renderComponent7 = renderComponent({
+          mark: coloredMark
+        }),
+        container = _renderComponent7.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with gssLineData', function () {
+      var gssLineData = {
+        selectedTool: 'lineA'
+      };
+      var _renderComponent8 = renderComponent({
+          gssLineData: gssLineData
+        }),
+        container = _renderComponent8.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with labelNode', function () {
+      var labelNode = document.createElement('foreignObject');
+      var _renderComponent9 = renderComponent({
+          labelNode: labelNode
+        }),
+        container = _renderComponent9.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with coordinatesOnHover enabled', function () {
+      var _renderComponent0 = renderComponent({
+          coordinatesOnHover: true
+        }),
+        container = _renderComponent0.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with labelModeEnabled', function () {
+      var _renderComponent1 = renderComponent({
+          labelModeEnabled: true
+        }),
+        container = _renderComponent1.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('state management', function () {
+    it('initializes with empty state', function () {
+      var _renderComponent10 = renderComponent(),
+        container = _renderComponent10.container;
+      expect(container.firstChild).toBeInTheDocument();
+      // State should be empty initially
+    });
+    it('handles mark updates through props', function () {
+      var _renderComponent11 = renderComponent(),
+        rerender = _renderComponent11.rerender,
+        container = _renderComponent11.container;
+      var updatedMark = {
+        from: xy(1, 1),
+        to: xy(2, 2),
+        type: 'line'
+      };
+      rerender(/*#__PURE__*/_react["default"].createElement(Comp, {
+        mark: updatedMark,
+        onChange: onChange,
+        graphProps: (0, _utils.graphProps)()
+      }));
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('background mark handling', function () {
+    it('disables from point when mark is background', function () {
+      var bgMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        isBackground: true,
+        type: 'line'
+      };
+      var _renderComponent12 = renderComponent({
+          mark: bgMark
+        }),
+        container = _renderComponent12.container;
+      expect(container.firstChild).toBeInTheDocument();
+      // from.disabled should be true
+    });
+    it('disables to point when mark is background', function () {
+      var bgMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        isBackground: true,
+        type: 'line'
+      };
+      var _renderComponent13 = renderComponent({
+          mark: bgMark
+        }),
+        container = _renderComponent13.container;
+      expect(container.firstChild).toBeInTheDocument();
+      // to.disabled should be true
+    });
+    it('disables middle point when mark is background', function () {
+      var bgMark = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        middle: xy(0.5, 0.5),
+        isBackground: true,
+        type: 'line'
+      };
+      var _renderComponent14 = renderComponent({
+          mark: bgMark
+        }),
+        container = _renderComponent14.container;
+      expect(container.firstChild).toBeInTheDocument();
+      // middle.disabled should be true
+    });
+  });
+  describe('edge cases', function () {
+    it('handles mark without to point', function () {
+      var incompleteMark = {
+        from: xy(0, 0),
+        type: 'line'
+      };
+      var _renderComponent15 = renderComponent({
+          mark: incompleteMark
+        }),
+        container = _renderComponent15.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles mark with only from point', function () {
+      var singlePointMark = {
+        from: xy(0, 0),
+        building: true,
+        type: 'line'
+      };
+      var _renderComponent16 = renderComponent({
+          mark: singlePointMark
+        }),
+        container = _renderComponent16.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles different line types', function () {
+      var parabola = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        type: 'parabola'
+      };
+      var sine = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        type: 'sine'
+      };
+      var absolute = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        type: 'absolute'
+      };
+      var exponential = {
+        from: xy(0, 0),
+        to: xy(1, 1),
+        type: 'exponential'
+      };
+      (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, {
+        mark: parabola,
+        onChange: onChange,
+        graphProps: (0, _utils.graphProps)()
+      }));
+      (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, {
+        mark: sine,
+        onChange: onChange,
+        graphProps: (0, _utils.graphProps)()
+      }));
+      (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, {
+        mark: absolute,
+        onChange: onChange,
+        graphProps: (0, _utils.graphProps)()
+      }));
+      (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, {
+        mark: exponential,
+        onChange: onChange,
+        graphProps: (0, _utils.graphProps)()
+      }));
+    });
+  });
+});
+describe('lineBase', function () {
+  var Comp;
+  var onChange;
+  var changeMarkProps;
+  var onClick;
+  beforeEach(function () {
+    onChange = jest.fn();
+    changeMarkProps = jest.fn();
+    onClick = jest.fn();
+    Comp = (0, _index.lineBase)(function () {
+      return /*#__PURE__*/_react["default"].createElement("text", {
+        "data-testid": "line-base"
+      });
+    });
+  });
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      onChange: onChange,
+      changeMarkProps: changeMarkProps,
+      onClick: onClick,
+      graphProps: (0, _utils.graphProps)(),
+      from: xy(0, 0),
+      to: xy(1, 1)
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(Comp, props));
+  };
+  var labelNode = document.createElement('foreignObject');
+  var renderWithLabels = function renderWithLabels() {
+    var extras = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return renderComponent(_objectSpread(_objectSpread({}, extras), {}, {
+      labelNode: labelNode,
+      from: xyLabel(0, 0, 'A'),
+      to: xyLabel(1, 1, 'B')
+    }));
+  };
+  describe('rendering', function () {
+    it('renders without crashing', function () {
+      var _renderComponent17 = renderComponent(),
+        container = _renderComponent17.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with labels', function () {
+      var _renderWithLabels = renderWithLabels(),
+        container = _renderWithLabels.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with middle point label', function () {
+      var _renderComponent18 = renderComponent({
+          labelNode: labelNode,
+          middle: xyLabel(0.5, 0.5, 'M')
+        }),
+        container = _renderComponent18.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with only from label', function () {
+      var _renderComponent19 = renderComponent({
+          labelNode: labelNode,
+          from: xyLabel(0, 0, 'Start'),
+          to: xy(1, 1)
+        }),
+        container = _renderComponent19.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with only to label', function () {
+      var _renderComponent20 = renderComponent({
+          labelNode: labelNode,
+          from: xy(0, 0),
+          to: xyLabel(1, 1, 'End')
+        }),
+        container = _renderComponent20.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with all three labels', function () {
+      var _renderComponent21 = renderComponent({
+          labelNode: labelNode,
+          from: xyLabel(0, 0, 'A'),
+          to: xyLabel(1, 1, 'B'),
+          middle: xyLabel(0.5, 0.5, 'M')
+        }),
+        container = _renderComponent21.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('gssLineData handling', function () {
+    it('renders normally without gssLineData', function () {
+      var _renderComponent22 = renderComponent(),
+        container = _renderComponent22.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with gssLineData when solutionSet is selected', function () {
+      var gssLineData = {
+        selectedTool: 'solutionSet'
+      };
+      var _renderComponent23 = renderComponent({
+          gssLineData: gssLineData
+        }),
+        container = _renderComponent23.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with gssLineData when lineA is selected', function () {
+      var gssLineData = {
+        selectedTool: 'lineA'
+      };
+      var _renderComponent24 = renderComponent({
+          gssLineData: gssLineData
+        }),
+        container = _renderComponent24.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with gssLineData when lineB is selected', function () {
+      var gssLineData = {
+        selectedTool: 'lineB'
+      };
+      var _renderComponent25 = renderComponent({
+          gssLineData: gssLineData
+        }),
+        container = _renderComponent25.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('disabled state', function () {
+    it('renders when disabled', function () {
+      var _renderComponent26 = renderComponent({
+          disabled: true
+        }),
+        container = _renderComponent26.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders when not disabled', function () {
+      var _renderComponent27 = renderComponent({
+          disabled: false
+        }),
+        container = _renderComponent27.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('correctness states', function () {
+    it('renders with correct state', function () {
+      var _renderComponent28 = renderComponent({
+          correctness: 'correct'
+        }),
+        container = _renderComponent28.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with incorrect state', function () {
+      var _renderComponent29 = renderComponent({
+          correctness: 'incorrect'
+        }),
+        container = _renderComponent29.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with missing state', function () {
+      var _renderComponent30 = renderComponent({
+          correctness: 'missing'
+        }),
+        container = _renderComponent30.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders without correctness', function () {
+      var _renderComponent31 = renderComponent({
+          correctness: undefined
+        }),
+        container = _renderComponent31.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('fill color', function () {
+    it('renders with custom fill color', function () {
+      var _renderComponent32 = renderComponent({
+          fill: '#ff0000'
+        }),
+        container = _renderComponent32.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders without fill color', function () {
+      var _renderComponent33 = renderComponent({
+          fill: undefined
+        }),
+        container = _renderComponent33.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('coordinates on hover', function () {
+    it('renders with coordinatesOnHover enabled', function () {
+      var _renderComponent34 = renderComponent({
+          coordinatesOnHover: true
+        }),
+        container = _renderComponent34.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with coordinatesOnHover disabled', function () {
+      var _renderComponent35 = renderComponent({
+          coordinatesOnHover: false
+        }),
+        container = _renderComponent35.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('label mode', function () {
+    it('renders with labelModeEnabled', function () {
+      var _renderComponent36 = renderComponent({
+          labelModeEnabled: true,
+          labelNode: labelNode
+        }),
+        container = _renderComponent36.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders without labelModeEnabled', function () {
+      var _renderComponent37 = renderComponent({
+          labelModeEnabled: false,
+          labelNode: labelNode
+        }),
+        container = _renderComponent37.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('drag callbacks', function () {
+    it('renders with onDragStart callback', function () {
+      var onDragStart = jest.fn();
+      var _renderComponent38 = renderComponent({
+          onDragStart: onDragStart
+        }),
+        container = _renderComponent38.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with onDragStop callback', function () {
+      var onDragStop = jest.fn();
+      var _renderComponent39 = renderComponent({
+          onDragStop: onDragStop
+        }),
+        container = _renderComponent39.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with both drag callbacks', function () {
+      var onDragStart = jest.fn();
+      var onDragStop = jest.fn();
+      var _renderComponent40 = renderComponent({
+          onDragStart: onDragStart,
+          onDragStop: onDragStop
+        }),
+        container = _renderComponent40.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('edge cases', function () {
+    it('handles equal from and to points', function () {
+      var _renderComponent41 = renderComponent({
+          from: xy(1, 1),
+          to: xy(1, 1)
+        }),
+        container = _renderComponent41.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles negative coordinates', function () {
+      var _renderComponent42 = renderComponent({
+          from: xy(-5, -5),
+          to: xy(-1, -1)
+        }),
+        container = _renderComponent42.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles large coordinate values', function () {
+      var _renderComponent43 = renderComponent({
+          from: xy(100, 100),
+          to: xy(200, 200)
+        }),
+        container = _renderComponent43.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles decimal coordinates', function () {
+      var _renderComponent44 = renderComponent({
+          from: xy(0.5, 0.5),
+          to: xy(1.5, 1.5)
+        }),
+        container = _renderComponent44.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles vertical lines', function () {
+      var _renderComponent45 = renderComponent({
+          from: xy(1, 0),
+          to: xy(1, 5)
+        }),
+        container = _renderComponent45.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles horizontal lines', function () {
+      var _renderComponent46 = renderComponent({
+          from: xy(0, 1),
+          to: xy(5, 1)
+        }),
+        container = _renderComponent46.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('handles empty label strings', function () {
+      var _renderComponent47 = renderComponent({
+          labelNode: labelNode,
+          from: xyLabel(0, 0, ''),
+          to: xyLabel(1, 1, '')
+        }),
+        container = _renderComponent47.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+  describe('integration scenarios', function () {
+    it('renders complete line with all features', function () {
+      var _renderComponent48 = renderComponent({
+          from: xyLabel(0, 0, 'Start'),
+          to: xyLabel(5, 5, 'End'),
+          middle: xyLabel(2.5, 2.5, 'Middle'),
+          labelNode: labelNode,
+          coordinatesOnHover: true,
+          labelModeEnabled: true,
+          disabled: false,
+          correctness: 'correct',
+          fill: '#00ff00',
+          gssLineData: {
+            selectedTool: 'lineA'
+          },
+          onDragStart: jest.fn(),
+          onDragStop: jest.fn()
+        }),
+        container = _renderComponent48.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders disabled background line', function () {
+      var _renderComponent49 = renderComponent({
+          from: xy(0, 0),
+          to: xy(1, 1),
+          disabled: true,
+          correctness: 'incorrect'
+        }),
+        container = _renderComponent49.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders solution set mode', function () {
+      var _renderComponent50 = renderComponent({
+          from: xy(0, 0),
+          to: xy(1, 1),
+          gssLineData: {
+            selectedTool: 'solutionSet'
+          },
+          labelNode: labelNode
+        }),
+        container = _renderComponent50.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=index.test.js.map