@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
247 lines (241 loc) • 10.8 kB
JavaScript
"use strict";
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _react2 = require("react");
var _RadioDecorator = require("../RadioDecorator");
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); }); }; }
describe('RadioDecorator', function () {
var Item = function Item(_ref) {
var onClick = _ref.onClick,
active = _ref.active;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
"data-testid": "span-element",
onClick: onClick,
children: active ? 'Active' : 'Inactive'
});
};
var Controller = (0, _RadioDecorator.RadioControllerDecorator)('main');
var expectToBeActive = function expectToBeActive(controller, decorator) {
expect(controller.active).toBe(decorator && decorator.handleDeactivate);
};
test('should be activated when its prop is true on mount', function () {
var Component = (0, _RadioDecorator.RadioDecorator)({
prop: 'active'
}, Item);
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: true
})
}));
var component = _react.screen.getByTestId('span-element');
expect(component).toHaveTextContent('Active');
});
test('should not be activated when its prop is false on mount', function () {
var Component = (0, _RadioDecorator.RadioDecorator)({
prop: 'active'
}, Item);
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
}));
var component = _react.screen.getByTestId('span-element');
expect(component).toHaveTextContent('Inactive');
});
test('should be activated when its prop is set to true after mount', function () {
var Component = (0, _RadioDecorator.RadioDecorator)({
prop: 'active'
}, Item);
var Wrapper = function Wrapper(_ref2) {
var active = _ref2.active;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: active
})
});
};
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {})),
rerender = _render.rerender;
var component = _react.screen.getByTestId('span-element');
var expected = 'Inactive';
expect(component).toHaveTextContent(expected);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
active: true
}));
var secondExpected = 'Active';
expect(component).toHaveTextContent(secondExpected);
});
test('should fire `activate` event with type when become activated', /*#__PURE__*/_asyncToGenerator(function* () {
var Component = (0, _RadioDecorator.RadioDecorator)({
activate: 'onClick',
prop: 'active'
}, Item);
var handleActivate = jest.fn();
var user = _userEvent["default"].setup();
var Wrapper = function Wrapper() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onClick: handleActivate
})
});
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {}));
var component = _react.screen.getByTestId('span-element');
yield user.click(component);
var expected = 1;
var expectedType = {
type: 'onClick'
};
var actual = handleActivate.mock.calls.length && handleActivate.mock.calls[0][0];
expect(handleActivate).toBeCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
}));
test('should fire `deactivate` event with type when become deactivated', /*#__PURE__*/_asyncToGenerator(function* () {
var Component = (0, _RadioDecorator.RadioDecorator)({
deactivate: 'onClick',
prop: 'active'
}, Item);
var handleDeactivate = jest.fn();
var user = _userEvent["default"].setup();
var Wrapper = function Wrapper() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onClick: handleDeactivate
})
});
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {}));
var component = _react.screen.getByTestId('span-element');
yield user.click(component);
var expected = 1;
var expectedType = {
type: 'onClick'
};
var actual = handleDeactivate.mock.calls.length && handleDeactivate.mock.calls[0][0];
expect(handleDeactivate).toBeCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
}));
test('should not call deactivate callback on inactive items', function () {
var handleDeactivate = jest.fn();
var Component = (0, _RadioDecorator.RadioDecorator)({
deactivate: 'onClick',
prop: 'active'
}, Item);
// deactivate() is only called when there was a previously active item
var Wrapper = function Wrapper(_ref5) {
var active = _ref5.active;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Controller, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: !active
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: active
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onClick: handleDeactivate
})]
});
};
// create a controller with no active item
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {})),
rerender = _render2.rerender;
// activate the second item via prop change
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
active: true
}));
// verify that the deactivate handler wasn't called
var expected = 0;
var actual = handleDeactivate.mock.calls.length;
expect(actual).toBe(expected);
});
test('should be activated when the activated event fires', /*#__PURE__*/_asyncToGenerator(function* () {
var controllerRef = /*#__PURE__*/(0, _react2.createRef)();
var decoratorRef = /*#__PURE__*/(0, _react2.createRef)();
var Component = (0, _RadioDecorator.RadioDecorator)({
activate: 'onClick',
prop: 'active'
}, Item);
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
ref: controllerRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
ref: decoratorRef
})
}));
var component = _react.screen.getByTestId('span-element');
yield user.click(component);
expectToBeActive(controllerRef.current, decoratorRef.current);
}));
test('should be deactivated when the deactivated event fires', /*#__PURE__*/_asyncToGenerator(function* () {
var controllerRef = /*#__PURE__*/(0, _react2.createRef)();
var decoratorRef = /*#__PURE__*/(0, _react2.createRef)();
var Component = (0, _RadioDecorator.RadioDecorator)({
deactivate: 'onClick',
prop: 'active'
}, Item);
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
ref: controllerRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: true,
ref: decoratorRef
})
}));
var component = _react.screen.getByTestId('span-element');
yield user.click(component);
expectToBeActive(controllerRef.current, null);
}));
test('should be deactivated when the activated event fires on another instance', /*#__PURE__*/_asyncToGenerator(function* () {
var controllerRef = /*#__PURE__*/(0, _react2.createRef)();
var decoratorRef = /*#__PURE__*/(0, _react2.createRef)();
var Component = (0, _RadioDecorator.RadioDecorator)({
activate: 'onClick',
prop: 'active'
}, Item);
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Controller, {
ref: controllerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: true
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
ref: decoratorRef
})]
}));
var inactiveComponent = _react.screen.getByText('Inactive');
yield user.click(inactiveComponent);
expectToBeActive(controllerRef.current, decoratorRef.current);
}));
test('should not deactivate items in a ancestor controller', /*#__PURE__*/_asyncToGenerator(function* () {
var parentControllerRef = /*#__PURE__*/(0, _react2.createRef)();
var parentDecoratorRef = /*#__PURE__*/(0, _react2.createRef)();
var childControllerRef = /*#__PURE__*/(0, _react2.createRef)();
var childDecoratorRef = /*#__PURE__*/(0, _react2.createRef)();
var Component = (0, _RadioDecorator.RadioDecorator)({
activate: 'onClick',
prop: 'active'
}, Item);
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Controller, {
ref: parentControllerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: true,
ref: parentDecoratorRef
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Controller, {
"data-child-controller": true,
ref: childControllerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
active: true
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
ref: childDecoratorRef
})]
})]
}));
var inactiveComponents = _react.screen.getAllByText('Inactive');
yield user.click(inactiveComponents[1]);
// Breaking the pattern of 1 expect per test in order to verify the expect change happened
// (activating second component in child controller) and no unexpected change happened in
// the parent controller (active component should remain the first component)
expectToBeActive(parentControllerRef, parentDecoratorRef);
expectToBeActive(childControllerRef, childDecoratorRef);
}));
});