Open pipeline list panel when clicking CI icon in Web IDEide-pipeline-icon-open

Closes #47843

2 files changed, 29 insertions, 0 deletions

diff --git a/spec/javascripts/ide/components/ide_status_bar_spec.js b/spec/javascripts/ide/components/ide_status_bar_spec.js
index 770dca9cb0f..9895682f388 100644
--- a/spec/javascripts/ide/components/ide_status_bar_spec.js
+++ b/spec/javascripts/ide/components/ide_status_bar_spec.js
@@ -13,6 +13,7 @@ describe('ideStatusBar', () => {
 
     store.state.currentProjectId = 'abcproject';
     store.state.projects.abcproject = projectData;
+    store.state.currentBranchId = 'master';
 
     vm = createComponentWithStore(Component, store).$mount();
   });
@@ -60,4 +61,29 @@ describe('ideStatusBar', () => {
       expect(vm.getCommitPath('abc123de')).toBe('/commit/abc123de');
     });
   });
+
+  describe('pipeline status', () => {
+    it('opens right sidebar on clicking icon', done => {
+      spyOn(vm, 'setRightPane');
+      Vue.set(vm.$store.state.pipelines, 'latestPipeline', {
+        details: {
+          status: {
+            text: 'success',
+            details_path: 'test',
+            icon: 'success',
+          },
+        },
+      });
+
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$el.querySelector('.ide-status-pipeline button').click();
+
+          expect(vm.setRightPane).toHaveBeenCalledWith('pipelines-list');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/mock_data.js b/spec/javascripts/ide/mock_data.js
index 80bf664d491..4bbda4c8e80 100644
--- a/spec/javascripts/ide/mock_data.js
+++ b/spec/javascripts/ide/mock_data.js
@@ -9,6 +9,9 @@ export const projectData = {
     master: {
       treeId: 'abcproject/master',
       can_push: true,
+      commit: {
+        id: '123',
+      },
     },
   },
   mergeRequests: {},