@pie-lib/charting 7.1.0-beta.7 → 8.0.0-next.35

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

@@ -1,617 +0,0 @@
-"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