@wix/design-system
Version:
@wix/design-system
308 lines • 8.13 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 '@storybook/react';
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';
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: 33,
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: 47,
columnNumber: 5
}
}));
};
var tests = [{
describe: 'input',
its: [{
it: 'two elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 13
}
}))
}, {
it: 'three elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 13
}
}), /*#__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
}
}))
}]
}, {
describe: 'datePicker',
its: [{
it: 'two elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}
}))
}, {
it: 'three elements',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 13
}
}), /*#__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
}
}))
}]
}, {
describe: 'focus',
its: [{
it: 'first input',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(FocusedInput, {
index: 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 13
}
}))
}, {
it: 'last input',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "placeholder",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(FocusedInput, {
index: 1,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 13
}
}))
}, {
it: 'first datePicker',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(FocusedDatePicker, {
index: 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}
}))
}, {
it: 'last datePicker',
renderedComponent: /*#__PURE__*/React.createElement(Range, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(DatePicker, {
value: datePickerDate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(FocusedDatePicker, {
index: 1,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
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;
});
});
});