wix-style-react
Version:
wix-style-react
511 lines (510 loc) • 15.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _SidebarItemNext = _interopRequireDefault(require("../SidebarItemNext"));
var _SidebarSubMenuNext = _interopRequireDefault(require("../SidebarSubMenuNext"));
var _utils = require("./utils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidebarNext/utils.spec.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var CustomItem = props => /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, (0, _extends2.default)({}, props, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 3
}
}));
var CustomSubMenu = /*#__PURE__*/(0, _react.memo)(props => /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, (0, _extends2.default)({}, props, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 3
}
})));
describe('extractItemNodes', () => {
it('should extract menu structure from sidebar JSX elements', () => {
var {
items,
keyToParentKey
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m2-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 11
}
}), /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m2-i2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 11
}
})), /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m3",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m3-m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m3-m1-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 13
}
})))));
expect(items).toEqual([{
itemKey: 'i1'
}, {
itemKey: 'm2',
items: [{
itemKey: 'm2-i1'
}, {
itemKey: 'm2-i2'
}]
}, {
itemKey: 'm3',
items: [{
itemKey: 'm3-m1',
items: [{
itemKey: 'm3-m1-i1'
}]
}]
}]);
expect(keyToParentKey).toEqual({
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
});
});
it('should handle empty children', () => {
var {
items,
keyToParentKey
} = (0, _utils.extractItemNodes)(null);
expect(items).toEqual([]);
expect(keyToParentKey).toEqual({});
});
it('should ignore JSX elements without itemKey', () => {
var {
items,
keyToParentKey
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}
}), /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m2-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 15
}
}), /*#__PURE__*/_react.default.createElement("span", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m2-i2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 17
}
}))), /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m3",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m3-m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m3-m1-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 19
}
}))))))));
expect(items).toEqual([{
itemKey: 'i1'
}, {
itemKey: 'm2',
items: [{
itemKey: 'm2-i1'
}, {
itemKey: 'm2-i2'
}]
}, {
itemKey: 'm3',
items: [{
itemKey: 'm3-m1',
items: [{
itemKey: 'm3-m1-i1'
}]
}]
}]);
expect(keyToParentKey).toEqual({
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
});
});
it('should handle custom menu and item components', () => {
var {
items,
keyToParentKey
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomItem, {
itemKey: "i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(CustomSubMenu, {
itemKey: "m2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(CustomItem, {
itemKey: "m2-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}
}), /*#__PURE__*/_react.default.createElement(CustomItem, {
itemKey: "m2-i2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 11
}
})), /*#__PURE__*/_react.default.createElement(CustomSubMenu, {
itemKey: "m3",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(CustomSubMenu, {
itemKey: "m3-m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
itemKey: "m3-m1-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 13
}
})))));
expect(items).toEqual([{
itemKey: 'i1'
}, {
itemKey: 'm2',
items: [{
itemKey: 'm2-i1'
}, {
itemKey: 'm2-i2'
}]
}, {
itemKey: 'm3',
items: [{
itemKey: 'm3-m1',
items: [{
itemKey: 'm3-m1-i1'
}]
}]
}]);
expect(keyToParentKey).toEqual({
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
});
});
});
describe('getItemPath', () => {
it('should return path to the item', () => {
var keyToParentKey = {
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
};
var result = (0, _utils.getItemPath)(keyToParentKey, 'm3-m1-i1');
expect(result).toEqual(['m3', 'm3-m1', 'm3-m1-i1']);
});
it('should return an array containing the key itself if parent is not found', () => {
var keyToParentKey = {
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
};
var result = (0, _utils.getItemPath)(keyToParentKey, 'abc');
// TODO: probably should return an empty array. Doesn't change sidebar behavior though.
expect(result).toEqual(['abc']);
});
});
describe('getMenuPath', () => {
it('should return path to the parent menu if the target is an item', () => {
var keyToParentKey = {
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
};
var result = (0, _utils.getMenuPath)(keyToParentKey, 'm3-m1-i1');
expect(result).toEqual(['m3', 'm3-m1']);
});
it('should return path to the menu itself if the target is a menu', () => {
var keyToParentKey = {
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
};
var result = (0, _utils.getMenuPath)(keyToParentKey, 'm3-m1');
expect(result).toEqual(['m3', 'm3-m1']);
});
it('should return an empty array if the key is not found', () => {
var keyToParentKey = {
'm2-i1': 'm2',
'm2-i2': 'm2',
'm3-m1': 'm3',
'm3-m1-i1': 'm3-m1'
};
var result = (0, _utils.getMenuPath)(keyToParentKey, 'abc');
expect(result).toEqual([]);
});
});
describe('getMaxDepth', () => {
it('should return the maximum depth of the menu structure', () => {
{
var {
items
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 42
}
}));
var maxDepth = (0, _utils.getMaxDepth)(items);
expect(maxDepth).toBe(1);
}
{
var {
items: _items
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m1-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 13
}
}), /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m1-i2",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 13
}
}))));
var _maxDepth = (0, _utils.getMaxDepth)(_items);
expect(_maxDepth).toBe(2);
}
{
var {
items: _items2
} = (0, _utils.extractItemNodes)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_SidebarSubMenuNext.default, {
itemKey: "m1-m1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_SidebarItemNext.default, {
itemKey: "m1-m1-i1",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 15
}
})))));
var _maxDepth2 = (0, _utils.getMaxDepth)(_items2);
expect(_maxDepth2).toBe(3);
}
});
it('should return 0 if there are no items', () => {
var maxDepth = (0, _utils.getMaxDepth)([]);
expect(maxDepth).toBe(0);
});
});
describe('pick', () => {
it('should return an object with the specified keys', () => {
var object = {
foo: 'bar',
baz: 'qux',
quux: 'corge'
};
var result = (0, _utils.pick)(object, ['foo', 'quux']);
expect(result).toEqual({
foo: 'bar',
quux: 'corge'
});
});
it('should return an empty object if no keys are specified', () => {
var object = {
foo: 'bar',
baz: 'qux',
quux: 'corge'
};
var result = (0, _utils.pick)(object, []);
expect(result).toEqual({});
});
it('should return an empty object if the specified keys do not exist in the object', () => {
var object = {
foo: 'bar',
baz: 'qux',
quux: 'corge'
};
var result = (0, _utils.pick)(object, ['abc', 'def']);
expect(result).toEqual({});
});
it('should not treat keys as paths', () => {
var object = {
foo: {
bar: 'baz'
}
};
var result = (0, _utils.pick)(object, ['foo.bar']);
expect(result).toEqual({});
});
});
//# sourceMappingURL=utils.spec.js.map