import { shallowMount } from '@vue/test-utils'; import IssuableBulkEditSidebar from '~/issuable_list/components/issuable_bulk_edit_sidebar.vue'; const createComponent = ({ expanded = true } = {}) => shallowMount(IssuableBulkEditSidebar, { propsData: { expanded, }, slots: { 'bulk-edit-actions': ` `, 'sidebar-items': ` `, }, }); describe('IssuableBulkEditSidebar', () => { let wrapper; beforeEach(() => { setFixtures('
'); wrapper = createComponent(); }); afterEach(() => { wrapper.destroy(); }); describe('watch', () => { describe('expanded', () => { it.each` expanded | layoutPageClass ${true} | ${'right-sidebar-expanded'} ${false} | ${'right-sidebar-collapsed'} `( 'sets class "$layoutPageClass" on element `.layout-page` when expanded prop is $expanded', async ({ expanded, layoutPageClass }) => { const wrappeCustom = createComponent({ expanded: !expanded, }); // We need to manually flip the value of `expanded` for // watcher to trigger. wrappeCustom.setProps({ expanded, }); await wrappeCustom.vm.$nextTick(); expect(document.querySelector('.layout-page').classList.contains(layoutPageClass)).toBe( true, ); wrappeCustom.destroy(); }, ); }); }); describe('template', () => { it.each` expanded | layoutPageClass ${true} | ${'right-sidebar-expanded'} ${false} | ${'right-sidebar-collapsed'} `( 'renders component container with class "$layoutPageClass" when expanded prop is $expanded', async ({ expanded, layoutPageClass }) => { const wrappeCustom = createComponent({ expanded: !expanded, }); // We need to manually flip the value of `expanded` for // watcher to trigger. wrappeCustom.setProps({ expanded, }); await wrappeCustom.vm.$nextTick(); expect(wrappeCustom.classes()).toContain(layoutPageClass); wrappeCustom.destroy(); }, ); it('renders contents for slot `bulk-edit-actions`', () => { expect(wrapper.find('button.js-edit-issuables').exists()).toBe(true); }); it('renders contents for slot `sidebar-items`', () => { expect(wrapper.find('button.js-sidebar-dropdown').exists()).toBe(true); }); }); });