UNPKG

@wix/design-system

Version:

@wix/design-system

824 lines 31.7 kB
import _extends from "@babel/runtime/helpers/extends"; import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator"; var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/StatisticsWidget/test/StatisticsWidget.spec.jsx", _this = this; import _regeneratorRuntime from "@babel/runtime/regenerator"; import React from 'react'; import { cleanup, createRendererWithUniDriver } from '../../utils/test-utils/unit'; import StatisticsWidget from '../StatisticsWidget'; import { statisticsWidgetPrivateDriverFactory } from './StatisticsWidget.private.uni.driver'; describe('StatisticsWidget', function () { var render = createRendererWithUniDriver(statisticsWidgetPrivateDriverFactory); afterEach(cleanup); it('should render', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() { var _render, driver; return _regeneratorRuntime.wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: _render = render(/*#__PURE__*/React.createElement(StatisticsWidget, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 19, columnNumber: 31 } })), driver = _render.driver; _context.t0 = expect; _context.next = 4; return driver.exists(); case 4: _context.t1 = _context.sent; (0, _context.t0)(_context.t1).toBe(true); case 6: case "end": return _context.stop(); } }, _callee); }))); describe('With one item', function () { var data; beforeEach(function () { data = { items: [{ value: 'First value', description: 'First description', percentage: 12 }] }; }); describe('value', function () { it('should render value', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() { var _render2, driver, count; return _regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) switch (_context2.prev = _context2.next) { case 0: _render2 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 41, columnNumber: 35 } }))), driver = _render2.driver; _context2.next = 3; return driver.getItemsCount(); case 3: count = _context2.sent; expect(count).toBe(1); case 5: case "end": return _context2.stop(); } }, _callee2); }))); it('should render value based on props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() { var _render3, driver, value, shortValue; return _regeneratorRuntime.wrap(function _callee3$(_context3) { while (1) switch (_context3.prev = _context3.next) { case 0: data.items[0].value = 'Changed value'; _render3 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 50, columnNumber: 35 } }))), driver = _render3.driver; _context3.next = 4; return driver.getValue(0); case 4: value = _context3.sent; _context3.next = 7; return driver.getValueInShort(0); case 7: shortValue = _context3.sent; expect(shortValue).toBeNull(); expect(value).toBe('Changed value'); case 10: case "end": return _context3.stop(); } }, _callee3); }))); it('should render short version', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() { var _render4, driver, shortvalue, value; return _regeneratorRuntime.wrap(function _callee4$(_context4) { while (1) switch (_context4.prev = _context4.next) { case 0: data.items[0].valueInShort = '1K'; _render4 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 61, columnNumber: 35 } }))), driver = _render4.driver; _context4.next = 4; return driver.getValueInShort(0); case 4: shortvalue = _context4.sent; _context4.next = 7; return driver.getValue(0); case 7: value = _context4.sent; expect(shortvalue).toBe('1K'); expect(value).toBe('First value'); case 10: case "end": return _context4.stop(); } }, _callee4); }))); }); describe('isLoading', function () { it('should render a loader instead of value', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() { var _render5, driver, isLoading; return _regeneratorRuntime.wrap(function _callee5$(_context5) { while (1) switch (_context5.prev = _context5.next) { case 0: _render5 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { isLoading: true, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 72, columnNumber: 35 } }))), driver = _render5.driver; _context5.next = 3; return driver.isLoading(0); case 3: isLoading = _context5.sent; expect(isLoading).toBe(true); case 5: case "end": return _context5.stop(); } }, _callee5); }))); it('should render a tiny loader is the size of the widget is tiny', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() { var _render6, driver, isTiny; return _regeneratorRuntime.wrap(function _callee6$(_context6) { while (1) switch (_context6.prev = _context6.next) { case 0: _render6 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { isLoading: true, size: "tiny", __self: _this, __source: { fileName: _jsxFileName, lineNumber: 80, columnNumber: 11 } }))), driver = _render6.driver; _context6.next = 3; return driver.isLoaderTiny(0); case 3: isTiny = _context6.sent; expect(isTiny).toBe(true); case 5: case "end": return _context6.stop(); } }, _callee6); }))); }); describe('description', function () { it('should not exist by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() { var _render7, driver, description; return _regeneratorRuntime.wrap(function _callee7$(_context7) { while (1) switch (_context7.prev = _context7.next) { case 0: data.items[0].description = undefined; _render7 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 92, columnNumber: 35 } }))), driver = _render7.driver; _context7.next = 4; return driver.getDescription(0); case 4: description = _context7.sent; expect(description).toBeNull(); case 6: case "end": return _context7.stop(); } }, _callee7); }))); it('should render based on props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8() { var _render8, driver, description; return _regeneratorRuntime.wrap(function _callee8$(_context8) { while (1) switch (_context8.prev = _context8.next) { case 0: data.items[0].description = 'Changed description'; _render8 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 101, columnNumber: 35 } }))), driver = _render8.driver; _context8.next = 4; return driver.getDescription(0); case 4: description = _context8.sent; expect(description).toBe('Changed description'); case 6: case "end": return _context8.stop(); } }, _callee8); }))); }); describe('Info icon', function () { it('should not exist by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9() { var _render9, driver, info; return _regeneratorRuntime.wrap(function _callee9$(_context9) { while (1) switch (_context9.prev = _context9.next) { case 0: _render9 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 110, columnNumber: 35 } }))), driver = _render9.driver; _context9.next = 3; return driver.isInfoExists(0); case 3: info = _context9.sent; expect(info).toBe(false); case 5: case "end": return _context9.stop(); } }, _callee9); }))); it('should exist when descriptionInfo is set', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0() { var _render0, driver, info; return _regeneratorRuntime.wrap(function _callee0$(_context0) { while (1) switch (_context0.prev = _context0.next) { case 0: data.items[0].descriptionInfo = 'This is a description'; _render0 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 119, columnNumber: 35 } }))), driver = _render0.driver; _context0.next = 4; return driver.isInfoExists(0); case 4: info = _context0.sent; expect(info).toBe(true); case 6: case "end": return _context0.stop(); } }, _callee0); }))); it('should contain passed text', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee1() { var description, _render1, driver; return _regeneratorRuntime.wrap(function _callee1$(_context1) { while (1) switch (_context1.prev = _context1.next) { case 0: description = 'This is a description'; data.items[0].descriptionInfo = description; _render1 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 129, columnNumber: 35 } }))), driver = _render1.driver; _context1.t0 = expect; _context1.next = 6; return driver.getDescriptionInfo(0); case 6: _context1.t1 = _context1.sent; (0, _context1.t0)(_context1.t1).toBe(description); case 8: case "end": return _context1.stop(); } }, _callee1); }))); it('should be null, when there is no descriptionInfo', /*#__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: data.items[0].descriptionInfo = undefined; _render10 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 137, columnNumber: 35 } }))), driver = _render10.driver; _context10.t0 = expect; _context10.next = 5; return driver.getDescriptionInfo(0); case 5: _context10.t1 = _context10.sent; (0, _context10.t0)(_context10.t1).toBeNull(); case 7: case "end": return _context10.stop(); } }, _callee10); }))); }); describe('Percents', function () { it('should not exist by default', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee11() { var _render11, driver, percentage; return _regeneratorRuntime.wrap(function _callee11$(_context11) { while (1) switch (_context11.prev = _context11.next) { case 0: data.items[0].percentage = undefined; _render11 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 147, columnNumber: 35 } }))), driver = _render11.driver; _context11.next = 4; return driver.getPercentage(0); case 4: percentage = _context11.sent; expect(percentage).toBeNull(); case 6: case "end": return _context11.stop(); } }, _callee11); }))); it('should exist when is set', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee12() { var _render12, driver, percentage; return _regeneratorRuntime.wrap(function _callee12$(_context12) { while (1) switch (_context12.prev = _context12.next) { case 0: _render12 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 154, columnNumber: 35 } }))), driver = _render12.driver; _context12.next = 3; return driver.getPercentage(0); case 3: percentage = _context12.sent; expect(percentage).toBe(12); case 5: case "end": return _context12.stop(); } }, _callee12); }))); }); it('should replace undefined value with dash', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee13() { var _render13, driver, value; return _regeneratorRuntime.wrap(function _callee13$(_context13) { while (1) switch (_context13.prev = _context13.next) { case 0: data.items[0].value = undefined; _render13 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 164, columnNumber: 33 } }))), driver = _render13.driver; _context13.next = 4; return driver.getValue(0); case 4: value = _context13.sent; expect(value).toBe('-'); case 6: case "end": return _context13.stop(); } }, _callee13); }))); }); describe('With more then 5 items', function () { var data; beforeEach(function () { global.console.warn = vi.fn(); }); beforeEach(function () { data = { items: [{ value: '1k' }, { value: '2k' }, { value: '3k' }, { value: '4k' }, { value: '5k' }, { value: '6k' }, { value: '7k' }] }; }); it('should print warning in a console', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee14() { return _regeneratorRuntime.wrap(function _callee14$(_context14) { while (1) switch (_context14.prev = _context14.next) { case 0: render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 207, columnNumber: 14 } }))); expect(global.console.warn).toHaveBeenCalled(); case 2: case "end": return _context14.stop(); } }, _callee14); }))); it('should render first 5 items', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee15() { var _render14, driver, valueFirst, valueLast, count; return _regeneratorRuntime.wrap(function _callee15$(_context15) { while (1) switch (_context15.prev = _context15.next) { case 0: _render14 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 213, columnNumber: 33 } }))), driver = _render14.driver; _context15.next = 3; return driver.getValue(0); case 3: valueFirst = _context15.sent; _context15.next = 6; return driver.getValue(4); case 6: valueLast = _context15.sent; _context15.next = 9; return driver.getItemsCount(); case 9: count = _context15.sent; expect(count).toBe(5); expect(valueFirst).toBe('1k'); expect(valueLast).toBe('5k'); case 13: case "end": return _context15.stop(); } }, _callee15); }))); }); describe('Mouse and keyboard actions', function () { var data; var onClick1 = vi.fn(); var onClick2 = vi.fn(); var onClick3 = vi.fn(); beforeEach(function () { data = { items: [{ value: '1st value', description: '1st description', percentage: 12, onClick: onClick1 }, { value: '2nd value', description: '2nd description', percentage: 12 }, { value: '3rd value', description: '3rd description', percentage: 12, onClick: onClick2 }, { value: '4th value', description: '4th description', percentage: 12, onClick: onClick3 }] }; }); afterEach(function () { onClick1.mockReset(); onClick2.mockReset(); onClick3.mockReset(); }); it('should not receive focus, when prop not passed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee16() { var _render15, driver; return _regeneratorRuntime.wrap(function _callee16$(_context16) { while (1) switch (_context16.prev = _context16.next) { case 0: _render15 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 268, columnNumber: 33 } }))), driver = _render15.driver; _context16.t0 = expect; _context16.next = 4; return driver.hasTabIndex(1); case 4: _context16.t1 = _context16.sent; (0, _context16.t0)(_context16.t1).toBe(false); case 6: case "end": return _context16.stop(); } }, _callee16); }))); it('should receive focus, when prop is passed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee17() { var _render16, driver; return _regeneratorRuntime.wrap(function _callee17$(_context17) { while (1) switch (_context17.prev = _context17.next) { case 0: _render16 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 274, columnNumber: 33 } }))), driver = _render16.driver; _context17.t0 = expect; _context17.next = 4; return driver.hasTabIndex(0); case 4: _context17.t1 = _context17.sent; (0, _context17.t0)(_context17.t1).toBe(true); _context17.t2 = expect; _context17.next = 9; return driver.hasTabIndex(2); case 9: _context17.t3 = _context17.sent; (0, _context17.t2)(_context17.t3).toBe(true); _context17.t4 = expect; _context17.next = 14; return driver.hasTabIndex(3); case 14: _context17.t5 = _context17.sent; (0, _context17.t4)(_context17.t5).toBe(true); case 16: case "end": return _context17.stop(); } }, _callee17); }))); it('should not call onclick, when prop not passed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee18() { var _render17, driver; return _regeneratorRuntime.wrap(function _callee18$(_context18) { while (1) switch (_context18.prev = _context18.next) { case 0: _render17 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 282, columnNumber: 33 } }))), driver = _render17.driver; _context18.next = 3; return driver.clickStatistics(1); case 3: expect(onClick1).toHaveBeenCalledTimes(0); case 4: case "end": return _context18.stop(); } }, _callee18); }))); it('should call onClick', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee19() { var _render18, driver; return _regeneratorRuntime.wrap(function _callee19$(_context19) { while (1) switch (_context19.prev = _context19.next) { case 0: _render18 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 289, columnNumber: 33 } }))), driver = _render18.driver; _context19.next = 3; return driver.clickStatistics(0); case 3: expect(onClick1).toHaveBeenCalledTimes(1); case 4: case "end": return _context19.stop(); } }, _callee19); }))); it('should call a callback on Space key press', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee20() { var _render19, driver; return _regeneratorRuntime.wrap(function _callee20$(_context20) { while (1) switch (_context20.prev = _context20.next) { case 0: _render19 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 296, columnNumber: 33 } }))), driver = _render19.driver; _context20.next = 3; return driver.pressSpaceKey(0); case 3: _context20.next = 5; return driver.pressSpaceKey(2); case 5: _context20.next = 7; return driver.pressSpaceKey(3); case 7: expect(onClick1).toHaveBeenCalledTimes(1); expect(onClick2).toHaveBeenCalledTimes(1); expect(onClick3).toHaveBeenCalledTimes(1); case 10: case "end": return _context20.stop(); } }, _callee20); }))); it('should call a callback on Enter key press', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee21() { var _render20, driver; return _regeneratorRuntime.wrap(function _callee21$(_context21) { while (1) switch (_context21.prev = _context21.next) { case 0: _render20 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 307, columnNumber: 33 } }))), driver = _render20.driver; _context21.next = 3; return driver.pressEnterKey(0); case 3: _context21.next = 5; return driver.pressEnterKey(2); case 5: _context21.next = 7; return driver.pressEnterKey(3); case 7: expect(onClick1).toHaveBeenCalledTimes(1); expect(onClick2).toHaveBeenCalledTimes(1); expect(onClick3).toHaveBeenCalledTimes(1); case 10: case "end": return _context21.stop(); } }, _callee21); }))); it('should not call a callback on an item without onClick', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee22() { var _render21, driver; return _regeneratorRuntime.wrap(function _callee22$(_context22) { while (1) switch (_context22.prev = _context22.next) { case 0: _render21 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 318, columnNumber: 33 } }))), driver = _render21.driver; _context22.next = 3; return driver.pressSpaceKey(1); case 3: _context22.next = 5; return driver.pressEnterKey(1); case 5: expect(onClick1).toHaveBeenCalledTimes(0); case 6: case "end": return _context22.stop(); } }, _callee22); }))); }); describe('children', function () { it('should render children', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee23() { var content, dataHook, data, _render22, driver, node; return _regeneratorRuntime.wrap(function _callee23$(_context23) { while (1) switch (_context23.prev = _context23.next) { case 0: content = 'That is a lot'; dataHook = 'stats-widget-child'; data = { items: [{ value: '100', description: 'Money', children: /*#__PURE__*/React.createElement("div", { "data-hook": dataHook, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 335, columnNumber: 23 } }, content) }] }; _render22 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 339, columnNumber: 33 } }))), driver = _render22.driver; _context23.next = 6; return driver.getChildren(0, dataHook); case 6: node = _context23.sent; _context23.t0 = expect; _context23.next = 10; return node.text(); case 10: _context23.t1 = _context23.sent; (0, _context23.t0)(_context23.t1).toBe(content); case 12: case "end": return _context23.stop(); } }, _callee23); }))); it('should support arbitrary props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee24() { var dataHook, data, _render23, driver, node; return _regeneratorRuntime.wrap(function _callee24$(_context24) { while (1) switch (_context24.prev = _context24.next) { case 0: dataHook = 'stats-widget-child'; data = { items: [{ value: '100', description: 'Money', children: /*#__PURE__*/React.createElement("div", { "data-hook": dataHook, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 352, columnNumber: 23 } }), 'data-arbitrary-test-prop': 'exists!' }] }; _render23 = render(/*#__PURE__*/React.createElement(StatisticsWidget, _extends({}, data, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 357, columnNumber: 33 } }))), driver = _render23.driver; _context24.next = 5; return driver.getStatsItem(0); case 5: node = _context24.sent; _context24.t0 = expect; _context24.next = 9; return node.attr('data-arbitrary-test-prop'); case 9: _context24.t1 = _context24.sent; (0, _context24.t0)(_context24.t1).toBe('exists!'); case 11: case "end": return _context24.stop(); } }, _callee24); }))); }); });