debian-mirror-gitlab/spec/frontend/issuable_list/components/issuable_bulk_edit_sidebar_spec.js
2021-01-29 00:20:46 +05:30

98 lines
2.6 KiB
JavaScript

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