diff options
Diffstat (limited to 'spec/frontend/super_sidebar/components/help_center_spec.js')
-rw-r--r-- | spec/frontend/super_sidebar/components/help_center_spec.js | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/spec/frontend/super_sidebar/components/help_center_spec.js b/spec/frontend/super_sidebar/components/help_center_spec.js new file mode 100644 index 00000000000..bc847a3e159 --- /dev/null +++ b/spec/frontend/super_sidebar/components/help_center_spec.js @@ -0,0 +1,152 @@ +import { GlDisclosureDropdownGroup } from '@gitlab/ui'; +import { within } from '@testing-library/dom'; +import toggleWhatsNewDrawer from '~/whats_new'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import HelpCenter from '~/super_sidebar/components/help_center.vue'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility'; +import { useLocalStorageSpy } from 'helpers/local_storage_helper'; +import { STORAGE_KEY } from '~/whats_new/utils/notification'; +import { sidebarData } from '../mock_data'; + +jest.mock('~/whats_new'); + +describe('HelpCenter component', () => { + let wrapper; + + const GlEmoji = { template: '<img/>' }; + + const findDropdownGroup = (i = 0) => { + return wrapper.findAllComponents(GlDisclosureDropdownGroup).at(i); + }; + const withinComponent = () => within(wrapper.element); + const findButton = (name) => withinComponent().getByRole('button', { name }); + + // eslint-disable-next-line no-shadow + const createWrapper = (sidebarData) => { + wrapper = mountExtended(HelpCenter, { + propsData: { sidebarData }, + stubs: { GlEmoji }, + }); + }; + + describe('default', () => { + beforeEach(() => { + createWrapper(sidebarData); + }); + + it('renders menu items', () => { + expect(findDropdownGroup(0).props('group').items).toEqual([ + { text: HelpCenter.i18n.help, href: helpPagePath() }, + { text: HelpCenter.i18n.support, href: sidebarData.support_path }, + { text: HelpCenter.i18n.docs, href: 'https://docs.gitlab.com' }, + { text: HelpCenter.i18n.plans, href: `${PROMO_URL}/pricing` }, + { text: HelpCenter.i18n.forum, href: 'https://forum.gitlab.com/' }, + { + text: HelpCenter.i18n.contribute, + href: helpPagePath('', { anchor: 'contributing-to-gitlab' }), + }, + { text: HelpCenter.i18n.feedback, href: 'https://about.gitlab.com/submit-feedback' }, + ]); + + expect(findDropdownGroup(1).props('group').items).toEqual([ + expect.objectContaining({ text: HelpCenter.i18n.shortcuts }), + expect.objectContaining({ text: HelpCenter.i18n.whatsnew }), + ]); + }); + + describe('with Gitlab version check feature enabled', () => { + beforeEach(() => { + createWrapper({ ...sidebarData, show_version_check: true }); + }); + + it('shows version information as first item', () => { + expect(findDropdownGroup(0).props('group').items).toEqual([ + { text: HelpCenter.i18n.version, href: helpPagePath('update/index'), version: '16.0' }, + ]); + }); + }); + + describe('showKeyboardShortcuts', () => { + beforeEach(() => { + jest.spyOn(wrapper.vm.$refs.dropdown, 'close'); + window.toggleShortcutsHelp = jest.fn(); + findButton('Keyboard shortcuts ?').click(); + }); + + it('closes the dropdown', () => { + expect(wrapper.vm.$refs.dropdown.close).toHaveBeenCalled(); + }); + + it('shows the keyboard shortcuts modal', () => { + expect(window.toggleShortcutsHelp).toHaveBeenCalled(); + }); + }); + + describe('showWhatsNew', () => { + beforeEach(() => { + jest.spyOn(wrapper.vm.$refs.dropdown, 'close'); + findButton("What's new 5").click(); + }); + + it('closes the dropdown', () => { + expect(wrapper.vm.$refs.dropdown.close).toHaveBeenCalled(); + }); + + it('shows the "What\'s new" slideout', () => { + expect(toggleWhatsNewDrawer).toHaveBeenCalledWith(expect.any(Object)); + }); + + it('shows the existing "What\'s new" slideout instance on subsequent clicks', () => { + findButton("What's new").click(); + expect(toggleWhatsNewDrawer).toHaveBeenCalledTimes(2); + expect(toggleWhatsNewDrawer).toHaveBeenLastCalledWith(); + }); + }); + + describe('shouldShowWhatsNewNotification', () => { + describe('when setting is disabled', () => { + beforeEach(() => { + createWrapper({ ...sidebarData, display_whats_new: false }); + }); + + it('is false', () => { + expect(wrapper.vm.showWhatsNewNotification).toBe(false); + }); + }); + + describe('when setting is enabled', () => { + useLocalStorageSpy(); + + beforeEach(() => { + createWrapper({ ...sidebarData, display_whats_new: true }); + }); + + it('is true', () => { + expect(wrapper.vm.showWhatsNewNotification).toBe(true); + }); + + describe('when "What\'s new" drawer got opened', () => { + beforeEach(() => { + findButton("What's new 5").click(); + }); + + it('is false', () => { + expect(wrapper.vm.showWhatsNewNotification).toBe(false); + }); + }); + + describe('with matching version digest in local storage', () => { + beforeEach(() => { + window.localStorage.setItem(STORAGE_KEY, 1); + createWrapper({ ...sidebarData, display_whats_new: true }); + }); + + it('is false', () => { + expect(wrapper.vm.showWhatsNewNotification).toBe(false); + }); + }); + }); + }); + }); +}); |