diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/help_popover_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/help_popover_spec.js | 110 |
1 files changed, 84 insertions, 26 deletions
diff --git a/spec/frontend/vue_shared/components/help_popover_spec.js b/spec/frontend/vue_shared/components/help_popover_spec.js index 30c6fa04032..597fb63d95c 100644 --- a/spec/frontend/vue_shared/components/help_popover_spec.js +++ b/spec/frontend/vue_shared/components/help_popover_spec.js @@ -9,59 +9,117 @@ describe('HelpPopover', () => { const findQuestionButton = () => wrapper.find(GlButton); const findPopover = () => wrapper.find(GlPopover); - const buildWrapper = (options = {}) => { + + const createComponent = ({ props, ...opts } = {}) => { wrapper = mount(HelpPopover, { propsData: { options: { title, content, - ...options, }, + ...props, }, + ...opts, }); }; - beforeEach(() => { - buildWrapper(); - }); - afterEach(() => { wrapper.destroy(); }); - it('renders a link button with an icon question', () => { - expect(findQuestionButton().props()).toMatchObject({ - icon: 'question', - variant: 'link', + describe('with title and content', () => { + beforeEach(() => { + createComponent(); }); - }); - it('renders popover that uses the question button as target', () => { - expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el); - }); + it('renders a link button with an icon question', () => { + expect(findQuestionButton().props()).toMatchObject({ + icon: 'question', + variant: 'link', + }); + }); - it('allows rendering title with HTML tags', () => { - expect(findPopover().find('strong').exists()).toBe(true); - }); + it('renders popover that uses the question button as target', () => { + expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el); + }); - it('allows rendering content with HTML tags', () => { - expect(findPopover().find('b').exists()).toBe(true); + it('shows title and content', () => { + expect(findPopover().html()).toContain(title); + expect(findPopover().html()).toContain(content); + }); + + it('allows rendering title with HTML tags', () => { + expect(findPopover().find('strong').exists()).toBe(true); + }); + + it('allows rendering content with HTML tags', () => { + expect(findPopover().find('b').exists()).toBe(true); + }); }); describe('without title', () => { - it('does not render title', () => { - buildWrapper({ title: null }); + beforeEach(() => { + createComponent({ + props: { + options: { + title: null, + content, + }, + }, + }); + }); + + it('does not show title', () => { + expect(findPopover().html()).not.toContain(title); + }); - expect(findPopover().find('span').exists()).toBe(false); + it('shows content', () => { + expect(findPopover().html()).toContain(content); }); }); - it('binds other popover options to the popover instance', () => { + describe('with other options', () => { const placement = 'bottom'; - wrapper.destroy(); - buildWrapper({ placement }); + beforeEach(() => { + createComponent({ + props: { + options: { + placement, + }, + }, + }); + }); + + it('options bind to the popover', () => { + expect(findPopover().props().placement).toBe(placement); + }); + }); + + describe('with custom slots', () => { + const titleSlot = '<h1>title</h1>'; + const defaultSlot = '<strong>content</strong>'; - expect(findPopover().props().placement).toBe(placement); + beforeEach(() => { + createComponent({ + slots: { + title: titleSlot, + default: defaultSlot, + }, + }); + }); + + it('shows title slot', () => { + expect(findPopover().html()).toContain(titleSlot); + }); + + it('shows default content slot', () => { + expect(findPopover().html()).toContain(defaultSlot); + }); + + it('overrides title and content from options', () => { + expect(findPopover().html()).not.toContain(title); + expect(findPopover().html()).toContain(content); + }); }); }); |