debian-mirror-gitlab/spec/frontend/tooltips/components/tooltips_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

235 lines
6.2 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlTooltip } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2020-11-24 15:15:51 +05:30
import { useMockMutationObserver } from 'helpers/mock_dom_observer';
import Tooltips from '~/tooltips/components/tooltips.vue';
describe('tooltips/components/tooltips.vue', () => {
2021-10-27 15:23:28 +05:30
const { trigger: triggerMutate } = useMockMutationObserver();
2020-11-24 15:15:51 +05:30
let wrapper;
const buildWrapper = () => {
wrapper = shallowMount(Tooltips);
};
const createTooltipTarget = (attributes = {}) => {
const target = document.createElement('button');
const defaults = {
title: 'default title',
...attributes,
};
2021-03-08 18:12:59 +05:30
Object.keys(defaults).forEach((name) => {
2020-11-24 15:15:51 +05:30
target.setAttribute(name, defaults[name]);
});
document.body.appendChild(target);
return target;
};
2022-10-11 01:57:18 +05:30
const allTooltips = () => wrapper.findAllComponents(GlTooltip);
2020-11-24 15:15:51 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('addTooltips', () => {
let target;
beforeEach(() => {
buildWrapper();
target = createTooltipTarget();
});
it('attaches tooltips to the targets specified', async () => {
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).props('target')).toBe(target);
2020-11-24 15:15:51 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not attach a tooltip to a target with empty title', async () => {
target.setAttribute('title', '');
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-03-08 18:12:59 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).exists()).toBe(false);
2021-03-08 18:12:59 +05:30
});
2020-11-24 15:15:51 +05:30
it('does not attach a tooltip twice to the same element', async () => {
wrapper.vm.addTooltips([target]);
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-10-11 01:57:18 +05:30
expect(wrapper.findAllComponents(GlTooltip)).toHaveLength(1);
2020-11-24 15:15:51 +05:30
});
it('sets tooltip content from title attribute', async () => {
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).text()).toBe(target.getAttribute('title'));
2020-11-24 15:15:51 +05:30
});
it('supports HTML content', async () => {
target = createTooltipTarget({
title: 'content with <b>HTML</b>',
'data-html': true,
});
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).html()).toContain(target.getAttribute('title'));
2020-11-24 15:15:51 +05:30
});
2021-01-29 00:20:46 +05:30
it('sets the configuration values passed in the config object', async () => {
const config = { show: true };
target = createTooltipTarget();
wrapper.vm.addTooltips([target], config);
2022-04-04 11:22:00 +05:30
await nextTick();
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).props()).toMatchObject(config);
2021-01-29 00:20:46 +05:30
});
2020-11-24 15:15:51 +05:30
it.each`
attribute | value | prop
${'data-placement'} | ${'bottom'} | ${'placement'}
${'data-container'} | ${'custom-container'} | ${'container'}
${'data-boundary'} | ${'viewport'} | ${'boundary'}
${'data-triggers'} | ${'manual'} | ${'triggers'}
`(
'sets $prop to $value when $attribute is set in target',
async ({ attribute, value, prop }) => {
target = createTooltipTarget({ [attribute]: value });
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).props(prop)).toBe(value);
2020-11-24 15:15:51 +05:30
},
);
});
describe('dispose', () => {
beforeEach(() => {
buildWrapper();
});
it('removes all tooltips when elements is nil', async () => {
wrapper.vm.addTooltips([createTooltipTarget(), createTooltipTarget()]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
wrapper.vm.dispose();
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
expect(allTooltips()).toHaveLength(0);
});
it('removes the tooltips that target the elements specified', async () => {
const target = createTooltipTarget();
wrapper.vm.addTooltips([target, createTooltipTarget()]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
wrapper.vm.dispose(target);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
expect(allTooltips()).toHaveLength(1);
});
});
describe('observe', () => {
beforeEach(() => {
buildWrapper();
});
it('removes tooltip when target is removed from the document', async () => {
const target = createTooltipTarget();
wrapper.vm.addTooltips([target, createTooltipTarget()]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
triggerMutate(document.body, {
entry: { removedNodes: [target] },
options: { childList: true },
});
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
expect(allTooltips()).toHaveLength(1);
});
});
describe('triggerEvent', () => {
it('triggers a bootstrap-vue tooltip global event for the tooltip specified', async () => {
const target = createTooltipTarget();
const event = 'hide';
buildWrapper();
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
wrapper.vm.triggerEvent(target, event);
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).emitted(event)).toHaveLength(1);
2020-11-24 15:15:51 +05:30
});
});
describe('fixTitle', () => {
it('updates tooltip content with the latest value the target title property', async () => {
const target = createTooltipTarget();
const currentTitle = 'title';
const newTitle = 'new title';
target.setAttribute('title', currentTitle);
buildWrapper();
wrapper.vm.addTooltips([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).text()).toBe(currentTitle);
2020-11-24 15:15:51 +05:30
target.setAttribute('title', newTitle);
wrapper.vm.fixTitle(target);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
2022-11-25 23:54:43 +05:30
expect(wrapper.findComponent(GlTooltip).text()).toBe(newTitle);
2020-11-24 15:15:51 +05:30
});
});
it('disconnects mutation observer on beforeDestroy', () => {
buildWrapper();
wrapper.vm.addTooltips([createTooltipTarget()]);
2021-10-27 15:23:28 +05:30
const { observer } = wrapper.vm;
jest.spyOn(observer, 'disconnect');
2020-11-24 15:15:51 +05:30
2021-10-27 15:23:28 +05:30
expect(observer.disconnect).toHaveBeenCalledTimes(0);
2020-11-24 15:15:51 +05:30
wrapper.destroy();
2021-10-27 15:23:28 +05:30
expect(observer.disconnect).toHaveBeenCalledTimes(1);
2020-11-24 15:15:51 +05:30
});
2021-04-17 20:07:23 +05:30
it('exposes hidden event', async () => {
buildWrapper();
wrapper.vm.addTooltips([createTooltipTarget()]);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-04-17 20:07:23 +05:30
wrapper.findComponent(GlTooltip).vm.$emit('hidden');
expect(wrapper.emitted('hidden')).toHaveLength(1);
});
2020-11-24 15:15:51 +05:30
});