Commit eb0b2c47 authored by David O'Regan's avatar David O'Regan

Merge branch 'mrincon-add-slots-to-help-popover' into 'master'

Pass custom slots from HelpPopover to GlPopover

See merge request gitlab-org/gitlab!79319
parents adbada71 87d190eb
......@@ -33,6 +33,9 @@ export default {
<template #default>
<div v-safe-html="options.content"></div>
</template>
<template v-for="slot in Object.keys($slots)" #[slot]>
<slot :name="slot"></slot>
</template>
</gl-popover>
</span>
</template>
......@@ -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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment