UNPKG

@enact/sandstone

Version:

Large-screen/TV support library for Enact, containing a variety of UI components.

704 lines (700 loc) 27.5 kB
"use strict"; require("@testing-library/jest-dom"); var _react = require("@testing-library/react"); var _Item = _interopRequireDefault(require("../../Item")); var _VirtualList = _interopRequireDefault(require("../VirtualList")); var _jsxRuntime = require("react/jsx-runtime"); var _excluded = ["index"], _excluded2 = ["index"]; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } describe('VirtualList with translate \'scrollMode\'', function () { var clientSize, dataSize, getScrollTo, handlerOnScroll, handlerOnScrollStart, handlerOnScrollStop, items, itemSize, myScrollTo, onScrollCount, onScrollStartCount, onScrollStopCount, renderItem, resultScrollLeft, resultScrollTop, startScrollTop; beforeEach(function () { clientSize = { clientWidth: 1280, clientHeight: 720 }; dataSize = 200; items = []; itemSize = 60; onScrollCount = 0; onScrollStartCount = 0; onScrollStopCount = 0; resultScrollLeft = 0; resultScrollTop = 0; startScrollTop = 0; getScrollTo = function getScrollTo(scrollTo) { myScrollTo = scrollTo; }; handlerOnScroll = function handlerOnScroll() { onScrollCount++; }; handlerOnScrollStart = function handlerOnScrollStart(e) { startScrollTop = e.scrollTop; onScrollStartCount++; }; handlerOnScrollStop = function handlerOnScrollStop(done, testCase) { return function (e) { onScrollStopCount++; resultScrollLeft = e.scrollLeft; resultScrollTop = e.scrollTop; testCase(); done(); }; }; renderItem = function renderItem(_ref) { var index = _ref.index, rest = _objectWithoutProperties(_ref, _excluded); // eslint-disable-line enact/display-name return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], _objectSpread(_objectSpread({}, rest), {}, { children: items[index].name })); }; for (var i = 0; i < dataSize; i++) { items.push({ name: 'Account ' + i }); } }); afterEach(function () { clientSize = null; dataSize = null; getScrollTo = null; handlerOnScroll = null; handlerOnScrollStart = null; handlerOnScrollStop = null; items = null; itemSize = null; myScrollTo = null; onScrollCount = null; onScrollStartCount = null; onScrollStopCount = null; renderItem = null; resultScrollLeft = null; resultScrollTop = null; startScrollTop = null; }); test('should render a list of \'items\'', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var expected = 'Account 0'; var actual = _react.screen.getByRole('list').children.item(0).textContent; expect(actual).toBe(expected); }); test('should render overhang items when \'clientSize\' and outer DOM size are not specified', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var expected = 3; var actual = _react.screen.getByRole('list').children.length; expect(actual).toBe(expected); }); test('should render (clientHeight / itemHeight + overhang) items', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var expected = 15; // 720 / 60 + 3 var actual = _react.screen.getByRole('list').children.length; expect(actual).toBe(expected); }); test('should re-render (clientHeight / itemHeight + overhang) items after changing \'clientSize\'', function () { var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })), rerender = _render.rerender; var newClientSize = { clientWidth: 1280, clientHeight: 360 }; rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: newClientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var expected = 9; // 360 / 60 + 3 var actual = _react.screen.getByRole('list').children.length; expect(actual).toBe(expected); }); test('should render only one scrollbar', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, direction: "horizontal", itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var expected = 2; // One for the list and another for the horizontal scrollbar var actual = _react.screen.getByRole('list').parentElement.parentElement.children.length; expect(actual).toBe(expected); }); describe('Scrollbar visibility', function () { test('should render both horizontal and vertical scrollbars when \'horizontalScrollbar\' and \'verticalScrollbar\' are "visible"', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, direction: "horizontal", itemRenderer: renderItem, itemSize: itemSize, horizontalScrollbar: "visible", verticalScrollbar: "visible", scrollMode: "translate" })); var virtualListRoot = _react.screen.getByRole('list').parentElement.parentElement; var verticalScrollbar = virtualListRoot.children.item(1); var horizontalScrollbar = virtualListRoot.children.item(2); expect(verticalScrollbar).toHaveClass("verticalScrollbar"); expect(horizontalScrollbar).toHaveClass("horizontalScrollbar"); }); test('should render only vertical scrollbar when \'verticalScrollbar\' is "visible" and \'horizontalScrollbar\' is "hidden"', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); var virtualListRoot = _react.screen.getByRole('list').parentElement.parentElement; var verticalScrollbar = virtualListRoot.children.item(1); var horizontalScrollbar = virtualListRoot.children.item(2); expect(verticalScrollbar).toBeInTheDocument(); expect(verticalScrollbar).toHaveClass("verticalScrollbar"); expect(horizontalScrollbar).toBeNull(); }); test('should not render any scrollbar when \'horizontalScrollbar\' and \'verticalScrollbar\' are "hidden"', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, direction: "horizontal", itemRenderer: renderItem, itemSize: itemSize, horizontalScrollbar: "hidden", verticalScrollbar: "hidden", scrollMode: "translate" })); var virtualListRoot = _react.screen.getByRole('list').parentElement.parentElement; var verticalScrollbar = virtualListRoot.children.item(1); var horizontalScrollbar = virtualListRoot.children.item(2); expect(verticalScrollbar).toBeNull(); expect(horizontalScrollbar).toBeNull(); }); }); describe('ScrollTo', function () { test('should scroll to the specific item of a given \'index\' with scrollTo', function (done) { var onScrollStop = handlerOnScrollStop(done, function () { var expected = 600; expect(resultScrollTop).toBe(expected); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ index: 10, animate: false }); }); }); test('should scroll to the given \'x\' position with scrollTo', function (done) { var onScrollStop = handlerOnScrollStop(done, function () { var expected = 200; expect(resultScrollLeft).toBe(expected); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, direction: "horizontal", itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { x: 200 }, animate: false }); }); }); test('should scroll to the given \'y\' position with scrollTo', function (done) { var onScrollStop = handlerOnScrollStop(done, function () { var expected = 200; expect(resultScrollTop).toBe(expected); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); }); test('should scroll to the given \'align\' with scrollTo', function (done) { var onScrollStop = handlerOnScrollStop(done, function () { var expected = dataSize * itemSize - clientSize.clientHeight + 30; var actual = resultScrollTop; expect(actual).toBe(expected); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ align: 'bottom', animate: false }); }); }); test('should scroll to the given \'align\' with scrollTo after changing \'dataSize\'', function (done) { var newDataSize = 50; var onScrollStop = handlerOnScrollStop(done, function () { var expected = newDataSize * itemSize - clientSize.clientHeight + 30; var actual = resultScrollTop; expect(actual).toBe(expected); }); var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })), rerender = _render2.rerender; rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: newDataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ align: 'bottom', animate: false }); }); }); test('should scroll to the given \'align\' with scrollTo after changing \'itemSize\'', function (done) { var newItemSize = 50; var onScrollStop = handlerOnScrollStop(done, function () { var expected = dataSize * newItemSize - clientSize.clientHeight + 30; var actual = resultScrollTop; expect(actual).toBe(expected); }); var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })), rerender = _render3.rerender; rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: newItemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ align: 'bottom', animate: false }); }); }); test('should scroll to the given \'align\' with scrollTo after changing \'spacing\'', function (done) { var newSpacing = 30; var onScrollStop = handlerOnScrollStop(done, function () { var expected = dataSize * (itemSize + newSpacing) - clientSize.clientHeight - newSpacing + 30; var actual = resultScrollTop; expect(actual).toBe(expected); }); var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })), rerender = _render4.rerender; rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, spacing: newSpacing, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ align: 'bottom', animate: false }); }); }); test('should warn if both \'minSize\' in \'itemSize\' prop and \'cbScrollTo\' prop are given', function () { var consoleSpy = jest.spyOn(console, 'error').mockImplementation(function () {}); var variableItemSize = { minSize: itemSize, size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200] }; (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: 10, itemRenderer: renderItem, itemSize: variableItemSize, scrollMode: "translate" })); var expectedErrorMsg = 'Warning: VirtualList with `minSize` in `itemSize` prop does not support `cbScrollTo` prop'; expect(consoleSpy).toHaveBeenCalled(); expect(consoleSpy.mock.calls[0][0]).toBe(expectedErrorMsg); }); describe('scroll events', function () { test('should call onScrollStart once', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStart: handlerOnScrollStart, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); var expected = 1; expect(onScrollStartCount).toBe(expected); }); test('should call onScroll once', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScroll: handlerOnScroll, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); var expected = 1; expect(onScrollCount).toBe(expected); }); test('should call onScrollStop once', function (done) { var onScrollStop = handlerOnScrollStop(done, function () { var expected = 1; expect(onScrollStopCount).toBe(expected); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); }); }); }); describe('Scroll by event', function () { beforeEach(function () { jest.useFakeTimers(); }); afterEach(function () { jest.useRealTimers(); }); test('should scroll by wheel', function (done) { var fn = jest.fn(); var onScrollStop = handlerOnScrollStop(done, function () { fn(); expect(startScrollTop).toBe(0); expect(onScrollStartCount).toBe(1); expect(resultScrollTop).toBeGreaterThan(0); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, onScrollStart: handlerOnScrollStart, scrollMode: "translate" })); var list = _react.screen.getByRole('list'); _react.fireEvent.wheel(list, { deltaY: 100 }); (0, _react.act)(function () { return jest.advanceTimersByTime(1000); }); // Wait onScrollStop expect(fn).toBeCalled(); }); test('should show overscroll effect by wheel', function (done) { var fn = jest.fn(); var onScrollStop = handlerOnScrollStop(done, function () { fn(); expect(startScrollTop).toBe(0); expect(onScrollStartCount).toBe(1); expect(resultScrollTop).toBe(0); var listRoot = _react.screen.getByRole('list').parentElement; expect(listRoot).toHaveStyle({ '--scroll-overscroll-translate-vertical': 'translateY(0px)' }); }); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, onScrollStop: onScrollStop, onScrollStart: handlerOnScrollStart, scrollMode: "translate" })); var list = _react.screen.getByRole('list'); _react.fireEvent.wheel(list, { deltaY: -100 }); (0, _react.act)(function () { return jest.advanceTimersByTime(1000); }); // Wait onScrollStop expect(fn).toBeCalled(); }); test('should not scroll by wheel when \'noScrollByWheel\' prop is true', function (done) { var fn = jest.fn(); (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, noScrollByWheel: true, onScrollStop: fn, onScrollStart: handlerOnScrollStart, scrollMode: "translate" })); var list = _react.screen.getByRole('list'); _react.fireEvent.wheel(list, { deltaY: 100 }); (0, _react.act)(function () { return jest.advanceTimersByTime(1000); }); // Wait onScrollStop expect(fn).not.toHaveBeenCalled(); done(); }); }); describe('Adding an item', function () { test('should render an added item named \'Password 0\' as the first item', function (done) { var itemArray = [{ name: 'A' }, { name: 'B' }, { name: 'C' }]; var renderItemArray = function renderItemArray(_ref2) { var index = _ref2.index, rest = _objectWithoutProperties(_ref2, _excluded2); return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, { id: 'item' + index, children: itemArray[index].name })); }; var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: itemArray.length, itemRenderer: renderItemArray, itemSize: itemSize, scrollMode: "translate" })), rerender = _render5.rerender; itemArray.unshift({ name: 'Password 0' }); rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: itemArray.length, itemRenderer: renderItemArray, itemSize: itemSize, scrollMode: "translate" })); jest.useFakeTimers(); (0, _react.act)(function () { return jest.advanceTimersByTime(0); }); var expected = itemArray[0].name; var actual = _react.screen.getByRole('list').children.item(0).textContent; expect(actual).toBe(expected); done(); jest.useRealTimers(); }); }); describe('Voice Control', function () { test('should render \'data-webos-voice-focused\' to the outermost node of VirtualList', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, "data-webos-voice-focused": true, scrollMode: "translate" })); var actual = _react.screen.getByRole('list').parentElement; expect(actual).toHaveAttribute('data-webos-voice-focused', 'true'); }); test('should render \'data-webos-voice-group-label\' to the outermost node of VirtualList', function () { var label = 'group label'; (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, "data-webos-voice-group-label": label, scrollMode: "translate" })); var actual = _react.screen.getByRole('list').parentElement; expect(actual).toHaveAttribute('data-webos-voice-group-label', label); }); test('should render \'data-webos-voice-disabled\' to the outermost node of VirtualList', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, "data-webos-voice-disabled": true, scrollMode: "translate" })); var actual = _react.screen.getByRole('list').parentElement; expect(actual).toHaveAttribute('data-webos-voice-disabled', 'true'); }); }); describe('HoverToScroll', function () { test('should not render hoverToScroll node when \'hoverToScroll\' prop is not provided', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); var expected = 2; var actual = _react.screen.getByRole('list').parentElement.parentElement.children.length; expect(actual).toBe(expected); }); test('should render two hoverToScroll nodes after scrolling when \'hoverToScroll\' prop is provided', function () { (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], { cbScrollTo: getScrollTo, clientSize: clientSize, dataSize: dataSize, hoverToScroll: true, itemRenderer: renderItem, itemSize: itemSize, scrollMode: "translate" })); (0, _react.act)(function () { return myScrollTo({ position: { y: 200 }, animate: false }); }); var expected = 4; var actual = _react.screen.getByRole('list').parentElement.parentElement.children.length; expect(actual).toBe(expected); }); }); });