199 lines
5.6 KiB
JavaScript
199 lines
5.6 KiB
JavaScript
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import Cookies from 'js-cookie';
|
|
|
|
import IssuableSidebarRoot from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
|
|
|
|
const createComponent = (expanded = true) =>
|
|
shallowMount(IssuableSidebarRoot, {
|
|
propsData: {
|
|
expanded,
|
|
},
|
|
slots: {
|
|
'right-sidebar-items': `
|
|
<button class="js-todo">Todo</button>
|
|
`,
|
|
},
|
|
});
|
|
|
|
describe('IssuableSidebarRoot', () => {
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
wrapper = createComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('watch', () => {
|
|
describe('isExpanded', () => {
|
|
it('emits `sidebar-toggle` event on component', async () => {
|
|
wrapper.setData({
|
|
isExpanded: false,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
expect(wrapper.emitted('sidebar-toggle')).toBeTruthy();
|
|
expect(wrapper.emitted('sidebar-toggle')[0]).toEqual([
|
|
{
|
|
expanded: false,
|
|
},
|
|
]);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('methods', () => {
|
|
describe('updatePageContainerClass', () => {
|
|
beforeEach(() => {
|
|
setFixtures('<div class="layout-page"></div>');
|
|
});
|
|
|
|
it.each`
|
|
isExpanded | layoutPageClass
|
|
${true} | ${'right-sidebar-expanded'}
|
|
${false} | ${'right-sidebar-collapsed'}
|
|
`(
|
|
'set class $layoutPageClass to container element when `isExpanded` prop is $isExpanded',
|
|
async ({ isExpanded, layoutPageClass }) => {
|
|
wrapper.setData({
|
|
isExpanded,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
wrapper.vm.updatePageContainerClass();
|
|
|
|
expect(document.querySelector('.layout-page').classList.contains(layoutPageClass)).toBe(
|
|
true,
|
|
);
|
|
},
|
|
);
|
|
});
|
|
|
|
describe('handleWindowResize', () => {
|
|
beforeEach(async () => {
|
|
wrapper.setData({
|
|
userExpanded: true,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it.each`
|
|
breakpoint | isExpandedValue
|
|
${'xs'} | ${false}
|
|
${'sm'} | ${false}
|
|
${'md'} | ${false}
|
|
${'lg'} | ${true}
|
|
${'xl'} | ${true}
|
|
`(
|
|
'sets `isExpanded` prop to $isExpandedValue only when current screen size is `lg` or `xl`',
|
|
async ({ breakpoint, isExpandedValue }) => {
|
|
jest.spyOn(bp, 'isDesktop').mockReturnValue(breakpoint === 'lg' || breakpoint === 'xl');
|
|
|
|
wrapper.vm.handleWindowResize();
|
|
|
|
expect(wrapper.vm.isExpanded).toBe(isExpandedValue);
|
|
},
|
|
);
|
|
|
|
it('calls `updatePageContainerClass` method', () => {
|
|
jest.spyOn(wrapper.vm, 'updatePageContainerClass');
|
|
|
|
wrapper.vm.handleWindowResize();
|
|
|
|
expect(wrapper.vm.updatePageContainerClass).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe('handleToggleSidebarClick', () => {
|
|
beforeEach(async () => {
|
|
jest.spyOn(Cookies, 'set').mockImplementation(jest.fn());
|
|
wrapper.setData({
|
|
isExpanded: true,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('flips value of `isExpanded`', () => {
|
|
wrapper.vm.handleToggleSidebarClick();
|
|
|
|
expect(wrapper.vm.isExpanded).toBe(false);
|
|
expect(wrapper.vm.userExpanded).toBe(false);
|
|
});
|
|
|
|
it('updates "collapsed_gutter" cookie value', () => {
|
|
wrapper.vm.handleToggleSidebarClick();
|
|
|
|
expect(Cookies.set).toHaveBeenCalledWith('collapsed_gutter', true);
|
|
});
|
|
|
|
it('calls `updatePageContainerClass` method', () => {
|
|
jest.spyOn(wrapper.vm, 'updatePageContainerClass');
|
|
|
|
wrapper.vm.handleWindowResize();
|
|
|
|
expect(wrapper.vm.updatePageContainerClass).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('template', () => {
|
|
describe('sidebar expanded', () => {
|
|
beforeEach(async () => {
|
|
wrapper.setData({
|
|
isExpanded: true,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('renders component container element with class `right-sidebar-expanded` when `isExpanded` prop is true', () => {
|
|
expect(wrapper.classes()).toContain('right-sidebar-expanded');
|
|
});
|
|
|
|
it('renders sidebar toggle button with text and icon', () => {
|
|
const buttonEl = wrapper.find('button');
|
|
|
|
expect(buttonEl.exists()).toBe(true);
|
|
expect(buttonEl.attributes('title')).toBe('Toggle sidebar');
|
|
expect(buttonEl.find('span').text()).toBe('Collapse sidebar');
|
|
expect(buttonEl.find('[data-testid="icon-collapse"]').isVisible()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('sidebar collapsed', () => {
|
|
beforeEach(async () => {
|
|
wrapper.setData({
|
|
isExpanded: false,
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
});
|
|
|
|
it('renders component container element with class `right-sidebar-collapsed` when `isExpanded` prop is false', () => {
|
|
expect(wrapper.classes()).toContain('right-sidebar-collapsed');
|
|
});
|
|
|
|
it('renders sidebar toggle button with text and icon', () => {
|
|
const buttonEl = wrapper.find('button');
|
|
|
|
expect(buttonEl.exists()).toBe(true);
|
|
expect(buttonEl.attributes('title')).toBe('Toggle sidebar');
|
|
expect(buttonEl.find('[data-testid="icon-expand"]').isVisible()).toBe(true);
|
|
});
|
|
});
|
|
|
|
it('renders sidebar items', () => {
|
|
const sidebarItemsEl = wrapper.find('[data-testid="sidebar-items"]');
|
|
|
|
expect(sidebarItemsEl.exists()).toBe(true);
|
|
expect(sidebarItemsEl.find('button.js-todo').exists()).toBe(true);
|
|
});
|
|
});
|
|
});
|