Added more tests and corrected typos35779-realtime-update-of-pipeline-status-in-files-view

1 files changed, 58 insertions, 27 deletions

diff --git a/spec/javascripts/commit/commit_pipeline_status_component_spec.js b/spec/javascripts/commit/commit_pipeline_status_component_spec.js
index 2a52097e0d5..90f290e845e 100644
--- a/spec/javascripts/commit/commit_pipeline_status_component_spec.js
+++ b/spec/javascripts/commit/commit_pipeline_status_component_spec.js
@@ -6,7 +6,7 @@ import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Commit pipeline status component', () => {
   let vm;
-  let component;
+  let Component;
   let mock;
   const mockCiStatus = {
     details_path: '/root/hello-world/pipelines/1',
@@ -19,34 +19,25 @@ describe('Commit pipeline status component', () => {
   };
 
   beforeEach(() => {
-    mock = new MockAdapter(axios);
-    mock.onGet('/dummy/endpoint').reply(() => {
-      const res = Promise.resolve([200, {
-        pipelines: [
-          {
-            details: {
-              stages: [
-                {
-                  status: mockCiStatus,
-                  title: 'Commit: canceled',
-                },
-              ],
-            },
-          },
-        ],
-      }]);
-      return res;
-    });
-    component = Vue.extend(commitPipelineStatus);
-  });
-
-  afterEach(() => {
-    mock.reset();
+    Component = Vue.extend(commitPipelineStatus);
   });
 
-  describe('While polling pipeline data', () => {
+  describe('While polling pipeline data succesfully', () => {
     beforeEach(() => {
-      vm = mountComponent(component, {
+      mock = new MockAdapter(axios);
+      mock.onGet('/dummy/endpoint').reply(() => {
+        const res = Promise.resolve([200, {
+          pipelines: [
+            {
+              details: {
+                status: mockCiStatus,
+              },
+            },
+          ],
+        }]);
+        return res;
+      });
+      vm = mountComponent(Component, {
         endpoint: '/dummy/endpoint',
       });
     });
@@ -54,18 +45,58 @@ describe('Commit pipeline status component', () => {
     afterEach(() => {
       vm.poll.stop();
       vm.$destroy();
+      mock.restore();
+    });
+
+    it('shows the loading icon when polling is starting', (done) => {
+      expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.loading-container')).toBe(null);
+        done();
+      });
     });
 
     it('contains a ciStatus when the polling is succesful ', (done) => {
       setTimeout(() => {
         expect(vm.ciStatus).toEqual(mockCiStatus);
         done();
-      }, 1000);
+      });
     });
 
     it('contains a ci-status icon when polling is succesful', (done) => {
       setTimeout(() => {
         expect(vm.$el.querySelector('.ci-status-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.ci-status-icon').classList).toContain(`ci-status-icon-${mockCiStatus.group}`);
+        done();
+      });
+    });
+  });
+
+  describe('When polling data was not succesful', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mock.onGet('/dummy/endpoint').reply(() => {
+        const res = Promise.reject([502, { }]);
+        return res;
+      });
+      vm = new Component({
+        props: {
+          endpoint: '/dummy/endpoint',
+        },
+      });
+    });
+
+    afterEach(() => {
+      vm.poll.stop();
+      vm.$destroy();
+      mock.restore();
+    });
+
+    it('calls an errorCallback', (done) => {
+      spyOn(vm, 'errorCallback').and.callThrough();
+      vm.$mount();
+      setTimeout(() => {
+        expect(vm.errorCallback.calls.count()).toEqual(1);
         done();
       });
     });