"use strict";

var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _Dropdown = _interopRequireWildcard(require("../Dropdown"));
var _DropdownList = _interopRequireDefault(require("../DropdownList"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var children = ['option1', 'option2', 'option3'];
var title = 'Dropdown select';
describe('Dropdown', function () {
  test('should have `title`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      title: title,
      children: children
    }));
    var actual = _react.screen.getByText(title);
    expect(actual).toBeInTheDocument();
  });
  test('should have `title` that reflects `selected` option', function () {
    var selectedIndex = 1;
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      selected: selectedIndex,
      title: title,
      children: children
    }));
    var actual = _react.screen.getByText(children[selectedIndex]);
    expect(actual).toBeInTheDocument();
  });
  test('should have `title` when `selected` is invalid', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      selected: -1,
      title: title,
      children: children
    }));
    var actual = _react.screen.getByText(title);
    expect(actual).toBeInTheDocument();
  });
  test('should apply id to dropdown', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      id: "drop",
      children: children
    }));
    var dropdown = _react.screen.getByRole('region');
    var expectedAttribute = 'id';
    var expectedValue = 'drop';
    expect(dropdown).toHaveAttribute(expectedAttribute, expectedValue);
  });
  test('should apply aria label to `title`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      "aria-label": "Please select",
      title: title,
      children: children
    }));
    var dropdown = _react.screen.getByLabelText('Please select');
    expect(dropdown).toHaveTextContent(title);
  });
  test('should be disabled when there are no `children`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      title: title,
      children: []
    }));
    var dropdown = _react.screen.getByRole('button');
    var expectedAttribute = 'disabled';
    expect(dropdown).toHaveAttribute(expectedAttribute);
  });
  test('should update when children are added', function () {
    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
          open: true,
          title: title,
          children: children
        })
      })),
      rerender = _render.rerender;
    var expected = 3;
    var actual = _react.screen.getByRole('list').children;
    expect(actual).toHaveLength(expected);
    var lessChildren = children.slice(0, -1);
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
        open: true,
        title: title,
        children: lessChildren
      })
    }));
    var expectedLessChildren = 2;
    var actualLessChildren = _react.screen.getByRole('list').children;
    expect(actualLessChildren).toHaveLength(expectedLessChildren);
    var moreChildren = children.concat('option4');
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
        open: true,
        title: title,
        children: moreChildren
      })
    }));
    var expectedMoreChildren = 3;
    var actualMoreChildren = _react.screen.getByRole('list').children;
    expect(actualMoreChildren).toHaveLength(expectedMoreChildren);
  });
  test('should set the `role` of items to `checkbox`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
        open: true,
        title: title,
        children: ['item']
      })
    }));
    var dropdownItem = _react.screen.getByRole('checkbox');
    var expected = 'item';
    expect(dropdownItem).toHaveTextContent(expected);
  });
  test('should set the `aria-checked` state of the `selected` item', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
        open: true,
        selected: 0,
        title: title,
        children: ['item']
      })
    }));
    var dropdownItem = _react.screen.getByRole('checkbox');
    var expectedAttribute = 'aria-checked';
    var expectedValue = 'true';
    expect(dropdownItem).toHaveAttribute(expectedAttribute, expectedValue);
  });
  test('should pass through members of child objects to props for each item', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
        open: true,
        title: title,
        children: [{
          children: 'child',
          disabled: true,
          key: 'item-0'
        }]
      })
    }));
    var dropdownItem = _react.screen.getByRole('checkbox');
    var expectedAttribute = 'disabled';
    expect(dropdownItem).toHaveAttribute(expectedAttribute);
  });
  test('should allow members in child object to override injected aria values', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
        open: true,
        selected: 0,
        title: title,
        children: [{
          'aria-checked': false,
          children: 'child',
          disabled: true,
          key: 'item-0',
          role: 'button'
        }]
      })
    }));
    var dropdownItem = _react.screen.getAllByRole('button')[1];
    var expectedAttribute = 'aria-checked';
    var expectedValue = 'false';
    expect(dropdownItem).toHaveAttribute(expectedAttribute, expectedValue);
  });
  test('should apply smallest width when width prop equals `smallest`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      width: "smallest",
      children: children
    }));
    var dropdown = _react.screen.getByRole('region');
    var expected = 'smallestWidth';
    expect(dropdown).toHaveClass(expected);
  });
  test('should apply small width when width prop equals `small`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      width: "small",
      children: children
    }));
    var dropdown = _react.screen.getByRole('region');
    var expected = 'smallWidth';
    expect(dropdown).toHaveClass(expected);
  });
  test('should apply large width when width prop equals `large`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      width: "large",
      children: children
    }));
    var dropdown = _react.screen.getByRole('region');
    var expected = 'largeWidth';
    expect(dropdown).toHaveClass(expected);
  });
  test('should huge smallest width when width prop equals `huge`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
      width: "huge",
      children: children
    }));
    var dropdown = _react.screen.getByRole('region');
    var expected = 'hugeWidth';
    expect(dropdown).toHaveClass(expected);
  });
  describe('DropdownList', function () {
    test('should include `data` and `selected` in `onSelect` callback', /*#__PURE__*/_asyncToGenerator(function* () {
      var handler = jest.fn();
      var user = _userEvent["default"].setup();
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownList["default"], {
        onSelect: handler,
        children: children
      }));
      var firstItem = _react.screen.getByRole('list').children[0].children[0];
      yield user.click(firstItem);
      var expected = {
        data: 'option1',
        selected: 0
      };
      var actual = handler.mock.calls[0][0];
      expect(actual).toEqual(expected);
    }));
  });
});