@wix/design-system
Version:
@wix/design-system
220 lines (219 loc) • 9.23 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _unit = require("../../utils/test-utils/unit");
var _constants = require("../constants");
var _Toggle = _interopRequireDefault(require("./Toggle"));
var _TogglePrivateUni = require("./Toggle.private.uni.driver");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Transition/Toggle/Toggle.spec.jsx",
_this = void 0,
_templateObject;
var createToggle = function createToggle() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return /*#__PURE__*/_react["default"].createElement(_Toggle["default"], (0, _extends2["default"])({}, props, {
dataHook: "stylesHook",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 5
}
}), /*#__PURE__*/_react["default"].createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}
}, "Children"));
};
describe(_Toggle["default"].displayName, function () {
var render = (0, _unit.createRendererWithUniDriver)(_TogglePrivateUni.togglePrivateDriverFactory);
beforeAll(function () {
Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
configurable: true,
value: 100
});
});
afterAll(function () {
Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
configurable: true,
value: 0
});
});
afterEach(_unit.cleanup);
it('should render', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _render, driver;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_render = render(createToggle()), driver = _render.driver;
_context.t0 = expect;
_context.next = 4;
return driver.exists();
case 4:
_context.t1 = _context.sent;
(0, _context.t0)(_context.t1).toBe(true);
case 6:
case "end":
return _context.stop();
}
}, _callee);
})));
it('should unmount children after animation ends', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
var _render2, driver, rerender;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_render2 = render(createToggle({
show: true,
unmountOnExit: true
})), driver = _render2.driver, rerender = _render2.rerender;
_context3.t0 = expect;
_context3.next = 4;
return driver.getContentText();
case 4:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1).toEqual('Children');
rerender(createToggle({
show: false,
unmountOnExit: true
}));
_context3.next = 9;
return (0, _unit.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.t0 = expect;
_context2.next = 3;
return driver.getContentText();
case 3:
_context2.t1 = _context2.sent;
(0, _context2.t0)(_context2.t1).toEqual('');
case 5:
case "end":
return _context2.stop();
}
}, _callee2);
})));
case 9:
case "end":
return _context3.stop();
}
}, _callee3);
})));
it('should call onEnd callback on transition end', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
var onEndCallback, _render3, rerender;
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
onEndCallback = vi.fn();
_render3 = render(createToggle({
timeout: _constants.timingMap['medium01'],
show: true,
onEnd: onEndCallback
})), rerender = _render3.rerender;
rerender(createToggle({
timeout: _constants.timingMap['medium01'],
show: false,
onEnd: onEndCallback
}));
_context4.next = 5;
return (0, _unit.waitFor)(function () {
expect(onEndCallback).toHaveBeenCalled();
});
case 5:
case "end":
return _context4.stop();
}
}, _callee4);
})));
it('should call onStart callback on transition start ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
var onStartCallback, _render4, rerender;
return _regenerator["default"].wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
onStartCallback = vi.fn();
_render4 = render(createToggle({
timeout: _constants.timingMap['medium01'],
show: false,
onStart: onStartCallback
})), rerender = _render4.rerender;
rerender(createToggle({
timeout: _constants.timingMap['medium01'],
show: true,
onStart: onStartCallback
}));
_context6.next = 5;
return (0, _unit.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
return _regenerator["default"].wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
expect(onStartCallback).toHaveBeenCalled();
case 1:
case "end":
return _context5.stop();
}
}, _callee5);
})));
case 5:
case "end":
return _context6.stop();
}
}, _callee6);
})));
it('should render children on enter', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
var _render5, driver;
return _regenerator["default"].wrap(function _callee7$(_context7) {
while (1) switch (_context7.prev = _context7.next) {
case 0:
_render5 = render(createToggle({
show: true,
mountOnEnter: false,
unmountOnExit: false
})), driver = _render5.driver;
_context7.t0 = expect;
_context7.next = 4;
return driver.getContentText();
case 4:
_context7.t1 = _context7.sent;
(0, _context7.t0)(_context7.t1).toEqual('Children');
case 6:
case "end":
return _context7.stop();
}
}, _callee7);
})));
it.each(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n mountOnEnter | unmountOnExit | expected\n ", " | ", " | ", "\n ", " | ", " | ", "\n ", " | ", " | ", "\n ", " | ", " | ", "\n "])), false, false, 'Children', true, false, '', false, true, '', true, true, '')('should mount/unmount children by when mountOnEnter is $mountOnEnter and unmountOnExit is $unmountOnExit ', /*#__PURE__*/function () {
var _ref9 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8(_ref8) {
var mountOnEnter, unmountOnExit, expected, _render6, driver;
return _regenerator["default"].wrap(function _callee8$(_context8) {
while (1) switch (_context8.prev = _context8.next) {
case 0:
mountOnEnter = _ref8.mountOnEnter, unmountOnExit = _ref8.unmountOnExit, expected = _ref8.expected;
_render6 = render(createToggle({
show: false,
mountOnEnter: mountOnEnter,
unmountOnExit: unmountOnExit
})), driver = _render6.driver;
_context8.t0 = expect;
_context8.next = 5;
return driver.getContentText();
case 5:
_context8.t1 = _context8.sent;
(0, _context8.t0)(_context8.t1).toEqual(expected);
case 7:
case "end":
return _context8.stop();
}
}, _callee8);
}));
return function (_x) {
return _ref9.apply(this, arguments);
};
}());
});