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

@wix/design-system

import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SelectorList/test/SelectorList.visual.jsx",
  _this = this;
import React from 'react';
import { storiesOf } from '@storybook/react';
import SelectorList from '../index';
import { IMAGE_SHAPE, IMAGE_SIZE, SIZE } from '../constants';
import { dataHooks } from '../SelectorList.helpers';
var dataHook = 'selector-list';
var sizes = Object.values(SIZE);
var imageShapes = Object.values(IMAGE_SHAPE);
var imageSizes = Object.values(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.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.createElement(SelectorList, _extends({
    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.useEffect(function () {
    var timer = setTimeout(function () {
      var content = document.querySelector("[data-hook=\"".concat(dataHook, "\"] [data-hook=\"").concat(dataHooks.content, "\"]"));
      if (content) {
        content.focus();
      }
    }, 200);
    return function () {
      return clearTimeout(timer);
    };
  }, []);
  return /*#__PURE__*/React.createElement(SelectorList, {
    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.useEffect(function () {
    var timer = setTimeout(function () {
      var content = document.querySelector("[data-hook=\"".concat(dataHook, "\"] [data-hook=\"").concat(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.createElement(SelectorList, {
    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;
    storiesOf("SelectorList".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement(Example, _extends({}, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 197,
          columnNumber: 13
        }
      }));
    });
  });
});

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