2020-03-13 15:44:24 +05:30
|
|
|
import { mount, shallowMount } from '@vue/test-utils';
|
2021-02-22 17:27:13 +05:30
|
|
|
import { hasHorizontalOverflow } from '~/lib/utils/dom_utils';
|
2018-11-20 20:47:30 +05:30
|
|
|
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
|
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
const DUMMY_TEXT = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
const createChildElement = () => `<a href="#">${DUMMY_TEXT}</a>`;
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
jest.mock('~/lib/utils/dom_utils', () => ({
|
|
|
|
hasHorizontalOverflow: jest.fn(() => {
|
|
|
|
throw new Error('this needs to be mocked');
|
|
|
|
}),
|
|
|
|
}));
|
2021-04-17 20:07:23 +05:30
|
|
|
jest.mock('@gitlab/ui', () => ({
|
|
|
|
GlTooltipDirective: {
|
|
|
|
bind(el, binding) {
|
|
|
|
el.classList.add('gl-tooltip');
|
|
|
|
el.setAttribute('data-original-title', el.title);
|
|
|
|
el.dataset.placement = binding.value.placement;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}));
|
2019-09-30 21:07:59 +05:30
|
|
|
|
|
|
|
describe('TooltipOnTruncate component', () => {
|
|
|
|
let wrapper;
|
2020-03-13 15:44:24 +05:30
|
|
|
let parent;
|
2019-09-30 21:07:59 +05:30
|
|
|
|
|
|
|
const createComponent = ({ propsData, ...options } = {}) => {
|
2020-03-13 15:44:24 +05:30
|
|
|
wrapper = shallowMount(TooltipOnTruncate, {
|
2021-03-08 18:12:59 +05:30
|
|
|
attachTo: document.body,
|
2019-09-30 21:07:59 +05:30
|
|
|
propsData: {
|
|
|
|
...propsData,
|
|
|
|
},
|
|
|
|
...options,
|
|
|
|
});
|
|
|
|
};
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
const createWrappedComponent = ({ propsData, ...options }) => {
|
|
|
|
// set a parent around the tested component
|
|
|
|
parent = mount(
|
|
|
|
{
|
|
|
|
props: {
|
|
|
|
title: { default: '' },
|
|
|
|
},
|
|
|
|
template: `
|
2021-02-22 17:27:13 +05:30
|
|
|
<TooltipOnTruncate :title="title" truncate-target="child">
|
2020-03-13 15:44:24 +05:30
|
|
|
<div>{{title}}</div>
|
|
|
|
</TooltipOnTruncate>
|
|
|
|
`,
|
|
|
|
components: {
|
|
|
|
TooltipOnTruncate,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
propsData: { ...propsData },
|
2021-03-08 18:12:59 +05:30
|
|
|
attachTo: document.body,
|
2020-03-13 15:44:24 +05:30
|
|
|
...options,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = parent.find(TooltipOnTruncate);
|
|
|
|
};
|
|
|
|
|
2021-04-17 20:07:23 +05:30
|
|
|
const hasTooltip = () => wrapper.classes('gl-tooltip');
|
2020-03-13 15:44:24 +05:30
|
|
|
|
2018-11-20 20:47:30 +05:30
|
|
|
afterEach(() => {
|
2019-09-30 21:07:59 +05:30
|
|
|
wrapper.destroy();
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('with default target', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
it('renders tooltip if truncated', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
2020-03-13 15:44:24 +05:30
|
|
|
propsData: {
|
2021-02-22 17:27:13 +05:30
|
|
|
title: DUMMY_TEXT,
|
2018-11-20 20:47:30 +05:30
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: [DUMMY_TEXT],
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(hasTooltip()).toBe(true);
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(wrapper.attributes('data-original-title')).toEqual(DUMMY_TEXT);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(wrapper.attributes('data-placement')).toEqual('top');
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
it('does not render tooltip if normal', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(false);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
2020-03-13 15:44:24 +05:30
|
|
|
propsData: {
|
2021-02-22 17:27:13 +05:30
|
|
|
title: DUMMY_TEXT,
|
2018-11-20 20:47:30 +05:30
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: [DUMMY_TEXT],
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(hasTooltip()).toBe(false);
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with child target', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
it('renders tooltip if truncated', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
|
|
|
propsData: {
|
2021-02-22 17:27:13 +05:30
|
|
|
title: DUMMY_TEXT,
|
2018-11-20 20:47:30 +05:30
|
|
|
truncateTarget: 'child',
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: createChildElement(),
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[0]);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(hasTooltip()).toBe(true);
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
it('does not render tooltip if normal', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(false);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
|
|
|
propsData: {
|
2018-11-20 20:47:30 +05:30
|
|
|
truncateTarget: 'child',
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: createChildElement(),
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[0]);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(hasTooltip()).toBe(false);
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with fn target', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
it('renders tooltip if truncated', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
|
|
|
propsData: {
|
2021-02-22 17:27:13 +05:30
|
|
|
title: DUMMY_TEXT,
|
2021-03-08 18:12:59 +05:30
|
|
|
truncateTarget: (el) => el.childNodes[1],
|
2018-11-20 20:47:30 +05:30
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: [createChildElement(), createChildElement()],
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[1]);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(hasTooltip()).toBe(true);
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('placement', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
it('sets data-placement when tooltip is rendered', () => {
|
2019-09-30 21:07:59 +05:30
|
|
|
const placement = 'bottom';
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
2019-09-30 21:07:59 +05:30
|
|
|
createComponent({
|
|
|
|
propsData: {
|
|
|
|
placement,
|
|
|
|
},
|
|
|
|
slots: {
|
2021-02-22 17:27:13 +05:30
|
|
|
default: DUMMY_TEXT,
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(hasTooltip()).toBe(true);
|
|
|
|
expect(wrapper.attributes('data-placement')).toEqual(placement);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('updates when title and slot content changes', () => {
|
|
|
|
describe('is initialized with a long text', () => {
|
|
|
|
beforeEach(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
2020-03-13 15:44:24 +05:30
|
|
|
createWrappedComponent({
|
2021-02-22 17:27:13 +05:30
|
|
|
propsData: { title: DUMMY_TEXT },
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
return parent.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders tooltip', () => {
|
|
|
|
expect(hasTooltip()).toBe(true);
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(wrapper.attributes('data-original-title')).toEqual(DUMMY_TEXT);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(wrapper.attributes('data-placement')).toEqual('top');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render tooltip after updated to a short text', () => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(false);
|
2020-03-13 15:44:24 +05:30
|
|
|
parent.setProps({
|
2021-02-22 17:27:13 +05:30
|
|
|
title: 'new-text',
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
return wrapper.vm
|
|
|
|
.$nextTick()
|
|
|
|
.then(() => wrapper.vm.$nextTick()) // wait 2 times to get an updated slot
|
|
|
|
.then(() => {
|
|
|
|
expect(hasTooltip()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('is initialized with a short text', () => {
|
|
|
|
beforeEach(() => {
|
2021-02-22 17:27:13 +05:30
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(false);
|
2020-03-13 15:44:24 +05:30
|
|
|
createWrappedComponent({
|
2021-02-22 17:27:13 +05:30
|
|
|
propsData: { title: DUMMY_TEXT },
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
return wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render tooltip', () => {
|
|
|
|
expect(hasTooltip()).toBe(false);
|
|
|
|
});
|
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
it('renders tooltip after text is updated', () => {
|
|
|
|
hasHorizontalOverflow.mockReturnValueOnce(true);
|
|
|
|
const newText = 'new-text';
|
2020-03-13 15:44:24 +05:30
|
|
|
parent.setProps({
|
2021-02-22 17:27:13 +05:30
|
|
|
title: newText,
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
return wrapper.vm
|
|
|
|
.$nextTick()
|
|
|
|
.then(() => wrapper.vm.$nextTick()) // wait 2 times to get an updated slot
|
|
|
|
.then(() => {
|
|
|
|
expect(hasTooltip()).toBe(true);
|
2021-02-22 17:27:13 +05:30
|
|
|
expect(wrapper.attributes('data-original-title')).toEqual(newText);
|
2020-03-13 15:44:24 +05:30
|
|
|
expect(wrapper.attributes('data-placement')).toEqual('top');
|
|
|
|
});
|
|
|
|
});
|
2018-11-20 20:47:30 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|