Pipeline table mini graph dropdown remains open when table is refreshed

2 files changed, 66 insertions, 61 deletions

diff --git a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
index 29370b974af..b532b48a95b 100644
--- a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
+++ b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml
@@ -3,7 +3,7 @@
     Dropdown
 
   %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
-    .js-builds-dropdown-list.scrollable-menu
+    %li.js-builds-dropdown-list.scrollable-menu
 
-    .js-builds-dropdown-loading.builds-dropdown-loading.hidden
-      %span.fa.fa-spinner.fa-spin
+    %li.js-builds-dropdown-loading.hidden
+      %span.fa.fa-spinner
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index 2f1154bd999..a4f32a1faed 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -1,81 +1,86 @@
 import Vue from 'vue';
-import { SUCCESS_SVG } from '~/ci_status_icons';
-import Stage from '~/pipelines/components/stage';
+import stage from '~/pipelines/components/stage.vue';
+
+describe('Pipelines stage component', () => {
+  let StageComponent;
+  let component;
+
+  beforeEach(() => {
+    StageComponent = Vue.extend(stage);
+
+    component = new StageComponent({
+      propsData: {
+        stage: {
+          status: {
+            group: 'success',
+            icon: 'icon_status_success',
+            title: 'success',
+          },
+          dropdown_path: 'foo',
+        },
+        updateDropdown: false,
+      },
+    }).$mount();
+  });
 
-function minify(string) {
-  return string.replace(/\s/g, '');
-}
+  it('should render a dropdown with the status icon', () => {
+    expect(component.$el.getAttribute('class')).toEqual('dropdown');
+    expect(component.$el.querySelector('svg')).toBeDefined();
+    expect(component.$el.querySelector('button').getAttribute('data-toggle')).toEqual('dropdown');
+  });
 
-describe('Pipelines Stage', () => {
-  describe('data', () => {
-    let stageReturnValue;
+  describe('with successfull request', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({ html: 'foo' }), {
+        status: 200,
+      }));
+    };
 
     beforeEach(() => {
-      stageReturnValue = Stage.data();
+      Vue.http.interceptors.push(interceptor);
     });
 
-    it('should return object with .builds and .spinner', () => {
-      expect(stageReturnValue).toEqual({
-        builds: '',
-        spinner: '<span class="fa fa-spinner fa-spin"></span>',
-      });
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, interceptor,
+      );
     });
-  });
 
-  describe('computed', () => {
-    describe('svgHTML', function () {
-      let stage;
-      let svgHTML;
+    it('should render the received data', (done) => {
+      component.$el.querySelector('button').click();
 
-      beforeEach(() => {
-        stage = { stage: { status: { icon: 'icon_status_success' } } };
-
-        svgHTML = Stage.computed.svgHTML.call(stage);
-      });
-
-      it("should return the correct icon for the stage's status", () => {
-        expect(svgHTML).toBe(SUCCESS_SVG);
-      });
+      setTimeout(() => {
+        expect(
+          component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
+        ).toEqual('foo');
+        done();
+      }, 0);
     });
   });
 
-  describe('when mounted', () => {
-    let StageComponent;
-    let renderedComponent;
-    let stage;
+  describe('when request fails', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({}), {
+        status: 500,
+      }));
+    };
 
     beforeEach(() => {
-      stage = { status: { icon: 'icon_status_success' } };
-
-      StageComponent = Vue.extend(Stage);
-
-      renderedComponent = new StageComponent({
-        propsData: {
-          stage,
-        },
-      }).$mount();
+      Vue.http.interceptors.push(interceptor);
     });
 
-    it('should render the correct status svg', () => {
-      const minifiedComponent = minify(renderedComponent.$el.outerHTML);
-      const expectedSVG = minify(SUCCESS_SVG);
-
-      expect(minifiedComponent).toContain(expectedSVG);
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, interceptor,
+      );
     });
-  });
-
-  describe('when request fails', () => {
-    it('closes dropdown', () => {
-      spyOn($, 'ajax').and.callFake(options => options.error());
-      const StageComponent = Vue.extend(Stage);
 
-      const component = new StageComponent({
-        propsData: { stage: { status: { icon: 'foo' } } },
-      }).$mount();
+    it('should close the dropdown', () => {
+      component.$el.click();
 
-      expect(
-        component.$el.classList.contains('open'),
-      ).toEqual(false);
+      setTimeout(() => {
+        expect(component.$el.classList.contains('open')).toEqual(false);
+      }, 0);
     });
   });
 });