@wix/design-system/dist/esm/MultiSelectCheckbox/test/MultiSelectCheckbox.visual.js

@wix/design-system

import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/MultiSelectCheckbox/test/MultiSelectCheckbox.visual.jsx",
  _this = this;
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) { _defineProperty(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; }
import React, { useEffect } from 'react';
import { storiesOf } from '@storybook/react';
import MultiSelectCheckbox from '../MultiSelectCheckbox';
import { DistributeGlobeSmall } from '@wix/wix-ui-icons-common';
import Box from '../../Box';
import { Cell, Layout } from '../../Layout';
import FormField from '../../FormField';
import { clickElement } from '../../utils/test-utils/visual';
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.createElement(Box, {
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 70,
              columnNumber: 15
            }
          }, option.value, /*#__PURE__*/React.createElement(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 = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  useEffect(function () {
    clickElement(inputDataHook);
  });
  return /*#__PURE__*/React.createElement(MultiSelectCheckbox, _extends({
    dataHook: interactiveDataHook
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 133,
      columnNumber: 10
    }
  }));
};
var MultiSelectCheckboxWithFormFieldStatus = function MultiSelectCheckboxWithFormFieldStatus(props) {
  return /*#__PURE__*/React.createElement(Layout, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(Cell, {
    span: 4,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 139,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement(FormField, {
    status: props.status,
    statusMessage: props.statusMessage,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 9
    }
  }, /*#__PURE__*/React.createElement(MultiSelectCheckbox, {
    placeholder: "Multiselect",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 11
    }
  })), /*#__PURE__*/React.createElement(MultiSelectCheckbox, {
    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;
    storiesOf("MultiSelectCheckbox".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement(Wrapper, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 156,
          columnNumber: 9
        }
      }, /*#__PURE__*/React.createElement(InteractiveEyeTest, _extends({}, 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;
    storiesOf("MultiSelectCheckbox".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement(MultiSelectCheckboxWithFormFieldStatus, _extends({}, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 169,
          columnNumber: 21
        }
      }));
    });
  });
});