vimo-dt/lib/components/alert/__tests__/index.spec.js

A Vue2.x UI Project For Mobile & HyBrid

'use strict';

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

var _index2 = _interopRequireDefault(_index);

var _alert = require('../alert.vue');

var _alert2 = _interopRequireDefault(_alert);

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

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

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

var opts = {
  propsData: {
    mode: 'ios',
    title: 'Alert',
    message: 'message',
    cssClass: '  alertCssOuterMain  ',
    enableBackdropDismiss: true,
    buttons: [{
      text: 'Confirm',
      handler: function handler(value) {}
    }]
  },
  mocks: {
    $app: {
      setEnabled: function setEnabled() {}
    }
  }
};
describe('Alert', function () {
  it('@base: renders the correct markup', function () {
    var wrapper = (0, _vueTestUtils.mount)(_alert2.default, opts);

    var markup = '<div class="ion-alert alert-ios alertCssOuterMain"><div class="ion-backdrop" style="left: 0px; top: 0px; display: none;"></div> <div class="alert-wrapper" style="display: none;" name="alert"><!----> <div class="alert-head"><h2 class="alert-title">Alert</h2> <!----></div> <div class="alert-message">message</div> <!----> <div class="alert-button-group"><button class="ion-button alert-button alert-button-ios alert-button-default alert-button-default-ios alert-button-ios-default"><span class="button-inner"><span>Confirm</span></span></button></div></div></div>';

    var text = 'Alert  message  Confirm';
    expect(wrapper.html()).toEqual(markup);
    expect(wrapper.text().trim()).toEqual(text);
    expect(wrapper.find('div')).toBeTruthy();
    expect(wrapper.name()).toEqual('Alert');
    expect(wrapper.hasClass('ion-alert')).toBeTruthy();
    expect(wrapper.hasClass('alertCssOuterMain')).toBeTruthy();
    expect(wrapper.hasClass('alert-ios')).toBeTruthy();
  });

  it('@action: present && dismiss', function () {
    var wrapper = (0, _vueTestUtils.mount)(_alert2.default, opts);
    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(opts));
    _opts.propsData.buttons = ['确定', '取消'];
    _index2.default.present(opts).then(function () {
      expect(_index2.default._i.isActive).toBeTruthy();
      return _index2.default.dismiss().then(function () {
        expect(_index2.default._i.isActive).toBeFalsy();
      });
    });
  });

  it('@input', function () {
    var opts = {
      propsData: {
        title: '登录iTunes Store',
        mode: 'ios',
        message: '请输入您Apple ID"apple@icloud.com"的密码',
        enableBackdropDismiss: true,
        inputs: [{
          type: 'password',
          name: 'password',
          placeholder: '密码',
          value: 'testPassword'
        }],
        buttons: [{
          text: '取消',
          role: 'cancel',
          handler: function handler() {}
        }, {
          text: '确定',
          handler: function handler(value) {
            expect(JSON.stringify(value)).toEqual('{"password":"testPassword"}');
          }
        }]
      }
    };

    var renderer = (0, _vueServerRenderer.createRenderer)();
    var wrapper = (0, _vueTestUtils.mount)(_alert2.default, opts);
    renderer.renderToString(wrapper.vm, function (err, str) {
      if (err) throw new Error(err);
      expect(str).toMatchSnapshot();
    });
  });

  it('@checkbox', function () {
    var opts = {
      propsData: {
        title: '水果来了',
        message: '选择你喜欢吃的水果',
        enableBackdropDismiss: true,
        inputs: [{
          type: 'checkbox',
          value: 'apple',
          label: '苹果',
          checked: true,
          handler: function handler(val) {}
        }, {
          type: 'checkbox',
          value: 'pear',
          label: '梨',
          checked: false,
          disabled: true,
          handler: function handler(val) {}
        }, {
          type: 'checkbox',
          value: 'banana',
          label: '香蕉',
          checked: true,
          handler: function handler(val) {}
        }, {
          type: 'checkbox',
          value: 'orange',
          label: '橘子',
          checked: false,
          handler: function handler(val) {}
        }],
        buttons: [{
          text: '取消',
          role: 'cancel',
          handler: function handler() {}
        }, {
          text: '确定',
          role: '',
          handler: function handler(value) {
            expect(JSON.stringify(value)).toEqual('["apple","banana"]');
          }
        }]
      }
    };

    var renderer = (0, _vueServerRenderer.createRenderer)();
    var wrapper = (0, _vueTestUtils.mount)(_alert2.default, opts);
    renderer.renderToString(wrapper.vm, function (err, str) {
      if (err) throw new Error(err);
      expect(str).toMatchSnapshot();
    });
  });

  it('@radio', function () {
    var opts = {
      propsData: {
        title: '水果来了',
        message: '你只能选择一个',
        enableBackdropDismiss: true,
        inputs: [{
          type: 'radio',
          value: 'apple',
          label: '苹果',
          checked: true,
          handler: function handler(val) {}
        }, {
          type: 'radio',
          value: 'pear',
          label: '梨',
          checked: false,
          disabled: true,
          handler: function handler(val) {}
        }, {
          type: 'radio',
          value: 'banana',
          label: '香蕉',
          checked: false,
          handler: function handler(val) {}
        }, {
          type: 'radio',
          value: 'orange',
          label: '橘子',
          checked: false,
          handler: function handler(val) {}
        }],
        buttons: [{
          text: '取消',
          role: 'cancel',
          handler: function handler() {}
        }, {
          text: '确定',
          role: '',
          handler: function handler(value) {
            expect(value).toEqual('apple');
          }
        }]
      }
    };

    var renderer = (0, _vueServerRenderer.createRenderer)();
    var wrapper = (0, _vueTestUtils.mount)(_alert2.default, opts);
    renderer.renderToString(wrapper.vm, function (err, str) {
      if (err) throw new Error(err);
      expect(str).toMatchSnapshot();
    });
  });
});