diff options
-rw-r--r-- | spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js | 180 |
1 files changed, 98 insertions, 82 deletions
diff --git a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js index 997d84dcc42..ad8d5a53291 100644 --- a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js +++ b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js @@ -1,68 +1,72 @@ -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); |