Fix endpoint not being update correctly

2 files changed, 44 insertions, 2 deletions

diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index e98f35bb58c..87b2725a045 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -40,7 +40,6 @@ export default {
     return {
       isLoading: false,
       dropdownContent: '',
-      endpoint: this.stage.dropdown_path,
     };
   },
 
@@ -73,7 +72,7 @@ export default {
     },
 
     fetchJobs() {
-      this.$http.get(this.endpoint)
+      this.$http.get(this.stage.dropdown_path)
         .then((response) => {
           this.dropdownContent = response.json().html;
           this.isLoading = false;
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index a4f32a1faed..1b96b2e3d51 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -83,4 +83,47 @@ describe('Pipelines stage component', () => {
       }, 0);
     });
   });
+
+  describe('update endpoint correctly', () => {
+    const updatedInterceptor = (request, next) => {
+      if (request.url === 'bar') {
+        next(request.respondWith(JSON.stringify({ html: 'this is the updated content' }), {
+          status: 200,
+        }));
+      }
+      next();
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(updatedInterceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, updatedInterceptor,
+      );
+    });
+
+    it('should update the stage to request the new endpoint provided', (done) => {
+      component.stage = {
+        status: {
+          group: 'running',
+          icon: 'running',
+          title: 'running',
+        },
+        dropdown_path: 'bar',
+      };
+
+      Vue.nextTick(() => {
+        component.$el.querySelector('button').click();
+
+        setTimeout(() => {
+          expect(
+            component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
+            ).toEqual('this is the updated content');
+          done();
+        });
+      });
+    });
+  });
 });