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

@wix/design-system

import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/TableListHeader/test/TableListHeader.visual.jsx",
  _this = this;
import React from 'react';
import { storiesOf } from '@storybook/react';
import TableListHeader from '../TableListHeader';
import Text from '../../Text';
import Input from '../../Input';
var commonProps = {
  options: [{
    value: 'Investing',
    width: '2fr',
    align: 'right'
  }, {
    value: '4 posts',
    width: '1fr',
    align: 'center'
  }, {
    value: '30 April 2020',
    width: '20%',
    align: 'left'
  }]
};
var tests = [{
  describe: 'sanity',
  its: [{
    it: 'with checkbox hidden',
    props: {
      checkboxState: 'hidden'
    }
  }, {
    it: 'with checkbox enabled',
    props: {
      checkboxState: 'normal'
    }
  }, {
    it: 'with checkbox checked',
    props: {
      checkboxState: 'checked'
    }
  }, {
    it: 'with checkbox disabled',
    props: {
      checkboxState: 'disabled'
    }
  }, {
    it: 'with checkbox indeterminate',
    props: {
      checkboxState: 'indeterminate'
    }
  }, {
    it: 'with checkbox errored',
    props: {
      checkboxState: 'hasError'
    }
  }]
}, {
  describe: 'ellipsis',
  its: [{
    it: 'should work with Text ellipsis properly',
    props: {
      options: [{
        value: /*#__PURE__*/React.createElement(Text, {
          ellipsis: true,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 66,
            columnNumber: 17
          }
        }, "Very very very very long messagenVery very very very long message Very very very very long message Very very very very long message Very very very very long message Very very very very long message Very very very very long message")
      }]
    }
  }]
}, {
  describe: 'children',
  its: [{
    it: 'children that are not aligned should stretch to 100%',
    props: {
      options: [{
        value: /*#__PURE__*/React.createElement(Input, {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 85,
            columnNumber: 30
          }
        })
      }]
    }
  }, {
    it: 'should display px, fr and % types correctly',
    props: {
      options: [{
        value: 'Hi',
        width: 20
      }, {
        value: 'Hello',
        width: '30%'
      }, {
        value: 'Dzień dobry',
        width: '1fr'
      }, {
        value: 'Guten tag',
        width: '70px'
      }]
    }
  }, {
    it: 'should split space equally if width is not defined',
    props: {
      options: [{
        value: 'Hi'
      }, {
        value: 'Hello'
      }, {
        value: 'Dzień dobry'
      }, {
        value: 'Guten tag'
      }]
    }
  }]
}];
tests.forEach(function (_ref) {
  var describe = _ref.describe,
    its = _ref.its;
  its.forEach(function (_ref2) {
    var it = _ref2.it,
      props = _ref2.props;
    storiesOf("TableListHeader|".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement(TableListHeader, _extends({}, commonProps, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 118,
          columnNumber: 13
        }
      }));
    });
  });
});