@pie-lib/config-ui 13.0.13 → 13.1.0-beta

package/lib/__tests__/settings.test.js

@@ -0,0 +1,653 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _toggle = _interopRequireDefault(require("../settings/toggle"));
+var _displaySize = _interopRequireDefault(require("../settings/display-size"));
+var _settingsRadioLabel = _interopRequireDefault(require("../settings/settings-radio-label"));
+var _panel = require("../settings/panel");
+describe('Settings Components', function () {
+  describe('Toggle', function () {
+    it('renders toggle with label', function () {
+      var toggle = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_toggle["default"], {
+        label: "Enable Feature",
+        checked: false,
+        toggle: toggle
+      }));
+      expect(_react2.screen.getByText('Enable Feature')).toBeInTheDocument();
+    });
+  });
+  describe('DisplaySize', function () {
+    var defaultProps = {
+      size: {
+        width: 500,
+        height: 400
+      },
+      label: 'Display Size',
+      onChange: jest.fn()
+    };
+    beforeEach(function () {
+      jest.clearAllMocks();
+    });
+    it('renders label and input fields', function () {
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], defaultProps));
+      expect(_react2.screen.getByText('Display Size')).toBeInTheDocument();
+      expect(_react2.screen.getByLabelText('Width')).toBeInTheDocument();
+      expect(_react2.screen.getByLabelText('Height')).toBeInTheDocument();
+    });
+    it('displays width and height values', function () {
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], defaultProps));
+      var widthInput = _react2.screen.getByLabelText('Width');
+      var heightInput = _react2.screen.getByLabelText('Height');
+      expect(widthInput).toHaveValue(500);
+      expect(heightInput).toHaveValue(400);
+    });
+    it('calls onChange when width changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context.next = 2;
+            return user.type(widthInput, '600');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+              width: 600
+            }));
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    it('calls onChange when height changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var user, onChange, heightInput;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            heightInput = _react2.screen.getByLabelText('Height');
+            _context2.next = 1;
+            return user.clear(heightInput);
+          case 1:
+            _context2.next = 2;
+            return user.type(heightInput, '500');
+          case 2:
+            _react2.fireEvent.blur(heightInput);
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+              height: 500
+            }));
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })));
+    it('maintains other dimension when one changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context3.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context3.next = 2;
+            return user.type(widthInput, '700');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+            expect(onChange).toHaveBeenCalledWith({
+              width: 700,
+              height: 400
+            });
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    })));
+    it('enforces min value constraint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context4.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context4.next = 2;
+            return user.type(widthInput, '100');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+
+            // Should clamp to minimum 150
+            expect(widthInput).toHaveValue(150);
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    })));
+    it('enforces max value constraint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context5.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context5.next = 2;
+            return user.type(widthInput, '2000');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+
+            // Should clamp to maximum 1000
+            expect(widthInput).toHaveValue(1000);
+          case 3:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    })));
+    it('updates when size prop changes', function () {
+      var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], defaultProps)),
+        rerender = _render.rerender;
+      var widthInput = _react2.screen.getByLabelText('Width');
+      expect(widthInput).toHaveValue(500);
+      rerender(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+        size: {
+          width: 800,
+          height: 600
+        }
+      })));
+      widthInput = _react2.screen.getByLabelText('Width');
+      expect(widthInput).toHaveValue(800);
+    });
+    it('handles boundary values at minimum', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+      var user, onChange, widthInput, heightInput;
+      return _regenerator["default"].wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            heightInput = _react2.screen.getByLabelText('Height');
+            _context6.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context6.next = 2;
+            return user.type(widthInput, '150');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+            _context6.next = 3;
+            return user.clear(heightInput);
+          case 3:
+            _context6.next = 4;
+            return user.type(heightInput, '150');
+          case 4:
+            _react2.fireEvent.blur(heightInput);
+            expect(widthInput).toHaveValue(150);
+            expect(heightInput).toHaveValue(150);
+          case 5:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    })));
+    it('handles boundary values at maximum', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+      var user, onChange, widthInput, heightInput;
+      return _regenerator["default"].wrap(function (_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            heightInput = _react2.screen.getByLabelText('Height');
+            _context7.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context7.next = 2;
+            return user.type(widthInput, '1000');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+            _context7.next = 3;
+            return user.clear(heightInput);
+          case 3:
+            _context7.next = 4;
+            return user.type(heightInput, '1000');
+          case 4:
+            _react2.fireEvent.blur(heightInput);
+            expect(widthInput).toHaveValue(1000);
+            expect(heightInput).toHaveValue(1000);
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
+    it('handles decimal input values', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context8.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context8.next = 2;
+            return user.type(widthInput, '500.5');
+          case 2:
+            _react2.fireEvent.blur(widthInput);
+            expect(widthInput).toBeInTheDocument();
+          case 3:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8);
+    })));
+    it('handles empty input and resets to min', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context9.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _react2.fireEvent.blur(widthInput);
+
+            // Should reset to minimum value
+            expect(widthInput).toHaveValue(150);
+          case 2:
+          case "end":
+            return _context9.stop();
+        }
+      }, _callee9);
+    })));
+    it('handles rapid width and height changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
+      var user, onChange, widthInput;
+      return _regenerator["default"].wrap(function (_context0) {
+        while (1) switch (_context0.prev = _context0.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            widthInput = _react2.screen.getByLabelText('Width');
+            _context0.next = 1;
+            return user.clear(widthInput);
+          case 1:
+            _context0.next = 2;
+            return user.type(widthInput, '6');
+          case 2:
+            _context0.next = 3;
+            return user.type(widthInput, '0');
+          case 3:
+            _context0.next = 4;
+            return user.type(widthInput, '0');
+          case 4:
+            _react2.fireEvent.blur(widthInput);
+            expect(onChange).toHaveBeenCalled();
+          case 5:
+          case "end":
+            return _context0.stop();
+        }
+      }, _callee0);
+    })));
+    it('clamps height at both boundaries', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
+      var user, onChange, heightInput;
+      return _regenerator["default"].wrap(function (_context1) {
+        while (1) switch (_context1.prev = _context1.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], (0, _extends2["default"])({}, defaultProps, {
+              onChange: onChange
+            })));
+            heightInput = _react2.screen.getByLabelText('Height'); // Test below min
+            _context1.next = 1;
+            return user.clear(heightInput);
+          case 1:
+            _context1.next = 2;
+            return user.type(heightInput, '50');
+          case 2:
+            _react2.fireEvent.blur(heightInput);
+            expect(heightInput).toHaveValue(150);
+
+            // Test above max
+            _context1.next = 3;
+            return user.clear(heightInput);
+          case 3:
+            _context1.next = 4;
+            return user.type(heightInput, '2500');
+          case 4:
+            _react2.fireEvent.blur(heightInput);
+            expect(heightInput).toHaveValue(1000);
+          case 5:
+          case "end":
+            return _context1.stop();
+        }
+      }, _callee1);
+    })));
+    it('displays custom label text', function () {
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], {
+        size: {
+          width: 500,
+          height: 400
+        },
+        label: "Custom Size Settings",
+        onChange: jest.fn()
+      }));
+      expect(_react2.screen.getByText('Custom Size Settings')).toBeInTheDocument();
+    });
+    it('renders with variant outlined', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_displaySize["default"], defaultProps)),
+        container = _render2.container;
+      var inputs = container.querySelectorAll('input');
+      expect(inputs.length).toBe(2);
+    });
+  });
+  describe('SettingsRadioLabel', function () {
+    it('renders radio label', function () {
+      var onChange = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_settingsRadioLabel["default"], {
+        label: "Option 1",
+        value: "option1",
+        checked: false,
+        onChange: onChange
+      }));
+      expect(_react2.screen.getByText('Option 1')).toBeInTheDocument();
+      expect(_react2.screen.getByRole('radio')).toBeInTheDocument();
+    });
+    it('renders checked state', function () {
+      var onChange = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_settingsRadioLabel["default"], {
+        label: "Option 1",
+        value: "option1",
+        checked: true,
+        onChange: onChange
+      }));
+      var radio = _react2.screen.getByRole('radio');
+      expect(radio).toBeChecked();
+    });
+    it('renders unchecked state', function () {
+      var onChange = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_settingsRadioLabel["default"], {
+        label: "Option 1",
+        value: "option1",
+        checked: false,
+        onChange: onChange
+      }));
+      var radio = _react2.screen.getByRole('radio');
+      expect(radio).not.toBeChecked();
+    });
+    it('calls onChange when radio is clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+      var user, onChange, radio;
+      return _regenerator["default"].wrap(function (_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChange = jest.fn();
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_settingsRadioLabel["default"], {
+              label: "Option 1",
+              value: "option1",
+              checked: false,
+              onChange: onChange
+            }));
+            radio = _react2.screen.getByRole('radio');
+            _context10.next = 1;
+            return user.click(radio);
+          case 1:
+            expect(onChange).toHaveBeenCalled();
+          case 2:
+          case "end":
+            return _context10.stop();
+        }
+      }, _callee10);
+    })));
+    it('displays label text correctly', function () {
+      var onChange = jest.fn();
+      var labelText = 'Custom Option Label';
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_settingsRadioLabel["default"], {
+        label: labelText,
+        value: "custom",
+        checked: false,
+        onChange: onChange
+      }));
+      expect(_react2.screen.getByText(labelText)).toBeInTheDocument();
+    });
+  });
+  describe('Panel', function () {
+    var defaultProps = {
+      model: {
+        toggleSetting: true,
+        numberValue: 5
+      },
+      configuration: {
+        configValue: 'test'
+      },
+      groups: {
+        'General Settings': {
+          toggleSetting: {
+            type: 'toggle',
+            label: 'Enable Feature'
+          }
+        }
+      },
+      onChangeModel: jest.fn(),
+      onChangeConfiguration: jest.fn()
+    };
+    beforeEach(function () {
+      jest.clearAllMocks();
+    });
+    it('renders panel with group label', function () {
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, defaultProps));
+      expect(_react2.screen.getByText('General Settings')).toBeInTheDocument();
+    });
+    it('renders empty when groups is undefined', function () {
+      var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+          groups: undefined
+        }))),
+        container = _render3.container;
+      expect(container.firstChild.children.length).toBe(0);
+    });
+    it('renders empty when groups is empty', function () {
+      var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+          groups: {}
+        }))),
+        container = _render4.container;
+      expect(container.firstChild.children.length).toBe(0);
+    });
+    it('calls onChangeModel when model changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+      var user, onChangeModel, _render5, container, switchElement;
+      return _regenerator["default"].wrap(function (_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChangeModel = jest.fn();
+            _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+              onChangeModel: onChangeModel
+            }))), container = _render5.container;
+            switchElement = container.querySelector('input[type="checkbox"]');
+            _context11.next = 1;
+            return user.click(switchElement);
+          case 1:
+            expect(onChangeModel).toHaveBeenCalled();
+          case 2:
+          case "end":
+            return _context11.stop();
+        }
+      }, _callee11);
+    })));
+    it('calls onChangeConfiguration when configuration changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+      var user, onChangeConfiguration, _render6, container, switchElement;
+      return _regenerator["default"].wrap(function (_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
+          case 0:
+            user = _userEvent["default"].setup();
+            onChangeConfiguration = jest.fn();
+            _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+              groups: {
+                'Config Group': {
+                  configValue: {
+                    type: 'toggle',
+                    label: 'Config Toggle',
+                    isConfigProperty: true
+                  }
+                }
+              },
+              onChangeConfiguration: onChangeConfiguration
+            }))), container = _render6.container;
+            switchElement = container.querySelector('input[type="checkbox"]');
+            _context12.next = 1;
+            return user.click(switchElement);
+          case 1:
+            expect(onChangeConfiguration).toHaveBeenCalled();
+          case 2:
+          case "end":
+            return _context12.stop();
+        }
+      }, _callee12);
+    })));
+    it('renders with modal when provided', function () {
+      var modal = /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "test-modal"
+      }, "Modal Content");
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+        modal: modal
+      })));
+      expect(_react2.screen.getByTestId('test-modal')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Modal Content')).toBeInTheDocument();
+    });
+    it('renders multiple groups', function () {
+      (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+        groups: {
+          'Group One': {
+            setting1: {
+              type: 'toggle',
+              label: 'Setting One'
+            }
+          },
+          'Group Two': {
+            setting2: {
+              type: 'toggle',
+              label: 'Setting Two'
+            }
+          }
+        },
+        model: {
+          setting1: true,
+          setting2: false
+        }
+      })));
+      expect(_react2.screen.getByText('Group One')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Group Two')).toBeInTheDocument();
+    });
+    it('uses default callbacks when not provided', function () {
+      var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, {
+          model: {
+            test: true
+          },
+          groups: {
+            'Test Group': {
+              test: {
+                type: 'toggle',
+                label: 'Test'
+              }
+            }
+          }
+        })),
+        container = _render7.container;
+      expect(container.firstChild).toBeInTheDocument();
+    });
+    it('filters out empty groups', function () {
+      var _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, (0, _extends2["default"])({}, defaultProps, {
+          groups: {
+            'Empty Group': {},
+            'General Settings': {
+              toggleSetting: {
+                type: 'toggle',
+                label: 'Enable Feature'
+              }
+            }
+          },
+          model: {
+            toggleSetting: true
+          }
+        }))),
+        container = _render8.container;
+      expect(_react2.screen.getByText('General Settings')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Empty Group')).not.toBeInTheDocument();
+    });
+    it('renders with null model', function () {
+      var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_panel.Panel, {
+          model: null,
+          configuration: {},
+          groups: {
+            'General Settings': {
+              toggleSetting: {
+                type: 'toggle',
+                label: 'Enable Feature'
+              }
+            }
+          },
+          onChangeModel: jest.fn()
+        })),
+        container = _render9.container;
+      expect(_react2.screen.getByText('General Settings')).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=settings.test.js.map