@wix/design-system
Version:
@wix/design-system
356 lines • 10.2 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["componentDidMount"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/DatePicker/test/DatePicker.visual.jsx",
_this = this;
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import DatePicker from '../DatePicker';
import Box from '../../Box';
import { RTLWrapper } from '../../../stories/utils/RTLWrapper';
import { Category } from '../../../stories/storiesHierarchy';
import { focusElement, clickElement } from '../../utils/test-utils/visual';
export var storySettings = {
category: Category.COMPONENTS,
storyName: 'DatePicker',
dataHook: 'storybook-datepicker'
};
var click = function click() {
return clickElement('wsr-input');
};
var focus = function focus() {
return focusElement('wsr-input');
};
var ExampleDatePicker = function ExampleDatePicker(props) {
var defaultValue = new Date('2017/05/01');
var _useState = useState(defaultValue),
_useState2 = _slicedToArray(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var onChange = function onChange(newValue) {
return setValue(newValue);
};
return /*#__PURE__*/React.createElement(DatePicker, _extends({
value: value,
dataHook: storySettings.dataHook,
onChange: onChange,
placeholderText: "Select Date",
shouldCloseOnSelect: true,
showYearDropdown: false,
showMonthDropdown: false,
locale: "en",
twoMonths: false
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 5
}
}));
};
var testGroups = [{
describe: 'Basic Usage',
tests: [{
describe: 'Date should not be selected',
its: [{
placeholderText: 'Select Date'
}, {
placeholderText: 'Select Date',
disabled: true
}]
}, {
describe: 'Date should be selected',
its: [{
placeholderText: 'Select Date',
value: new Date('08/07/1986')
}, {
placeholderText: 'Select Date',
value: new Date('08/07/1986'),
disabled: true
}, {
placeholderText: 'Select Date',
value: new Date('08/07/1986'),
initialOpen: true
}]
}, {
describe: 'With status',
its: [{
placeholderText: 'Select Date',
status: 'error'
}, {
placeholderText: 'Select Date',
status: 'warning'
}, {
placeholderText: 'Select Date',
status: 'loading'
}]
}, {
describe: 'Sizes',
its: [{
placeholderText: 'Select Date',
size: 'small'
}, {
placeholderText: 'Select Date',
size: 'medium'
}, {
placeholderText: 'Select Date',
size: 'large'
}]
}, {
describe: 'ReadOnly',
its: [{
placeholderText: 'Select Date',
readOnly: false,
value: new Date('03/03/2021')
}, {
placeholderText: 'Select Date',
readOnly: true,
value: new Date('03/03/2021')
}]
}, {
describe: 'ClearButton',
its: [{
placeholderText: 'Select Date',
clearButton: true
}, {
placeholderText: 'Select Date',
value: new Date('03/07/2021'),
clearButton: true
}]
}]
}, {
describe: 'width prop',
tests: [{
describe: 'should be 150px by default',
its: [{
placeholderText: 'Select Date',
value: new Date('08/07/1986')
}]
}, {
describe: 'should accept px values',
its: [{
width: '100px',
placeholderText: 'Select Date',
value: new Date('08/07/1986')
}]
}, {
describe: 'should accept % values',
its: [{
width: '50%',
placeholderText: 'Select Date',
value: new Date('08/07/1986')
}]
}]
}];
testGroups.forEach(function (group) {
group.tests.forEach(function (test) {
storiesOf("DatePicker/".concat(group.describe), module).add(test.describe, function () {
return /*#__PURE__*/React.createElement(Box, {
width: "1024px",
height: "768px",
flexWrap: "wrap",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 7
}
}, test.its.map(function (props) {
return /*#__PURE__*/React.createElement(Box, {
paddingRight: "65px",
direction: "vertical",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Box, {
margin: 2,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(DatePicker, _extends({
width: "auto",
onChange: function onChange() {}
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 15
}
}))));
}));
});
});
});
var rtlTests = [{
describe: 'rtl',
its: [{
it: 'rtl',
props: {
placeholderText: 'Select Date',
value: new Date('08/07/1986'),
rtl: true,
width: '250px'
}
}, {
it: 'with status error',
props: {
placeholderText: 'Select Date',
value: new Date('08/07/1986'),
rtl: true,
width: '250px',
status: 'error'
}
}, {
it: 'with status warning',
props: {
placeholderText: 'Select Date',
value: new Date('08/07/1986'),
rtl: true,
width: '250px',
status: 'warning'
}
}, {
it: 'with status loading',
props: {
placeholderText: 'Select Date',
rtl: true,
width: '250px',
status: 'loading'
}
}]
}];
rtlTests.forEach(function (_ref) {
var describe = _ref.describe,
its = _ref.its;
its.forEach(function (_ref2) {
var it = _ref2.it,
props = _ref2.props;
storiesOf("".concat(DatePicker.displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement(RTLWrapper, {
rtl: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(DatePicker, _extends({
onChange: function onChange() {}
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 9
}
})));
});
});
});
var InteractiveEyeTest = /*#__PURE__*/function (_React$Component) {
function InteractiveEyeTest() {
_classCallCheck(this, InteractiveEyeTest);
return _callSuper(this, InteractiveEyeTest, arguments);
}
_inherits(InteractiveEyeTest, _React$Component);
return _createClass(InteractiveEyeTest, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.componentDidMount();
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
componentDidMount = _this$props.componentDidMount,
restProps = _objectWithoutProperties(_this$props, _excluded);
return /*#__PURE__*/React.createElement(ExampleDatePicker, _extends({}, restProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 12
}
}));
}
}]);
}(React.Component);
var interactiveTests = [{
describe: 'Interactive',
its: [{
it: 'should not open calendar on click when disabled',
componentDidMount: function componentDidMount() {
click();
},
props: {
disabled: true
}
}, {
it: 'should open calendar on click',
componentDidMount: function componentDidMount() {
click();
focus();
}
}, {
it: 'should render a footer on click',
componentDidMount: function componentDidMount() {
click();
focus();
},
props: {
renderFooter: function renderFooter() {
return /*#__PURE__*/React.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 13
}
}, "This is a ", /*#__PURE__*/React.createElement("b", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 25
}
}, "footer"));
}
}
}]
}];
interactiveTests.forEach(function (_ref3) {
var describe = _ref3.describe,
its = _ref3.its;
its.forEach(function (_ref4) {
var it = _ref4.it,
props = _ref4.props,
componentDidMount = _ref4.componentDidMount;
storiesOf("DatePicker".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement(InteractiveEyeTest, _extends({}, props, {
componentDidMount: componentDidMount,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 9
}
}));
});
});
});