diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-29 00:09:04 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-29 00:09:04 +0300 |
commit | c6c346e8c7f0865f0016a458511e9fabfc8b9c1a (patch) | |
tree | 5b3a734e945e18c88817935c359c191140a11010 /spec/frontend/vue_shared/components/help_popover_spec.js | |
parent | e1b9b92a49eea88ea7c3b101aec0315e64e94678 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/help_popover_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/help_popover_spec.js | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/help_popover_spec.js b/spec/frontend/vue_shared/components/help_popover_spec.js new file mode 100644 index 00000000000..112085e91e1 --- /dev/null +++ b/spec/frontend/vue_shared/components/help_popover_spec.js @@ -0,0 +1,65 @@ +import { mount } from '@vue/test-utils'; +import { GlButton, GlPopover } from '@gitlab/ui'; +import HelpPopover from '~/vue_shared/components/help_popover.vue'; + +describe('HelpPopover', () => { + let wrapper; + const title = 'popover <strong>title</strong>'; + const content = 'popover <b>content</b>'; + + const findQuestionButton = () => wrapper.find(GlButton); + const findPopover = () => wrapper.find(GlPopover); + const buildWrapper = (options = {}) => { + wrapper = mount(HelpPopover, { + propsData: { + options: { + title, + content, + ...options, + }, + }, + }); + }; + + beforeEach(() => { + buildWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('renders a link button with an icon question', () => { + expect(findQuestionButton().props()).toMatchObject({ + icon: 'question', + variant: 'link', + }); + expect(findQuestionButton().attributes().tabindex).toBe('0'); + }); + + it('renders popover that uses the question button as target', () => { + expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el); + }); + + it('triggers popover on hover and focus', () => { + expect(findPopover().props().triggers).toBe('hover focus'); + }); + + 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); + }); + + it('binds other popover options to the popover instance', () => { + const placement = 'bottom'; + + wrapper.destroy(); + buildWrapper({ placement }); + + expect(findPopover().props().placement).toBe(placement); + }); +}); |