debian-mirror-gitlab/spec/frontend/nav/components/responsive_home_spec.js
2021-09-04 01:27:46 +05:30

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 });
});
});
});