debian-mirror-gitlab/spec/frontend/popovers/components/popovers_spec.js

137 lines
4 KiB
JavaScript
Raw Normal View History

2021-01-29 00:20:46 +05:30
import { GlPopover } 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';
2021-01-29 00:20:46 +05:30
import { useMockMutationObserver } from 'helpers/mock_dom_observer';
import Popovers from '~/popovers/components/popovers.vue';
describe('popovers/components/popovers.vue', () => {
2021-10-27 15:23:28 +05:30
const { trigger: triggerMutate } = useMockMutationObserver();
2021-01-29 00:20:46 +05:30
let wrapper;
2022-04-04 11:22:00 +05:30
const buildWrapper = async (...targets) => {
2021-01-29 00:20:46 +05:30
wrapper = shallowMount(Popovers);
wrapper.vm.addPopovers(targets);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
};
const createPopoverTarget = (options = {}) => {
const target = document.createElement('button');
const dataset = {
title: 'default title',
content: 'some content',
...options,
};
Object.entries(dataset).forEach(([key, value]) => {
target.dataset[key] = value;
});
document.body.appendChild(target);
return target;
};
const allPopovers = () => wrapper.findAll(GlPopover);
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('addPopovers', () => {
it('attaches popovers to the targets specified', async () => {
const target = createPopoverTarget();
await buildWrapper(target);
expect(wrapper.find(GlPopover).props('target')).toBe(target);
});
it('does not attach a popover twice to the same element', async () => {
const target = createPopoverTarget();
buildWrapper(target);
wrapper.vm.addPopovers([target]);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
expect(wrapper.findAll(GlPopover)).toHaveLength(1);
});
2021-11-11 11:23:49 +05:30
describe('supports HTML content', () => {
const svgIcon = '<svg><use xlink:href="icons.svg#test"></use></svg>';
it.each`
description | content | render
${'renders html content correctly'} | ${'<b>HTML</b>'} | ${'<b>HTML</b>'}
${'removes any unsafe content'} | ${'<script>alert(XSS)</script>'} | ${''}
${'renders svg icons correctly'} | ${svgIcon} | ${svgIcon}
`('$description', async ({ content, render }) => {
await buildWrapper(createPopoverTarget({ content, html: true }));
const html = wrapper.find(GlPopover).html();
expect(html).toContain(render);
});
2021-01-29 00:20:46 +05:30
});
it.each`
option | value
${'placement'} | ${'bottom'}
${'triggers'} | ${'manual'}
`('sets $option to $value when data-$option is set in target', async ({ option, value }) => {
await buildWrapper(createPopoverTarget({ [option]: value }));
expect(wrapper.find(GlPopover).props(option)).toBe(value);
});
});
describe('dispose', () => {
it('removes all popovers when elements is nil', async () => {
await buildWrapper(createPopoverTarget(), createPopoverTarget());
wrapper.vm.dispose();
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
expect(allPopovers()).toHaveLength(0);
});
it('removes the popovers that target the elements specified', async () => {
const target = createPopoverTarget();
await buildWrapper(target, createPopoverTarget());
wrapper.vm.dispose(target);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
expect(allPopovers()).toHaveLength(1);
});
});
describe('observe', () => {
it('removes popover when target is removed from the document', async () => {
const target = createPopoverTarget();
await buildWrapper(target);
wrapper.vm.addPopovers([target, createPopoverTarget()]);
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
triggerMutate(document.body, {
entry: { removedNodes: [target] },
options: { childList: true },
});
2022-04-04 11:22:00 +05:30
await nextTick();
2021-01-29 00:20:46 +05:30
expect(allPopovers()).toHaveLength(1);
});
});
it('disconnects mutation observer on beforeDestroy', async () => {
await buildWrapper(createPopoverTarget());
2021-10-27 15:23:28 +05:30
const { observer } = wrapper.vm;
jest.spyOn(observer, 'disconnect');
2021-01-29 00:20:46 +05:30
2021-10-27 15:23:28 +05:30
expect(observer.disconnect).toHaveBeenCalledTimes(0);
2021-01-29 00:20:46 +05:30
wrapper.destroy();
2021-10-27 15:23:28 +05:30
expect(observer.disconnect).toHaveBeenCalledTimes(1);
2021-01-29 00:20:46 +05:30
});
});