Skip to content

G
gitlab-ce
Commit 9fa2b657 authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch 'fe-vue-test-utils-for-tooltip-on-truncate-spec' into 'master' 

Use @vue/test-utils for tooltip_on_truncate_spec

See merge request gitlab-org/gitlab-ce!29249
parents e66faa63 9f52a00e
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 82 deletions
spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
View file @ 9fa2b657
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'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
const TEST_TITLE = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do'; 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_TRUNCATED = { const STYLE_NORMAL = 'display: inline-block; max-width: 1000px;';
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');
}
describe('TooltipOnTruncate component', () => { const localVue = createLocalVue();
let vm;
beforeEach(() => { const createElementWithStyle = (style, content) => `<a href="#" style="${style}">${content}</a>`;
const el = document.createElement('div');
el.id = 'app'; describe('TooltipOnTruncate component', () => {
document.body.appendChild(el); let wrapper;
});
const createComponent = ({ propsData, ...options } = {}) => {
wrapper = shallowMount(localVue.extend(TooltipOnTruncate), {
localVue,
sync: false,
attachToDocument: true,
propsData: {
title: TEST_TITLE,
...propsData,
},
...options,
});
};
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
const hasTooltip = () => wrapper.classes('js-show-tooltip');
describe('with default target', () => { describe('with default target', () => {
it('renders tooltip if truncated', done => { it('renders tooltip if truncated', done => {
const options = { createComponent({
style: STYLE_TRUNCATED, attrs: {
props: { style: STYLE_TRUNCATED,
title: TEST_TITLE,
}, },
}; slots: {
default: [TEST_TITLE],
vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]); },
});
vm.$nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(true);
expect(vm.$el).toHaveData('original-title', TEST_TITLE); expect(wrapper.attributes('data-original-title')).toEqual(TEST_TITLE);
expect(vm.$el).toHaveData('placement', 'top'); expect(wrapper.attributes('data-placement')).toEqual('top');
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
}); });
it('does not render tooltip if normal', done => { it('does not render tooltip if normal', done => {
const options = { createComponent({
style: STYLE_NORMAL, attrs: {
props: { style: STYLE_NORMAL,
title: TEST_TITLE,
}, },
}; slots: {
default: [TEST_TITLE],
vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]); },
});
vm.$nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(false);
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
...@@ -71,37 +75,41 @@ describe('TooltipOnTruncate component', () => { ...@@ -71,37 +75,41 @@ describe('TooltipOnTruncate component', () => {
describe('with child target', () => { describe('with child target', () => {
it('renders tooltip if truncated', done => { it('renders tooltip if truncated', done => {
const options = { createComponent({
style: STYLE_NORMAL, attrs: {
props: { style: STYLE_NORMAL,
title: TEST_TITLE, },
propsData: {
truncateTarget: 'child', truncateTarget: 'child',
}, },
}; slots: {
default: createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]); },
});
vm.$nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(true);
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
}); });
it('does not render tooltip if normal', done => { it('does not render tooltip if normal', done => {
const options = { createComponent({
props: { propsData: {
title: TEST_TITLE,
truncateTarget: 'child', truncateTarget: 'child',
}, },
}; slots: {
default: createElementWithStyle(STYLE_NORMAL, TEST_TITLE),
vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_NORMAL }, TEST_TITLE)]); },
});
vm.$nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(false);
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
...@@ -110,22 +118,25 @@ describe('TooltipOnTruncate component', () => { ...@@ -110,22 +118,25 @@ describe('TooltipOnTruncate component', () => {
describe('with fn target', () => { describe('with fn target', () => {
it('renders tooltip if truncated', done => { it('renders tooltip if truncated', done => {
const options = { createComponent({
style: STYLE_NORMAL, attrs: {
props: { style: STYLE_NORMAL,
title: TEST_TITLE, },
propsData: {
truncateTarget: el => el.childNodes[1], truncateTarget: el => el.childNodes[1],
}, },
}; slots: {
default: [
vm = mountTooltipOnTruncate(options, h => [ createElementWithStyle('', TEST_TITLE),
h('a', { style: STYLE_NORMAL }, TEST_TITLE), createElementWithStyle(STYLE_TRUNCATED, TEST_TITLE),
h('span', { style: STYLE_TRUNCATED }, TEST_TITLE), ],
]); },
});
vm.$nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(true);
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
...@@ -134,20 +145,25 @@ describe('TooltipOnTruncate component', () => { ...@@ -134,20 +145,25 @@ describe('TooltipOnTruncate component', () => {
describe('placement', () => { describe('placement', () => {
it('sets data-placement when tooltip is rendered', done => { it('sets data-placement when tooltip is rendered', done => {
const options = { const placement = 'bottom';
props: {
title: TEST_TITLE,
truncateTarget: 'child',
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(() => { .then(() => {
expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP); expect(hasTooltip()).toBe(true);
expect(vm.$el).toHaveData('placement', options.props.placement); expect(wrapper.attributes('data-placement')).toEqual(placement);
}) })
.then(done) .then(done)
.catch(done.fail); .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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7