@wix/design-system
Version:
@wix/design-system
571 lines (570 loc) • 22.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _unit = require("../../utils/test-utils/unit");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _FunnelChart = _interopRequireDefault(require("../FunnelChart"));
var _FunnelChartPrivateUni = require("./FunnelChart.private.uni.driver");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FunnelChart/test/FunnelChart.spec.jsx",
_this = void 0;
describe(_FunnelChart["default"].displayName, function () {
var render = (0, _unit.createRendererWithUniDriver)(_FunnelChartPrivateUni.funnelChartPrivateDriverFactory);
var dataExample = [{
value: 1000,
label: 'visits'
}, {
value: 800,
label: 'views'
}, {
value: 400,
label: 'cart'
}];
afterEach(function () {
(0, _unit.cleanup)();
});
it('should render', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
var data, _render, driver;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
data = [{
value: 1000,
label: 'visits'
}, {
value: 800,
label: 'views'
}];
_render = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: data,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 31
}
})), driver = _render.driver;
_context.t0 = expect;
_context.next = 5;
return driver.exists();
case 5:
_context.t1 = _context.sent;
(0, _context.t0)(_context.t1).toBe(true);
case 7:
case "end":
return _context.stop();
}
}, _callee);
})));
describe('multiple items', function () {
it('data should contains atleast 2 items', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var data, driver;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
data = [{
value: 1000,
label: 'visits'
}];
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: data,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 29
}
})).driver;
_context2.t0 = expect;
_context2.next = 5;
return driver.exists();
case 5:
_context2.t1 = _context2.sent;
(0, _context2.t0)(_context2.t1).toBe(false);
case 7:
case "end":
return _context2.stop();
}
}, _callee2);
})));
it('should render 3 items with correct values & labels', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
var driver;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 29
}
})).driver;
_context3.t0 = expect;
_context3.next = 4;
return driver.exists();
case 4:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1).toBe(true);
_context3.t2 = expect;
_context3.next = 9;
return driver.getItemsCount();
case 9:
_context3.t3 = _context3.sent;
(0, _context3.t2)(_context3.t3).toBe(3);
_context3.t4 = expect;
_context3.next = 14;
return driver.getValueAt(0);
case 14:
_context3.t5 = _context3.sent;
(0, _context3.t4)(_context3.t5).toBe('1000');
_context3.t6 = expect;
_context3.next = 19;
return driver.getLabelAt(0);
case 19:
_context3.t7 = _context3.sent;
(0, _context3.t6)(_context3.t7).toBe('visits');
_context3.t8 = expect;
_context3.next = 24;
return driver.getValueAt(1);
case 24:
_context3.t9 = _context3.sent;
(0, _context3.t8)(_context3.t9).toBe('800');
_context3.t10 = expect;
_context3.next = 29;
return driver.getLabelAt(1);
case 29:
_context3.t11 = _context3.sent;
(0, _context3.t10)(_context3.t11).toBe('views');
_context3.t12 = expect;
_context3.next = 34;
return driver.getValueAt(2);
case 34:
_context3.t13 = _context3.sent;
(0, _context3.t12)(_context3.t13).toBe('400');
_context3.t14 = expect;
_context3.next = 39;
return driver.getLabelAt(2);
case 39:
_context3.t15 = _context3.sent;
(0, _context3.t14)(_context3.t15).toBe('cart');
case 41:
case "end":
return _context3.stop();
}
}, _callee3);
})));
it('should render 3 items with display values and values', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
var dataValues, driver;
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
dataValues = [{
value: 2000,
label: 'visits',
displayValue: '2K'
}, {
value: 300000,
label: 'views',
displayValue: '300K'
}, {
value: 150,
label: 'cart'
}];
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataValues,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 29
}
})).driver;
_context4.t0 = expect;
_context4.next = 5;
return driver.exists();
case 5:
_context4.t1 = _context4.sent;
(0, _context4.t0)(_context4.t1).toBe(true);
_context4.t2 = expect;
_context4.next = 10;
return driver.getItemsCount();
case 10:
_context4.t3 = _context4.sent;
(0, _context4.t2)(_context4.t3).toBe(3);
_context4.t4 = expect;
_context4.next = 15;
return driver.getValueAt(0);
case 15:
_context4.t5 = _context4.sent;
(0, _context4.t4)(_context4.t5).toBe('2K');
_context4.t6 = expect;
_context4.next = 20;
return driver.getLabelAt(0);
case 20:
_context4.t7 = _context4.sent;
(0, _context4.t6)(_context4.t7).toBe('visits');
_context4.t8 = expect;
_context4.next = 25;
return driver.getValueAt(1);
case 25:
_context4.t9 = _context4.sent;
(0, _context4.t8)(_context4.t9).toBe('300K');
_context4.t10 = expect;
_context4.next = 30;
return driver.getLabelAt(1);
case 30:
_context4.t11 = _context4.sent;
(0, _context4.t10)(_context4.t11).toBe('views');
_context4.t12 = expect;
_context4.next = 35;
return driver.getValueAt(2);
case 35:
_context4.t13 = _context4.sent;
(0, _context4.t12)(_context4.t13).toBe('150');
_context4.t14 = expect;
_context4.next = 40;
return driver.getLabelAt(2);
case 40:
_context4.t15 = _context4.sent;
(0, _context4.t14)(_context4.t15).toBe('cart');
case 42:
case "end":
return _context4.stop();
}
}, _callee4);
})));
it('should not render badges', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
var driver;
return _regenerator["default"].wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
hideDifferenceBadge: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}
})).driver;
_context5.t0 = expect;
_context5.next = 4;
return driver.exists();
case 4:
_context5.t1 = _context5.sent;
(0, _context5.t0)(_context5.t1).toBe(true);
_context5.t2 = expect;
_context5.next = 9;
return driver.getDifferenceFromDataAt(0);
case 9:
_context5.t3 = _context5.sent;
(0, _context5.t2)(_context5.t3).toBe(null);
case 11:
case "end":
return _context5.stop();
}
}, _callee5);
})));
it('should calculate percentage badge', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
var driver;
return _regenerator["default"].wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 29
}
})).driver;
_context6.t0 = expect;
_context6.next = 4;
return driver.exists();
case 4:
_context6.t1 = _context6.sent;
(0, _context6.t0)(_context6.t1).toBe(true);
_context6.t2 = expect;
_context6.next = 9;
return driver.getDifferenceFromDataAt(0);
case 9:
_context6.t3 = _context6.sent;
(0, _context6.t2)(_context6.t3).toBe('80%');
_context6.t4 = expect;
_context6.next = 14;
return driver.getDifferenceFromDataAt(1);
case 14:
_context6.t5 = _context6.sent;
(0, _context6.t4)(_context6.t5).toBe('50%');
case 16:
case "end":
return _context6.stop();
}
}, _callee6);
})));
it('should not render badge after the last item', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
var driver;
return _regenerator["default"].wrap(function _callee7$(_context7) {
while (1) switch (_context7.prev = _context7.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 29
}
})).driver;
_context7.t0 = expect;
_context7.next = 4;
return driver.exists();
case 4:
_context7.t1 = _context7.sent;
(0, _context7.t0)(_context7.t1).toBe(true);
_context7.t2 = expect;
_context7.next = 9;
return driver.getDifferenceFromDataAt(2);
case 9:
_context7.t3 = _context7.sent;
(0, _context7.t2)(_context7.t3).toBe(null);
case 11:
case "end":
return _context7.stop();
}
}, _callee7);
})));
it('should render badges tooltips', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
var driver;
return _regenerator["default"].wrap(function _callee8$(_context8) {
while (1) switch (_context8.prev = _context8.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
differenceBadgeTooltipContent: function differenceBadgeTooltipContent(_ref9) {
var currentIndex = _ref9.currentIndex,
difference = _ref9.difference;
return "".concat(difference, " from ").concat(dataExample[currentIndex].label, " moved to ").concat(dataExample[currentIndex + 1].label);
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 9
}
})).driver;
_context8.t0 = expect;
_context8.next = 4;
return driver.exists();
case 4:
_context8.t1 = _context8.sent;
(0, _context8.t0)(_context8.t1).toBe(true);
_context8.t2 = expect;
_context8.next = 9;
return driver.getDifferenceTooltipFromDataAt(0);
case 9:
_context8.t3 = _context8.sent;
(0, _context8.t2)(_context8.t3).toBe('80% from visits moved to views');
case 11:
case "end":
return _context8.stop();
}
}, _callee8);
})));
it('should render 1st badge with "medium" size tooltip', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
var driver;
return _regenerator["default"].wrap(function _callee9$(_context9) {
while (1) switch (_context9.prev = _context9.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
differenceBadgeTooltipProps: function differenceBadgeTooltipProps(_ref1) {
var currentIndex = _ref1.currentIndex;
return {
size: currentIndex ? 'small' : 'medium'
};
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 9
}
})).driver;
_context9.t0 = expect;
_context9.next = 4;
return driver.exists();
case 4:
_context9.t1 = _context9.sent;
(0, _context9.t0)(_context9.t1).toBe(true);
_context9.t2 = expect;
_context9.next = 9;
return driver.getDifferenceTooltipSizeAt(0);
case 9:
_context9.t3 = _context9.sent;
(0, _context9.t2)(_context9.t3).toBe('medium');
_context9.t4 = expect;
_context9.next = 14;
return driver.getDifferenceTooltipSizeAt(1);
case 14:
_context9.t5 = _context9.sent;
(0, _context9.t4)(_context9.t5).toBe('small');
case 16:
case "end":
return _context9.stop();
}
}, _callee9);
})));
it('should render 1st step with "success" skin', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
var driver;
return _regenerator["default"].wrap(function _callee0$(_context0) {
while (1) switch (_context0.prev = _context0.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
differenceStepSkin: function differenceStepSkin(_ref11) {
var currentIndex = _ref11.currentIndex;
return currentIndex ? 'standard' : 'success';
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 9
}
})).driver;
_context0.t0 = expect;
_context0.next = 4;
return driver.exists();
case 4:
_context0.t1 = _context0.sent;
(0, _context0.t0)(_context0.t1).toBe(true);
_context0.t2 = expect;
_context0.next = 9;
return driver.getDifferenceStepSkinAt(0);
case 9:
_context0.t3 = _context0.sent;
(0, _context0.t2)(_context0.t3).toBe('success');
_context0.t4 = expect;
_context0.next = 14;
return driver.getDifferenceStepSkinAt(1);
case 14:
_context0.t5 = _context0.sent;
(0, _context0.t4)(_context0.t5).toBe('standard');
case 16:
case "end":
return _context0.stop();
}
}, _callee0);
})));
it('should render 1st and 3rd badges with "general" skin', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
var dataValues, driver;
return _regenerator["default"].wrap(function _callee1$(_context1) {
while (1) switch (_context1.prev = _context1.next) {
case 0:
dataValues = [].concat(dataExample, [{
value: 300,
label: 'checkout'
}]);
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataValues,
differenceBadgeProps: function differenceBadgeProps(_ref13) {
var currentIndex = _ref13.currentIndex;
return {
skin: currentIndex !== 1 ? 'general' : 'standard'
};
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 9
}
})).driver;
_context1.t0 = expect;
_context1.next = 5;
return driver.exists();
case 5:
_context1.t1 = _context1.sent;
(0, _context1.t0)(_context1.t1).toBe(true);
_context1.t2 = expect;
_context1.next = 10;
return driver.getDifferenceBadgeSkinAt(0);
case 10:
_context1.t3 = _context1.sent;
(0, _context1.t2)(_context1.t3).toBe('general');
_context1.t4 = expect;
_context1.next = 15;
return driver.getDifferenceBadgeSkinAt(1);
case 15:
_context1.t5 = _context1.sent;
(0, _context1.t4)(_context1.t5).toBe('standard');
_context1.t6 = expect;
_context1.next = 20;
return driver.getDifferenceBadgeSkinAt(2);
case 20:
_context1.t7 = _context1.sent;
(0, _context1.t6)(_context1.t7).toBe('general');
case 22:
case "end":
return _context1.stop();
}
}, _callee1);
})));
it('should render badges with icons', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
var driver;
return _regenerator["default"].wrap(function _callee10$(_context10) {
while (1) switch (_context10.prev = _context10.next) {
case 0:
driver = render(/*#__PURE__*/_react["default"].createElement(_FunnelChart["default"], {
data: dataExample,
differenceBadgeProps: function differenceBadgeProps() {
return {
prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.BuildSmall, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 25
}
})
};
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 9
}
})).driver;
_context10.t0 = expect;
_context10.next = 4;
return driver.exists();
case 4:
_context10.t1 = _context10.sent;
(0, _context10.t0)(_context10.t1).toBe(true);
_context10.t2 = expect;
_context10.next = 9;
return driver.differenceBadgeHasIconAt(0);
case 9:
_context10.t3 = _context10.sent;
(0, _context10.t2)(_context10.t3).toBe(true);
_context10.t4 = expect;
_context10.next = 14;
return driver.differenceBadgeHasIconAt(1);
case 14:
_context10.t5 = _context10.sent;
(0, _context10.t4)(_context10.t5).toBe(true);
case 16:
case "end":
return _context10.stop();
}
}, _callee10);
})));
});
});