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

package/lib/__tests__/grid-setup.test.js

@@ -0,0 +1,729 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _testUtils = require("@pie-lib/test-utils");
+var _gridSetup = _interopRequireDefault(require("../grid-setup"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var mockOnChange = jest.fn();
+var mockOnChangeView = jest.fn();
+var defaultProps = {
+  domain: {
+    min: -5,
+    max: 5,
+    step: 1,
+    labelStep: 1,
+    axisLabel: 'x'
+  },
+  range: {
+    min: -5,
+    max: 5,
+    step: 1,
+    labelStep: 1,
+    axisLabel: 'y'
+  },
+  size: {
+    width: 480,
+    height: 480
+  },
+  sizeConstraints: {
+    min: 300,
+    max: 900,
+    step: 10
+  },
+  includeAxes: true,
+  standardGrid: false,
+  displayedFields: {
+    axisLabel: {
+      enabled: true,
+      label: 'Axis Label'
+    },
+    min: {
+      enabled: true,
+      label: 'Min'
+    },
+    max: {
+      enabled: true,
+      label: 'Max'
+    },
+    step: {
+      enabled: true,
+      label: 'Interval'
+    },
+    labelStep: {
+      enabled: true,
+      label: 'Label Interval'
+    },
+    dimensionsEnabled: true,
+    includeAxesEnabled: true,
+    standardGridEnabled: true
+  },
+  gridValues: {
+    domain: [1, 2, 5, 10],
+    range: [1, 2, 5, 10]
+  },
+  labelValues: {
+    domain: [0, 1, 2],
+    range: [0, 1, 2]
+  },
+  onChange: mockOnChange,
+  onChangeView: mockOnChangeView
+};
+describe('GridSetup', function () {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  describe('rendering', function () {
+    it('renders without crashing', function () {
+      var _render = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render.container;
+      expect(container).toBeTruthy();
+    });
+    it('renders accordion with title', function () {
+      var _render2 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render2.getByText;
+      expect(getByText('Customize Grid Setup')).toBeTruthy();
+    });
+    it('renders Include axes toggle when enabled', function () {
+      var _render3 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render3.getByText;
+      expect(getByText('Include axes and labels?')).toBeTruthy();
+    });
+    it('does not render Include axes toggle when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          includeAxesEnabled: false
+        })
+      });
+      var _render4 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByText = _render4.queryByText;
+      expect(queryByText('Include axes and labels?')).toBeFalsy();
+    });
+    it('renders standard grid toggle when enabled', function () {
+      var _render5 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render5.getByText;
+      expect(getByText('Constrain to standard coordinate grid?')).toBeTruthy();
+    });
+    it('does not render standard grid toggle when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          standardGridEnabled: false
+        })
+      });
+      var _render6 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByText = _render6.queryByText;
+      expect(queryByText('Constrain to standard coordinate grid?')).toBeFalsy();
+    });
+    it('renders dimensions section when enabled', function () {
+      var _render7 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render7.getByText;
+      expect(getByText('Dimensions(px)')).toBeTruthy();
+      expect(getByText(/Min 300, Max 900/)).toBeTruthy();
+    });
+    it('does not render dimensions section when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          dimensionsEnabled: false
+        })
+      });
+      var _render8 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByText = _render8.queryByText;
+      expect(queryByText('Dimensions(px)')).toBeFalsy();
+    });
+  });
+  describe('axes configuration', function () {
+    it('renders axis headers when includeAxes is true', function () {
+      var _render9 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render9.container;
+      var xAxisHeader = container.querySelector('i');
+      expect(xAxisHeader === null || xAxisHeader === void 0 ? void 0 : xAxisHeader.textContent).toBe('x');
+    });
+    it('renders min/max fields when enabled', function () {
+      var _render0 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getAllByLabelText = _render0.getAllByLabelText;
+      var minFields = getAllByLabelText('Min');
+      var maxFields = getAllByLabelText('Max');
+      expect(minFields.length).toBe(2); // domain and range
+      expect(maxFields.length).toBe(2); // domain and range
+    });
+    it('does not render min/max fields when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          min: {
+            enabled: false
+          },
+          max: {
+            enabled: false
+          }
+        })
+      });
+      var _render1 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByLabelText = _render1.queryByLabelText;
+      expect(queryByLabelText('Min')).toBeFalsy();
+      expect(queryByLabelText('Max')).toBeFalsy();
+    });
+    it('renders axis label fields when enabled', function () {
+      var _render10 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getAllByText = _render10.getAllByText;
+      var axisLabelFields = getAllByText('Axis Label');
+      expect(axisLabelFields.length).toBe(2); // domain and range
+    });
+    it('does not render axis label fields when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          axisLabel: {
+            enabled: false
+          }
+        })
+      });
+      var _render11 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByText = _render11.queryByText;
+      expect(queryByText('Axis Label')).toBeFalsy();
+    });
+    it('renders step and labelStep fields when enabled', function () {
+      var _render12 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getAllByLabelText = _render12.getAllByLabelText;
+      var intervalFields = getAllByLabelText('Interval');
+      var labelIntervalFields = getAllByLabelText('Label Interval');
+      expect(intervalFields.length).toBe(2); // domain and range
+      expect(labelIntervalFields.length).toBe(2); // domain and range
+    });
+    it('does not render step fields when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          step: {
+            enabled: false
+          }
+        })
+      });
+      var _render13 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByLabelText = _render13.queryByLabelText;
+      expect(queryByLabelText('Interval')).toBeFalsy();
+    });
+    it('does not render labelStep fields when disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          labelStep: {
+            enabled: false
+          }
+        })
+      });
+      var _render14 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByLabelText = _render14.queryByLabelText;
+      expect(queryByLabelText('Label Interval')).toBeFalsy();
+    });
+    it('displays axis visibility hint when min/max enabled', function () {
+      var _render15 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render15.getByText;
+      expect(getByText('If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value')).toBeTruthy();
+    });
+    it('displays unnumbered gridlines hint when labelStep enabled', function () {
+      var _render16 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getByText = _render16.getByText;
+      expect(getByText('For unnumbered gridlines, enter a label interval of 0')).toBeTruthy();
+    });
+  });
+  describe('gridlines configuration', function () {
+    it('renders gridlines config when includeAxes is false', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        includeAxes: false
+      });
+      var _render17 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        getByLabelText = _render17.getByLabelText;
+      expect(getByLabelText('Number of Vertical Gridlines')).toBeTruthy();
+      expect(getByLabelText('Number of Horizontal Gridlines')).toBeTruthy();
+    });
+    it('does not render axes config when includeAxes is false', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        includeAxes: false
+      });
+      var _render18 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByText = _render18.queryByText;
+      expect(queryByText('Axis Label')).toBeFalsy();
+    });
+    it('does not render gridlines config when max is disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        includeAxes: false,
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          max: {
+            enabled: false
+          }
+        })
+      });
+      var _render19 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByLabelText = _render19.queryByLabelText;
+      expect(queryByLabelText('Number of Vertical Gridlines')).toBeFalsy();
+      expect(queryByLabelText('Number of Horizontal Gridlines')).toBeFalsy();
+    });
+  });
+  describe('user interactions', function () {
+    it('calls onChange when includeAxes toggle is clicked', function () {
+      var _render20 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render20.container;
+      var toggleInput = container.querySelector('input[type="checkbox"]');
+      _testUtils.fireEvent.click(toggleInput);
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+        includeAxes: false
+      }));
+    });
+    it('calls onChange with proper config when includeAxes is disabled', function () {
+      var _render21 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render21.container;
+      var toggleInput = container.querySelector('input[type="checkbox"]');
+      _testUtils.fireEvent.click(toggleInput);
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+        includeAxes: false,
+        domain: expect.objectContaining({
+          min: 1,
+          max: 5,
+          step: 1,
+          labelStep: 0
+        }),
+        range: expect.objectContaining({
+          min: 1,
+          max: 5,
+          step: 1,
+          labelStep: 0
+        })
+      }));
+    });
+    it('calls onChange with proper config when includeAxes is enabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        includeAxes: false
+      });
+      var _render22 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        container = _render22.container;
+      var toggleInputs = container.querySelectorAll('input[type="checkbox"]');
+      var includeAxesToggle = toggleInputs[0]; // First toggle is includeAxes
+
+      _testUtils.fireEvent.click(includeAxesToggle);
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+        includeAxes: true,
+        domain: expect.objectContaining({
+          labelStep: 1
+        }),
+        range: expect.objectContaining({
+          labelStep: 1
+        })
+      }));
+    });
+    it('calls onChange when standardGrid toggle is clicked', function () {
+      var _render23 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render23.container;
+      var toggleInputs = container.querySelectorAll('input[type="checkbox"]');
+      var standardGridToggle = toggleInputs[1]; // Second toggle is standardGrid
+
+      _testUtils.fireEvent.click(standardGridToggle);
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+        standardGrid: true,
+        graph: expect.objectContaining({
+          width: 480,
+          height: 480
+        })
+      }));
+    });
+    it('calls onChange when width is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _render24, getAllByLabelText, widthInput;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _render24 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render24.getAllByLabelText;
+            widthInput = getAllByLabelText('Width')[0];
+            _testUtils.fireEvent.change(widthInput, {
+              target: {
+                value: '500'
+              }
+            });
+            _testUtils.fireEvent.blur(widthInput);
+            _context.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                graph: expect.objectContaining({
+                  width: 500
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    it('calls onChange when height is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var _render25, getAllByLabelText, heightInput;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _render25 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render25.getAllByLabelText;
+            heightInput = getAllByLabelText('Height')[0];
+            _testUtils.fireEvent.change(heightInput, {
+              target: {
+                value: '520'
+              }
+            });
+            _testUtils.fireEvent.blur(heightInput);
+            _context2.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                graph: expect.objectContaining({
+                  height: 520
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })));
+    it('updates both width and height when standardGrid is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var props, _render26, getAllByLabelText, widthInput;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+              standardGrid: true
+            });
+            _render26 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)), getAllByLabelText = _render26.getAllByLabelText;
+            widthInput = getAllByLabelText('Width')[0];
+            _testUtils.fireEvent.change(widthInput, {
+              target: {
+                value: '600'
+              }
+            });
+            _testUtils.fireEvent.blur(widthInput);
+            _context3.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                graph: expect.objectContaining({
+                  width: 600,
+                  height: 600
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    })));
+    it('calls onChange when domain min is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+      var _render27, getAllByLabelText, minInputs, domainMinInput;
+      return _regenerator["default"].wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _render27 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render27.getAllByLabelText;
+            minInputs = getAllByLabelText('Min');
+            domainMinInput = minInputs[0];
+            _testUtils.fireEvent.change(domainMinInput, {
+              target: {
+                value: '-10'
+              }
+            });
+            _testUtils.fireEvent.blur(domainMinInput);
+            _context4.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                domain: expect.objectContaining({
+                  min: -10
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    })));
+    it('calls onChange when domain max is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+      var _render28, getAllByLabelText, maxInputs, domainMaxInput;
+      return _regenerator["default"].wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _render28 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render28.getAllByLabelText;
+            maxInputs = getAllByLabelText('Max');
+            domainMaxInput = maxInputs[0];
+            _testUtils.fireEvent.change(domainMaxInput, {
+              target: {
+                value: '10'
+              }
+            });
+            _testUtils.fireEvent.blur(domainMaxInput);
+            _context5.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                domain: expect.objectContaining({
+                  max: 10
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    })));
+    it('calls onChange when range min is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+      var _render29, getAllByLabelText, minInputs, rangeMinInput;
+      return _regenerator["default"].wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _render29 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render29.getAllByLabelText;
+            minInputs = getAllByLabelText('Min');
+            rangeMinInput = minInputs[1];
+            _testUtils.fireEvent.change(rangeMinInput, {
+              target: {
+                value: '-8'
+              }
+            });
+            _testUtils.fireEvent.blur(rangeMinInput);
+            _context6.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                range: expect.objectContaining({
+                  min: -8
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    })));
+    it('calls onChange when range max is changed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+      var _render30, getAllByLabelText, maxInputs, rangeMaxInput;
+      return _regenerator["default"].wrap(function (_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            _render30 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)), getAllByLabelText = _render30.getAllByLabelText;
+            maxInputs = getAllByLabelText('Max');
+            rangeMaxInput = maxInputs[1];
+            _testUtils.fireEvent.change(rangeMaxInput, {
+              target: {
+                value: '12'
+              }
+            });
+            _testUtils.fireEvent.blur(rangeMaxInput);
+            _context7.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                range: expect.objectContaining({
+                  max: 12
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
+    it('updates both domain and range when standardGrid is true and domain changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+      var props, _render31, getAllByLabelText, minInputs, domainMinInput;
+      return _regenerator["default"].wrap(function (_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+              standardGrid: true
+            });
+            _render31 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)), getAllByLabelText = _render31.getAllByLabelText;
+            minInputs = getAllByLabelText('Min');
+            domainMinInput = minInputs[0];
+            _testUtils.fireEvent.change(domainMinInput, {
+              target: {
+                value: '-15'
+              }
+            });
+            _testUtils.fireEvent.blur(domainMinInput);
+            _context8.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({
+                domain: expect.objectContaining({
+                  min: -15
+                }),
+                range: expect.objectContaining({
+                  min: -15
+                })
+              }));
+            });
+          case 1:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8);
+    })));
+    it('does not update range when domain axisLabel changes with standardGrid', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+      var props, _render32, container, axisLabelInputs;
+      return _regenerator["default"].wrap(function (_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
+          case 0:
+            props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+              standardGrid: true
+            });
+            _render32 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)), container = _render32.container; // EditableHTML change is harder to trigger, but we can test the handler directly
+            // by verifying the range doesn't get the axisLabel value from domain
+            axisLabelInputs = container.querySelectorAll('[contenteditable="true"]');
+            if (!(axisLabelInputs.length > 0)) {
+              _context9.next = 1;
+              break;
+            }
+            _testUtils.fireEvent.input(axisLabelInputs[0], {
+              target: {
+                innerHTML: 'X-Axis'
+              }
+            });
+            _context9.next = 1;
+            return (0, _testUtils.waitFor)(function () {
+              if (mockOnChange.mock.calls.length > 0) {
+                var _lastCall$range;
+                var lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+                // range.axisLabel should not be 'X-Axis', it should keep its original value
+                expect((_lastCall$range = lastCall.range) === null || _lastCall$range === void 0 ? void 0 : _lastCall$range.axisLabel).not.toBe('X-Axis');
+              }
+            });
+          case 1:
+          case "end":
+            return _context9.stop();
+        }
+      }, _callee9);
+    })));
+    it('calls onChangeView when accordion is toggled', function () {
+      var _render33 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render33.container;
+      var accordionSummary = container.querySelector('[aria-expanded]');
+      _testUtils.fireEvent.click(accordionSummary);
+      expect(mockOnChangeView).toHaveBeenCalled();
+    });
+  });
+  describe('disabled states', function () {
+    it('disables range fields when standardGrid is true', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        standardGrid: true
+      });
+      var _render34 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        getAllByLabelText = _render34.getAllByLabelText;
+      var minInputs = getAllByLabelText('Min');
+      var rangeMinInput = minInputs[1];
+      expect(rangeMinInput).toBeDisabled();
+    });
+    it('disables height field when standardGrid is true', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        standardGrid: true
+      });
+      var _render35 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        getAllByLabelText = _render35.getAllByLabelText;
+      var heightInput = getAllByLabelText('Height')[0];
+      expect(heightInput).toBeDisabled();
+    });
+    it('disables horizontal gridlines field when standardGrid is true and includeAxes is false', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        includeAxes: false,
+        standardGrid: true
+      });
+      var _render36 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        getByLabelText = _render36.getByLabelText;
+      var horizontalGridlinesInput = getByLabelText('Number of Horizontal Gridlines');
+      expect(horizontalGridlinesInput).toBeDisabled();
+    });
+  });
+  describe('GridConfig component', function () {
+    it('renders step field when enabled', function () {
+      var _render37 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getAllByLabelText = _render37.getAllByLabelText;
+      var intervalFields = getAllByLabelText('Interval');
+      expect(intervalFields.length).toBeGreaterThan(0);
+    });
+    it('renders labelStep field when enabled', function () {
+      var _render38 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        getAllByLabelText = _render38.getAllByLabelText;
+      var labelIntervalFields = getAllByLabelText('Label Interval');
+      expect(labelIntervalFields.length).toBeGreaterThan(0);
+    });
+    it('does not render when both step and labelStep are disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          step: {
+            enabled: false
+          },
+          labelStep: {
+            enabled: false
+          }
+        })
+      });
+      var _render39 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        queryByLabelText = _render39.queryByLabelText;
+      expect(queryByLabelText('Interval')).toBeFalsy();
+      expect(queryByLabelText('Label Interval')).toBeFalsy();
+    });
+  });
+  describe('AxisConfig component', function () {
+    it('renders x-axis header', function () {
+      var _render40 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render40.container;
+      var headers = container.querySelectorAll('i');
+      var xAxisHeader = Array.from(headers).find(function (h) {
+        return h.textContent === 'x';
+      });
+      expect(xAxisHeader).toBeTruthy();
+    });
+    it('renders y-axis header', function () {
+      var _render41 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render41.container;
+      var headers = container.querySelectorAll('i');
+      var yAxisHeader = Array.from(headers).find(function (h) {
+        return h.textContent === 'y';
+      });
+      expect(yAxisHeader).toBeTruthy();
+    });
+    it('does not render headers when all fields are disabled', function () {
+      var props = _objectSpread(_objectSpread({}, defaultProps), {}, {
+        displayedFields: _objectSpread(_objectSpread({}, defaultProps.displayedFields), {}, {
+          min: {
+            enabled: false
+          },
+          max: {
+            enabled: false
+          },
+          axisLabel: {
+            enabled: false
+          },
+          step: {
+            enabled: false
+          },
+          labelStep: {
+            enabled: false
+          }
+        })
+      });
+      var _render42 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], props)),
+        container = _render42.container;
+      var headers = container.querySelectorAll('i');
+      var axisHeaders = Array.from(headers).filter(function (h) {
+        return h.textContent === 'x' || h.textContent === 'y';
+      });
+      expect(axisHeaders.length).toBe(0);
+    });
+  });
+  describe('Accordion behavior', function () {
+    it('renders with correct transition props', function () {
+      var _render43 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render43.container;
+      var accordion = container.querySelector('.MuiAccordion-root');
+      expect(accordion).toBeTruthy();
+    });
+    it('expands and collapses accordion', function () {
+      var _render44 = (0, _testUtils.render)(/*#__PURE__*/_react["default"].createElement(_gridSetup["default"], defaultProps)),
+        container = _render44.container;
+      var accordionSummary = container.querySelector('[aria-expanded]');
+      expect(accordionSummary.getAttribute('aria-expanded')).toBe('false');
+      _testUtils.fireEvent.click(accordionSummary);
+      expect(mockOnChangeView).toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=grid-setup.test.js.map