vimo/lib/components/action-sheet/__tests__/index.spec.js

A Vue2.x UI Project For Mobile & HyBrid

'use strict';

var _index = require('../index.js');

var _index2 = _interopRequireDefault(_index);

var _actionSheet = require('../action-sheet.vue');

var _actionSheet2 = _interopRequireDefault(_actionSheet);

var _vueTestUtils = require('vue-test-utils');

var _vueServerRenderer = require('vue-server-renderer');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var options = {
  propsData: {
    title: '请选择操作',
    subTitle: '注意，选择后不能撤销！',
    cssClass: '  ActionSheetCssClass1 ActionSheetCssClass2  ',
    enableBackdropDismiss: true,
    buttons: [{
      text: '增加',
      handler: function handler() {
        console.log('增加 clicked');
      }
    }, {
      text: '取消',
      role: 'cancel',
      handler: function handler() {
        console.debug('取消 clicked');
      }
    }, {
      text: '删除',
      role: 'destructive',
      handler: function handler() {
        console.debug('删除 clicked');
      }
    }, {
      text: '选择',
      role: 'selected',
      handler: function handler() {
        console.debug('删除 clicked');
      }
    }]
  },
  mocks: {
    $app: {
      setEnabled: function setEnabled() {},
      $_disableScroll: function $_disableScroll() {}
    }
  }
};
describe('ActionSheet', function () {
  it('@base: renders the correct markup', function () {
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, options);

    var markup = '<div class="ion-action-sheet action-sheet-ios ActionSheetCssClass1 ActionSheetCssClass2"><div class="ion-backdrop" style="left: 0px; top: 0px; display: none;"></div> <div class="action-sheet-wrapper" style="display: none;" name="action-sheet"><div class="action-sheet-container"><div class="action-sheet-group"><div class="action-sheet-title"><span>请选择操作</span> <div class="action-sheet-sub-title">注意，选择后不能撤销！</div></div> <div class="action-sheet-buttons"><button class="ion-button action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default" icon-left=""><span class="button-inner"><!----> <span>增加</span></span></button><button class="ion-button action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default  action-sheet-destructive" icon-left=""><span class="button-inner"><!----> <span>删除</span></span></button><button class="ion-button action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default  action-sheet-selected" icon-left=""><span class="button-inner"><!----> <span>选择</span></span></button></div></div> <div class="action-sheet-group"><button class="ion-button action-sheet-cancel action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default" icon-left=""><span class="button-inner"><!----> <span>取消</span></span></button></div></div></div></div>';

    expect(wrapper.html()).toEqual(markup);
  });

  it('@base: renders the correct markup(array button)', function () {
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, {
      propsData: {
        title: '请选择操作',
        subTitle: '注意，选择后不能撤销！',
        cssClass: '  ActionSheetCssClass1 ActionSheetCssClass2  ',
        enableBackdropDismiss: true,
        buttons: ['增加', '取消']
      },
      mocks: {
        $app: {
          setEnabled: function setEnabled() {}
        }
      }
    });

    var markup = '<div class="ion-action-sheet action-sheet-ios ActionSheetCssClass1 ActionSheetCssClass2"><div class="ion-backdrop" style="left: 0px; top: 0px; display: none;"></div> <div class="action-sheet-wrapper" style="display: none;" name="action-sheet"><div class="action-sheet-container"><div class="action-sheet-group"><div class="action-sheet-title"><span>请选择操作</span> <div class="action-sheet-sub-title">注意，选择后不能撤销！</div></div> <div class="action-sheet-buttons"><button class="ion-button action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default" icon-left=""><span class="button-inner"><!----> <span>增加</span></span></button><button class="ion-button action-sheet-button action-sheet-button-ios action-sheet-button-default action-sheet-button-default-ios action-sheet-button-ios-default" icon-left=""><span class="button-inner"><!----> <span>取消</span></span></button></div></div> <!----></div></div></div>';

    expect(wrapper.html()).toEqual(markup);
  });

  it('@base: matches snapshot', function () {
    var renderer = (0, _vueServerRenderer.createRenderer)();
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, options);
    renderer.renderToString(wrapper.vm, function (err, str) {
      if (err) throw new Error(err);
      expect(str).toMatchSnapshot();
    });
  });

  it('@action: present && dismiss', function () {
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, options);
    wrapper.vm.present().then(function () {
      expect(wrapper.vm.isActive).toBeTruthy();
      return wrapper.vm.dismiss().then(function () {
        expect(wrapper.vm.isActive).toBeFalsy();
      });
    });
  });

  it('@action<controller>: present && dismiss', function () {
    var opts = JSON.parse(JSON.stringify(options));
    opts.propsData.buttons = ['确定', '取消'];
    _index2.default.present(options).then(function () {
      expect(_index2.default._i.isActive).toBeTruthy();
      return _index2.default.dismiss().then(function () {
        expect(_index2.default._i.isActive).toBeFalsy();
      });
    });
  });

  it('@action<click>:false', function (cb) {
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, options);
    wrapper.vm.enabled = true;
    wrapper.vm.click({
      handler: function handler() {
        return false;
      }
    });
    cb();
  });

  it('@action<click>:true', function (cb) {
    var wrapper = (0, _vueTestUtils.mount)(_actionSheet2.default, options);
    wrapper.vm.enabled = true;
    wrapper.vm.click({
      handler: function handler() {
        return true;
      }
    });
    cb();
  });
});