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

A Vue2.x UI Project For Mobile & HyBrid

'use strict';

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

var _deepAssign = require('deep-assign');

var _deepAssign2 = _interopRequireDefault(_deepAssign);

var _lodash = require('lodash.clonedeep');

var _lodash2 = _interopRequireDefault(_lodash);

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

var _index2 = _interopRequireDefault(_index);

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

var wrapper = null;
var options = {
  slots: {
    default: '<span>Test</span>'
  }
};

describe('Fab', function () {
  it('@base: renders the correct markup', function () {
    wrapper = (0, _vueTestUtils.mount)(_index2.default, options);
    var result = '<div class="ion-fab"><span>Test</span></div>';
    expect(wrapper.html()).toEqual(result);
  });

  it('@base: component must have a name', function () {
    wrapper = (0, _vueTestUtils.mount)(_index2.default, options);
    expect(wrapper.name()).toEqual('Fab');
  });

  it('@base: have the right className', function () {
    wrapper = (0, _vueTestUtils.mount)(_index2.default, options);
    expect(wrapper.hasClass('ion-fab')).toBeTruthy();
  });

  it('@props: top && left', function (cb) {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        top: true,
        left: true
      }
    });
    wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    window.setTimeout(function () {
      var result = '<div class="ion-fab" style="top: 10px; left: 10px;"><span>Test</span></div>';
      expect(wrapper.html()).toEqual(result);
      cb();
    }, 0);
  });

  it('@props: top && right && edge', function (cb) {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        top: true,
        edge: true,
        right: true
      }
    });
    wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    window.setTimeout(function () {
      var result = '<div class="ion-fab" style="top: 0px; right: 10px;"><span>Test</span></div>';
      expect(wrapper.html()).toEqual(result);
      cb();
    }, 0);
  });

  it('@props: bottom && left', function (cb) {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        bottom: true,
        left: true
      }
    });
    wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    window.setTimeout(function () {
      var result = '<div class="ion-fab" style="bottom: 10px; left: 10px;"><span>Test</span></div>';
      expect(wrapper.html()).toEqual(result);
      cb();
    }, 0);
  });

  it('@props: bottom && right', function (cb) {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        bottom: true,
        right: true
      }
    });
    wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    window.setTimeout(function () {
      var result = '<div class="ion-fab" style="bottom: 10px; right: 10px;"><span>Test</span></div>';
      expect(wrapper.html()).toEqual(result);
      cb();
    }, 0);
  });

  it('@props: middle && center', function (cb) {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        middle: true,
        center: true
      }
    });
    wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    window.setTimeout(function () {
      var result = '<div class="ion-fab" style="left: 50%; margin-left: 0px; top: 50%; position: fixed;"><span>Test</span></div>';
      expect(wrapper.html()).toEqual(result);
      cb();
    }, 0);
  });
});