vimo-dt/lib/components/item/__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 options = {
  propsData: {
    color: 'primary',
    mode: 'ios'
  },
  slots: {
    'item-left': '<span>item-left</span>',
    default: '<span>Test</span>',
    'item-right': '<span>item-right</span>'
  }
};

describe('Item', function () {
  it('@base: renders the correct markup', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        mode: 'md'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    var result = '<div class="ion-item item-md item-block item-md-primary"><span item-left="">item-left</span> <div class="item-inner"><div class="input-wrapper"><span>Test</span></div> <span item-right="">item-right</span></div></div>';
    expect(wrapper.html()).toEqual(result);
  });

  it('@base: renders the correct text', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      slots: {
        default: '<span>Test</span>'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    expect(wrapper.text()).toEqual('item-left Test item-right');
  });

  it('@base: component must have a name', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      slots: {
        default: '<span>Name</span>'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    expect(wrapper.name()).toEqual('Item');
  });

  it('@base: have the right className', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      slots: {
        default: '<span>HasClass</span>'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    expect(wrapper.hasClass('ion-item')).toBeTruthy();
  });

  it('@props: color', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        color: 'danger',
        mode: 'md'
      },
      slots: {
        default: '<span>color</span>'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    expect(wrapper.hasClass('item-md-danger')).toBeTruthy();
  });

  it('@props: mode', function () {
    var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
      propsData: {
        mode: 'md'
      },
      slots: {
        default: '<span>mode</span>'
      }
    });
    var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
    expect(wrapper.hasClass('item-md')).toBeTruthy();
  });

  it('@props: mode(default)', function () {
    var wrapper = (0, _vueTestUtils.mount)(_index2.default);
    expect(wrapper.hasClass('item-ios')).toBeTruthy();
  });
});