@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
253 lines (252 loc) • 10.5 kB
JavaScript
;
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 = require("../Dropdown");
var _DropdownList = _interopRequireDefault(require("../DropdownList"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var children = ['option1', 'option2', 'option3'];
var placeholder = 'Dropdown select';
var title = 'Options';
describe('Dropdown', function () {
test('should have default `placeholder` when a value is not provided', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
children: children
}));
var actual = _react.screen.getByText('No Selection');
expect(actual).toBeInTheDocument();
});
test('should have `placeholder` when a value is provided', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
placeholder: placeholder,
children: children
}));
var actual = _react.screen.getByText(placeholder);
expect(actual).toBeInTheDocument();
});
test('should have `title`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
title: title,
children: children
}));
var actual = _react.screen.getByText(title);
var titleContainer = actual.parentElement.parentElement;
expect(actual).toBeInTheDocument();
expect(titleContainer).toHaveClass('heading');
});
test('should apply id to dropdown', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
id: "drop",
children: children
}));
var expected = 'drop';
var actual = _react.screen.getByRole('region');
expect(actual).toHaveAttribute('id', expected);
});
test('should apply aria label id to `title`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
title: title,
id: "drop",
children: children
}));
var actual = _react.screen.getByText(title);
var titleContainer = actual.parentElement.parentElement;
expect(actual).toBeInTheDocument();
expect(titleContainer).toHaveAttribute('id', 'drop_title');
});
test('should apply aria-labelled-by to dropdown with title', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
title: title,
id: "drop",
children: children
}));
var expected = 'drop_title';
var actual = _react.screen.getByRole('region');
expect(actual).toHaveAttribute('aria-labelledby', expected);
});
test('should not apply aria-labelled-by when no title exists', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
id: "drop",
children: children
}));
var actual = _react.screen.getByRole('region');
expect(actual).not.toHaveAttribute('aria-labelledby');
});
test('should have `placeholder` when `children` is invalid', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
placeholder: placeholder,
children: null
}));
var actual = _react.screen.getByText(placeholder);
expect(actual).toBeInTheDocument();
});
test('should have `placeholder` that reflects `selected` option', function () {
var selectedIndex = 1;
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
selected: selectedIndex,
children: children
}));
var actual = _react.screen.getByText(children[selectedIndex]);
expect(actual).toBeInTheDocument();
});
test('should have `placeholder` when `selected` is invalid', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
placeholder: placeholder,
selected: -1,
children: children
}));
var actual = _react.screen.getByText(placeholder);
expect(actual).toBeInTheDocument();
});
test('should be disabled when `children` is omitted', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
title: title
}));
var expected = 'true';
var actual = _react.screen.getByRole('button');
expect(actual).toHaveAttribute('aria-disabled', expected);
});
test('should be disabled when there are no `children`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
title: title,
children: []
}));
var expected = 'true';
var actual = _react.screen.getByRole('button');
expect(actual).toHaveAttribute('aria-disabled', expected);
});
test('should update when children are removed or added', function () {
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
open: true,
title: title,
children: children
})
})),
rerender = _render.rerender;
var lessChildren = children.slice(0, -1);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
open: true,
title: title,
children: lessChildren
})
}));
var lessChildrenExpected = 2;
var lessChildrenActual = _react.screen.getByRole('list').children;
expect(lessChildrenActual).toHaveLength(lessChildrenExpected);
var moreChildren = children.concat('option3');
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
open: true,
title: title,
children: moreChildren
})
}));
var moreChildrenExpected = 3;
var moreChildrenActual = _react.screen.getByRole('list').children;
expect(moreChildrenActual).toHaveLength(moreChildrenExpected);
});
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 expected = 'layout item';
var actual = _react.screen.getByRole('checkbox');
expect(actual).toBeInTheDocument();
expect(actual).toHaveClass(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 expected = 'true';
var actual = _react.screen.getByRole('checkbox');
expect(actual).toHaveAttribute('aria-checked', expected);
});
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.DropdownBase, {
open: true,
title: title,
children: [{
disabled: true,
children: 'child',
key: 'item-0'
}]
})
}));
var expected = 'true';
var actual = _react.screen.getByRole('checkbox');
expect(actual).toHaveAttribute('aria-disabled', expected);
});
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.DropdownBase, {
open: true,
selected: 0,
title: title,
children: [{
disabled: true,
children: 'child',
key: 'item-0',
role: 'button',
'aria-checked': false
}]
})
}));
var actual = (0, _react.within)(_react.screen.getByRole('list')).getByRole('button');
expect(actual).toHaveAttribute('aria-checked', 'false');
});
test('should fire `onSelect` event with type `onSelect`', /*#__PURE__*/_asyncToGenerator(function* () {
var handleSelect = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownBase, {
open: true,
onSelect: handleSelect,
title: title,
children: children
})
}));
var firstItem = _react.screen.getByRole('list').children[0].children[0];
yield user.click(firstItem);
expect(handleSelect).toHaveBeenCalledWith({
data: 'option1',
selected: 0,
type: 'onSelect'
});
}));
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);
}));
});
});