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

@wix/design-system

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _excluded = ["componentDidMount", "onDone"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/ModalPreviewLayout/test/ModalPreviewLayout.visual.jsx",
  _this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import Box from '../../Box';
import Button from '../../Button';
import IconButton from '../../IconButton';
import { Print, More } from '@wix/wix-ui-icons-common';
import ModalPreviewLayout from '..';
import Modal from '../../Modal';
import { snap, visualize, story } from 'storybook-snapper';
import { clickElement, focusElement } from '../../utils/test-utils/visual';
var dataHook = 'storybook-modal-preview-layout';
var nextButtonDataHook = 'preview-modal-right-arrow';
var clickNextNavigationButton = function clickNextNavigationButton() {
  return clickElement(nextButtonDataHook);
};
var focusNextNavigationButton = function focusNextNavigationButton() {
  return focusElement(nextButtonDataHook);
};
var commonProps = {
  title: 'Basic Website Design',
  onClose: function onClose() {
    return null;
  }
};
var multipleChildren = ['first', 'second', 'third'].map(function (ordinalNum) {
  return /*#__PURE__*/React.createElement(Box, {
    width: "90vw",
    height: "100%",
    align: "center",
    verticalAlign: "middle",
    backgroundColor: "D80",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 23,
      columnNumber: 3
    }
  }, "".concat(ordinalNum, " content page"));
});
var actions = /*#__PURE__*/React.createElement(Box, {
  align: "space-between",
  width: "276px",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 35,
    columnNumber: 3
  }
}, /*#__PURE__*/React.createElement(Button, {
  prefixIcon: /*#__PURE__*/React.createElement(Print, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 25
    }
  }),
  skin: "dark",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 36,
    columnNumber: 5
  }
}, "Print"), /*#__PURE__*/React.createElement(Button, {
  priority: "secondary",
  skin: "light",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 39,
    columnNumber: 5
  }
}, "Send"), /*#__PURE__*/React.createElement(IconButton, {
  priority: "secondary",
  size: "small",
  skin: "light",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 42,
    columnNumber: 5
  }
}, /*#__PURE__*/React.createElement(More, {
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 43,
    columnNumber: 7
  }
})));
var tests = [{
  describe: 'sanity',
  its: [{
    it: 'scrollable',
    props: {
      children: /*#__PURE__*/React.createElement(Box, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 56,
          columnNumber: 13
        }
      }, /*#__PURE__*/React.createElement("img", {
        src: "ascend-invoice.jpg",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 15
        }
      })),
      actions: actions
    }
  }, {
    it: 'full width',
    props: {
      children: /*#__PURE__*/React.createElement(Box, {
        verticalAlign: "middle",
        height: "100%",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 67,
          columnNumber: 13
        }
      }, /*#__PURE__*/React.createElement("img", {
        src: "solid-yellow.jpg",
        width: "100%",
        height: "550px",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 68,
          columnNumber: 15
        }
      })),
      actions: actions
    }
  }, {
    it: 'simple content',
    props: {
      children: /*#__PURE__*/React.createElement(Box, {
        align: "center",
        verticalAlign: "middle",
        backgroundColor: "D80",
        width: "800px",
        height: "100%",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 13
        }
      }, "Simple Content")
    }
  }]
}, {
  describe: 'multiple children',
  its: [{
    it: 'Navigation buttons on render',
    props: {
      children: multipleChildren
    }
  }, {
    it: 'Navigation buttons on middle child node',
    props: {
      children: multipleChildren
    },
    componentDidMount: function componentDidMount() {
      clickNextNavigationButton();
      focusNextNavigationButton();
    }
  }, {
    it: 'NavigationButton on last child node',
    props: {
      children: multipleChildren
    },
    componentDidMount: function () {
      var _componentDidMount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return clickNextNavigationButton();
            case 2:
              _context.next = 4;
              return clickNextNavigationButton();
            case 4:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      function componentDidMount() {
        return _componentDidMount.apply(this, arguments);
      }
      return componentDidMount;
    }()
  }]
}, {
  describe: 'skin',
  its: [{
    it: 'light',
    props: {
      children: multipleChildren,
      skin: 'light'
    }
  }]
}];
var InteractiveModalPreviewLayout = function InteractiveModalPreviewLayout(_ref) {
  var componentDidMount = _ref.componentDidMount,
    onDone = _ref.onDone,
    props = _objectWithoutProperties(_ref, _excluded);
  var afterModalOpenCallback = function afterModalOpenCallback() {
    componentDidMount && componentDidMount();
    /* waiting to tooltip animation to finish executing */
    setTimeout(onDone, 500);
  };
  return /*#__PURE__*/React.createElement(Modal, {
    onAfterOpen: afterModalOpenCallback,
    isOpen: true,
    screen: "full",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(ModalPreviewLayout, _extends({}, commonProps, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 7
    }
  })));
};
visualize('ModalPreviewLayout', function () {
  tests.forEach(function (_ref2) {
    var describe = _ref2.describe,
      its = _ref2.its;
    story(describe, function () {
      its.forEach(function (_ref3) {
        var it = _ref3.it,
          props = _ref3.props,
          componentDidMount = _ref3.componentDidMount;
        snap(it, function (done) {
          return /*#__PURE__*/React.createElement(InteractiveModalPreviewLayout, _extends({}, commonProps, props, {
            dataHook: dataHook,
            componentDidMount: componentDidMount,
            onDone: done,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 151,
              columnNumber: 11
            }
          }));
        });
      });
    });
  });
});