@wix/design-system/dist/cjs/SelectorList/test/SelectorList.visual.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _index = _interopRequireDefault(require("../index"));
var _constants = require("../constants");
var _SelectorList = require("../SelectorList.helpers");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectorList/test/SelectorList.visual.jsx",
  _this = void 0;
var dataHook = 'selector-list';
var sizes = Object.values(_constants.SIZE);
var imageShapes = Object.values(_constants.IMAGE_SHAPE);
var imageSizes = Object.values(_constants.IMAGE_SIZE);
var isEven = function isEven(number) {
  return number % 2 === 0;
};
var ITEMS = Array.from({
  length: 50
}, function (_, index) {
  return {
    id: index,
    title: "Title ".concat(index),
    subtitle: "Subtitle ".concat(index),
    extraText: "Extra Text ".concat(index),
    disabled: isEven(index),
    image: /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: '100%',
        height: '100%',
        background: '#bada55'
      },
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 23,
        columnNumber: 7
      }
    })
  };
});
var SIMPLE_ITEMS = [{
  id: 0,
  title: 'First item'
}, {
  id: 1,
  title: 'Second item'
}, {
  id: 2,
  title: 'Third item'
}];
var Example = function Example(props) {
  return /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({
    dataHook: dataHook,
    height: "540px",
    itemsPerPage: 8,
    dataSource: function dataSource() {
      return Promise.resolve({
        items: ITEMS,
        totalCount: ITEMS.length
      });
    }
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 3
    }
  }));
};

// Focus first item - just focus the list
var FocusFirstItem = function FocusFirstItem() {
  _react["default"].useEffect(function () {
    var timer = setTimeout(function () {
      var content = document.querySelector("[data-hook=\"".concat(dataHook, "\"] [data-hook=\"").concat(_SelectorList.dataHooks.content, "\"]"));
      if (content) {
        content.focus();
      }
    }, 200);
    return function () {
      return clearTimeout(timer);
    };
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
    dataHook: dataHook,
    height: "200px",
    dataSource: function dataSource() {
      return Promise.resolve({
        items: SIMPLE_ITEMS,
        totalCount: SIMPLE_ITEMS.length
      });
    },
    multiple: true,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 5
    }
  });
};

// Focus second item - focus then press ArrowDown
var FocusSecondItem = function FocusSecondItem() {
  _react["default"].useEffect(function () {
    var timer = setTimeout(function () {
      var content = document.querySelector("[data-hook=\"".concat(dataHook, "\"] [data-hook=\"").concat(_SelectorList.dataHooks.content, "\"]"));
      if (content) {
        content.focus();
        // Small delay then press ArrowDown
        setTimeout(function () {
          content.dispatchEvent(new KeyboardEvent('keydown', {
            key: 'ArrowDown',
            bubbles: true
          }));
        }, 50);
      }
    }, 200);
    return function () {
      return clearTimeout(timer);
    };
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
    dataHook: dataHook,
    height: "200px",
    dataSource: function dataSource() {
      return Promise.resolve({
        items: SIMPLE_ITEMS,
        totalCount: SIMPLE_ITEMS.length
      });
    },
    multiple: true,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 5
    }
  });
};
var tests = [{
  describe: 'sanity',
  its: [{
    it: 'sanity',
    props: {}
  }]
}, {
  describe: 'selection',
  its: [{
    it: 'single',
    props: {}
  }, {
    it: 'multiple',
    props: {
      multiple: true
    }
  }]
}, {
  describe: 'empty state',
  its: [{
    it: 'empty state',
    props: {
      dataSource: function dataSource() {
        return Promise.resolve({
          items: [],
          totalCount: 0
        });
      },
      emptyState: 'no items to select'
    }
  }]
}, {
  describe: 'search bar',
  its: [{
    it: 'should render selector list without search bar',
    props: {
      withSearch: false
    }
  }]
}, {
  describe: 'size',
  its: sizes.map(function (size) {
    return {
      it: size,
      props: {
        size: size
      }
    };
  })
}, {
  describe: 'image shape',
  its: imageShapes.map(function (shape) {
    return {
      it: shape,
      props: {
        imageShape: shape
      }
    };
  })
}, {
  describe: 'image size',
  its: imageSizes.map(function (size) {
    return {
      it: size,
      props: {
        imageSize: size
      }
    };
  })
}, {
  describe: 'subtitle',
  its: [{
    it: 'should display subtitle',
    props: {
      subtitle: 'selector list subtitle'
    }
  }]
}];
tests.forEach(function (_ref) {
  var describe = _ref.describe,
    its = _ref.its;
  its.forEach(function (_ref2) {
    var it = _ref2.it,
      props = _ref2.props;
    (0, _react2.storiesOf)("SelectorList".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/_react["default"].createElement(Example, (0, _extends2["default"])({}, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 197,
          columnNumber: 13
        }
      }));
    });
  });
});

// Keyboard focus visual tests
(0, _react2.storiesOf)('SelectorList/keyboard focus', module).add('focus ring on first item', function () {
  return /*#__PURE__*/_react["default"].createElement(FocusFirstItem, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 204,
      columnNumber: 42
    }
  });
}).add('focus ring on second item', function () {
  return /*#__PURE__*/_react["default"].createElement(FocusSecondItem, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 205,
      columnNumber: 43
    }
  });
});