import { GlIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; import { SIDE_RIGHT, SIDE_LEFT } from '~/ide/constants'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; const TEST_TABS = [ { title: 'Lorem', icon: 'angle-up', views: [{ name: 'lorem-1' }, { name: 'lorem-2' }], }, { title: 'Ipsum', icon: 'angle-down', views: [{ name: 'ipsum-1' }, { name: 'ipsum-2' }], }, ]; const TEST_CURRENT_INDEX = 1; const TEST_CURRENT_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[1].name; const TEST_OPEN_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[0]; describe('ide/components/ide_sidebar_nav', () => { let wrapper; const createComponent = (props = {}) => { if (wrapper) { throw new Error('wrapper already exists'); } wrapper = shallowMount(IdeSidebarNav, { propsData: { tabs: TEST_TABS, currentView: TEST_CURRENT_VIEW, isOpen: false, ...props, }, directives: { tooltip: createMockDirective(), }, }); }; afterEach(() => { wrapper.destroy(); wrapper = null; }); const findButtons = () => wrapper.findAll('li button'); const findButtonsData = () => findButtons().wrappers.map((button) => { return { title: button.attributes('title'), ariaLabel: button.attributes('aria-label'), classes: button.classes(), qaSelector: button.attributes('data-qa-selector'), icon: button.find(GlIcon).props('name'), tooltip: getBinding(button.element, 'tooltip').value, }; }); const clickTab = () => findButtons().at(TEST_CURRENT_INDEX).trigger('click'); describe.each` isOpen | side | otherSide | classes | classesObj | emitEvent | emitArg ${false} | ${SIDE_LEFT} | ${SIDE_RIGHT} | ${[]} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]} ${false} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]} ${true} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{ [TEST_CURRENT_INDEX]: ['active'] }} | ${'close'} | ${[]} `( 'with side = $side, isOpen = $isOpen', ({ isOpen, side, otherSide, classes, classesObj, emitEvent, emitArg }) => { let bsTooltipHide; beforeEach(() => { createComponent({ isOpen, side }); bsTooltipHide = jest.fn(); wrapper.vm.$root.$on(BV_HIDE_TOOLTIP, bsTooltipHide); }); it('renders buttons', () => { expect(findButtonsData()).toEqual( TEST_TABS.map((tab, index) => ({ title: tab.title, ariaLabel: tab.title, classes: ['ide-sidebar-link', ...classes, ...(classesObj[index] || [])], qaSelector: `${tab.title.toLowerCase()}_tab_button`, icon: tab.icon, tooltip: { container: 'body', placement: otherSide, }, })), ); }); it('when tab clicked, emits event', () => { expect(wrapper.emitted()).toEqual({}); clickTab(); expect(wrapper.emitted()).toEqual({ [emitEvent]: [emitArg], }); }); it('when tab clicked, hides tooltip', () => { expect(bsTooltipHide).not.toHaveBeenCalled(); clickTab(); expect(bsTooltipHide).toHaveBeenCalled(); }); }, ); });