@enact/limestone 1.3.0

package/Chips/tests/Chip-specs.js

@@ -0,0 +1,186 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Chip = require("../Chip");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('Chip', function () {
+  test('should support `icon` prop', function () {
+    var icon = 'star';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      icon: icon
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('chip').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should support `children` prop', function () {
+    var children = 'label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      children: children
+    }));
+    var expected = children;
+    var actual = _react.screen.getByText(children);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should apply `.top` when direction prop is `top`', function () {
+    var position = 'top';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: {
+        position: position
+      }
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).toBeInTheDocument();
+    expect(deleteButton).toHaveClass(position);
+  });
+  test('should apply `.bottom` when direction prop is `bottom`', function () {
+    var position = 'bottom';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: {
+        position: position
+      }
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).toBeInTheDocument();
+    expect(deleteButton).toHaveClass(position);
+  });
+  test('should apply `.right` when direction prop is `right`', function () {
+    var position = 'right';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: {
+        position: position
+      }
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).toBeInTheDocument();
+    expect(deleteButton).toHaveClass(position);
+  });
+  test('should render without delete button when deleteButton is false', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: false,
+      children: "Test Chip"
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).not.toBeInTheDocument();
+  });
+  test('should render without delete button when deleteButton is undefined', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      children: "Test Chip"
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).not.toBeInTheDocument();
+  });
+  test('should handle disabled state', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      disabled: true,
+      children: "Disabled Chip"
+    }));
+    var chipButton = _react.screen.getByRole('button');
+    expect(chipButton).toHaveAttribute('aria-disabled', 'true');
+  });
+  test('should handle disabled state with delete button', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      disabled: true,
+      deleteButton: {
+        position: 'right'
+      },
+      children: "Disabled Chip"
+    }));
+    var allButtons = _react.screen.getAllByRole('button');
+    allButtons.forEach(function (button) {
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  test('should use default delete button icon when not specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: {
+        position: 'right'
+      },
+      children: "Test Chip"
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).toBeInTheDocument();
+  });
+  test('should use custom delete button icon when specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      deleteButton: {
+        position: 'right',
+        icon: 'trash'
+      },
+      children: "Test Chip"
+    }));
+    var chip = _react.screen.getByTestId('chip');
+    var deleteButton = chip.querySelector('.deleteButtonContainer');
+    expect(deleteButton).toBeInTheDocument();
+  });
+  test('should handle id prop', function () {
+    var chipId = 'test-chip-id';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: chipId,
+      children: "Test Chip"
+    }));
+    var chipButton = _react.screen.getByRole('button');
+    expect(chipButton).toHaveAttribute('data-chip-index', chipId);
+  });
+  test('should handle onClick events', function () {
+    var mockOnClick = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      onClick: mockOnClick,
+      children: "Clickable Chip"
+    }));
+    var chipButton = _react.screen.getByRole('button');
+    _react.fireEvent.click(chipButton);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+  test('should render with both icon and children', function () {
+    var icon = 'star';
+    var children = 'Star Chip';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      icon: icon,
+      children: children
+    }));
+    var chipText = _react.screen.getByText(children);
+    expect(chipText).toBeInTheDocument();
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('chip').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should apply custom className', function () {
+    var customClass = 'custom-chip-class';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      className: customClass,
+      "data-testid": "chip",
+      children: "Test Chip"
+    }));
+    var chipButton = _react.screen.getByRole('button');
+    expect(chipButton).toHaveClass(customClass);
+  });
+  test('should render chip with required props only', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      id: "minimal-chip",
+      children: "Minimal Chip"
+    }));
+    var chipText = _react.screen.getByText('Minimal Chip');
+    expect(chipText).toBeInTheDocument();
+    var chipButton = _react.screen.getByRole('button');
+    expect(chipButton).toHaveAttribute('data-chip-index', 'minimal-chip');
+  });
+});

package/Chips/tests/Chips-specs.js

@@ -0,0 +1,312 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Chips = require("../Chips");
+var _Chip = require("../Chip");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+describe('Chips', function () {
+  var mockDeleteHandler = jest.fn();
+  var defaultProps = {
+    orientation: 'vertical',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      deleteButton: {
+        icon: 'closex',
+        position: 'right',
+        onDelete: mockDeleteHandler
+      },
+      children: "Chip 1"
+    }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      deleteButton: {
+        icon: 'closex',
+        position: 'right',
+        onDelete: mockDeleteHandler
+      },
+      children: "Chip 2"
+    }, "chip2")]
+  };
+  function getAllDeleteButtons() {
+    // Look for buttons that are inside deleteButtonContainer
+    var container = document.querySelector('.chips');
+    var deleteButtonContainers = (container === null || container === void 0 ? void 0 : container.querySelectorAll('.deleteButtonContainer')) || [];
+    var deleteButtons = [];
+    deleteButtonContainers.forEach(function (buttonContainer) {
+      var button = buttonContainer.querySelector('[role="button"]');
+      if (button) {
+        deleteButtons.push(button);
+      }
+    });
+    return deleteButtons;
+  }
+  it('should render correctly with default props', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps))),
+      container = _render.container;
+    expect(container.firstChild).toHaveClass('chips');
+    expect(container.firstChild).toHaveClass('vertical');
+  });
+  it('should focus the correct chip on navigation', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    chip1.setAttribute('tabIndex', '0');
+    chip2.setAttribute('tabIndex', '0');
+    chip1.focus();
+    expect(chip1).toHaveFocus();
+    _react.fireEvent.keyDown(chip1, {
+      key: 'ArrowDown',
+      keyCode: 40
+    });
+    chip2.focus();
+    expect(chip2).toHaveFocus();
+    _react.fireEvent.keyDown(chip2, {
+      key: 'ArrowUp',
+      keyCode: 38
+    });
+    chip1.focus();
+    expect(chip1).toHaveFocus();
+  });
+  it('should call handleDelete when delete button is clicked', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
+    var chipButtons = _react.screen.getAllByRole('button', {
+      name: /Chip [12]/i
+    });
+    _react.fireEvent.focus(chipButtons[0]);
+    var deleteButtons = getAllDeleteButtons();
+    expect(deleteButtons.length).toBeGreaterThan(0);
+    _react.fireEvent.click(deleteButtons[0]);
+    expect(mockDeleteHandler).toHaveBeenCalledTimes(1);
+  });
+  it('should render correctly with horizontal orientation', function () {
+    var horizontalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+      orientation: 'horizontal'
+    });
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps))),
+      container = _render2.container;
+    expect(container.firstChild).toHaveClass('chips');
+    expect(container.firstChild).toHaveClass('horizontal');
+  });
+  it('should handle navigation in horizontal orientation', function () {
+    var horizontalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+      orientation: 'horizontal'
+    });
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps)));
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    chip1.setAttribute('tabIndex', '0');
+    chip2.setAttribute('tabIndex', '0');
+    chip1.focus();
+    expect(chip1).toHaveFocus();
+    _react.fireEvent.keyDown(chip1, {
+      key: 'ArrowRight',
+      keyCode: 39
+    });
+    chip2.focus();
+    expect(chip2).toHaveFocus();
+    _react.fireEvent.keyDown(chip2, {
+      key: 'ArrowLeft',
+      keyCode: 37
+    });
+    chip1.focus();
+    expect(chip1).toHaveFocus();
+  });
+  it('should render chips without delete buttons', function () {
+    var propsWithoutDelete = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        children: "Chip 1"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        children: "Chip 2"
+      }, "chip2")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, propsWithoutDelete)));
+    var deleteButtons = getAllDeleteButtons();
+    expect(deleteButtons).toHaveLength(0);
+    expect(_react.screen.getByText('Chip 1')).toBeInTheDocument();
+    expect(_react.screen.getByText('Chip 2')).toBeInTheDocument();
+  });
+  it('should handle chips with different delete button positions', function () {
+    var mixedPositionProps = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        deleteButton: {
+          icon: 'closex',
+          position: 'top',
+          onDelete: mockDeleteHandler
+        },
+        children: "Chip 1"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        deleteButton: {
+          icon: 'closex',
+          position: 'bottom',
+          onDelete: mockDeleteHandler
+        },
+        children: "Chip 2"
+      }, "chip2")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, mixedPositionProps)));
+    var deleteButtons = getAllDeleteButtons();
+    expect(deleteButtons).toHaveLength(2);
+
+    // Verify that the delete buttons have the correct positioning classes
+    var chip1DeleteButton = deleteButtons[0].closest('.deleteButtonContainer');
+    var chip2DeleteButton = deleteButtons[1].closest('.deleteButtonContainer');
+    expect(chip1DeleteButton).toHaveClass('top');
+    expect(chip2DeleteButton).toHaveClass('bottom');
+  });
+  it('should handle click events on chip buttons', function () {
+    var mockOnClick = jest.fn();
+    var clickableProps = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        onClick: mockOnClick,
+        children: "Chip 1"
+      }, "chip1")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, clickableProps)));
+    var chipButton = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    _react.fireEvent.click(chipButton);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+  it('should render chips with icons', function () {
+    var iconProps = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        icon: "star",
+        children: "Chip with Star"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        icon: "heart",
+        children: "Chip with Heart"
+      }, "chip2")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, iconProps)));
+    expect(_react.screen.getByText('Chip with Star')).toBeInTheDocument();
+    expect(_react.screen.getByText('Chip with Heart')).toBeInTheDocument();
+  });
+  it('should handle disabled chips', function () {
+    var disabledProps = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        disabled: true,
+        children: "Disabled Chip"
+      }, "chip1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip2",
+        disabled: true,
+        deleteButton: {
+          icon: 'closex',
+          position: 'right',
+          onDelete: mockDeleteHandler
+        },
+        children: "Disabled Chip with Delete"
+      }, "chip2")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, disabledProps)));
+    var disabledChips = _react.screen.getAllByRole('button');
+    disabledChips.forEach(function (chip) {
+      expect(chip).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  it('should handle single chip rendering', function () {
+    var singleChipProps = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        deleteButton: {
+          icon: 'closex',
+          position: 'right',
+          onDelete: mockDeleteHandler
+        },
+        children: "Single Chip"
+      }, "chip1")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, singleChipProps)));
+    expect(_react.screen.getByText('Single Chip')).toBeInTheDocument();
+    var deleteButtons = getAllDeleteButtons();
+    expect(deleteButtons.length).toBeGreaterThan(0);
+  });
+  it('should handle empty children', function () {
+    var emptyProps = {
+      orientation: 'vertical',
+      children: []
+    };
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, emptyProps))),
+      container = _render3.container;
+    expect(container.firstChild).toHaveClass('chips');
+    expect(container.firstChild).toHaveClass('vertical');
+    var buttons = _react.screen.queryAllByRole('button');
+    expect(buttons).toHaveLength(0);
+  });
+  it('should handle custom className', function () {
+    var customProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+      className: 'custom-chips-class'
+    });
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, customProps))),
+      container = _render4.container;
+    expect(container.firstChild).toHaveClass('chips');
+    expect(container.firstChild).toHaveClass('vertical');
+    expect(container.firstChild).toHaveClass('custom-chips-class');
+  });
+  it('should handle keyboard navigation with mixed orientations', function () {
+    var verticalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+      orientation: 'vertical'
+    });
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, verticalProps)));
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    chip1.setAttribute('tabIndex', '0');
+    chip2.setAttribute('tabIndex', '0');
+
+    // Test vertical navigation (down/up arrows)
+    chip1.focus();
+    _react.fireEvent.keyDown(chip1, {
+      key: 'ArrowDown',
+      keyCode: 40
+    });
+    chip2.focus();
+    expect(chip2).toHaveFocus();
+
+    // Test that horizontal arrows don't interfere with vertical orientation
+    _react.fireEvent.keyDown(chip2, {
+      key: 'ArrowRight',
+      keyCode: 39
+    });
+    // Focus should remain on chip2 since we're in vertical mode
+    expect(chip2).toHaveFocus();
+  });
+  it('should call onDelete with correct parameters', function () {
+    var mockDeleteWithParams = jest.fn();
+    var propsWithParams = {
+      orientation: 'vertical',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+        id: "chip1",
+        deleteButton: {
+          icon: 'closex',
+          position: 'right',
+          onDelete: mockDeleteWithParams
+        },
+        children: "Test Chip"
+      }, "chip1")]
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, propsWithParams)));
+    var deleteButtons = getAllDeleteButtons();
+    expect(deleteButtons.length).toBeGreaterThan(0);
+    _react.fireEvent.click(deleteButtons[0]);
+    expect(mockDeleteWithParams).toHaveBeenCalledTimes(1);
+    expect(mockDeleteWithParams).toHaveBeenCalledWith(expect.any(Object));
+  });
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+});