diff options
Diffstat (limited to 'spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js')
-rw-r--r-- | spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js b/spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js new file mode 100644 index 00000000000..52a238eac7c --- /dev/null +++ b/spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js @@ -0,0 +1,97 @@ +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': ` + <button class="js-edit-issuables">Edit issuables</button> + `, + 'sidebar-items': ` + <button class="js-sidebar-dropdown">Labels</button> + `, + }, + }); + +describe('IssuableBulkEditSidebar', () => { + let wrapper; + + beforeEach(() => { + setFixtures('<div class="layout-page right-sidebar-collapsed"></div>'); + 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); + }); + }); +}); |