@pie-lib/charting 7.0.13 → 7.1.0-beta

package/lib/__tests__/axes.test.js

@@ -0,0 +1,746 @@
+"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 _axes = _interopRequireWildcard(require("../axes"));
+var _utils = require("./utils");
+var _excluded = ["children"],
+  _excluded2 = ["children", "tickValues"];
+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; }
+jest.mock('@visx/axis', function () {
+  return {
+    AxisLeft: function AxisLeft(_ref) {
+      var children = _ref.children,
+        props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+      return /*#__PURE__*/_react["default"].createElement("g", (0, _extends2["default"])({
+        "data-testid": "axis-left"
+      }, props), typeof children === 'function' ? children({
+        formattedValue: '5'
+      }) : children);
+    },
+    AxisBottom: function AxisBottom(_ref2) {
+      var children = _ref2.children,
+        tickValues = _ref2.tickValues,
+        props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+      return /*#__PURE__*/_react["default"].createElement("g", (0, _extends2["default"])({
+        "data-testid": "axis-bottom"
+      }, props), typeof children === 'function' ? (tickValues || ['0-A', '1-B', '2-C']).map(function (v, i) {
+        return children({
+          formattedValue: v,
+          index: i
+        });
+      }) : children);
+    }
+  };
+});
+jest.mock('../mark-label', function () {
+  return function MarkLabel(_ref3) {
+    var mark = _ref3.mark,
+      disabled = _ref3.disabled,
+      _onChange = _ref3.onChange,
+      error = _ref3.error,
+      autoFocus = _ref3.autoFocus,
+      inputRef = _ref3.inputRef,
+      correctnessIndicator = _ref3.correctnessIndicator;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "mark-label"
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      "data-testid": "mark-label-input",
+      ref: inputRef,
+      value: (mark === null || mark === void 0 ? void 0 : mark.label) || '',
+      disabled: disabled,
+      onChange: function onChange(e) {
+        return _onChange && _onChange(e.target.value);
+      },
+      autoFocus: autoFocus
+    }), error && /*#__PURE__*/_react["default"].createElement("span", {
+      "data-testid": "mark-label-error"
+    }, error), correctnessIndicator);
+  };
+});
+jest.mock('@pie-lib/config-ui', function () {
+  return {
+    AlertDialog: function AlertDialog(_ref4) {
+      var open = _ref4.open,
+        title = _ref4.title,
+        text = _ref4.text,
+        onClose = _ref4.onClose,
+        onConfirm = _ref4.onConfirm;
+      return open ? /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "alert-dialog"
+      }, /*#__PURE__*/_react["default"].createElement("h2", null, title), /*#__PURE__*/_react["default"].createElement("p", null, text), /*#__PURE__*/_react["default"].createElement("button", {
+        "data-testid": "alert-cancel",
+        onClick: onClose
+      }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+        "data-testid": "alert-confirm",
+        onClick: onConfirm
+      }, "Confirm")) : null;
+    }
+  };
+});
+jest.mock('../common/correctness-indicators', function () {
+  return {
+    TickCorrectnessIndicator: function TickCorrectnessIndicator(_ref5) {
+      var correctness = _ref5.correctness,
+        interactive = _ref5.interactive;
+      return correctness && interactive ? /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "tick-correctness-indicator"
+      }, correctness.value === 'correct' ? '✓' : '✗') : null;
+    }
+  };
+});
+jest.mock('@pie-lib/math-rendering', function () {
+  return {
+    renderMath: jest.fn(function (text) {
+      return text;
+    })
+  };
+});
+var theme = (0, _styles.createTheme)();
+describe('ChartAxes', function () {
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: (0, _utils.graphProps)(),
+      xBand: (0, _utils.createBandScale)(['a', 'b', 'c'], [0, 400]),
+      categories: []
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react["default"].createElement("svg", null, /*#__PURE__*/_react["default"].createElement(_axes["default"], props))));
+  };
+  describe('rendering', function () {
+    it('renders axes container', function () {
+      var _renderComponent = renderComponent(),
+        container = _renderComponent.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders SVG with axes group', function () {
+      var _renderComponent2 = renderComponent(),
+        container = _renderComponent2.container;
+      var svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      var axesGroup = container.querySelector('g');
+      expect(axesGroup).toBeInTheDocument();
+    });
+    it('renders axes elements', function () {
+      var _renderComponent3 = renderComponent(),
+        container = _renderComponent3.container;
+      var groups = container.querySelectorAll('g');
+      expect(groups.length).toBeGreaterThan(0);
+    });
+  });
+  describe('edge cases', function () {
+    it('handles missing xBand', function () {
+      var _renderComponent4 = renderComponent({
+          xBand: undefined
+        }),
+        container = _renderComponent4.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles empty categories', function () {
+      var _renderComponent5 = renderComponent({
+          categories: []
+        }),
+        container = _renderComponent5.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles null categories', function () {
+      var _renderComponent6 = renderComponent({
+          categories: null
+        }),
+        container = _renderComponent6.container;
+      expect(container).toBeInTheDocument();
+    });
+  });
+});
+describe('RawChartAxes', function () {
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: (0, _utils.graphProps)(),
+      xBand: (0, _utils.createBandScale)(['a', 'b', 'c'], [0, 400]),
+      categories: []
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react["default"].createElement("svg", null, /*#__PURE__*/_react["default"].createElement(_axes.RawChartAxes, props))));
+  };
+  describe('rendering', function () {
+    it('renders raw axes container', function () {
+      var _renderComponent7 = renderComponent(),
+        container = _renderComponent7.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders SVG with axes group', function () {
+      var _renderComponent8 = renderComponent(),
+        container = _renderComponent8.container;
+      var svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      var axesGroup = container.querySelector('g');
+      expect(axesGroup).toBeInTheDocument();
+    });
+    it('renders both axes when leftAxis is true', function () {
+      var _renderComponent9 = renderComponent({
+          leftAxis: true
+        }),
+        getByTestId = _renderComponent9.getByTestId;
+      expect(getByTestId('axis-left')).toBeInTheDocument();
+      expect(getByTestId('axis-bottom')).toBeInTheDocument();
+    });
+    it('renders only bottom axis when leftAxis is false', function () {
+      var _renderComponent0 = renderComponent({
+          leftAxis: false
+        }),
+        queryByTestId = _renderComponent0.queryByTestId,
+        getByTestId = _renderComponent0.getByTestId;
+      expect(queryByTestId('axis-left')).not.toBeInTheDocument();
+      expect(getByTestId('axis-bottom')).toBeInTheDocument();
+    });
+  });
+});
+describe('TickComponent', function () {
+  var defaultCategories = [{
+    value: 1,
+    label: 'Category A',
+    editable: true,
+    interactive: true
+  }, {
+    value: 2,
+    label: 'Category B',
+    editable: true,
+    interactive: true
+  }];
+  var renderComponent = function renderComponent(extras) {
+    var defaults = {
+      graphProps: (0, _utils.graphProps)(),
+      xBand: (0, _utils.createBandScale)(['a', 'b', 'c'], [0, 400]),
+      categories: defaultCategories,
+      formattedValue: '0-Category A',
+      bandWidth: 100,
+      barWidth: 100,
+      x: 50,
+      y: 50,
+      top: 0,
+      onChangeCategory: jest.fn()
+    };
+    var props = _objectSpread(_objectSpread({}, defaults), extras);
+    return (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react["default"].createElement("svg", null, /*#__PURE__*/_react["default"].createElement(_axes.TickComponent, props))));
+  };
+  describe('rendering', function () {
+    it('renders tick component', function () {
+      var _renderComponent1 = renderComponent(),
+        container = _renderComponent1.container;
+      var svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(container.querySelector('g')).toBeInTheDocument();
+    });
+    it('renders with categories', function () {
+      var _renderComponent10 = renderComponent({
+          formattedValue: '0-test',
+          categories: [{
+            value: 1,
+            label: 'test',
+            editable: false,
+            interactive: false
+          }]
+        }),
+        container = _renderComponent10.container;
+      var svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(container.querySelector('g')).toBeInTheDocument();
+    });
+    it('renders MarkLabel component', function () {
+      var _renderComponent11 = renderComponent(),
+        getAllByTestId = _renderComponent11.getAllByTestId;
+      var markLabels = getAllByTestId('mark-label');
+      expect(markLabels.length).toBeGreaterThan(0);
+    });
+    it('renders foreignObject for labels', function () {
+      var _renderComponent12 = renderComponent(),
+        container = _renderComponent12.container;
+      var foreignObject = container.querySelector('foreignObject');
+      expect(foreignObject).toBeInTheDocument();
+    });
+    it('does not render when formattedValue is null', function () {
+      var _renderComponent13 = renderComponent({
+          formattedValue: null
+        }),
+        container = _renderComponent13.container;
+      var foreignObject = container.querySelector('foreignObject');
+      expect(foreignObject).not.toBeInTheDocument();
+    });
+    it('does not render when formattedValue is undefined', function () {
+      var _renderComponent14 = renderComponent({
+          formattedValue: undefined
+        }),
+        container = _renderComponent14.container;
+      var foreignObject = container.querySelector('foreignObject');
+      expect(foreignObject).not.toBeInTheDocument();
+    });
+    it('renders hidden label for longest category', function () {
+      var _renderComponent15 = renderComponent(),
+        getAllByTestId = _renderComponent15.getAllByTestId;
+      var markLabels = getAllByTestId('mark-label');
+      expect(markLabels.length).toBeGreaterThan(0);
+    });
+  });
+  describe('category label editing', function () {
+    it('allows editing category label', function () {
+      var onChangeCategory = jest.fn();
+      var _renderComponent16 = renderComponent({
+          onChangeCategory: onChangeCategory
+        }),
+        getAllByTestId = _renderComponent16.getAllByTestId;
+      var inputs = getAllByTestId('mark-label-input');
+      var input = inputs[inputs.length - 1];
+      _testUtils.fireEvent.change(input, {
+        target: {
+          value: 'New Label'
+        }
+      });
+      expect(onChangeCategory).toHaveBeenCalled();
+    });
+    it('calls changeCategory with correct parameters', function () {
+      var onChangeCategory = jest.fn();
+      var _renderComponent17 = renderComponent({
+          onChangeCategory: onChangeCategory
+        }),
+        getAllByTestId = _renderComponent17.getAllByTestId;
+      var inputs = getAllByTestId('mark-label-input');
+      var input = inputs[inputs.length - 1];
+      _testUtils.fireEvent.change(input, {
+        target: {
+          value: 'Updated'
+        }
+      });
+      expect(onChangeCategory).toHaveBeenCalledWith(0, expect.objectContaining({
+        label: 'Updated'
+      }));
+    });
+    it('disables editing when editable is false', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: false,
+        interactive: true
+      }];
+      var _renderComponent18 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test'
+        }),
+        getAllByTestId = _renderComponent18.getAllByTestId;
+      var inputs = getAllByTestId('mark-label-input');
+      var input = inputs[inputs.length - 1];
+      expect(input).toBeDisabled();
+    });
+    it('enables editing in define chart mode', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true
+      }];
+      var _renderComponent19 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test',
+          defineChart: true
+        }),
+        getAllByTestId = _renderComponent19.getAllByTestId;
+      var inputs = getAllByTestId('mark-label-input');
+      var input = inputs[inputs.length - 1];
+      expect(input).not.toBeDisabled();
+    });
+    it('respects editable property when not in define chart mode', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true
+      }];
+      var _renderComponent20 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test',
+          defineChart: false
+        }),
+        getAllByTestId = _renderComponent20.getAllByTestId;
+      var inputs = getAllByTestId('mark-label-input');
+      var input = inputs[inputs.length - 1];
+      expect(input).not.toBeDisabled();
+    });
+  });
+  describe('interactive checkbox', function () {
+    it('shows warning when disabling interactive with correct answer', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true,
+        correctness: {
+          value: 'correct'
+        }
+      }];
+      var component = new _axes.TickComponent({
+        categories: categories,
+        onChangeCategory: jest.fn()
+      });
+      component.setState = jest.fn();
+      component.changeInteractive(0, false);
+      expect(component.setState).toHaveBeenCalledWith(expect.objectContaining({
+        dialog: expect.objectContaining({
+          open: true,
+          title: 'Warning'
+        })
+      }));
+    });
+    it('changes interactive without warning when enabling', function () {
+      var onChangeCategory = jest.fn();
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: false
+      }];
+      var component = new _axes.TickComponent({
+        categories: categories,
+        onChangeCategory: onChangeCategory
+      });
+      component.changeInteractive(0, true);
+      expect(onChangeCategory).toHaveBeenCalledWith(0, expect.objectContaining({
+        interactive: true
+      }));
+    });
+  });
+  describe('editable checkbox', function () {
+    it('shows warning when disabling editable with correct answer name', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true,
+        correctness: {
+          value: 'correct'
+        }
+      }];
+      var component = new _axes.TickComponent({
+        categories: categories,
+        onChangeCategory: jest.fn()
+      });
+      component.setState = jest.fn();
+      component.changeEditable(0, false);
+      expect(component.setState).toHaveBeenCalledWith(expect.objectContaining({
+        dialog: expect.objectContaining({
+          open: true,
+          title: 'Warning'
+        })
+      }));
+    });
+    it('changes editable without warning when enabling', function () {
+      var onChangeCategory = jest.fn();
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: false,
+        interactive: true
+      }];
+      var component = new _axes.TickComponent({
+        categories: categories,
+        onChangeCategory: onChangeCategory
+      });
+      component.changeEditable(0, true);
+      expect(onChangeCategory).toHaveBeenCalledWith(0, expect.objectContaining({
+        editable: true
+      }));
+    });
+  });
+  describe('splitText method', function () {
+    it('splits text into chunks', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText('This is a long text', 10);
+      expect(result.length).toBeGreaterThan(1);
+    });
+    it('splits at word boundaries', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText('Hello world test', 11);
+      expect(result[0]).toBe('Hello world');
+    });
+    it('handles text shorter than max', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText('Short', 20);
+      expect(result).toEqual(['Short']);
+    });
+    it('handles empty text', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText('', 10);
+      expect(result).toEqual([]);
+    });
+    it('handles null text', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText(null, 10);
+      expect(result).toEqual([]);
+    });
+    it('forces split when no spaces', function () {
+      var component = new _axes.TickComponent({
+        categories: []
+      });
+      var result = component.splitText('verylongwordwithoutspaces', 10);
+      expect(result.length).toBeGreaterThan(1);
+      expect(result[0].length).toBeLessThanOrEqual(10);
+    });
+  });
+  describe('correctness display', function () {
+    it('renders correctness indicator when showCorrectness is true', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true,
+        correctness: {
+          value: 'correct',
+          label: 'Correct!'
+        }
+      }];
+      var _renderComponent21 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test',
+          showCorrectness: true
+        }),
+        getByTestId = _renderComponent21.getByTestId;
+      expect(getByTestId('tick-correctness-indicator')).toBeInTheDocument();
+    });
+    it('does not render correctness indicator when showCorrectness is false', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: true,
+        correctness: {
+          value: 'correct',
+          label: 'Correct!'
+        }
+      }];
+      var _renderComponent22 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test',
+          showCorrectness: false
+        }),
+        queryByTestId = _renderComponent22.queryByTestId;
+      expect(queryByTestId('tick-correctness-indicator')).not.toBeInTheDocument();
+    });
+    it('does not render correctness indicator when not interactive', function () {
+      var categories = [{
+        value: 1,
+        label: 'test',
+        editable: true,
+        interactive: false,
+        correctness: {
+          value: 'correct',
+          label: 'Correct!'
+        }
+      }];
+      var _renderComponent23 = renderComponent({
+          categories: categories,
+          formattedValue: '0-test',
+          showCorrectness: true
+        }),
+        queryByTestId = _renderComponent23.queryByTestId;
+      expect(queryByTestId('tick-correctness-indicator')).not.toBeInTheDocument();
+    });
+  });
+  describe('error display', function () {
+    it('renders error message for first category', function () {
+      var error = {
+        0: 'Error message'
+      };
+      var _renderComponent24 = renderComponent({
+          error: error,
+          formattedValue: '0-test'
+        }),
+        getByTestId = _renderComponent24.getByTestId;
+      expect(getByTestId('mark-label-error')).toBeInTheDocument();
+    });
+    it('renders distinct error messages', function () {
+      var error = {
+        0: 'Error 1',
+        1: 'Error 1',
+        2: 'Error 2'
+      };
+      var _renderComponent25 = renderComponent({
+          error: error,
+          formattedValue: '0-test'
+        }),
+        container = _renderComponent25.container;
+      var errorText = container.querySelector('text');
+      expect(errorText).toBeInTheDocument();
+    });
+    it('does not render error when no error prop', function () {
+      var _renderComponent26 = renderComponent({
+          error: null
+        }),
+        queryByTestId = _renderComponent26.queryByTestId;
+      expect(queryByTestId('mark-label-error')).not.toBeInTheDocument();
+    });
+  });
+  describe('autoFocus handling', function () {
+    it('handles autoFocus prop', function () {
+      var onAutoFocusUsed = jest.fn();
+      var _renderComponent27 = renderComponent({
+          autoFocus: false,
+          onAutoFocusUsed: onAutoFocusUsed
+        }),
+        rerender = _renderComponent27.rerender;
+      rerender(/*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/_react["default"].createElement("svg", null, /*#__PURE__*/_react["default"].createElement(_axes.TickComponent, {
+        graphProps: (0, _utils.graphProps)(),
+        xBand: (0, _utils.createBandScale)(['a', 'b', 'c'], [0, 400]),
+        categories: defaultCategories,
+        formattedValue: '0-Category A',
+        bandWidth: 100,
+        barWidth: 100,
+        x: 50,
+        y: 50,
+        top: 0,
+        onChangeCategory: jest.fn(),
+        autoFocus: true,
+        onAutoFocusUsed: onAutoFocusUsed
+      }))));
+      expect(onAutoFocusUsed).toHaveBeenCalled();
+    });
+  });
+  describe('define chart mode', function () {
+    it('renders interactive checkboxes when changeInteractiveEnabled', function () {
+      var chartingOptions = {
+        changeInteractive: {
+          authoringLabel: 'Allow students to change'
+        }
+      };
+      var _renderComponent28 = renderComponent({
+          defineChart: true,
+          chartingOptions: chartingOptions,
+          changeInteractiveEnabled: true,
+          formattedValue: '0-test'
+        }),
+        container = _renderComponent28.container;
+      var text = container.querySelector('text');
+      expect(text).toBeInTheDocument();
+    });
+    it('renders editable checkboxes when changeEditableEnabled', function () {
+      var chartingOptions = {
+        changeEditable: {
+          authoringLabel: 'Allow label editing'
+        }
+      };
+      var _renderComponent29 = renderComponent({
+          defineChart: true,
+          chartingOptions: chartingOptions,
+          changeEditableEnabled: true,
+          formattedValue: '0-test'
+        }),
+        container = _renderComponent29.container;
+      var text = container.querySelector('text');
+      expect(text).toBeInTheDocument();
+    });
+    it('splits long authoring labels', function () {
+      var chartingOptions = {
+        changeInteractive: {
+          authoringLabel: 'This is a very long label that needs to be split'
+        }
+      };
+      var _renderComponent30 = renderComponent({
+          defineChart: true,
+          chartingOptions: chartingOptions,
+          changeInteractiveEnabled: true,
+          formattedValue: '0-test'
+        }),
+        container = _renderComponent30.container;
+      var tspans = container.querySelectorAll('tspan');
+      expect(tspans.length).toBeGreaterThan(1);
+    });
+  });
+  describe('edge cases', function () {
+    it('handles missing category', function () {
+      var _renderComponent31 = renderComponent({
+          categories: [],
+          formattedValue: '0-missing'
+        }),
+        container = _renderComponent31.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles invalid formattedValue format', function () {
+      var _renderComponent32 = renderComponent({
+          formattedValue: 'invalid'
+        }),
+        container = _renderComponent32.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles missing graphProps', function () {
+      var _renderComponent33 = renderComponent({
+          graphProps: null
+        }),
+        container = _renderComponent33.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles zero barWidth', function () {
+      var _renderComponent34 = renderComponent({
+          barWidth: 0
+        }),
+        container = _renderComponent34.container;
+      expect(container).toBeInTheDocument();
+    });
+    it('handles negative coordinates', function () {
+      var _renderComponent35 = renderComponent({
+          x: -10,
+          y: -20
+        }),
+        container = _renderComponent35.container;
+      expect(container).toBeInTheDocument();
+    });
+  });
+  describe('componentDidUpdate', function () {
+    it('calls onAutoFocusUsed when autoFocus changes to true', function () {
+      var onAutoFocusUsed = jest.fn();
+      var component = new _axes.TickComponent({
+        autoFocus: false,
+        onAutoFocusUsed: onAutoFocusUsed
+      });
+      component.componentDidUpdate({
+        autoFocus: false
+      });
+      expect(onAutoFocusUsed).not.toHaveBeenCalled();
+      component.props = {
+        autoFocus: true,
+        onAutoFocusUsed: onAutoFocusUsed
+      };
+      component.componentDidUpdate({
+        autoFocus: false
+      });
+      expect(onAutoFocusUsed).toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=axes.test.js.map