Manage empty states in Pipelines page

Adds i18n
Adds test

Fix broken tests

Fixes empty tab state for external CI

6 files changed, 648 insertions, 204 deletions

diff --git a/spec/javascripts/pipelines/blank_state_spec.js b/spec/javascripts/pipelines/blank_state_spec.js
new file mode 100644
index 00000000000..b7a9b60d85c
--- /dev/null
+++ b/spec/javascripts/pipelines/blank_state_spec.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import component from '~/pipelines/components/blank_state.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Pipelines Blank State', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(component);
+
+    vm = mountComponent(Component,
+      {
+        svgPath: 'foo',
+        message: 'Blank State',
+      },
+    );
+  });
+
+  it('should render svg', () => {
+    expect(vm.$el.querySelector('.svg-content img').getAttribute('src')).toEqual('foo');
+  });
+
+  it('should render message', () => {
+    expect(
+      vm.$el.querySelector('h4').textContent.trim(),
+    ).toEqual('Blank State');
+  });
+});
diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js
index 97f04844b3a..71f77e5f42e 100644
--- a/spec/javascripts/pipelines/empty_state_spec.js
+++ b/spec/javascripts/pipelines/empty_state_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import emptyStateComp from '~/pipelines/components/empty_state.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines Empty State', () => {
   let component;
@@ -8,12 +9,15 @@ describe('Pipelines Empty State', () => {
   beforeEach(() => {
     EmptyStateComponent = Vue.extend(emptyStateComp);
 
-    component = new EmptyStateComponent({
-      propsData: {
-        helpPagePath: 'foo',
-        emptyStateSvgPath: 'foo',
-      },
-    }).$mount();
+    component = mountComponent(EmptyStateComponent, {
+      helpPagePath: 'foo',
+      emptyStateSvgPath: 'foo',
+      canSetCi: true,
+    });
+  });
+
+  afterEach(() => {
+    component.$destroy();
   });
 
   it('should render empty state SVG', () => {
@@ -24,16 +28,16 @@ describe('Pipelines Empty State', () => {
     expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence');
 
     expect(
-      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
-    ).toContain('Continous Integration can help catch bugs by running your tests automatically');
+      component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '),
+    ).toContain('Continous Integration can help catch bugs by running your tests automatically,');
 
     expect(
-      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
-    ).toContain('Continuous Deployment can help you deliver code to your product environment');
+      component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '),
+    ).toContain('while Continuous Deployment can help you deliver code to your product environment');
   });
 
   it('should render a link with provided help path', () => {
-    expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual('foo');
-    expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines');
+    expect(component.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual('foo');
+    expect(component.$el.querySelector('.js-get-started-pipelines').textContent).toContain('Get started with Pipelines');
   });
 });
diff --git a/spec/javascripts/pipelines/error_state_spec.js b/spec/javascripts/pipelines/error_state_spec.js
deleted file mode 100644
index a402857a4d1..00000000000
--- a/spec/javascripts/pipelines/error_state_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import errorStateComp from '~/pipelines/components/error_state.vue';
-
-describe('Pipelines Error State', () => {
-  let component;
-  let ErrorStateComponent;
-
-  beforeEach(() => {
-    ErrorStateComponent = Vue.extend(errorStateComp);
-
-    component = new ErrorStateComponent({
-      propsData: {
-        errorStateSvgPath: 'foo',
-      },
-    }).$mount();
-  });
-
-  it('should render error state SVG', () => {
-    expect(component.$el.querySelector('.svg-content svg')).toBeDefined();
-  });
-
-  it('should render emtpy state information', () => {
-    expect(
-      component.$el.querySelector('h4').textContent,
-    ).toContain('The API failed to fetch the pipelines');
-  });
-});
diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js
index 09a0c14d96c..77c5258f74c 100644
--- a/spec/javascripts/pipelines/nav_controls_spec.js
+++ b/spec/javascripts/pipelines/nav_controls_spec.js
@@ -1,116 +1,68 @@
 import Vue from 'vue';
 import navControlsComp from '~/pipelines/components/nav_controls.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;
+  let component;
 
   beforeEach(() => {
     NavControlsComponent = Vue.extend(navControlsComp);
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   it('should render link to create a new pipeline', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create').textContent).toContain('Run Pipeline');
-    expect(component.$el.querySelector('.btn-create').getAttribute('href')).toEqual(mockData.newPipelinePath);
+    expect(component.$el.querySelector('.js-run-pipeline').textContent).toContain('Run Pipeline');
+    expect(component.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(mockData.newPipelinePath);
   });
 
-  it('should not render link to create pipeline if no permission is provided', () => {
+  it('should not render link to create pipeline if no path is provided', () => {
     const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create')).toEqual(null);
+    expect(component.$el.querySelector('.js-run-pipeline')).toEqual(null);
   });
 
   it('should render link for resetting runner caches', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelectorAll('.btn-default')[0].textContent).toContain('Clear runner caches');
-    expect(component.$el.querySelectorAll('.btn-default')[0].getAttribute('href')).toEqual(mockData.resetCachePath);
+    expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches');
+    expect(component.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(mockData.resetCachePath);
   });
 
   it('should render link for CI lint', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelectorAll('.btn-default')[1].textContent).toContain('CI Lint');
-    expect(component.$el.querySelectorAll('.btn-default')[1].getAttribute('href')).toEqual(mockData.ciLintPath);
-  });
-
-  it('should render link to help page when CI is not enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: false,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines');
-    expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual(mockData.helpPagePath);
-  });
-
-  it('should not render link to help page when CI is enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-info')).toEqual(null);
+    expect(component.$el.querySelector('.js-ci-lint').textContent.trim()).toContain('CI Lint');
+    expect(component.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(mockData.ciLintPath);
   });
 });
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 54d5bfd51e6..043c8cfd8bc 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -7,36 +7,380 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
 
-  preloadFixtures('static/pipelines.html.raw');
   preloadFixtures(jsonFixtureName);
 
   let PipelinesComponent;
   let pipelines;
-  let component;
+  let vm;
+  const paths = {
+    endpoint: 'twitter/flight/pipelines.json',
+    autoDevopsPath: '/help/topics/autodevops/index.md',
+    helpPagePath: '/help/ci/quick_start/README',
+    emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
+    errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
+    noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg',
+    ciLintPath: '/ci/lint',
+    resetCachePath: '/twitter/flight/settings/ci_cd/reset_cache',
+    newPipelinePath: '/twitter/flight/pipelines/new',
+  };
+
+  const noPermissions = {
+    endpoint: 'twitter/flight/pipelines.json',
+    autoDevopsPath: '/help/topics/autodevops/index.md',
+    helpPagePath: '/help/ci/quick_start/README',
+    emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
+    errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
+    noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg',
+  };
 
   beforeEach(() => {
-    loadFixtures('static/pipelines.html.raw');
     pipelines = getJSONFixture(jsonFixtureName);
 
     PipelinesComponent = Vue.extend(pipelinesComp);
   });
 
   afterEach(() => {
-    component.$destroy();
+    vm.$destroy();
+  });
+
+  const pipelinesInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify(pipelines), {
+      status: 200,
+    }));
+  };
+
+  const emptyStateInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify({
+      pipelines: [],
+      count: {
+        all: 0,
+        pending: 0,
+        running: 0,
+        finished: 0,
+      },
+    }), {
+      status: 200,
+    }));
+  };
+
+  const errorInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify({}), {
+      status: 500,
+    }));
+  };
+
+  describe('With permission', () => {
+    describe('With pipelines in main tab', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(pipelinesInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders Run Pipeline button', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+      });
+
+      it('renders CI Lint button', () => {
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+      });
+
+      it('renders Clear Runner Cache button', () => {
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders pipelines table', () => {
+        expect(
+          vm.$el.querySelectorAll('.gl-responsive-table-row').length,
+        ).toEqual(pipelines.pipelines.length + 1);
+      });
+    });
+
+    describe('Without pipelines on main tab with CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders Run Pipeline button', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+      });
+
+      it('renders CI Lint button', () => {
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+      });
+
+      it('renders Clear Runner Cache button', () => {
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders tab empty state', () => {
+        expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.');
+      });
+    });
+
+    describe('Without pipelines nor CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders empty state', () => {
+        expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence');
+        expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath);
+      });
+
+      it('does not render tabs nor buttons', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBe(null);
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
+        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
+        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      });
+    });
+
+    describe('When API returns error', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(errorInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...paths,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, errorInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('renders buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
+        expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
+        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+      });
+
+      it('renders error state', () => {
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error with fetching the pipelines.');
+      });
+    });
+  });
+
+  describe('Without permission', () => {
+    describe('With pipelines in main tab', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(pipelinesInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not render buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
+        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
+        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      });
+
+      it('renders pipelines table', () => {
+        expect(
+          vm.$el.querySelectorAll('.gl-responsive-table-row').length,
+        ).toEqual(pipelines.pipelines.length + 1);
+      });
+    });
+
+    describe('Without pipelines on main tab with CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not render buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
+        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
+        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      });
+
+      it('renders tab empty state', () => {
+        expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.');
+      });
+    });
+
+    describe('Without pipelines nor CI', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(emptyStateInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: false,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, emptyStateInterceptor,
+        );
+      });
+
+      it('renders empty state without button to set CI', () => {
+        expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.');
+        expect(vm.$el.querySelector('.js-get-started-pipelines')).toBe(null);
+      });
+
+      it('does not render tabs nor buttons', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBe(null);
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
+        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
+        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      });
+    });
+
+    describe('When API returns error', () => {
+      beforeEach((done) => {
+        Vue.http.interceptors.push(errorInterceptor);
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: false,
+          canCreatePipeline: true,
+          ...noPermissions,
+        });
+
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, errorInterceptor,
+        );
+      });
+
+      it('renders tabs', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
+      });
+
+      it('does not renders buttons', () => {
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
+        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
+        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      });
+
+      it('renders error state', () => {
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error with fetching the pipelines.');
+      });
+    });
   });
 
   describe('successfull request', () => {
     describe('with pipelines', () => {
-      const pipelinesInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify(pipelines), {
-          status: 200,
-        }));
-      };
-
       beforeEach(() => {
         Vue.http.interceptors.push(pipelinesInterceptor);
-        component = mountComponent(PipelinesComponent, {
+        vm = mountComponent(PipelinesComponent, {
           store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
         });
       });
 
@@ -48,9 +392,9 @@ describe('Pipelines', () => {
 
       it('should render table', (done) => {
         setTimeout(() => {
-          expect(component.$el.querySelector('.table-holder')).toBeDefined();
+          expect(vm.$el.querySelector('.table-holder')).toBeDefined();
           expect(
-            component.$el.querySelectorAll('.gl-responsive-table-row').length,
+            vm.$el.querySelectorAll('.gl-responsive-table-row').length,
           ).toEqual(pipelines.pipelines.length + 1);
           done();
         });
@@ -59,22 +403,22 @@ describe('Pipelines', () => {
       it('should render navigation tabs', (done) => {
         setTimeout(() => {
           expect(
-            component.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(),
           ).toContain('Pending');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-all').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim(),
           ).toContain('All');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-running').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-running').textContent.trim(),
           ).toContain('Running');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(),
           ).toContain('Finished');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(),
           ).toContain('Branches');
           expect(
-            component.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(),
+            vm.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(),
           ).toContain('Tags');
           done();
         });
@@ -82,10 +426,10 @@ describe('Pipelines', () => {
 
       it('should make an API request when using tabs', (done) => {
         setTimeout(() => {
-          spyOn(component, 'updateContent');
-          component.$el.querySelector('.js-pipelines-tab-finished').click();
+          spyOn(vm, 'updateContent');
+          vm.$el.querySelector('.js-pipelines-tab-finished').click();
 
-          expect(component.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
+          expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
           done();
         });
       });
@@ -93,9 +437,9 @@ describe('Pipelines', () => {
       describe('with pagination', () => {
         it('should make an API request when using pagination', (done) => {
           setTimeout(() => {
-            spyOn(component, 'updateContent');
+            spyOn(vm, 'updateContent');
             // Mock pagination
-            component.store.state.pageInfo = {
+            vm.store.state.pageInfo = {
               page: 1,
               total: 10,
               perPage: 2,
@@ -103,9 +447,9 @@ describe('Pipelines', () => {
               totalPages: 5,
             };
 
-            Vue.nextTick(() => {
-              component.$el.querySelector('.js-next-button a').click();
-              expect(component.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
+            vm.$nextTick(() => {
+              vm.$el.querySelector('.js-next-button a').click();
+              expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
 
               done();
             });
@@ -113,112 +457,249 @@ describe('Pipelines', () => {
         });
       });
     });
+  });
 
-    describe('without pipelines', () => {
-      const emptyInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), {
-          status: 200,
-        }));
-      };
+  describe('methods', () => {
+    beforeEach(() => {
+      spyOn(history, 'pushState').and.stub();
+    });
 
-      beforeEach(() => {
-        Vue.http.interceptors.push(emptyInterceptor);
-      });
+    describe('updateContent', () => {
+      it('should set given parameters', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+        vm.updateContent({ scope: 'finished', page: '4' });
 
-      afterEach(() => {
-        Vue.http.interceptors = _.without(
-          Vue.http.interceptors, emptyInterceptor,
-        );
+        expect(vm.page).toEqual('4');
+        expect(vm.scope).toEqual('finished');
+        expect(vm.requestData.scope).toEqual('finished');
+        expect(vm.requestData.page).toEqual('4');
       });
+    });
+
+    describe('onChangeTab', () => {
+      it('should set page to 1', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
+        });
+        spyOn(vm, 'updateContent');
 
-      it('should render empty state', (done) => {
-        component = new PipelinesComponent({
-          propsData: {
-            store: new Store(),
-          },
-        }).$mount();
+        vm.onChangeTab('running');
 
-        setTimeout(() => {
-          expect(component.$el.querySelector('.empty-state')).not.toBe(null);
-          done();
+        expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
+      });
+    });
+
+    describe('onChangePage', () => {
+      it('should update page and keep scope', () => {
+        vm = mountComponent(PipelinesComponent, {
+          store: new Store(),
+          hasGitlabCi: true,
+          canCreatePipeline: true,
+          ...paths,
         });
+        spyOn(vm, 'updateContent');
+
+        vm.onChangePage(4);
+
+        expect(vm.updateContent).toHaveBeenCalledWith({ scope: vm.scope, page: '4' });
       });
     });
   });
 
-  describe('unsuccessfull request', () => {
-    const errorInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
+  describe('computed properties', () => {
     beforeEach(() => {
-      Vue.http.interceptors.push(errorInterceptor);
+      vm = mountComponent(PipelinesComponent, {
+        store: new Store(),
+        hasGitlabCi: true,
+        canCreatePipeline: true,
+        ...paths,
+      });
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, errorInterceptor,
-      );
+    describe('tabs', () => {
+      it('returns default tabs', () => {
+        expect(vm.tabs).toEqual([
+          { name: 'All', scope: 'all', count: 0, isActive: true },
+          { name: 'Pending', scope: 'pending', count: 0, isActive: false },
+          { name: 'Running', scope: 'running', count: 0, isActive: false },
+          { name: 'Finished', scope: 'finished', count: 0, isActive: false },
+          { name: 'Branches', scope: 'branches', isActive: false },
+          { name: 'Tags', scope: 'tags', isActive: false },
+        ]);
+      });
     });
 
-    it('should render error state', (done) => {
-      component = new PipelinesComponent({
-        propsData: {
-          store: new Store(),
-        },
-      }).$mount();
+    describe('emptyTabMessage', () => {
+      it('returns message with scope', (done) => {
+        vm.scope = 'pending';
 
-      setTimeout(() => {
-        expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
-        done();
+        vm.$nextTick(() => {
+          expect(vm.emptyTabMessage).toEqual('There are currently no pending pipelines.');
+          done();
+        });
       });
-    });
-  });
 
-  describe('methods', () => {
-    beforeEach(() => {
-      spyOn(history, 'pushState').and.stub();
+      it('returns message without scope when scope is `all`', () => {
+        expect(vm.emptyTabMessage).toEqual('There are currently no pipelines.');
+      });
     });
 
-    describe('updateContent', () => {
-      it('should set given parameters', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('stateToRender', () => {
+      it('returns loading state when the app is loading', () => {
+        expect(vm.stateToRender).toEqual('loading');
+      });
+
+      it('returns error state when app has error', (done) => {
+        vm.hasError = true;
+        vm.isLoading = false;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('error');
+          done();
+        });
+      });
+
+      it('returns table list when app has pipelines', (done) => {
+        vm.isLoading = false;
+        vm.hasError = false;
+        vm.state.pipelines = pipelines.pipelines;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('tableList');
+
+          done();
+        });
+      });
+
+      it('returns empty tab when app does not have pipelines but project has pipelines', (done) => {
+        vm.state.count.all = 10;
+        vm.isLoading = false;
+
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyTab');
+
+          done();
         });
-        component.updateContent({ scope: 'finished', page: '4' });
+      });
+
+      it('returns empty tab when project has CI', (done) => {
+        vm.isLoading = false;
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyTab');
 
-        expect(component.page).toEqual('4');
-        expect(component.scope).toEqual('finished');
-        expect(component.requestData.scope).toEqual('finished');
-        expect(component.requestData.page).toEqual('4');
+          done();
+        });
+      });
+
+      it('returns empty state when project does not have pipelines nor CI', (done) => {
+        vm.isLoading = false;
+        vm.hasGitlabCi = false;
+        vm.$nextTick(() => {
+          expect(vm.stateToRender).toEqual('emptyState');
+
+          done();
+        });
       });
     });
 
-    describe('onChangeTab', () => {
-      it('should set page to 1', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('shouldRenderTabs', () => {
+      it('returns true when state is loading & has already made the first request', (done) => {
+        vm.isLoading = true;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
         });
-        spyOn(component, 'updateContent');
+      });
 
-        component.onChangeTab('running');
+      it('returns true when state is tableList & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.state.pipelines = pipelines.pipelines;
+        vm.hasMadeRequest = true;
 
-        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returns true when state is error & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.hasError = true;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returs true when state is empty tab & has already made the first request', (done) => {
+        vm.isLoading = false;
+        vm.state.count.all = 10;
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(true);
+
+          done();
+        });
+      });
+
+      it('returns false when has not made first request', (done) => {
+        vm.hasMadeRequest = false;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(false);
+
+          done();
+        });
+      });
+
+      it('returns false when state is emtpy state', (done) => {
+        vm.isLoading = false;
+        vm.hasMadeRequest = true;
+        vm.hasGitlabCi = false;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderTabs).toEqual(false);
+
+          done();
+        });
       });
     });
 
-    describe('onChangePage', () => {
-      it('should update page and keep scope', () => {
-        component = mountComponent(PipelinesComponent, {
-          store: new Store(),
+    describe('shouldRenderButtons', () => {
+      it('returns true when it has paths & has made the first request', (done) => {
+        vm.hasMadeRequest = true;
+
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderButtons).toEqual(true);
+
+          done();
         });
-        spyOn(component, 'updateContent');
+      });
+
+      it('returns false when it has not made the first request', (done) => {
+        vm.hasMadeRequest = false;
 
-        component.onChangePage(4);
+        vm.$nextTick(() => {
+          expect(vm.shouldRenderButtons).toEqual(false);
 
-        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+          done();
+        });
       });
     });
   });
diff --git a/spec/javascripts/pipelines/pipelines_store_spec.js b/spec/javascripts/pipelines/pipelines_store_spec.js
index 10ff0c6bb84..0d628285a7b 100644
--- a/spec/javascripts/pipelines/pipelines_store_spec.js
+++ b/spec/javascripts/pipelines/pipelines_store_spec.js
@@ -9,7 +9,12 @@ describe('Pipelines Store', () => {
 
   it('should be initialized with an empty state', () => {
     expect(store.state.pipelines).toEqual([]);
-    expect(store.state.count).toEqual({});
+    expect(store.state.count).toEqual({
+      all: 0,
+      finished: 0,
+      pending: 0,
+      running: 0,
+    });
     expect(store.state.pageInfo).toEqual({});
   });