@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
881 lines (874 loc) • 35.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(e) { return e && e.__esModule ? e : { "default": e }; }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
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) {
function ViewManagerTest() {
_classCallCheck(this, ViewManagerTest);
return _callSuper(this, ViewManagerTest, arguments);
}
_inherits(ViewManagerTest, _Component);
return _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
})
});
}
}]);
}(_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 _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "View 1"
}, "view1")
})),
rerender = _render0.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 _render1 = (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 = _render1.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 _render10 = (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 = _render10.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 _render11 = (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 = _render11.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 _render12 = (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 = _render12.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 _render13 = (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 = _render13.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 _render14 = (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 = _render14.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 _render15 = (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 = _render15.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 _render16 = (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 = _render16.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 _render17 = (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 = _render17.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);
});
});