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