@wix/design-system
Version:
@wix/design-system
686 lines • 27 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SidebarNext/test/SidebarNext.spec.jsx",
_this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import { sidebarSkins } from '../constants';
import SidebarNext from '../SidebarNext';
import { sidebarNextPrivateDriverFactory } from './SidebarNext.private.uni.driver';
import { createRendererWithUniDriver } from '../../utils/test-utils/unit';
import SidebarItemNext from '../../SidebarItemNext/SidebarItemNext';
import { sidebarItemNextDriverFactory } from '../../SidebarItemNext/SidebarItemNext.uni.driver';
import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
var sidebarItemNextTestkitFactory = uniTestkitFactoryCreator(sidebarItemNextDriverFactory);
describe('SidebarNext', function () {
var render = createRendererWithUniDriver(sidebarNextPrivateDriverFactory);
describe('Basic functionality', function () {
it('should render an entry with no sub-entries', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _render, getByTestId;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_render = render(/*#__PURE__*/React.createElement(SidebarNext, {
isLoading: false,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
"data-testid": "simple",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 11
}
}, "123"))), getByTestId = _render.getByTestId;
expect(getByTestId('simple').textContent).toBe('123');
case 2:
case "end":
return _context.stop();
}
}, _callee);
})));
it('should update current selected entry in context when changed in props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var sidebarItem, _render2, container, rerender, firstItemTestKit, secondItemTestKit;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
sidebarItem = [/*#__PURE__*/React.createElement(SidebarItemNext, {
key: "first-item",
itemKey: "first-item",
dataHook: "first-item",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}
}, "First")), /*#__PURE__*/React.createElement(SidebarItemNext, {
key: "second-item",
itemKey: "second-item",
dataHook: "second-item",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 11
}
}, "Second"))];
_render2 = render(/*#__PURE__*/React.createElement(SidebarNext, {
selectedKey: "first-item",
isLoading: false,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}
}, sidebarItem)), container = _render2.container, rerender = _render2.rerender;
firstItemTestKit = sidebarItemNextTestkitFactory({
wrapper: container,
dataHook: 'first-item'
});
_context2.t0 = expect;
_context2.next = 6;
return firstItemTestKit.isSelected();
case 6:
_context2.t1 = _context2.sent;
(0, _context2.t0)(_context2.t1).toBe(true);
rerender(/*#__PURE__*/React.createElement(SidebarNext, {
selectedKey: "second-item",
isLoading: false,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(SidebarItemNext, {
itemKey: "first-item",
dataHook: "first-item",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 13
}
}, "First")), /*#__PURE__*/React.createElement(SidebarItemNext, {
itemKey: "second-item",
dataHook: "second-item",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}
}, "Second"))));
secondItemTestKit = sidebarItemNextTestkitFactory({
wrapper: container,
dataHook: 'second-item'
});
_context2.t2 = expect;
_context2.next = 13;
return secondItemTestKit.isSelected();
case 13:
_context2.t3 = _context2.sent;
(0, _context2.t2)(_context2.t3).toBe(true);
case 15:
case "end":
return _context2.stop();
}
}, _callee2);
})));
it('should set sidebar skin to dark by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _render3, driver;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_render3 = render(/*#__PURE__*/React.createElement(SidebarNext, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 33
}
})), driver = _render3.driver;
_context3.t0 = expect;
_context3.next = 4;
return driver.getSkin();
case 4:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1).toBe(sidebarSkins.dark);
case 6:
case "end":
return _context3.stop();
}
}, _callee3);
})));
it('should hide sidebar', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
var _render4, driver;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_render4 = render(/*#__PURE__*/React.createElement(SidebarNext, {
hidden: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 33
}
})), driver = _render4.driver;
_context4.t0 = expect;
_context4.next = 4;
return driver.isHidden();
case 4:
_context4.t1 = _context4.sent;
(0, _context4.t0)(_context4.t1).toBe(true);
case 6:
case "end":
return _context4.stop();
}
}, _callee4);
})));
it('should minimize sidebar', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
var _render5, driver;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_render5 = render(/*#__PURE__*/React.createElement(SidebarNext, {
minimized: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 33
}
})), driver = _render5.driver;
_context5.t0 = expect;
_context5.next = 4;
return driver.isMinimized();
case 4:
_context5.t1 = _context5.sent;
(0, _context5.t0)(_context5.t1).toBe(true);
case 6:
case "end":
return _context5.stop();
}
}, _callee5);
})));
it('should not hide sidebar by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
var _render6, driver;
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
_render6 = render(/*#__PURE__*/React.createElement(SidebarNext, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 33
}
})), driver = _render6.driver;
_context6.t0 = expect;
_context6.next = 4;
return driver.isHidden();
case 4:
_context6.t1 = _context6.sent;
(0, _context6.t0)(_context6.t1).toBe(false);
case 6:
case "end":
return _context6.stop();
}
}, _callee6);
})));
Object.values(sidebarSkins).forEach(function (skin) {
return it("should set sidebar skin to ".concat(skin), /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
var _render7, driver;
return _regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) switch (_context7.prev = _context7.next) {
case 0:
_render7 = render(/*#__PURE__*/React.createElement(SidebarNext, {
skin: skin,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 35
}
})), driver = _render7.driver;
_context7.t0 = expect;
_context7.next = 4;
return driver.getSkin();
case 4:
_context7.t1 = _context7.sent;
(0, _context7.t0)(_context7.t1).toBe(skin);
case 6:
case "end":
return _context7.stop();
}
}, _callee7);
})));
});
it("should set sidebar width to default - 228px", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
var _render8, driver;
return _regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) switch (_context8.prev = _context8.next) {
case 0:
_render8 = render(/*#__PURE__*/React.createElement(SidebarNext, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 33
}
})), driver = _render8.driver;
_context8.t0 = expect;
_context8.next = 4;
return driver.getWidth();
case 4:
_context8.t1 = _context8.sent;
(0, _context8.t0)(_context8.t1).toBe('228');
case 6:
case "end":
return _context8.stop();
}
}, _callee8);
})));
it("should set sidebar width to 54px when minimized", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
var _render9, driver;
return _regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) switch (_context9.prev = _context9.next) {
case 0:
_render9 = render(/*#__PURE__*/React.createElement(SidebarNext, {
minimized: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 33
}
})), driver = _render9.driver;
_context9.t0 = expect;
_context9.next = 4;
return driver.getWidth();
case 4:
_context9.t1 = _context9.sent;
(0, _context9.t0)(_context9.t1).toBe('54');
case 6:
case "end":
return _context9.stop();
}
}, _callee9);
})));
it('should show minimizeToggleButton when enableMinimizeToggle is set', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0() {
var _render0, driver;
return _regeneratorRuntime.wrap(function _callee0$(_context0) {
while (1) switch (_context0.prev = _context0.next) {
case 0:
_render0 = render(/*#__PURE__*/React.createElement(SidebarNext, {
enableMinimizeToggle: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 33
}
})), driver = _render0.driver;
_context0.next = 3;
return driver.clickOnMinimizeButton();
case 3:
_context0.t0 = expect;
_context0.next = 6;
return driver.minimizeButtonExists();
case 6:
_context0.t1 = _context0.sent;
(0, _context0.t0)(_context0.t1).toBeTruthy();
case 8:
case "end":
return _context0.stop();
}
}, _callee0);
})));
it("should call onMinimizeToggleClick callback when clicking on minimize", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee1() {
var onMinimizeToggleClick, _render1, driver;
return _regeneratorRuntime.wrap(function _callee1$(_context1) {
while (1) switch (_context1.prev = _context1.next) {
case 0:
onMinimizeToggleClick = vi.fn();
_render1 = render(/*#__PURE__*/React.createElement(SidebarNext, {
enableMinimizeToggle: true,
onMinimizeToggleClick: onMinimizeToggleClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 9
}
})), driver = _render1.driver;
_context1.next = 4;
return driver.clickOnMinimizeButton();
case 4:
expect(onMinimizeToggleClick).toHaveBeenCalled();
case 5:
case "end":
return _context1.stop();
}
}, _callee1);
})));
it('should present a header', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
var _render10, driver;
return _regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) switch (_context10.prev = _context10.next) {
case 0:
_render10 = render(/*#__PURE__*/React.createElement(SidebarNext, {
header: /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 30
}
}, "header"),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
"data-testid": "content",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}
}, "456"))), driver = _render10.driver;
_context10.t0 = expect;
_context10.next = 4;
return driver.headerExists();
case 4:
_context10.t1 = _context10.sent;
(0, _context10.t0)(_context10.t1).toBe(true);
case 6:
case "end":
return _context10.stop();
}
}, _callee10);
})));
it('should present a footer', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
var _render11, driver;
return _regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) switch (_context11.prev = _context11.next) {
case 0:
_render11 = render(/*#__PURE__*/React.createElement(SidebarNext, {
footer: /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 30
}
}, "footer"),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
"data-testid": "content",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 11
}
}, "456"))), driver = _render11.driver;
_context11.t0 = expect;
_context11.next = 4;
return driver.footerExists();
case 4:
_context11.t1 = _context11.sent;
(0, _context11.t0)(_context11.t1).toBe(true);
case 6:
case "end":
return _context11.stop();
}
}, _callee11);
})));
it('should pass next prop', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
var _render12, driver;
return _regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) switch (_context12.prev = _context12.next) {
case 0:
_render12 = render(/*#__PURE__*/React.createElement(SidebarNext, {
next: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 33
}
})), driver = _render12.driver;
_context12.t0 = expect;
_context12.next = 4;
return driver.isNext();
case 4:
_context12.t1 = _context12.sent;
(0, _context12.t0)(_context12.t1).toBe(true);
case 6:
case "end":
return _context12.stop();
}
}, _callee12);
})));
describe('skeleton', function () {
var sidebarItem = [/*#__PURE__*/React.createElement(SidebarItemNext, {
key: "first-item",
itemKey: "first-item",
dataHook: "first-item",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 11
}
}, "First"))];
it('should present the sidebar skeleton by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
var _render13, driver, container, firstItemTestKit;
return _regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) switch (_context13.prev = _context13.next) {
case 0:
_render13 = render(/*#__PURE__*/React.createElement(SidebarNext, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 11
}
}, sidebarItem)), driver = _render13.driver, container = _render13.container;
firstItemTestKit = sidebarItemNextTestkitFactory({
wrapper: container,
dataHook: 'first-item'
});
_context13.t0 = expect;
_context13.next = 5;
return driver.isLoading();
case 5:
_context13.t1 = _context13.sent;
(0, _context13.t0)(_context13.t1).toBe(true);
_context13.t2 = expect;
_context13.next = 10;
return firstItemTestKit.exists();
case 10:
_context13.t3 = _context13.sent;
(0, _context13.t2)(_context13.t3).toBe(false);
case 12:
case "end":
return _context13.stop();
}
}, _callee13);
})));
it('should not present the sidebar skeleton when isLoading set to false', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
var _render14, driver, container, firstItemTestKit;
return _regeneratorRuntime.wrap(function _callee14$(_context14) {
while (1) switch (_context14.prev = _context14.next) {
case 0:
_render14 = render(/*#__PURE__*/React.createElement(SidebarNext, {
isLoading: false,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 11
}
}, sidebarItem)), driver = _render14.driver, container = _render14.container;
firstItemTestKit = sidebarItemNextTestkitFactory({
wrapper: container,
dataHook: 'first-item'
});
_context14.t0 = expect;
_context14.next = 5;
return driver.isLoading();
case 5:
_context14.t1 = _context14.sent;
(0, _context14.t0)(_context14.t1).toBe(false);
_context14.t2 = expect;
_context14.next = 10;
return firstItemTestKit.exists();
case 10:
_context14.t3 = _context14.sent;
(0, _context14.t2)(_context14.t3).toBe(true);
case 12:
case "end":
return _context14.stop();
}
}, _callee14);
})));
});
describe('when hidden', function () {
describe('with default width', function () {
it('should add margin left with default sidebar width', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
var _render15, driver;
return _regeneratorRuntime.wrap(function _callee15$(_context15) {
while (1) switch (_context15.prev = _context15.next) {
case 0:
_render15 = render(/*#__PURE__*/React.createElement(SidebarNext, {
hidden: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 37
}
})), driver = _render15.driver;
_context15.t0 = expect;
_context15.next = 4;
return driver.marginLeft();
case 4:
_context15.t1 = _context15.sent;
(0, _context15.t0)(_context15.t1).toBe('calc(-1 * 228px)');
case 6:
case "end":
return _context15.stop();
}
}, _callee15);
})));
});
describe('with custom width', function () {
it('should add margin left', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
var _render16, driver;
return _regeneratorRuntime.wrap(function _callee16$(_context16) {
while (1) switch (_context16.prev = _context16.next) {
case 0:
_render16 = render(/*#__PURE__*/React.createElement(SidebarNext, {
hidden: true,
width: "100%",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 37
}
})), driver = _render16.driver;
_context16.t0 = expect;
_context16.next = 4;
return driver.marginLeft();
case 4:
_context16.t1 = _context16.sent;
(0, _context16.t0)(_context16.t1).toBe('calc(-1 * 100%)');
case 6:
case "end":
return _context16.stop();
}
}, _callee16);
})));
it('should add margin left with px unit with custom integer width', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
var _render17, driver;
return _regeneratorRuntime.wrap(function _callee17$(_context17) {
while (1) switch (_context17.prev = _context17.next) {
case 0:
_render17 = render(/*#__PURE__*/React.createElement(SidebarNext, {
hidden: true,
width: 255,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 37
}
})), driver = _render17.driver;
_context17.t0 = expect;
_context17.next = 4;
return driver.marginLeft();
case 4:
_context17.t1 = _context17.sent;
(0, _context17.t0)(_context17.t1).toBe('calc(-1 * 255px)');
case 6:
case "end":
return _context17.stop();
}
}, _callee17);
})));
});
});
});
});