@wix/design-system
Version:
@wix/design-system
427 lines • 11.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["index"],
_excluded2 = ["index"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Range/test/Range.visual.jsx",
_this = this;
import React from 'react';
import { storiesOf } from '@wix/wix-storybook-utils/dynamic-stories';
import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
import Range from '../Range';
import inputUniDriverFactory from '../../Input/Input.uni.driver';
import Input from '../../Input';
import DatePicker from '../../DatePicker';
import WixDesignSystemProvider from '../../WixDesignSystemProvider';
var dataHooks = {
focusedInput: 'focused-input',
focusedDatePicker: 'focused-date-picker',
input: 'wsr-input'
};
var datePickerDate = new Date('2020-01-01');
var focusInput = function focusInput(index) {
var node = document.body;
var dataHookSelector = "[data-hook*=".concat(dataHooks.input, "]");
var elements = node.querySelectorAll(dataHookSelector);
elements[index].click();
elements[index].focus();
};
var FocusedInput = function FocusedInput(_ref) {
var index = _ref.index,
props = _objectWithoutProperties(_ref, _excluded);
React.useEffect(function () {
focusInput(index);
}, [index]);
return /*#__PURE__*/React.createElement(Input, _extends({
placeholder: "placeholder",
dataHook: dataHooks.focusedInput
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 5
}
}));
};
var FocusedDatePicker = function FocusedDatePicker(_ref2) {
var index = _ref2.index,
props = _objectWithoutProperties(_ref2, _excluded2);
React.useEffect(function () {
focusInput(index);
}, [index]);
return /*#__PURE__*/React.createElement(DatePicker, _extends({
placeholderText: "placeholder",
dataHook: dataHooks.focusedDatePicker,
value: datePickerDate
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 5
}
}));
};
var tests = [{
describe: 'input',
its: [{
it: 'two elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 13
}
}))
}, {
it: 'three elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 13
}
}))
}]
}, {
describe: 'datePicker',
its: [{
it: 'two elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 13
}
}))
}, {
it: 'three elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 13
}
}))
}]
}, {
describe: 'focus',
its: [{
it: 'first input',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(FocusedInput, {
index: 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 13
}
}))
}, {
it: 'last input',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(FocusedInput, {
index: 1,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 13
}
}))
}, {
it: 'first datePicker',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(FocusedDatePicker, {
index: 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 13
}
}))
}, {
it: 'last datePicker',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(FocusedDatePicker, {
index: 1,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 13
}
}))
}]
}];
tests.forEach(function (_ref3) {
var describe = _ref3.describe,
its = _ref3.its;
return its.forEach(function (_ref4) {
var it = _ref4.it,
renderedComponent = _ref4.renderedComponent;
storiesOf("Range/".concat(describe), module).add(it, function () {
return renderedComponent;
});
});
});
var mobileTests = [{
describe: 'mobile',
its: [{
it: 'stacked inputs',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "From",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "To",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 13
}
}))
}, {
it: 'stacked inputs with label',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement("label", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 13
}
}, "Label example"), /*#__PURE__*/React.createElement(Input, {
placeholder: "From",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "To",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 13
}
}))
}, {
it: 'stacked datePickers',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 13
}
}))
}]
}];
mobileTests.forEach(function (_ref5) {
var describe = _ref5.describe,
its = _ref5.its;
return its.forEach(function (_ref6) {
var it = _ref6.it,
renderedComponent = _ref6.renderedComponent;
storiesOf("Range/".concat(describe), module).add(it, function () {
return /*#__PURE__*/React.createElement(WixDesignSystemProvider, {
mobile: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: '375px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 9
}
}, renderedComponent));
});
});
});