Commit 9f52a00e authored by Paul Slaughter's avatar Paul Slaughter

Use @vue/test-utils for tooltip_on_truncate_spec

parent 2b7fb50f
import { mountComponentWithRender } from 'spec/helpers/vue_mount_component_helper';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
const TEST_TITLE = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';
const CLASS_SHOW_TOOLTIP = 'js-show-tooltip';
const STYLE_TRUNCATED = {
display: 'inline-block',
'max-width': '20px',
};
const STYLE_NORMAL = {
display: 'inline-block',
'max-width': '1000px',
};
function mountTooltipOnTruncate(options, createChildren) {
return mountComponentWithRender(h => h(TooltipOnTruncate, options, createChildren(h)), '#app');
}
const STYLE_TRUNCATED = 'display: inline-block; max-width: 20px;';
const STYLE_NORMAL = 'display: inline-block; max-width: 1000px;';
describe('TooltipOnTruncate component', () => {
let vm;
const localVue = createLocalVue();
beforeEach(() => {
const el = document.createElement('div');
el.id = 'app';
document.body.appendChild(el);
});
const createElementWithStyle = (style, content) => `<a href="#" style="${style}">${content}</a>`;
describe('TooltipOnTruncate component', () => {
let wrapper;
const createComponent = ({ propsData, ...options } = {}) => {
wrapper = shallowMount(localVue.extend(TooltipOnTruncate), {
localVue,
sync: false,
attachToDocument: true,
propsData: {
title: TEST_TITLE,
...propsData,
},
...options,
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
const hasTooltip = () => wrapper.classes('js-show-tooltip');
describe('with default target', () => {
it('renders tooltip if truncated', done => {
const options = {
style: STYLE_TRUNCATED,
props: {
title: TEST_TITLE,
createComponent({
attrs: {
style: STYLE_TRUNCATED,
},
};
vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
slots: {
default: [TEST_TITLE],
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
expect(vm.$el).toHaveData('original-title', TEST_TITLE);
expect(vm.$el).toHaveData('placement', 'top');
expect(hasTooltip()).toBe(true);
expect(wrapper.attributes('data-original-title')).toEqual(TEST_TITLE);
expect(wrapper.attributes('data-placement')).toEqual('top');
})
.then(done)
.catch(done.fail);
});
it('does not render tooltip if normal', done => {
const options = {
style: STYLE_NORMAL,
props: {
title: TEST_TITLE,
createComponent({
attrs: {
style: STYLE_NORMAL,
},
};
vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
slots: {
default: [TEST_TITLE],
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
expect(hasTooltip()).toBe(false);
})
.then(done)
.catch(done.fail);
......@@ -71,37 +75,41 @@ describe('TooltipOnTruncate component', () => {
describe('with child target', () => {
it('renders tooltip if truncated', done => {
const options = {
style: STYLE_NORMAL,
props: {
title: TEST_TITLE,
createComponent({
attrs: {
style: STYLE_NORMAL,
},
propsData: {
truncateTarget: 'child',
},
};
vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]);
slots: {
default: createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
expect(hasTooltip()).toBe(true);
})
.then(done)
.catch(done.fail);
});
it('does not render tooltip if normal', done => {
const options = {
props: {
title: TEST_TITLE,
createComponent({
propsData: {
truncateTarget: 'child',
},
};
vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_NORMAL }, TEST_TITLE)]);
slots: {
default: createElementWithStyle(STYLE_NORMAL, TEST_TITLE),
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
expect(hasTooltip()).toBe(false);
})
.then(done)
.catch(done.fail);
......@@ -110,22 +118,25 @@ describe('TooltipOnTruncate component', () => {
describe('with fn target', () => {
it('renders tooltip if truncated', done => {
const options = {
style: STYLE_NORMAL,
props: {
title: TEST_TITLE,
createComponent({
attrs: {
style: STYLE_NORMAL,
},
propsData: {
truncateTarget: el => el.childNodes[1],
},
};
vm = mountTooltipOnTruncate(options, h => [
h('a', { style: STYLE_NORMAL }, TEST_TITLE),
h('span', { style: STYLE_TRUNCATED }, TEST_TITLE),
]);
slots: {
default: [
createElementWithStyle('', TEST_TITLE),
createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
],
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
expect(hasTooltip()).toBe(true);
})
.then(done)
.catch(done.fail);
......@@ -134,20 +145,25 @@ describe('TooltipOnTruncate component', () => {
describe('placement', () => {
it('sets data-placement when tooltip is rendered', done => {
const options = {
props: {
title: TEST_TITLE,
truncateTarget: 'child',
placement: 'bottom',
},
};
const placement = 'bottom';
vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]);
createComponent({
propsData: {
placement,
},
attrs: {
style: STYLE_TRUNCATED,
},
slots: {
default: TEST_TITLE,
},
});
vm.$nextTick()
wrapper.vm
.$nextTick()
.then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
expect(vm.$el).toHaveData('placement', options.props.placement);
expect(hasTooltip()).toBe(true);
expect(wrapper.attributes('data-placement')).toEqual(placement);
})
.then(done)
.catch(done.fail);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment