diff options
Diffstat (limited to 'spec/frontend/popovers/index_spec.js')
-rw-r--r-- | spec/frontend/popovers/index_spec.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/spec/frontend/popovers/index_spec.js b/spec/frontend/popovers/index_spec.js new file mode 100644 index 00000000000..ea3b78332d7 --- /dev/null +++ b/spec/frontend/popovers/index_spec.js @@ -0,0 +1,104 @@ +import { initPopovers, dispose, destroy } from '~/popovers'; + +describe('popovers/index.js', () => { + let popoversApp; + + const createPopoverTarget = (trigger = 'hover') => { + const target = document.createElement('button'); + const dataset = { + title: 'default title', + content: 'some content', + toggle: 'popover', + trigger, + }; + + Object.entries(dataset).forEach(([key, value]) => { + target.dataset[key] = value; + }); + + document.body.appendChild(target); + + return target; + }; + + const buildPopoversApp = () => { + popoversApp = initPopovers('[data-toggle="popover"]'); + }; + + const triggerEvent = (target, eventName = 'mouseenter') => { + const event = new Event(eventName); + + target.dispatchEvent(event); + }; + + afterEach(() => { + document.body.innerHTML = ''; + destroy(); + }); + + describe('initPopover', () => { + it('attaches a GlPopover for the elements specified in the selector', async () => { + const target = createPopoverTarget(); + + buildPopoversApp(); + + triggerEvent(target); + + await popoversApp.$nextTick(); + const html = document.querySelector('.gl-popover').innerHTML; + + expect(document.querySelector('.gl-popover')).not.toBe(null); + expect(html).toContain('default title'); + expect(html).toContain('some content'); + }); + + it('supports triggering a popover via custom events', async () => { + const trigger = 'click'; + const target = createPopoverTarget(trigger); + + buildPopoversApp(); + triggerEvent(target, trigger); + + await popoversApp.$nextTick(); + + expect(document.querySelector('.gl-popover')).not.toBe(null); + expect(document.querySelector('.gl-popover').innerHTML).toContain('default title'); + }); + + it('inits popovers on targets added after content load', async () => { + buildPopoversApp(); + + expect(document.querySelector('.gl-popover')).toBe(null); + + const trigger = 'click'; + const target = createPopoverTarget(trigger); + triggerEvent(target, trigger); + await popoversApp.$nextTick(); + + expect(document.querySelector('.gl-popover')).not.toBe(null); + }); + }); + + describe('dispose', () => { + it('removes popovers that target the elements specified', async () => { + const fakeTarget = createPopoverTarget(); + const target = createPopoverTarget(); + buildPopoversApp(); + triggerEvent(target); + triggerEvent(createPopoverTarget()); + await popoversApp.$nextTick(); + + expect(document.querySelectorAll('.gl-popover')).toHaveLength(2); + + dispose([fakeTarget]); + await popoversApp.$nextTick(); + + expect(document.querySelectorAll('.gl-popover')).toHaveLength(2); + + dispose([target]); + await popoversApp.$nextTick(); + + expect(document.querySelectorAll('.gl-popover')).toHaveLength(1); + }); + }); +}); |