@wix/design-system
Version:
@wix/design-system
271 lines (270 loc) • 8.94 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@storybook/react");
var _MultiSelectCheckbox = _interopRequireDefault(require("../MultiSelectCheckbox"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Box = _interopRequireDefault(require("../../Box"));
var _Layout = require("../../Layout");
var _FormField = _interopRequireDefault(require("../../FormField"));
var _visual = require("../../utils/test-utils/visual");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MultiSelectCheckbox/test/MultiSelectCheckbox.visual.jsx",
_this = void 0;
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); }
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) { (0, _defineProperty2["default"])(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; }
var interactiveDataHook = 'interactive-multiselectcheckbox';
var inputDataHook = 'wsr-input';
var defaultProps = {
options: [{
value: 'Alabama',
id: 'AL'
}, {
value: 'Alaska',
id: 'AK'
}, {
value: 'Arizona',
id: 'AZ'
}, {
value: 'Arkansas',
id: 'AR'
}, {
value: 'California',
id: 'CA'
}, {
value: 'North Carolina',
id: 'NC'
}, {
value: 'Colorado',
id: 'CO'
}, {
value: 'Connecticut',
id: 'CT'
}, {
value: 'Delaware',
id: 'DL'
}, {
value: 'Florida',
id: 'FL'
}, {
value: 'Georgia',
id: 'GA'
}, {
value: 'Hawaii',
id: 'HI'
}, {
value: 'Idaho',
id: 'IL'
}, {
value: 'Illinois',
id: 'IN'
}, {
value: 'Indiana',
id: 'IA'
}]
};
var interactiveTests = [{
describe: '',
its: [{
it: 'Simple',
props: {}
}, {
it: 'Selected items',
props: {
selectedOptions: ['AL', 'AZ', 'AR']
}
}, {
it: 'ReadOnly',
props: {
selectedOptions: ['AL', 'AZ', 'AR'],
readOnly: true
}
}, {
it: 'Disabled items',
props: {
selectedOptions: ['AL', 'AZ', 'AR'],
options: defaultProps.options.map(function (option, index) {
return _objectSpread(_objectSpread({}, option), {}, {
disabled: index > 2
});
})
}
}, {
it: 'Custom items',
props: {
selectedOptions: ['AL', 'AZ', 'AR'],
options: defaultProps.options.map(function (option, index) {
return {
value: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}
}, option.value, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.DistributeGlobeSmall, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 17
}
})),
label: option.value,
id: option.id,
disabled: index > 2
};
}),
valueParser: function valueParser(option) {
return option.label ? option.label : option.value;
}
}
}, {
it: 'Value',
props: {
value: 'Custom value',
options: defaultProps.options.map(function (option) {
return _objectSpread(_objectSpread({}, option), {}, {
value: option.value.toLowerCase()
});
})
}
}, {
it: 'Empty state',
props: {
emptyStateMessage: 'No results found',
options: [],
value: 'Custom value'
}
}]
}];
var MultiSelectCheckboxWithFormFieldStatusTests = [{
describe: 'MultiSelectCheckboxWithFormField',
its: [{
it: 'error',
props: {
selectedOptions: [],
status: 'error',
statusMessage: 'This is an error'
}
}, {
it: 'warning',
props: {
selectedOptions: [],
status: 'warning',
statusMessage: 'This is a warning'
}
}]
}];
var InteractiveEyeTest = function InteractiveEyeTest(_ref) {
var props = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
(0, _react.useEffect)(function () {
(0, _visual.clickElement)(inputDataHook);
});
return /*#__PURE__*/_react["default"].createElement(_MultiSelectCheckbox["default"], (0, _extends2["default"])({
dataHook: interactiveDataHook
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 10
}
}));
};
var MultiSelectCheckboxWithFormFieldStatus = function MultiSelectCheckboxWithFormFieldStatus(props) {
return /*#__PURE__*/_react["default"].createElement(_Layout.Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_Layout.Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_FormField["default"], {
status: props.status,
statusMessage: props.statusMessage,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_MultiSelectCheckbox["default"], {
placeholder: "Multiselect",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
})), /*#__PURE__*/_react["default"].createElement(_MultiSelectCheckbox["default"], {
status: props.status,
placeholder: "Multiselect",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 9
}
})));
};
interactiveTests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props,
_ref3$wrapper = _ref3.wrapper,
Wrapper = _ref3$wrapper === void 0 ? function (_ref4) {
var children = _ref4.children;
return children;
} : _ref3$wrapper;
(0, _react2.storiesOf)("MultiSelectCheckbox".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(Wrapper, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(InteractiveEyeTest, (0, _extends2["default"])({}, defaultProps, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 11
}
})));
});
});
});
MultiSelectCheckboxWithFormFieldStatusTests.forEach(function (_ref5) {
var describe = _ref5.describe,
its = _ref5.its;
its.forEach(function (_ref6) {
var it = _ref6.it,
props = _ref6.props;
(0, _react2.storiesOf)("MultiSelectCheckbox".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(MultiSelectCheckboxWithFormFieldStatus, (0, _extends2["default"])({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 21
}
}));
});
});
});