Add latest changes from gitlab-org/gitlab@master

3 files changed, 300 insertions, 94 deletions

diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js
new file mode 100644
index 00000000000..3bc89996978
--- /dev/null
+++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js
@@ -0,0 +1,167 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createStore } from '~/ide/stores';
+import paneModule from '~/ide/stores/modules/pane';
+import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
+import Vuex from 'vuex';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ide/components/panes/collapsible_sidebar.vue', () => {
+  let wrapper;
+  let store;
+
+  const width = 350;
+  const fakeComponentName = 'fake-component';
+
+  const createComponent = props => {
+    wrapper = shallowMount(CollapsibleSidebar, {
+      localVue,
+      store,
+      propsData: {
+        extensionTabs: [],
+        side: 'right',
+        width,
+        ...props,
+      },
+      slots: {
+        'header-icon': '<div class=".header-icon-slot">SLOT ICON</div>',
+        header: '<div class=".header-slot"/>',
+        footer: '<div class=".footer-slot"/>',
+      },
+    });
+  };
+
+  const findTabButton = () => wrapper.find(`[data-qa-selector="${fakeComponentName}_tab_button"]`);
+
+  beforeEach(() => {
+    store = createStore();
+    store.registerModule('leftPane', paneModule());
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('with a tab', () => {
+    let fakeView;
+    let extensionTabs;
+
+    beforeEach(() => {
+      const FakeComponent = localVue.component(fakeComponentName, {
+        render: () => {},
+      });
+
+      fakeView = {
+        name: fakeComponentName,
+        keepAlive: true,
+        component: FakeComponent,
+      };
+
+      extensionTabs = [
+        {
+          show: true,
+          title: fakeComponentName,
+          views: [fakeView],
+          icon: 'text-description',
+          buttonClasses: ['button-class-1', 'button-class-2'],
+        },
+      ];
+    });
+
+    describe.each`
+      side
+      ${'left'}
+      ${'right'}
+    `('when side=$side', ({ side }) => {
+      it('correctly renders side specific attributes', () => {
+        createComponent({ extensionTabs, side });
+        const button = findTabButton();
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.classes()).toContain('multi-file-commit-panel');
+          expect(wrapper.classes()).toContain(`ide-${side}-sidebar`);
+          expect(wrapper.find('.multi-file-commit-panel-inner')).not.toBe(null);
+          expect(wrapper.find(`.ide-${side}-sidebar-${fakeComponentName}`)).not.toBe(null);
+          expect(button.attributes('data-placement')).toEqual(side === 'left' ? 'right' : 'left');
+          if (side === 'right') {
+            // this class is only needed on the right side; there is no 'is-left'
+            expect(button.classes()).toContain('is-right');
+          } else {
+            expect(button.classes()).not.toContain('is-right');
+          }
+        });
+      });
+    });
+
+    describe('when default side', () => {
+      let button;
+
+      beforeEach(() => {
+        createComponent({ extensionTabs });
+
+        button = findTabButton();
+      });
+
+      it('correctly renders tab-specific classes', () => {
+        store.state.rightPane.currentView = fakeComponentName;
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(button.classes()).toContain('button-class-1');
+          expect(button.classes()).toContain('button-class-2');
+        });
+      });
+
+      it('can show an open pane tab with an active view', () => {
+        store.state.rightPane.isOpen = true;
+        store.state.rightPane.currentView = fakeComponentName;
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(button.classes()).toEqual(expect.arrayContaining(['ide-sidebar-link', 'active']));
+          expect(button.attributes('data-original-title')).toEqual(fakeComponentName);
+          expect(wrapper.find('.js-tab-view').exists()).toBe(true);
+        });
+      });
+
+      it('does not show a pane which is not open', () => {
+        store.state.rightPane.isOpen = false;
+        store.state.rightPane.currentView = fakeComponentName;
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(button.classes()).not.toEqual(
+            expect.arrayContaining(['ide-sidebar-link', 'active']),
+          );
+          expect(wrapper.find('.js-tab-view').exists()).toBe(false);
+        });
+      });
+
+      describe('when button is clicked', () => {
+        it('opens view', () => {
+          button.trigger('click');
+          expect(store.state.rightPane.isOpen).toBeTruthy();
+        });
+
+        it('toggles open view if tab is currently active', () => {
+          button.trigger('click');
+          expect(store.state.rightPane.isOpen).toBeTruthy();
+
+          button.trigger('click');
+          expect(store.state.rightPane.isOpen).toBeFalsy();
+        });
+      });
+
+      it('shows header-icon', () => {
+        expect(wrapper.find('.header-icon-slot')).not.toBeNull();
+      });
+
+      it('shows header', () => {
+        expect(wrapper.find('.header-slot')).not.toBeNull();
+      });
+
+      it('shows footer', () => {
+        expect(wrapper.find('.footer-slot')).not.toBeNull();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js
index 6908790aaa8..7e408be96fc 100644
--- a/spec/frontend/ide/components/panes/right_spec.js
+++ b/spec/frontend/ide/components/panes/right_spec.js
@@ -1,89 +1,124 @@
 import Vue from 'vue';
-import '~/behaviors/markdown/render_gfm';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { createStore } from '~/ide/stores';
 import RightPane from '~/ide/components/panes/right.vue';
+import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
 import { rightSidebarViews } from '~/ide/constants';
 
-describe('IDE right pane', () => {
-  let Component;
-  let vm;
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
-  beforeAll(() => {
-    Component = Vue.extend(RightPane);
-  });
+describe('ide/components/panes/right.vue', () => {
+  let wrapper;
+  let store;
 
-  beforeEach(() => {
-    const store = createStore();
+  const createComponent = props => {
+    wrapper = shallowMount(RightPane, {
+      localVue,
+      store,
+      propsData: {
+        ...props,
+      },
+    });
+  };
 
-    vm = createComponentWithStore(Component, store).$mount();
+  beforeEach(() => {
+    store = createStore();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('active', () => {
-    it('renders merge request button as active', done => {
-      vm.$store.state.rightPane.isOpen = true;
-      vm.$store.state.rightPane.currentView = rightSidebarViews.mergeRequestInfo.name;
-      vm.$store.state.currentMergeRequestId = '123';
-      vm.$store.state.currentProjectId = 'gitlab-ce';
-      vm.$store.state.currentMergeRequestId = 1;
-      vm.$store.state.projects['gitlab-ce'] = {
-        mergeRequests: {
-          1: {
-            iid: 1,
-            title: 'Testing',
-            title_html: '<span class="title-html">Testing</span>',
-            description: 'Description',
-            description_html: '<p class="description-html">Description HTML</p>',
-          },
+  it('allows tabs to be added via extensionTabs prop', () => {
+    createComponent({
+      extensionTabs: [
+        {
+          show: true,
+          title: 'FakeTab',
         },
-      };
-
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null);
-          expect(
-            vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'),
-          ).toBe('Merge Request');
-        })
-        .then(done)
-        .catch(done.fail);
+      ],
     });
+
+    expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          show: true,
+          title: 'FakeTab',
+        }),
+      ]),
+    );
   });
 
-  describe('click', () => {
-    beforeEach(() => {
-      jest.spyOn(vm, 'open').mockReturnValue();
-    });
+  describe('pipelines tab', () => {
+    it('is always shown', () => {
+      createComponent();
 
-    it('sets view to merge request', done => {
-      vm.$store.state.currentMergeRequestId = '123';
+      expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            show: true,
+            title: 'Pipelines',
+            views: expect.arrayContaining([
+              expect.objectContaining({
+                name: rightSidebarViews.pipelines.name,
+              }),
+              expect.objectContaining({
+                name: rightSidebarViews.jobsDetail.name,
+              }),
+            ]),
+          }),
+        ]),
+      );
+    });
+  });
 
-      vm.$nextTick(() => {
-        vm.$el.querySelector('.ide-sidebar-link').click();
+  describe('merge request tab', () => {
+    it('is shown if there is a currentMergeRequestId', () => {
+      store.state.currentMergeRequestId = 1;
 
-        expect(vm.open).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo);
+      createComponent();
 
-        done();
-      });
+      expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            show: true,
+            title: 'Merge Request',
+            views: expect.arrayContaining([
+              expect.objectContaining({
+                name: rightSidebarViews.mergeRequestInfo.name,
+              }),
+            ]),
+          }),
+        ]),
+      );
     });
   });
 
-  describe('live preview', () => {
-    it('renders live preview button', done => {
-      Vue.set(vm.$store.state.entries, 'package.json', {
+  describe('clientside live preview tab', () => {
+    it('is shown if there is a packageJson and clientsidePreviewEnabled', () => {
+      Vue.set(store.state.entries, 'package.json', {
         name: 'package.json',
       });
-      vm.$store.state.clientsidePreviewEnabled = true;
+      store.state.clientsidePreviewEnabled = true;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('button[aria-label="Live preview"]')).not.toBeNull();
+      createComponent();
 
-        done();
-      });
+      expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            show: true,
+            title: 'Live preview',
+            views: expect.arrayContaining([
+              expect.objectContaining({
+                name: rightSidebarViews.clientSidePreview.name,
+              }),
+            ]),
+          }),
+        ]),
+      );
     });
   });
 });
diff --git a/spec/frontend/ide/stores/modules/pane/actions_spec.js b/spec/frontend/ide/stores/modules/pane/actions_spec.js
index 8c0aeaff5b3..8c56714e0ed 100644
--- a/spec/frontend/ide/stores/modules/pane/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/pane/actions_spec.js
@@ -8,14 +8,7 @@ describe('IDE pane module actions', () => {
 
   describe('toggleOpen', () => {
     it('dispatches open if closed', done => {
-      testAction(
-        actions.toggleOpen,
-        TEST_VIEW,
-        { isOpen: false },
-        [],
-        [{ type: 'open', payload: TEST_VIEW }],
-        done,
-      );
+      testAction(actions.toggleOpen, TEST_VIEW, { isOpen: false }, [], [{ type: 'open' }], done);
     });
 
     it('dispatches close if opened', done => {
@@ -24,37 +17,48 @@ describe('IDE pane module actions', () => {
   });
 
   describe('open', () => {
-    it('commits SET_OPEN', done => {
-      testAction(actions.open, null, {}, [{ type: types.SET_OPEN, payload: true }], [], done);
-    });
+    describe('with a view specified', () => {
+      it('commits SET_OPEN and SET_CURRENT_VIEW', done => {
+        testAction(
+          actions.open,
+          TEST_VIEW,
+          {},
+          [
+            { type: types.SET_OPEN, payload: true },
+            { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW.name },
+          ],
+          [],
+          done,
+        );
+      });
 
-    it('commits SET_CURRENT_VIEW if view is given', done => {
-      testAction(
-        actions.open,
-        TEST_VIEW,
-        {},
-        [
-          { type: types.SET_OPEN, payload: true },
-          { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW.name },
-        ],
-        [],
-        done,
-      );
+      it('commits KEEP_ALIVE_VIEW if keepAlive is true', done => {
+        testAction(
+          actions.open,
+          TEST_VIEW_KEEP_ALIVE,
+          {},
+          [
+            { type: types.SET_OPEN, payload: true },
+            { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
+            { type: types.KEEP_ALIVE_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
+          ],
+          [],
+          done,
+        );
+      });
     });
 
-    it('commits KEEP_ALIVE_VIEW if keepAlive is true', done => {
-      testAction(
-        actions.open,
-        TEST_VIEW_KEEP_ALIVE,
-        {},
-        [
-          { type: types.SET_OPEN, payload: true },
-          { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
-          { type: types.KEEP_ALIVE_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
-        ],
-        [],
-        done,
-      );
+    describe('without a view specified', () => {
+      it('commits SET_OPEN', done => {
+        testAction(
+          actions.open,
+          undefined,
+          {},
+          [{ type: types.SET_OPEN, payload: true }],
+          [],
+          done,
+        );
+      });
     });
   });