@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
883 lines (876 loc) • 36.1 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _react2 = require("react");
var _ = _interopRequireDefault(require("../"));
var _Arranger = require("../Arranger");
var _testUtils = require("./test-utils");
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); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
describe('ViewManager', function () {
// Suite-wide setup
beforeEach(function () {
jest.useFakeTimers();
});
afterEach(function () {
jest.useRealTimers();
});
test('should render {component} as its child - <div/> by default', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
"data-testid": "component",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {})
}));
var expected = 'DIV';
var actual = _react.screen.getByTestId('component').tagName;
expect(actual).toBe(expected);
});
test('should render {component} as its child', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
component: "span",
"data-testid": "component",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
}));
var expected = 'SPAN';
var actual = _react.screen.getByTestId('component').tagName;
expect(actual).toBe(expected);
});
test('should render only 1 child view', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var expected = 1;
var actual = _react.screen.getAllByText(/View/).length;
expect(actual).toBe(expected);
});
test('should render the child at {index}', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 3,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var actual = _react.screen.getByText('View 4');
expect(actual).toBeInTheDocument();
});
test('should have 1 child immediately after setting new {index} without an {arranger}', function () {
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
index: 3,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
})),
rerender = _render.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
index: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var expected = 1;
var actual = _react.screen.getByTestId('viewManager').children.length;
expect(actual).toBe(expected);
});
test('should have 1 child immediately after setting new {index} with an {arranger} and {noAnimation} is true', function () {
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
"data-testid": "viewManager",
index: 3,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
})),
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
"data-testid": "viewManager",
index: 4,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var expected = 1;
var actual = _react.screen.getByTestId('viewManager').children.length;
expect(actual).toBe(expected);
});
test('should have 2 children immediately after setting new {index} with an {arranger}', function () {
var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
"data-testid": "viewManager",
index: 3,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
})),
rerender = _render3.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
"data-testid": "viewManager",
index: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var expected = 2;
var actual = _react.screen.getByTestId('viewManager').children.length;
expect(actual).toBe(expected);
});
test('should allow child props to update', function () {
var content = 'updated';
var ViewManagerTest = /*#__PURE__*/function (_Component) {
_inherits(ViewManagerTest, _Component);
var _super = _createSuper(ViewManagerTest);
function ViewManagerTest() {
_classCallCheck(this, ViewManagerTest);
return _super.apply(this, arguments);
}
_createClass(ViewManagerTest, [{
key: "render",
value: function render() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "view",
children: this.props.content
})
});
}
}]);
return ViewManagerTest;
}(_react2.Component);
var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewManagerTest, {
content: "original"
})),
rerender = _render4.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewManagerTest, {
content: content
}));
var expected = content;
var actual = _react.screen.getByTestId('view').textContent;
expect(actual).toBe(expected);
});
test('should have 1 child {duration}ms after setting new {index}', function (done) {
var duration = 50;
var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
duration: duration,
index: 3,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
})),
rerender = _render5.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
duration: duration,
index: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(duration + 10);
});
var expected = 1;
var actual = _react.screen.getByTestId('viewManager').children.length;
expect(actual).toBe(expected);
done();
});
test('should have 1 child when noAnimation is true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
duration: 0,
index: 0,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
var expected = 1;
var actual = _react.screen.getByTestId('viewManager').children.length;
expect(actual).toBe(expected);
});
// TODO cannot read props of child components
test.skip('should update the View reverseTransition prop.', function () {
var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
duration: 0,
index: 0,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 5"
})]
})),
rerender = _render6.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
duration: 0,
index: 0,
noAnimation: true,
reverseTransition: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "view",
children: "View 5"
})]
}));
// const actual = subject.find('View').props().reverseTransition;
// expect(actual).toBeTruthy();
});
// TODO cannot read props of child components
test.skip('should update the View reverseTransition prop to true if it is updated with a smaller index prop.', function () {
var _render7 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
duration: 0,
index: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
})),
rerender = _render7.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
duration: 0,
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
})]
}));
// const actual = subject.find('View').at(0).props().reverseTransition;
// expect(actual).toBeTruthy();
});
// TODO cannot read props of child components
test.skip('should update the View reverseTransition prop to false even though it is updated with a smaller index prop.', function () {
var _render8 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
duration: 0,
index: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
})]
})),
rerender = _render8.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
duration: 0,
index: 1,
reverseTransition: false,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
})]
}));
// const actual = subject.find('View').at(0).props().reverseTransition;
// expect(actual).toBeFalsy();
});
test('should update the view when children are reordered', function () {
var _render9 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render9.rerender;
expect(_react.screen.getByText('View 2')).toBeInTheDocument();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1")]
}));
expect(_react.screen.getByText('View 1')).toBeInTheDocument();
});
test('should update the view when children are replaced', function () {
var _render10 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1")
})),
rerender = _render10.rerender;
expect(_react.screen.getByText('View 1')).toBeInTheDocument();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")
}));
expect(_react.screen.getByText('View 2')).toBeInTheDocument();
});
test('should update the number of views when {start} updates', function () {
var _render11 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
end: 3,
index: 3,
start: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
})),
rerender = _render11.rerender;
var children = _react.screen.getByTestId('viewManager').children;
expect(children).toHaveLength(2);
expect(children.item(0)).toHaveTextContent('View 3');
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
end: 3,
index: 3,
start: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
}));
expect(children).toHaveLength(3);
expect(children.item(0)).toHaveTextContent('View 2');
});
test('should update the active view when {start}, {end}, and {index} update', function () {
var _render12 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
end: 3,
index: 3,
start: 3,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
})),
rerender = _render12.rerender;
var children = _react.screen.getByTestId('viewManager').children;
var expected = 1;
expect(children).toHaveLength(expected);
expect(_react.screen.getByTestId('viewManager')).toHaveTextContent('View 4');
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
end: 2,
index: 2,
start: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
}));
var newChildren = _react.screen.getByTestId('viewManager').children;
var newExpected = 1;
expect(newChildren).toHaveLength(newExpected);
expect(_react.screen.getByTestId('viewManager')).toHaveTextContent('View 3');
});
test('should extend the view range when {index} is less than {start}', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
"data-testid": "viewManager",
end: 3,
index: 1,
start: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
}));
var children = _react.screen.getByTestId('viewManager').children;
var expected = 3;
expect(children).toHaveLength(expected);
});
test('should extend the view range when {index} is greater than {end}', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
end: 2,
index: 3,
start: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4")]
}));
var children = _react.screen.getAllByText(/View/);
var expected = 3;
expect(children).toHaveLength(expected);
});
test('should fire onEnter with type once a view has entered', function () {
var spy = jest.fn();
var _render13 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onEnter: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render13.rerender;
spy.mockClear();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onEnter: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
var expected = 1;
var expectedType = {
type: 'onEnter'
};
var actual = spy.mock.calls.length && spy.mock.calls[0][0];
expect(spy).toHaveBeenCalledTimes(expected);
expect(actual).toMatchObject(expectedType);
});
test('should fire onAppear with type once a view has appeared', /*#__PURE__*/_asyncToGenerator(function* () {
var spy = jest.fn();
var _render14 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onAppear: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render14.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onAppear: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
yield (0, _react.waitFor)(function () {
var expected = 1;
expect(spy).toHaveBeenCalledTimes(expected);
});
yield (0, _react.waitFor)(function () {
var expectedType = {
type: 'onAppear'
};
var actual = spy.mock.calls.length && spy.mock.calls[0][0];
expect(actual).toMatchObject(expectedType);
});
}));
test('should fire onTransition once per transition', function () {
var spy = jest.fn();
var _render15 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onTransition: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render15.rerender;
spy.mockClear();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
var expected = 1;
expect(spy).toHaveBeenCalledTimes(expected);
});
test('should not receive onTransition event on mount', function () {
var spy = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onTransition: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
var expected = 0;
expect(spy).toHaveBeenCalledTimes(expected);
});
test('should include the current index and previous index in onTransition event payload', function () {
var spy = jest.fn();
var _render16 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onTransition: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render16.rerender;
spy.mockClear();
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
expect(spy).toHaveBeenLastCalledWith({
index: 1,
previousIndex: 0,
type: 'onTransition'
});
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
onTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
expect(spy).toHaveBeenLastCalledWith({
index: 0,
previousIndex: 1,
type: 'onTransition'
});
});
test('should fire onWillTransition once per transition', function () {
var spy = jest.fn();
var _render17 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onWillTransition: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render17.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onWillTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
expect(spy).toHaveBeenCalledTimes(1);
});
test('should include the current index and previous index in onWillTransition event payload', function () {
var spy = jest.fn();
var _render18 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
noAnimation: true,
onWillTransition: spy,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
})),
rerender = _render18.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 1,
onWillTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
expect(spy).toHaveBeenLastCalledWith({
index: 1,
previousIndex: 0,
type: 'onWillTransition'
});
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
index: 0,
onWillTransition: spy,
noAnimation: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
expect(spy).toHaveBeenLastCalledWith({
index: 0,
previousIndex: 1,
type: 'onWillTransition'
});
});
test('should pass `rtl` prop to arranger when `true`', function () {
var spy = jest.spyOn(_testUtils.MockArranger, 'stay');
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
index: 0,
rtl: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
var expected = {
rtl: true
};
var actual = spy.mock.calls[0][0];
expect(actual).toMatchObject(expected);
spy.mockRestore();
});
test('should pass `rtl` prop to arranger when unset', function () {
var spy = jest.spyOn(_testUtils.MockArranger, 'stay');
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _testUtils.MockArranger,
index: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2")]
}));
var expected = {
rtl: false
};
var actual = spy.mock.calls[0][0];
expect(actual).toMatchObject(expected);
spy.mockRestore();
});
test('should not remove view immediately after `index` change if an arranger is present even for multiple views', function () {
var _render19 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _Arranger.SlideTopArranger,
"data-testid": "viewManager",
end: 2,
index: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
}, "view5")]
})),
rerender = _render19.rerender;
var actual = _react.screen.getByTestId('viewManager').children.length;
var expected = 3;
expect(actual).toBe(expected);
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], {
arranger: _Arranger.SlideTopArranger,
"data-testid": "viewManager",
end: 3,
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 2"
}, "view2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 3"
}, "view3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 4"
}, "view4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 5"
}, "view5")]
}));
actual = _react.screen.getByTestId('viewManager').children.length;
expected = 4;
expect(actual).toBe(expected);
});
});