137 lines
3.8 KiB
JavaScript
137 lines
3.8 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
import ResponsiveHome from '~/nav/components/responsive_home.vue';
|
|
import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue';
|
|
import TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue';
|
|
import TopNavNewDropdown from '~/nav/components/top_nav_new_dropdown.vue';
|
|
import { TEST_NAV_DATA } from '../mock_data';
|
|
|
|
const TEST_SEARCH_MENU_ITEM = {
|
|
id: 'search',
|
|
title: 'search',
|
|
icon: 'search',
|
|
href: '/search',
|
|
};
|
|
|
|
const TEST_NEW_DROPDOWN_VIEW_MODEL = {
|
|
title: 'new',
|
|
menu_sections: [],
|
|
};
|
|
|
|
describe('~/nav/components/responsive_home.vue', () => {
|
|
let wrapper;
|
|
let menuItemClickListener;
|
|
|
|
const createComponent = (props = {}) => {
|
|
wrapper = shallowMount(ResponsiveHome, {
|
|
propsData: {
|
|
navData: TEST_NAV_DATA,
|
|
...props,
|
|
},
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
},
|
|
listeners: {
|
|
'menu-item-click': menuItemClickListener,
|
|
},
|
|
});
|
|
};
|
|
|
|
const findSearchMenuItem = () => wrapper.findComponent(TopNavMenuItem);
|
|
const findNewDropdown = () => wrapper.findComponent(TopNavNewDropdown);
|
|
const findMenuSections = () => wrapper.findComponent(TopNavMenuSections);
|
|
|
|
beforeEach(() => {
|
|
menuItemClickListener = jest.fn();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('default', () => {
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
it.each`
|
|
desc | fn
|
|
${'does not show search menu item'} | ${findSearchMenuItem}
|
|
${'does not show new dropdown'} | ${findNewDropdown}
|
|
`('$desc', ({ fn }) => {
|
|
expect(fn().exists()).toBe(false);
|
|
});
|
|
|
|
it('shows menu sections', () => {
|
|
expect(findMenuSections().props('sections')).toEqual([
|
|
{ id: 'primary', menuItems: TEST_NAV_DATA.primary },
|
|
{ id: 'secondary', menuItems: TEST_NAV_DATA.secondary },
|
|
]);
|
|
});
|
|
|
|
it('emits when menu sections emits', () => {
|
|
expect(menuItemClickListener).not.toHaveBeenCalled();
|
|
|
|
findMenuSections().vm.$emit('menu-item-click', TEST_NAV_DATA.primary[0]);
|
|
|
|
expect(menuItemClickListener).toHaveBeenCalledWith(TEST_NAV_DATA.primary[0]);
|
|
});
|
|
});
|
|
|
|
describe('without secondary', () => {
|
|
beforeEach(() => {
|
|
createComponent({ navData: { ...TEST_NAV_DATA, secondary: null } });
|
|
});
|
|
|
|
it('shows menu sections', () => {
|
|
expect(findMenuSections().props('sections')).toEqual([
|
|
{ id: 'primary', menuItems: TEST_NAV_DATA.primary },
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe('with search view', () => {
|
|
beforeEach(() => {
|
|
createComponent({
|
|
navData: {
|
|
...TEST_NAV_DATA,
|
|
views: { search: TEST_SEARCH_MENU_ITEM },
|
|
},
|
|
});
|
|
});
|
|
|
|
it('shows search menu item', () => {
|
|
expect(findSearchMenuItem().props()).toEqual({
|
|
menuItem: TEST_SEARCH_MENU_ITEM,
|
|
iconOnly: true,
|
|
});
|
|
});
|
|
|
|
it('shows tooltip for search', () => {
|
|
const tooltip = getBinding(findSearchMenuItem().element, 'gl-tooltip');
|
|
expect(tooltip.value).toEqual({ title: TEST_SEARCH_MENU_ITEM.title });
|
|
});
|
|
});
|
|
|
|
describe('with new view', () => {
|
|
beforeEach(() => {
|
|
createComponent({
|
|
navData: {
|
|
...TEST_NAV_DATA,
|
|
views: { new: TEST_NEW_DROPDOWN_VIEW_MODEL },
|
|
},
|
|
});
|
|
});
|
|
|
|
it('shows new dropdown', () => {
|
|
expect(findNewDropdown().props()).toEqual({
|
|
viewModel: TEST_NEW_DROPDOWN_VIEW_MODEL,
|
|
});
|
|
});
|
|
|
|
it('shows tooltip for new dropdown', () => {
|
|
const tooltip = getBinding(findNewDropdown().element, 'gl-tooltip');
|
|
expect(tooltip.value).toEqual({ title: TEST_NEW_DROPDOWN_VIEW_MODEL.title });
|
|
});
|
|
});
|
|
});
|