@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
494 lines (492 loc) • 20.5 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Toggleable = _interopRequireDefault(require("../Toggleable"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('Toggleable', function () {
var data;
var DivComponent = function DivComponent(props) {
var _props$selected;
data = props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "selected-state",
children: (_props$selected = props.selected) === null || _props$selected === void 0 ? void 0 : _props$selected.toString()
});
};
describe('#config', function () {
test('should pass "selected" to the wrapped component', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should pass configured "prop" "banana" as the toggled state\'s key to the wrapped component', function () {
var prop = 'banana';
var Component = (0, _Toggleable["default"])({
prop: prop
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
}));
expect(data).toHaveProperty(prop);
});
test('should pass "onToggle" handler to the wrapped component', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
var expected = 'onToggle';
expect(data).toHaveProperty(expected);
});
test('should pass configured "toggle" handler to the wrapped component', function () {
var handle = 'onClick';
var Component = (0, _Toggleable["default"])({
toggle: handle
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
expect(data).toHaveProperty(handle);
var expected = 'function';
var actual = typeof data.onClick;
expect(actual).toBe(expected);
});
});
describe('#prop', function () {
test('should use defaultSelected prop when selected prop is omitted', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should warn when "defaultSelected" and "selected" props are provided', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: true
}));
var expected = 1;
expect(spy).toHaveBeenCalledTimes(expected);
});
test('should use defaultSelected prop when selected prop is null', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: null
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
expect(spy).toHaveBeenCalled();
});
test('should use selected prop when selected changed from truthy to null', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: true
})),
rerender = _render.rerender;
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: null
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
expect(spy).toHaveBeenCalled();
});
test('should use defaultSelected prop when selected prop is undefined', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
// eslint-disable-next-line no-undefined
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: undefined
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
expect(spy).toHaveBeenCalled();
});
test('should use selected prop when selected changed from truthy to undefined', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: true
})),
rerender = _render2.rerender;
// eslint-disable-next-line no-undefined
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: undefined
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
expect(spy).toHaveBeenCalled();
});
test('should use selected prop when both selected and defaultSelected are defined', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: false
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
expect(spy).toHaveBeenCalled();
});
});
describe('#forwarding events', function () {
test('should invoke passed "onToggle" handler with type', function () {
// eslint-disable-next-line
console.error = function () {};
var handleToggle = jest.fn();
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onToggle: handleToggle
}));
(0, _react.act)(function () {
return data.onToggle();
});
var expected = 1;
var expectedType = {
type: 'onToggle'
};
var actual = handleToggle.mock.calls.length && handleToggle.mock.calls[0][0];
expect(handleToggle).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should invoke passed custom "onJiggle" handler with type', function () {
// eslint-disable-next-line
console.error = function () {};
var handleJiggle = jest.fn();
var Component = (0, _Toggleable["default"])({
toggleProp: 'onJiggle'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onJiggle: handleJiggle
}));
data.onJiggle();
var expected = 1;
var expectedType = {
type: 'onJiggle'
};
var actual = handleJiggle.mock.calls.length && handleJiggle.mock.calls[0][0];
expect(handleJiggle).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should invoke passed "onActivate" handler with type', function () {
// eslint-disable-next-line
console.error = function () {};
var handleActivate = jest.fn();
var Component = (0, _Toggleable["default"])({
activate: 'onActivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onActivate: handleActivate
}));
(0, _react.act)(function () {
return data.onActivate();
});
var expected = 1;
var expectedType = {
type: 'onActivate'
};
var actual = handleActivate.mock.calls.length && handleActivate.mock.calls[0][0];
expect(handleActivate).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should invoke passed "onDeactivate" handler with type', function () {
// eslint-disable-next-line
console.error = function () {};
var handleDeactivate = jest.fn();
var Component = (0, _Toggleable["default"])({
deactivate: 'onDeactivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onDeactivate: handleDeactivate
}));
(0, _react.act)(function () {
return data.onDeactivate();
});
var expected = 1;
var expectedType = {
type: 'onDeactivate'
};
var actual = handleDeactivate.mock.calls.length && handleDeactivate.mock.calls[0][0];
expect(handleDeactivate).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should not invoke passed "onToggle" handler when disabled', function () {
var handleToggle = jest.fn();
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onToggle: handleToggle,
disabled: true
}));
(0, _react.act)(function () {
return data.onToggle();
});
expect(handleToggle).not.toHaveBeenCalled();
});
test('should invoke passed "onToggle" handler when disabled at creation and becoming enabled', function () {
// eslint-disable-next-line
console.error = function () {};
var handleToggle = jest.fn();
var Component = (0, _Toggleable["default"])(DivComponent);
var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onToggle: handleToggle,
disabled: true
})),
rerender = _render3.rerender;
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onToggle: handleToggle,
disabled: false
}));
(0, _react.act)(function () {
return data.onToggle();
});
var expected = 1;
expect(handleToggle).toHaveBeenCalledTimes(expected);
});
test('should invoke changed "onToggle" handler', function () {
// eslint-disable-next-line
console.error = function () {};
var handleToggle = jest.fn();
var Component = (0, _Toggleable["default"])(DivComponent);
var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})),
rerender = _render4.rerender;
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onToggle: handleToggle
}));
(0, _react.act)(function () {
return data.onToggle();
});
var expected = 1;
expect(handleToggle).toHaveBeenCalledTimes(expected);
});
test('should not invoke passed "onActivate" handler when disabled', function () {
var handleActivate = jest.fn();
var Component = (0, _Toggleable["default"])({
activate: 'onActivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onActivate: handleActivate,
disabled: true
}));
(0, _react.act)(function () {
return data.onActivate();
});
expect(handleActivate).not.toHaveBeenCalled();
});
test('should not invoke passed "onDeactivate" handler when "disabled"', function () {
var handleDeactivate = jest.fn();
var Component = (0, _Toggleable["default"])({
deactivate: 'onDeactivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
onDeactivate: handleDeactivate,
disabled: true
}));
(0, _react.act)(function () {
return data.onDeactivate();
});
expect(handleDeactivate).not.toHaveBeenCalled();
});
});
describe('#updating state', function () {
test('should update "selected" when "onToggle" invoked and is not controlled', function () {
// eslint-disable-next-line
console.error = function () {};
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
}));
(0, _react.act)(function () {
return data.onToggle();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should update "selected" when "onJiggle" invoked and is not controlled', function () {
// eslint-disable-next-line
console.error = function () {};
var Component = (0, _Toggleable["default"])({
toggleProp: 'onJiggle'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
}));
(0, _react.act)(function () {
return data.onJiggle();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onToggle" invoked and is not controlled but disabled', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
disabled: true
}));
(0, _react.act)(function () {
return data.onToggle();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onActivate" invoked and is not controlled but disabled', function () {
var Component = (0, _Toggleable["default"])({
activate: 'onActivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: false,
disabled: true
}));
(0, _react.act)(function () {
return data.onActivate();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onDeactivate" invoked and is not controlled but disabled', function () {
var Component = (0, _Toggleable["default"])({
deactivate: 'onDeactivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
disabled: true
}));
(0, _react.act)(function () {
return data.onDeactivate();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onToggle" invoked and is controlled', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: true
}));
(0, _react.act)(function () {
return data.onToggle();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onJiggle" invoked and is controlled', function () {
var Component = (0, _Toggleable["default"])({
toggleProp: 'onJiggle'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: true
}));
(0, _react.act)(function () {
return data.onJiggle();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onActivate" invoked and is controlled', function () {
var Component = (0, _Toggleable["default"])({
activate: 'onActivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: false
}));
(0, _react.act)(function () {
return data.onActivate();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" when "onDeactivate" invoked and is controlled', function () {
var Component = (0, _Toggleable["default"])({
deactivate: 'onDeactivate'
}, DivComponent);
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: true
}));
(0, _react.act)(function () {
return data.onDeactivate();
});
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
});
describe('#new props', function () {
test('should update "selected" with new props when controlled', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: true
})),
rerender = _render5.rerender;
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selected: false
}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'false';
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" with new props when not controlled', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
})),
rerender = _render6.rerender;
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true,
selected: false
}));
expect(toggleableDiv).toHaveTextContent(expected);
});
test('should not update "selected" with custom prop and new defaultProp when not controlled', function () {
var Component = (0, _Toggleable["default"])({
prop: 'active'
}, DivComponent);
var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: true
})),
rerender = _render7.rerender;
var expectedProp = 'active';
var expectedValue = false;
expect(data).toHaveProperty(expectedProp, expectedValue);
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
defaultSelected: false
}));
expect(data).toHaveProperty(expectedProp, expectedValue);
});
});
// testing regression from #2679 causing #2735
test('should not update instance value when prop did not change', function () {
var Component = (0, _Toggleable["default"])(DivComponent);
var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})),
rerender = _render8.rerender;
(0, _react.act)(function () {
return data.onToggle();
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
var toggleableDiv = _react.screen.getByTestId('selected-state');
var expected = 'true';
expect(toggleableDiv).toHaveTextContent(expected);
});
});