@wix/design-system
Version:
@wix/design-system
384 lines • 10.4 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _excluded = ["componentDidMount", "done"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Stepper/test/Stepper.visual.jsx",
_this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect } from 'react';
import { storiesOf } from '@storybook/react';
import { visualize, snap } from 'storybook-snapper';
import Stepper from '../Stepper';
import { Type, FitMode, StepType } from '../constants';
import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
import { stepperDriverFactory } from '../Stepper.uni.driver';
import { storySettings } from './storySettings';
var dataHook = storySettings.dataHook,
storyName = storySettings.storyName;
var onClick = function onClick() {};
var stepperTestkitFactory = uniTestkitFactoryCreator(stepperDriverFactory);
var createDriver = function createDriver() {
return stepperTestkitFactory({
wrapper: document.body,
dataHook: dataHook
});
};
var hoverFirstStep = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(done) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return createDriver().hoverStep(0);
case 2:
done();
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
return function hoverFirstStep(_x) {
return _ref.apply(this, arguments);
};
}();
var getTestNameByType = function getTestNameByType(type, name) {
return "type=".concat(type, "/").concat(name);
};
var generateStepTypeTests = function generateStepTypeTests(type) {
return {
describe: getTestNameByType(type, 'step types'),
its: [{
it: 'disabled',
props: {
type: type,
steps: [{
text: 'This is a long step name'
}, {
text: 'This is a long step name',
type: StepType.Disabled
}, {
text: 'This is a long step name',
type: StepType.Disabled
}, {
text: 'This is a long step name',
type: StepType.Disabled
}, {
text: 'This is a long step name',
type: StepType.Disabled
}, {
text: 'This is a long step name',
type: StepType.Disabled
}, {
text: 'This is a long step name',
type: StepType.Disabled
}],
activeStep: 0
}
}, {
it: 'completed',
props: {
type: type,
steps: [{
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name'
}],
activeStep: 6
}
}, {
it: 'error',
props: {
type: type,
steps: [{
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name'
}],
activeStep: 6
}
}, {
it: 'error & active',
props: {
type: type,
steps: [{
text: 'This is a long step name',
type: StepType.Error
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}],
activeStep: 0
}
}, {
it: 'completed & active',
props: {
type: type,
steps: [{
text: 'This is a long step name',
type: StepType.Completed
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}, {
text: 'This is a long step name'
}],
activeStep: 0
}
}]
};
};
var generateHoverTests = function generateHoverTests(type) {
return {
describe: getTestNameByType(type, 'hover'),
its: [{
it: 'disabled',
props: {
type: type,
steps: [{
text: 'step1',
type: StepType.Disabled
}, {
text: 'step2'
}, {
text: 'step3'
}],
activeStep: 1,
onClick: onClick
},
componentDidMount: hoverFirstStep
}, {
it: 'active',
props: {
type: type,
steps: [{
text: 'step1'
}, {
text: 'step2'
}, {
text: 'step3'
}],
activeStep: 0,
onClick: onClick
},
componentDidMount: hoverFirstStep
}, {
it: 'error & active',
props: {
type: type,
steps: [{
text: 'step1',
type: StepType.Error
}, {
text: 'step2'
}, {
text: 'step3'
}],
activeStep: 0,
onClick: onClick
},
componentDidMount: hoverFirstStep
}, {
it: 'completed & active',
props: {
type: type,
steps: [{
text: 'step1',
type: StepType.Completed
}, {
text: 'step2'
}, {
text: 'step3'
}],
activeStep: 0,
onClick: onClick
},
componentDidMount: hoverFirstStep
}]
};
};
var generateResponsiveTests = function generateResponsiveTests(type) {
return {
describe: getTestNameByType(type, 'responsive'),
its: [{
it: '4 steps',
props: {
type: type,
steps: [{
text: 'First step'
}, {
text: 'Second step'
}, {
text: 'Third step'
}, {
text: 'Forth step'
}],
activeStep: 1
}
}, {
it: '7 steps',
props: {
type: type,
steps: [{
text: 'First step'
}, {
text: 'Second step'
}, {
text: 'Third step'
}, {
text: 'Forth step'
}, {
text: 'Fifth step'
}, {
text: 'Six step'
}, {
text: 'Seventh step'
}],
activeStep: 1
}
}]
};
};
var generateFitModeTests = function generateFitModeTests(type) {
return {
describe: getTestNameByType(type, 'fit'),
its: [{
it: 'stretched',
props: {
type: type,
fit: FitMode.Stretched,
steps: [{
text: 'First step'
}, {
text: 'Second step'
}, {
text: 'Third step'
}, {
text: 'Forth step'
}],
activeStep: 0
}
}]
};
};
var tests = [generateStepTypeTests(Type.Circle), generateStepTypeTests(Type.Text), generateResponsiveTests(Type.Circle), generateResponsiveTests(Type.Text), generateFitModeTests(Type.Circle), generateFitModeTests(Type.Text)];
var interactiveTests = [generateHoverTests(Type.Circle), generateHoverTests(Type.Text)];
tests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props;
storiesOf("".concat(storyName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 20,
width: 966,
border: '1px solid black'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(Stepper, _extends({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 11
}
})));
});
});
});
var InteractiveStepperWrapper = function InteractiveStepperWrapper(_ref4) {
var componentDidMount = _ref4.componentDidMount,
done = _ref4.done,
props = _objectWithoutProperties(_ref4, _excluded);
useEffect(function () {
componentDidMount && componentDidMount(done);
}, [componentDidMount, done]);
return /*#__PURE__*/React.createElement(Stepper, _extends({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 10
}
}));
};
interactiveTests.forEach(function (_ref5) {
var describe = _ref5.describe,
its = _ref5.its;
its.forEach(function (_ref6) {
var it = _ref6.it,
props = _ref6.props,
componentDidMount = _ref6.componentDidMount;
visualize("".concat(storyName, "/").concat(describe), function () {
snap(it, function (done) {
return /*#__PURE__*/React.createElement(InteractiveStepperWrapper, _extends({
dataHook: dataHook
}, props, {
componentDidMount: componentDidMount,
done: done,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 9
}
}));
});
});
});
});