diff options
Diffstat (limited to 'spec/frontend/issuable_sidebar/components/issuable_sidebar_root_spec.js')
-rw-r--r-- | spec/frontend/issuable_sidebar/components/issuable_sidebar_root_spec.js | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/spec/frontend/issuable_sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/issuable_sidebar/components/issuable_sidebar_root_spec.js new file mode 100644 index 00000000000..7686dad4644 --- /dev/null +++ b/spec/frontend/issuable_sidebar/components/issuable_sidebar_root_spec.js @@ -0,0 +1,199 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/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); + }); + }); +}); |