vimo-dt
Version:
A Vue2.x UI Project For Mobile & HyBrid
381 lines (336 loc) • 11.4 kB
JavaScript
;
var _vueTestUtils = require('vue-test-utils');
var _sinon = require('sinon');
var _sinon2 = _interopRequireDefault(_sinon);
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);
var _index3 = require('../../icon/index');
var _index4 = _interopRequireDefault(_index3);
var _index5 = require('../../item/index');
var _index6 = _interopRequireDefault(_index5);
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _vueServerRenderer = require('vue-server-renderer');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var options = {
propsData: {
color: 'primary',
mode: 'ios'
},
slots: {
default: '<span>Test</span>'
}
};
describe('Button', 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 = '<button class="ion-button button button-md button-default button-default-md button-md-primary"><span class="button-inner"><span>Test</span></span></button>';
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('Test');
});
it('@base: has a button', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
slots: {
default: '<span>DOM</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.find('button')).toBeTruthy();
expect(wrapper.contains('span')).toBeTruthy();
});
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('Button');
});
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-button')).toBeTruthy();
});
it('@base: matches snapshot', function () {
var renderer = (0, _vueServerRenderer.createRenderer)();
var wrapper = (0, _vueTestUtils.mount)(_index2.default, options);
renderer.renderToString(wrapper.vm, function (err, str) {
if (err) throw new Error(err);
expect(str).toMatchSnapshot();
});
});
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('button-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('button-md')).toBeTruthy();
});
it('@props: small', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
small: true
},
slots: {
default: '<span>small</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-small-ios')).toBeTruthy();
});
it('@props: active', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
active: true
},
slots: {
default: '<span>small</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasAttribute('active', 'true')).toBeTruthy();
});
it('@props: default', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
default: true
},
slots: {
default: '<span>default</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-default-ios')).toBeTruthy();
});
it('@props: large', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
large: true
},
slots: {
default: '<span>large</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-large-ios')).toBeTruthy();
});
it('@props: round', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
round: true
},
slots: {
default: '<span>round</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-round-ios')).toBeTruthy();
});
it('@props: full', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
full: true
},
slots: {
default: '<span>round</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-full-ios')).toBeTruthy();
});
it('@props: block', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
block: true
},
slots: {
default: '<span>block</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-block-ios')).toBeTruthy();
});
it('@props: menutoggle', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
menutoggle: true
},
slots: {
default: '<span>menutoggle</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-menutoggle-ios')).toBeTruthy();
});
it('@props: outline', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
outline: true
},
slots: {
default: '<span>outline</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-outline-ios')).toBeTruthy();
});
it('@props: clear', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
clear: true
},
slots: {
default: '<span>clear</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-clear-ios')).toBeTruthy();
});
it('@props: solid', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
solid: true
},
slots: {
default: '<span>solid</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-solid-ios')).toBeTruthy();
});
it('@props: role=action-sheet-button', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
role: 'action-sheet-button'
},
slots: {
default: '<span>role:action-sheet-button</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('action-sheet-button-ios')).toBeTruthy();
});
it('@props: role=bar-button', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
role: 'bar-button'
},
slots: {
default: '<span>role:bar-button</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('bar-button')).toBeTruthy();
});
it('@props: strong', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
propsData: {
mode: 'ios',
strong: true
},
slots: {
default: '<span>strong</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
expect(wrapper.hasClass('button-strong-ios')).toBeTruthy();
});
it('@event: triger click', function () {
var opts = (0, _deepAssign2.default)((0, _lodash2.default)(options), {
slots: {
default: '<span>Click</span>'
}
});
var wrapper = (0, _vueTestUtils.mount)(_index2.default, opts);
_sinon2.default.spy(wrapper.vm, '$_clickHandler');
wrapper.trigger('click');
expect(wrapper.vm.$_clickHandler.callCount === 1).toBeTruthy();
wrapper.vm.$_clickHandler.restore();
});
it('@slots: icon-only', function () {
var res = _vue2.default.compile('<vm-button><Icon name="car"></Icon></vm-button>');
var Temp = {
components: { 'vm-button': _index2.default, Icon: _index4.default },
render: res.render
};
var wrapper = (0, _vueTestUtils.mount)(Temp);
expect(wrapper.hasAttribute('icon-only', 'icon-only')).toBeTruthy();
});
it('@slots: icon-left', function () {
var res = _vue2.default.compile('<vm-button><Icon name="car"></Icon>Icon</vm-button>');
var wrapper = (0, _vueTestUtils.mount)({
render: res.render,
components: { 'vm-button': _index2.default, Icon: _index4.default }
});
expect(wrapper.hasAttribute('icon-left', 'icon-left')).toBeTruthy();
});
it('@slots: icon-right', function () {
var res = _vue2.default.compile('<vm-button>Icon<Icon name="car"></Icon></vm-button>');
var wrapper = (0, _vueTestUtils.mount)({
render: res.render,
components: { 'vm-button': _index2.default, Icon: _index4.default }
});
expect(wrapper.hasAttribute('icon-right', 'icon-right')).toBeTruthy();
});
it('@parent: Item', function () {
var res = _vue2.default.compile('<Item><vm-button>Icon<Icon name="car"></Icon></vm-button></Item>');
var wrapper = (0, _vueTestUtils.mount)({
render: res.render,
components: { 'vm-button': _index2.default, Item: _index6.default, Icon: _index4.default }
});
expect(wrapper.html().indexOf('item-button') > -1).toBeTruthy();
});
});