@pie-lib/graphing-solution-set 4.1.0-beta.7 → 5.0.0-next.35

package/lib/tools/shared/point/__tests__/arrow.test.js

@@ -1,619 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _testUtils = require("@pie-lib/test-utils");
-var _react = _interopRequireDefault(require("react"));
-var _arrow = _interopRequireDefault(require("../arrow"));
-var _utils = require("../../../../__tests__/utils");
-var _utils2 = require("../../../../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; }
-jest.mock('../../../../utils', function () {
-  return _objectSpread(_objectSpread({}, jest.requireActual('../../../../utils')), {}, {
-    thinnerShapesNeeded: jest.fn(function () {
-      return false;
-    })
-  });
-});
-describe('Arrow', function () {
-  var onChange = jest.fn();
-  var renderComponent = function renderComponent(extras) {
-    var defaults = {
-      classes: {},
-      className: 'arrow-class',
-      onChange: onChange,
-      graphProps: (0, _utils.graphProps)(),
-      x: 5,
-      y: 10,
-      angle: 45
-    };
-    var props = _objectSpread(_objectSpread({}, defaults), extras);
-    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], props));
-  };
-  beforeEach(function () {
-    onChange = jest.fn();
-    _utils2.thinnerShapesNeeded.mockReturnValue(false);
-  });
-  describe('rendering', function () {
-    it('renders without crashing', function () {
-      var _renderComponent = renderComponent(),
-        container = _renderComponent.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('renders a g element with correct class names', function () {
-      var _renderComponent2 = renderComponent({
-          classes: {
-            point: 'point-class'
-          },
-          className: 'custom-class'
-        }),
-        container = _renderComponent2.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toBeInTheDocument();
-      expect(gElement).toHaveClass('point-class');
-      expect(gElement).toHaveClass('custom-class');
-    });
-    it('renders ArrowHead component', function () {
-      var _renderComponent3 = renderComponent(),
-        container = _renderComponent3.container;
-      var polygon = container.querySelector('polygon');
-      expect(polygon).toBeInTheDocument();
-    });
-    it('applies disabled class when disabled is true', function () {
-      var _renderComponent4 = renderComponent({
-          classes: {
-            point: 'point-class',
-            disabled: 'disabled-class'
-          },
-          disabled: true
-        }),
-        container = _renderComponent4.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('disabled-class');
-    });
-    it('does not apply disabled class when disabled is false', function () {
-      var _renderComponent5 = renderComponent({
-          classes: {
-            point: 'point-class',
-            disabled: 'disabled-class'
-          },
-          disabled: false
-        }),
-        container = _renderComponent5.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).not.toHaveClass('disabled-class');
-    });
-    it('applies correctness class when provided', function () {
-      var _renderComponent6 = renderComponent({
-          classes: {
-            point: 'point-class',
-            correct: 'correct-class'
-          },
-          correctness: 'correct'
-        }),
-        container = _renderComponent6.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('correct-class');
-    });
-    it('applies incorrect correctness class', function () {
-      var _renderComponent7 = renderComponent({
-          classes: {
-            point: 'point-class',
-            incorrect: 'incorrect-class'
-          },
-          correctness: 'incorrect'
-        }),
-        container = _renderComponent7.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('incorrect-class');
-    });
-  });
-  describe('size calculation', function () {
-    it('uses size 14 when thinnerShapesNeeded returns false', function () {
-      _utils2.thinnerShapesNeeded.mockReturnValue(false);
-      var _renderComponent8 = renderComponent({
-          x: 0,
-          y: 0
-        }),
-        container = _renderComponent8.container;
-      var polygon = container.querySelector('polygon');
-
-      // Expected points: "0,0 -14,-7 -14,7"
-      expect(polygon).toHaveAttribute('points');
-      var points = polygon.getAttribute('points');
-      expect(points).toContain('-14');
-    });
-    it('uses size 12 when thinnerShapesNeeded returns true', function () {
-      _utils2.thinnerShapesNeeded.mockReturnValue(true);
-      var _renderComponent9 = renderComponent({
-          x: 0,
-          y: 0
-        }),
-        container = _renderComponent9.container;
-      var polygon = container.querySelector('polygon');
-
-      // Expected points: "0,0 -12,-6 -12,6"
-      expect(polygon).toHaveAttribute('points');
-      var points = polygon.getAttribute('points');
-      expect(points).toContain('-12');
-    });
-    it('calls thinnerShapesNeeded with graphProps', function () {
-      var gp = (0, _utils.graphProps)();
-      renderComponent({
-        graphProps: gp
-      });
-      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
-    });
-  });
-  describe('coordinate scaling', function () {
-    it('scales x and y coordinates using graphProps.scale', function () {
-      var mockScale = {
-        x: jest.fn(function (n) {
-          return n * 10;
-        }),
-        y: jest.fn(function (n) {
-          return n * 20;
-        })
-      };
-      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
-        scale: mockScale
-      });
-      renderComponent({
-        x: 5,
-        y: 10,
-        graphProps: gp
-      });
-      expect(mockScale.x).toHaveBeenCalledWith(5);
-      expect(mockScale.y).toHaveBeenCalledWith(10);
-    });
-    it('renders arrow with scaled coordinates', function () {
-      var mockScale = {
-        x: jest.fn(function (n) {
-          return n * 2;
-        }),
-        y: jest.fn(function (n) {
-          return n * 3;
-        })
-      };
-      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
-        scale: mockScale
-      });
-      var _renderComponent0 = renderComponent({
-          x: 5,
-          y: 10,
-          graphProps: gp,
-          angle: 0
-        }),
-        container = _renderComponent0.container;
-      var polygon = container.querySelector('polygon');
-
-      // scaledX = 5 * 2 = 10, scaledY = 10 * 3 = 30
-      // Expected points: "10,30 -4,23 -4,37" (with size 14)
-      var points = polygon.getAttribute('points');
-      expect(points).toContain('10');
-      expect(points).toContain('30');
-    });
-  });
-  describe('angle rotation', function () {
-    it('applies rotation transform with negative angle', function () {
-      var _renderComponent1 = renderComponent({
-          x: 5,
-          y: 10,
-          angle: 45
-        }),
-        container = _renderComponent1.container;
-      var polygon = container.querySelector('polygon');
-      var transform = polygon.getAttribute('transform');
-
-      // Angle should be negated: rotate(-45, 5, 10)
-      expect(transform).toContain('rotate(-45');
-      expect(transform).toContain('5');
-      expect(transform).toContain('10');
-    });
-    it('handles zero angle', function () {
-      var _renderComponent10 = renderComponent({
-          x: 3,
-          y: 7,
-          angle: 0
-        }),
-        container = _renderComponent10.container;
-      var polygon = container.querySelector('polygon');
-      var transform = polygon.getAttribute('transform');
-
-      // will convert -0 to 0
-      expect(transform).toMatch(/rotate\((-)?0/);
-      expect(transform).toContain('3');
-      expect(transform).toContain('7');
-    });
-    it('handles negative angle', function () {
-      var _renderComponent11 = renderComponent({
-          x: 2,
-          y: 4,
-          angle: -30
-        }),
-        container = _renderComponent11.container;
-      var polygon = container.querySelector('polygon');
-      var transform = polygon.getAttribute('transform');
-
-      // -(-30) = 30
-      expect(transform).toContain('rotate(30');
-      expect(transform).toContain('2');
-      expect(transform).toContain('4');
-    });
-    it('handles 360 degree angle', function () {
-      var _renderComponent12 = renderComponent({
-          x: 1,
-          y: 1,
-          angle: 360
-        }),
-        container = _renderComponent12.container;
-      var polygon = container.querySelector('polygon');
-      var transform = polygon.getAttribute('transform');
-      expect(transform).toContain('rotate(-360');
-    });
-  });
-  describe('arrow points calculation', function () {
-    it('calculates correct points for arrow head', function () {
-      _utils2.thinnerShapesNeeded.mockReturnValue(false);
-      var _renderComponent13 = renderComponent({
-          x: 0,
-          y: 0,
-          angle: 0
-        }),
-        container = _renderComponent13.container;
-      var polygon = container.querySelector('polygon');
-
-      // size = 14
-      // points = "0,0 -14,-7 -14, 7" (note the space after comma in the template literal)
-      var points = polygon.getAttribute('points');
-      expect(points).toContain('0,0');
-      expect(points).toContain('-14,-7');
-      expect(points).toMatch(/-14,\s*7/);
-    });
-    it('calculates points with scaled coordinates', function () {
-      _utils2.thinnerShapesNeeded.mockReturnValue(false);
-      var mockScale = {
-        x: jest.fn(function (n) {
-          return n;
-        }),
-        y: jest.fn(function (n) {
-          return n;
-        })
-      };
-      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
-        scale: mockScale
-      });
-      var _renderComponent14 = renderComponent({
-          x: 10,
-          y: 20,
-          graphProps: gp
-        }),
-        container = _renderComponent14.container;
-      var polygon = container.querySelector('polygon');
-
-      // scaledX = 10, scaledY = 20, size = 14
-      // points = "10,20 -4,13 -4, 27" (note the space after comma in the template literal)
-      var points = polygon.getAttribute('points');
-      expect(points).toContain('10,20');
-      expect(points).toContain('-4,13');
-      expect(points).toMatch(/-4,\s*27/);
-    });
-  });
-  describe('props handling', function () {
-    it('passes through additional props to g element', function () {
-      var _renderComponent15 = renderComponent({
-          'data-test': 'arrow-test',
-          role: 'graphics-symbol'
-        }),
-        container = _renderComponent15.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveAttribute('data-test', 'arrow-test');
-      expect(gElement).toHaveAttribute('role', 'graphics-symbol');
-    });
-    it('excludes filtered props from g element', function () {
-      var _renderComponent16 = renderComponent({
-          x: 5,
-          y: 10,
-          angle: 45,
-          disabled: false,
-          correctness: 'correct',
-          graphProps: (0, _utils.graphProps)()
-        }),
-        container = _renderComponent16.container;
-      var gElement = container.querySelector('g');
-
-      // These props should not be passed to the g element
-      expect(gElement).not.toHaveAttribute('x');
-      expect(gElement).not.toHaveAttribute('y');
-      expect(gElement).not.toHaveAttribute('angle');
-      expect(gElement).not.toHaveAttribute('disabled');
-      expect(gElement).not.toHaveAttribute('correctness');
-      expect(gElement).not.toHaveAttribute('graphProps');
-    });
-  });
-  describe('edge cases', function () {
-    it('handles zero coordinates', function () {
-      var _renderComponent17 = renderComponent({
-          x: 0,
-          y: 0,
-          angle: 0
-        }),
-        container = _renderComponent17.container;
-      var polygon = container.querySelector('polygon');
-      expect(polygon).toBeInTheDocument();
-      expect(polygon.getAttribute('points')).toBeTruthy();
-      expect(polygon.getAttribute('transform')).toBeTruthy();
-    });
-    it('handles negative coordinates', function () {
-      var _renderComponent18 = renderComponent({
-          x: -5,
-          y: -10,
-          angle: 0
-        }),
-        container = _renderComponent18.container;
-      var polygon = container.querySelector('polygon');
-      expect(polygon).toBeInTheDocument();
-      expect(polygon.getAttribute('points')).toBeTruthy();
-      expect(polygon.getAttribute('transform')).toBeTruthy();
-    });
-    it('handles large coordinates', function () {
-      var _renderComponent19 = renderComponent({
-          x: 1000,
-          y: 2000,
-          angle: 0
-        }),
-        container = _renderComponent19.container;
-      var polygon = container.querySelector('polygon');
-      expect(polygon).toBeInTheDocument();
-    });
-    it('handles fractional coordinates', function () {
-      var _renderComponent20 = renderComponent({
-          x: 3.5,
-          y: 7.25,
-          angle: 22.5
-        }),
-        container = _renderComponent20.container;
-      var polygon = container.querySelector('polygon');
-      expect(polygon).toBeInTheDocument();
-      expect(polygon.getAttribute('transform')).toContain('rotate(-22.5');
-    });
-    it('renders with empty classes prop', function () {
-      var _render = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-          x: 5,
-          y: 10,
-          angle: 45,
-          graphProps: (0, _utils.graphProps)(),
-          classes: {}
-        })),
-        container = _render.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toBeInTheDocument();
-    });
-    it('renders without className prop', function () {
-      var _render2 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-          x: 5,
-          y: 10,
-          angle: 45,
-          graphProps: (0, _utils.graphProps)(),
-          classes: {}
-        })),
-        container = _render2.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toBeInTheDocument();
-    });
-  });
-  describe('graphProps integration', function () {
-    it('works with different domain and range values', function () {
-      var gp = (0, _utils.graphProps)(-10, 10, -20, 20);
-      var _renderComponent21 = renderComponent({
-          graphProps: gp
-        }),
-        container = _renderComponent21.container;
-      expect(container.querySelector('polygon')).toBeInTheDocument();
-      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
-    });
-    it('works with custom size in graphProps', function () {
-      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
-        size: {
-          width: 800,
-          height: 600
-        }
-      });
-      var _renderComponent22 = renderComponent({
-          graphProps: gp
-        }),
-        container = _renderComponent22.container;
-      expect(container.querySelector('polygon')).toBeInTheDocument();
-    });
-    it('handles graphProps with small step values', function () {
-      var gp = _objectSpread(_objectSpread({}, (0, _utils.graphProps)()), {}, {
-        domain: {
-          min: 0,
-          max: 10,
-          step: 0.1
-        },
-        range: {
-          min: 0,
-          max: 10,
-          step: 0.1
-        }
-      });
-      _utils2.thinnerShapesNeeded.mockReturnValue(true);
-      var _renderComponent23 = renderComponent({
-          graphProps: gp
-        }),
-        container = _renderComponent23.container;
-      var polygon = container.querySelector('polygon');
-
-      // Should use size 12 for thinner shapes
-      expect(polygon).toBeInTheDocument();
-      expect(_utils2.thinnerShapesNeeded).toHaveBeenCalledWith(gp);
-    });
-  });
-  describe('multiple correctness states', function () {
-    it('handles partial correctness', function () {
-      var _renderComponent24 = renderComponent({
-          classes: {
-            point: 'point-class',
-            partial: 'partial-class'
-          },
-          correctness: 'partial'
-        }),
-        container = _renderComponent24.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('partial-class');
-    });
-    it('handles undefined correctness', function () {
-      var _renderComponent25 = renderComponent({
-          classes: {
-            point: 'point-class'
-          },
-          correctness: undefined
-        }),
-        container = _renderComponent25.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('point-class');
-    });
-    it('handles null correctness', function () {
-      var _renderComponent26 = renderComponent({
-          classes: {
-            point: 'point-class'
-          },
-          correctness: null
-        }),
-        container = _renderComponent26.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('point-class');
-    });
-  });
-  describe('combined states', function () {
-    it('handles disabled and correct states together', function () {
-      var _renderComponent27 = renderComponent({
-          classes: {
-            point: 'point-class',
-            disabled: 'disabled-class',
-            correct: 'correct-class'
-          },
-          disabled: true,
-          correctness: 'correct'
-        }),
-        container = _renderComponent27.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('point-class');
-      expect(gElement).toHaveClass('disabled-class');
-      expect(gElement).toHaveClass('correct-class');
-    });
-    it('handles disabled and incorrect states together', function () {
-      var _renderComponent28 = renderComponent({
-          classes: {
-            point: 'point-class',
-            disabled: 'disabled-class',
-            incorrect: 'incorrect-class'
-          },
-          disabled: true,
-          correctness: 'incorrect'
-        }),
-        container = _renderComponent28.container;
-      var gElement = container.querySelector('g');
-      expect(gElement).toHaveClass('point-class');
-      expect(gElement).toHaveClass('disabled-class');
-      expect(gElement).toHaveClass('incorrect-class');
-    });
-  });
-  describe('re-rendering', function () {
-    it('updates when x coordinate changes', function () {
-      var _renderComponent29 = renderComponent({
-          x: 5,
-          y: 10,
-          angle: 0
-        }),
-        container = _renderComponent29.container,
-        rerender = _renderComponent29.rerender;
-      var polygon = container.querySelector('polygon');
-      var initialPoints = polygon.getAttribute('points');
-      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-        x: 15,
-        y: 10,
-        angle: 0,
-        graphProps: (0, _utils.graphProps)(),
-        classes: {},
-        className: "arrow-class"
-      }));
-      polygon = container.querySelector('polygon');
-      var newPoints = polygon.getAttribute('points');
-      expect(newPoints).not.toBe(initialPoints);
-    });
-    it('updates when y coordinate changes', function () {
-      var _renderComponent30 = renderComponent({
-          x: 5,
-          y: 10,
-          angle: 0
-        }),
-        container = _renderComponent30.container,
-        rerender = _renderComponent30.rerender;
-      var polygon = container.querySelector('polygon');
-      var initialPoints = polygon.getAttribute('points');
-      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-        x: 5,
-        y: 20,
-        angle: 0,
-        graphProps: (0, _utils.graphProps)(),
-        classes: {},
-        className: "arrow-class"
-      }));
-      polygon = container.querySelector('polygon');
-      var newPoints = polygon.getAttribute('points');
-      expect(newPoints).not.toBe(initialPoints);
-    });
-    it('updates when angle changes', function () {
-      var _renderComponent31 = renderComponent({
-          x: 5,
-          y: 10,
-          angle: 0
-        }),
-        container = _renderComponent31.container,
-        rerender = _renderComponent31.rerender;
-      var polygon = container.querySelector('polygon');
-      var initialTransform = polygon.getAttribute('transform');
-      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-        x: 5,
-        y: 10,
-        angle: 90,
-        graphProps: (0, _utils.graphProps)(),
-        classes: {},
-        className: "arrow-class"
-      }));
-      polygon = container.querySelector('polygon');
-      var newTransform = polygon.getAttribute('transform');
-      expect(newTransform).not.toBe(initialTransform);
-      expect(newTransform).toContain('rotate(-90');
-    });
-    it('updates when thinnerShapesNeeded result changes', function () {
-      _utils2.thinnerShapesNeeded.mockReturnValue(false);
-      var _renderComponent32 = renderComponent({
-          x: 0,
-          y: 0,
-          angle: 0
-        }),
-        container = _renderComponent32.container,
-        rerender = _renderComponent32.rerender;
-      var polygon = container.querySelector('polygon');
-      var initialPoints = polygon.getAttribute('points');
-      _utils2.thinnerShapesNeeded.mockReturnValue(true);
-      rerender(/*#__PURE__*/_react["default"].createElement(_arrow["default"], {
-        x: 0,
-        y: 0,
-        angle: 0,
-        graphProps: (0, _utils.graphProps)(),
-        classes: {},
-        className: "arrow-class"
-      }));
-      polygon = container.querySelector('polygon');
-      var newPoints = polygon.getAttribute('points');
-      // Points should change due to size change (14 vs 12)
-      expect(newPoints).not.toBe(initialPoints);
-    });
-  });
-});
-//# sourceMappingURL=arrow.test.js.map