@pie-lib/charting 7.0.13 → 7.1.0-beta

package/lib/line/__tests__/line-cross.test.js

@@ -0,0 +1,617 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _testUtils = require("@pie-lib/test-utils");
+var _styles = require("@mui/material/styles");
+var _lineCross = _interopRequireWildcard(require("../line-cross"));
+var _utils = require("./utils");
+var _excluded = ["data", "x", "y", "strokeWidth", "style"],
+  _excluded2 = ["children"],
+  _excluded3 = ["CustomDraggableComponent", "data", "graphProps"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
+// Mock dependencies
+jest.mock('@visx/shape', function () {
+  return {
+    LinePath: function LinePath(_ref) {
+      var data = _ref.data,
+        x = _ref.x,
+        y = _ref.y,
+        strokeWidth = _ref.strokeWidth,
+        style = _ref.style,
+        props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+      return /*#__PURE__*/_react["default"].createElement("path", (0, _extends2["default"])({
+        "data-testid": "line-path",
+        d: data.map(function (d, i) {
+          return "".concat(i === 0 ? 'M' : 'L').concat(x(d), ",").concat(y(d));
+        }).join(' '),
+        strokeWidth: strokeWidth
+      }, props));
+    }
+  };
+});
+jest.mock('@visx/group', function () {
+  return {
+    Group: function Group(_ref2) {
+      var children = _ref2.children,
+        props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+      return /*#__PURE__*/_react["default"].createElement("g", (0, _extends2["default"])({
+        "data-testid": "visx-group"
+      }, props), children);
+    }
+  };
+});
+jest.mock('@pie-lib/render-ui', function () {
+  return {
+    color: {
+      text: function text() {
+        return '#000000';
+      },
+      defaults: {
+        TEXT: '#000000',
+        BLACK: '#000000',
+        BORDER_GRAY: '#cccccc'
+      },
+      disabled: function disabled() {
+        return '#cccccc';
+      }
+    }
+  };
+});
+jest.mock('../../utils', function () {
+  return {
+    dataToXBand: jest.fn(function (scale, data, width, type) {
+      return {
+        bandwidth: function bandwidth() {
+          return 20;
+        }
+      };
+    })
+  };
+});
+jest.mock('../common/line', function () {
+  return function RawLine(_ref3) {
+    var CustomDraggableComponent = _ref3.CustomDraggableComponent,
+      data = _ref3.data,
+      graphProps = _ref3.graphProps,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+    return /*#__PURE__*/_react["default"].createElement("svg", {
+      "data-testid": "raw-line"
+    }, data && data.length > 0 ? data.map(function (d, i) {
+      return /*#__PURE__*/_react["default"].createElement(CustomDraggableComponent, (0, _extends2["default"])({
+        key: i,
+        scale: graphProps.scale,
+        x: d.x || i,
+        y: d.y || i,
+        r: 8,
+        correctness: d.correctness,
+        interactive: d.interactive,
+        correctData: props.correctData,
+        label: d.label
+      }, props));
+    }) : /*#__PURE__*/_react["default"].createElement("text", null, "No data"));
+  };
+});
+jest.mock('../../common/correctness-indicators', function () {
+  return {
+    CorrectnessIndicator: function CorrectnessIndicator(_ref4) {
+      var scale = _ref4.scale,
+        x = _ref4.x,
+        y = _ref4.y,
+        correctness = _ref4.correctness,
+        interactive = _ref4.interactive;
+      return correctness && interactive ? /*#__PURE__*/_react["default"].createElement("g", {
+        "data-testid": "correctness-indicator"
+      }, /*#__PURE__*/_react["default"].createElement("circle", {
+        cx: scale.x(x),
+        cy: scale.y(y),
+        r: 5
+      })) : null;
+    },
+    SmallCorrectPointIndicator: function SmallCorrectPointIndicator(_ref5) {
+      var scale = _ref5.scale,
+        x = _ref5.x,
+        correctness = _ref5.correctness,
+        correctData = _ref5.correctData,
+        label = _ref5.label;
+      return correctness && correctness.value === 'incorrect' && correctData ? /*#__PURE__*/_react["default"].createElement("g", {
+        "data-testid": "small-correct-indicator"
+      }, /*#__PURE__*/_react["default"].createElement("circle", {
+        cx: scale.x(x),
+        cy: scale.y(0),
+        r: 3
+      })) : null;
+    }
+  };
+});
+var theme;
+beforeAll(function () {
+  theme = (0, _styles.createTheme)();
+});
+describe('LineChart', function () {
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: (0, _utils.graphProps)(),
+      data: [],
+      xBand: function xBand() {
+        return {
+          bandwidth: function bandwidth() {}
+        };
+      }
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props)));
+  };
+  describe('rendering', function () {
+    it('renders line cross chart', function () {
+      var _renderComponent = renderComponent(),
+        container = _renderComponent.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders with data points', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A'
+      }, {
+        x: 2,
+        y: 3,
+        label: 'B'
+      }];
+      var _renderComponent2 = renderComponent({
+          data: data
+        }),
+        getByTestId = _renderComponent2.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('renders without data', function () {
+      var _renderComponent3 = renderComponent({
+          data: []
+        }),
+        getByTestId = _renderComponent3.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('passes graphProps to RawLine', function () {
+      var customGraphProps = (0, _utils.graphProps)(0, 10, 0, 10);
+      var _renderComponent4 = renderComponent({
+          graphProps: customGraphProps
+        }),
+        getByTestId = _renderComponent4.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('passes onChange to RawLine', function () {
+      var onChange = jest.fn();
+      var _renderComponent5 = renderComponent({
+          onChange: onChange
+        }),
+        getByTestId = _renderComponent5.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+  });
+  describe('xBand calculation', function () {
+    it('calculates xBand from data', function () {
+      var data = [{
+        x: 1,
+        y: 2
+      }];
+      var _renderComponent6 = renderComponent({
+          data: data
+        }),
+        getByTestId = _renderComponent6.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('handles empty data for xBand', function () {
+      var _renderComponent7 = renderComponent({
+          data: []
+        }),
+        getByTestId = _renderComponent7.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+  });
+  describe('component', function () {
+    it('returns correct chart object', function () {
+      var chart = (0, _lineCross["default"])();
+      expect(chart).toEqual({
+        type: 'lineCross',
+        Component: _lineCross.LineCross,
+        name: 'Line Cross'
+      });
+    });
+    it('returns object with correct type', function () {
+      var chart = (0, _lineCross["default"])();
+      expect(chart.type).toBe('lineCross');
+    });
+    it('returns object with correct name', function () {
+      var chart = (0, _lineCross["default"])();
+      expect(chart.name).toBe('Line Cross');
+    });
+    it('returns object with LineCross component', function () {
+      var chart = (0, _lineCross["default"])();
+      expect(chart.Component).toBe(_lineCross.LineCross);
+    });
+  });
+  describe('edge cases', function () {
+    it('handles null data', function () {
+      var _renderComponent8 = renderComponent({
+          data: null
+        }),
+        getByTestId = _renderComponent8.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('handles undefined graphProps', function () {
+      var _renderComponent9 = renderComponent({
+          graphProps: undefined
+        }),
+        container = _renderComponent9.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles missing scale in graphProps', function () {
+      var _renderComponent0 = renderComponent({
+          graphProps: {
+            size: {
+              width: 400,
+              height: 400
+            }
+          }
+        }),
+        container = _renderComponent0.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles missing size in graphProps', function () {
+      var _renderComponent1 = renderComponent({
+          graphProps: {
+            scale: (0, _utils.graphProps)().scale
+          }
+        }),
+        container = _renderComponent1.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('renders with className', function () {
+      var _renderComponent10 = renderComponent({
+          className: 'custom-class'
+        }),
+        container = _renderComponent10.container;
+      expect(container).toBeInTheDocument();
+    });
+  });
+  describe('data with correctness', function () {
+    it('renders data with correct answers', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A',
+        correctness: {
+          value: 'correct',
+          label: 'Correct!'
+        },
+        interactive: true
+      }];
+      var _renderComponent11 = renderComponent({
+          data: data
+        }),
+        getByTestId = _renderComponent11.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('renders data with incorrect answers', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A',
+        correctness: {
+          value: 'incorrect',
+          label: 'Wrong'
+        },
+        interactive: true
+      }];
+      var correctData = [{
+        label: 'A',
+        value: 3
+      }];
+      var _renderComponent12 = renderComponent({
+          data: data,
+          correctData: correctData
+        }),
+        getByTestId = _renderComponent12.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+    it('renders non-interactive data', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A',
+        interactive: false
+      }];
+      var _renderComponent13 = renderComponent({
+          data: data
+        }),
+        getByTestId = _renderComponent13.getByTestId;
+      expect(getByTestId('raw-line')).toBeInTheDocument();
+    });
+  });
+});
+describe('DraggableComponent', function () {
+  // We need to test the DraggableComponent through LineCross since it's not exported
+  var renderLineCrossWithData = function renderLineCrossWithData() {
+    var dataExtras = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var data = [_objectSpread({
+      x: 5,
+      y: 10,
+      label: 'A',
+      r: 8,
+      interactive: true
+    }, dataExtras)];
+    var props = {
+      graphProps: (0, _utils.graphProps)(),
+      data: data
+    };
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props)));
+  };
+  describe('rendering', function () {
+    it('renders cross lines', function () {
+      var _renderLineCrossWithD = renderLineCrossWithData(),
+        getAllByTestId = _renderLineCrossWithD.getAllByTestId;
+      var linePaths = getAllByTestId('line-path');
+      expect(linePaths.length).toBeGreaterThan(0);
+    });
+    it('renders visx group', function () {
+      var _renderLineCrossWithD2 = renderLineCrossWithData(),
+        getByTestId = _renderLineCrossWithD2.getByTestId;
+      expect(getByTestId('visx-group')).toBeInTheDocument();
+    });
+    it('renders transparent handle circle', function () {
+      var _renderLineCrossWithD3 = renderLineCrossWithData(),
+        container = _renderLineCrossWithD3.container;
+      var circles = container.querySelectorAll('circle');
+      expect(circles.length).toBeGreaterThan(0);
+    });
+  });
+  describe('hover interactions', function () {
+    it('renders interactive elements for hover', function () {
+      var _renderLineCrossWithD4 = renderLineCrossWithData(),
+        container = _renderLineCrossWithD4.container;
+      // The component should render, even if we can't test hover through the mock
+      expect(container).toBeInTheDocument();
+    });
+    it('component supports hover state changes', function () {
+      var _renderLineCrossWithD5 = renderLineCrossWithData(),
+        container = _renderLineCrossWithD5.container;
+      // Verify the component renders with interactive data
+      var svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+  describe('correctness indicators', function () {
+    it('renders correctness indicator for correct answer', function () {
+      var _renderLineCrossWithD6 = renderLineCrossWithData({
+          correctness: {
+            value: 'correct',
+            label: 'Correct!'
+          }
+        }),
+        getByTestId = _renderLineCrossWithD6.getByTestId;
+      expect(getByTestId('correctness-indicator')).toBeInTheDocument();
+    });
+    it('does not render correctness indicator when not interactive', function () {
+      var _renderLineCrossWithD7 = renderLineCrossWithData({
+          correctness: {
+            value: 'correct',
+            label: 'Correct!'
+          },
+          interactive: false
+        }),
+        queryByTestId = _renderLineCrossWithD7.queryByTestId;
+      expect(queryByTestId('correctness-indicator')).not.toBeInTheDocument();
+    });
+    it('renders small correct indicator for incorrect answer', function () {
+      var data = [{
+        x: 5,
+        y: 10,
+        label: 'A',
+        correctness: {
+          value: 'incorrect',
+          label: 'Wrong'
+        },
+        interactive: true
+      }];
+      var correctData = [{
+        label: 'A',
+        value: 15
+      }];
+      var props = {
+        graphProps: (0, _utils.graphProps)(),
+        data: data,
+        correctData: correctData
+      };
+      var _render = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props))),
+        getByTestId = _render.getByTestId;
+      expect(getByTestId('small-correct-indicator')).toBeInTheDocument();
+    });
+    it('does not render small correct indicator for correct answer', function () {
+      var data = [{
+        x: 5,
+        y: 10,
+        label: 'A',
+        correctness: {
+          value: 'correct',
+          label: 'Correct!'
+        },
+        interactive: true
+      }];
+      var correctData = [{
+        label: 'A',
+        value: 15
+      }];
+      var props = {
+        graphProps: (0, _utils.graphProps)(),
+        data: data,
+        correctData: correctData
+      };
+      var _render2 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props))),
+        queryByTestId = _render2.queryByTestId;
+      expect(queryByTestId('small-correct-indicator')).not.toBeInTheDocument();
+    });
+  });
+  describe('cross lines positioning', function () {
+    it('renders two cross lines for each point', function () {
+      var _renderLineCrossWithD8 = renderLineCrossWithData(),
+        getAllByTestId = _renderLineCrossWithD8.getAllByTestId;
+      var linePaths = getAllByTestId('line-path');
+      expect(linePaths.length).toBe(2); // Two lines per cross
+    });
+    it('positions cross lines correctly with scale', function () {
+      var _renderLineCrossWithD9 = renderLineCrossWithData({
+          x: 3,
+          y: 7
+        }),
+        getAllByTestId = _renderLineCrossWithD9.getAllByTestId;
+      var linePaths = getAllByTestId('line-path');
+      expect(linePaths.length).toBe(2);
+    });
+  });
+  describe('edge cases', function () {
+    it('renders with zero coordinates', function () {
+      var _renderLineCrossWithD0 = renderLineCrossWithData({
+          x: 0,
+          y: 0
+        }),
+        container = _renderLineCrossWithD0.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('renders with negative coordinates', function () {
+      var _renderLineCrossWithD1 = renderLineCrossWithData({
+          x: -5,
+          y: -10
+        }),
+        container = _renderLineCrossWithD1.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('renders with large coordinates', function () {
+      var _renderLineCrossWithD10 = renderLineCrossWithData({
+          x: 1000,
+          y: 2000
+        }),
+        container = _renderLineCrossWithD10.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('renders without correctness', function () {
+      var _renderLineCrossWithD11 = renderLineCrossWithData({
+          correctness: null
+        }),
+        container = _renderLineCrossWithD11.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('renders without label', function () {
+      var _renderLineCrossWithD12 = renderLineCrossWithData({
+          label: undefined
+        }),
+        container = _renderLineCrossWithD12.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles custom radius', function () {
+      var _renderLineCrossWithD13 = renderLineCrossWithData({
+          r: 12
+        }),
+        container = _renderLineCrossWithD13.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('applies className', function () {
+      var _renderLineCrossWithD14 = renderLineCrossWithData({
+          className: 'custom-cross'
+        }),
+        getByTestId = _renderLineCrossWithD14.getByTestId;
+      var group = getByTestId('visx-group');
+      expect(group).toBeInTheDocument();
+    });
+  });
+  describe('hover rect sizing', function () {
+    it('component supports hover rect with proper sizing', function () {
+      var _renderLineCrossWithD15 = renderLineCrossWithData({
+          r: 10
+        }),
+        container = _renderLineCrossWithD15.container;
+      // Verify the component renders with custom radius
+      expect(container).toBeInTheDocument();
+    });
+    it('component supports hover rect centering', function () {
+      var _renderLineCrossWithD16 = renderLineCrossWithData({
+          x: 5,
+          y: 10,
+          r: 8
+        }),
+        container = _renderLineCrossWithD16.container;
+      // Verify the component renders at specified coordinates
+      expect(container).toBeInTheDocument();
+    });
+  });
+  describe('multiple data points', function () {
+    it('renders multiple crosses for multiple data points', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A',
+        interactive: true
+      }, {
+        x: 3,
+        y: 4,
+        label: 'B',
+        interactive: true
+      }, {
+        x: 5,
+        y: 6,
+        label: 'C',
+        interactive: true
+      }];
+      var props = {
+        graphProps: (0, _utils.graphProps)(),
+        data: data
+      };
+      var _render3 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props))),
+        getAllByTestId = _render3.getAllByTestId;
+      var groups = getAllByTestId('visx-group');
+      expect(groups.length).toBe(3);
+    });
+    it('renders multiple data points with proper structure', function () {
+      var data = [{
+        x: 1,
+        y: 2,
+        label: 'A',
+        interactive: true
+      }, {
+        x: 3,
+        y: 4,
+        label: 'B',
+        interactive: true
+      }];
+      var props = {
+        graphProps: (0, _utils.graphProps)(),
+        data: data
+      };
+      var _render4 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(_lineCross.LineCross, props))),
+        container = _render4.container;
+
+      // Should render the component with multiple data points
+      expect(container).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=line-cross.test.js.map