Adds tests to new empty and error states

7 files changed, 71 insertions, 46 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 29ee3e5e67b..189dd2c7dce 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -5,6 +5,7 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
+import EmptyState from '../../vue_pipelines_index/components/empty_state';
 import ErrorState from '../../vue_pipelines_index/components/error_state';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
@@ -24,6 +25,7 @@ export default Vue.component('pipelines-table', {
   components: {
     'pipelines-table-component': PipelinesTableComponent,
     'error-state': ErrorState,
+    'empty-state': EmptyState,
   },
 
   /**
@@ -38,6 +40,7 @@ export default Vue.component('pipelines-table', {
 
     return {
       endpoint: pipelinesTableData.endpoint,
+      helpPagePath: pipelinesTableData.helpPagePath,
       store,
       state: store.state,
       isLoading: false,
@@ -49,6 +52,10 @@ export default Vue.component('pipelines-table', {
     shouldRenderErrorState() {
       return this.hasError && !this.pageRequest;
     },
+
+    shouldRenderEmptyState() {
+      return !this.state.pipelines.length && !this.pageRequest;
+    },
   },
 
   /**
@@ -102,6 +109,8 @@ export default Vue.component('pipelines-table', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
 
+      <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+
       <error-state v-if="shouldRenderErrorState" />
 
       <div class="table-holder pipelines"
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
index cfe23b65d55..78f111c74bc 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
@@ -15,7 +15,7 @@ export default {
   },
 
   template: `
-    <div class="row empty-state">
+    <div class="row empty-state js-pipelines-empty-state">
       <div class="col-xs-12 pull-right">
         <div class="svg-content">
           ${pipelinesEmptyStateSVG}
@@ -28,10 +28,10 @@ export default {
           <p>
             Continous Integration can help catch bugs by running your tests automatically,
             while Continuous Deployment can help you deliver code to your product environment.
-            <a :href="helpPagePath" class="btn btn-info">
-              Get started with Pipelines
-            </a>
           </p>
+          <a :href="helpPagePath" class="btn btn-info">
+            Get started with Pipelines
+          </a>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.js b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
index 9071ecdea73..f197395a6db 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/error_state.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
@@ -8,18 +8,18 @@ export default {
   },
 
   template: `
-  <div class="row empty-state">
-    <div class="col-xs-12 pull-right">
-      <div class="svg-content">
-        ${pipelinesErrorStateSVG}
+    <div class="row empty-state js-pipelines-error-state">
+      <div class="col-xs-12 pull-right">
+        <div class="svg-content">
+          ${pipelinesErrorStateSVG}
+        </div>
       </div>
-    </div>
 
-    <div class="col-xs-12 center">
-      <div class="text-content">
-        <h4>The API failed to fetch the pipelines.</h4>
+      <div class="col-xs-12 center">
+        <div class="text-content">
+          <h4>The API failed to fetch the pipelines.</h4>
+        </div>
       </div>
     </div>
-  </div>
   `,
 };
diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
index a494d2459aa..b4480bd98c7 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
@@ -18,7 +18,9 @@ export default {
 
   template: `
     <ul class="nav-links">
-      <li :class="{ 'active': scope === 'all'}">
+      <li
+        class="js-pipelines-tab-all"
+        :class="{ 'active': scope === 'all'}">
         <a :href="paths.allPath">
           All
           <span class="badge js-totalbuilds-count">
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 87242ff0369..885ad465179 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -32,7 +32,19 @@ export default {
     const pipelinesData = document.querySelector('#pipelines-list-vue').dataset;
 
     return {
-      ...pipelinesData,
+      endpoint: pipelinesData.endpoint,
+      cssClass: pipelinesData.cssClass,
+      helpPagePath: pipelinesData.helpPagePath,
+      newPipelinePath: pipelinesData.newPipelinePath,
+      canCreatePipeline: pipelinesData.canCreatePipeline,
+      allPath: pipelinesData.allPath,
+      pendingPath: pipelinesData.pendingPath,
+      runningPath: pipelinesData.runningPath,
+      finishedPath: pipelinesData.finishedPath,
+      branchesPath: pipelinesData.branchesPath,
+      tagsPath: pipelinesData.tagsPath,
+      hasCi: pipelinesData.hasCi,
+      ciLintPath: pipelinesData.ciLintPath,
       state: this.store.state,
       apiScope: 'all',
       pagenum: 1,
@@ -172,8 +184,7 @@ export default {
 
   template: `
     <div
-      :class="cssClass"
-      class="pipelines">
+      :class="cssClass">
 
       <div
         class="top-area"
@@ -191,37 +202,40 @@ export default {
           :canCreatePipeline="canCreatePipelineParsed " />
       </div>
 
-      <div
-        class="realtime-loading"
-        v-if="pageRequest">
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-      </div>
+      <div class="content-list pipelines">
 
-      <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+        <div
+          class="realtime-loading"
+          v-if="pageRequest">
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        </div>
 
-      <error-state v-if="shouldRenderErrorState" />
+        <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
 
-      <div
-        class="blank-state blank-state-no-icon"
-        v-if="shouldRenderNoPipelinesMessage">
-        <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
-      </div>
+        <error-state v-if="shouldRenderErrorState" />
 
-      <div
-        class="table-holder"
-        v-if="shouldRenderTable">
+        <div
+          class="blank-state blank-state-no-icon"
+          v-if="shouldRenderNoPipelinesMessage">
+          <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
+        </div>
 
-        <pipelines-table-component
-          :pipelines="state.pipelines"
-          :service="service"/>
-      </div>
+        <div
+          class="table-holder"
+          v-if="shouldRenderTable">
 
-      <gl-pagination
-        v-if="shouldRenderPagination"
-        :pagenum="pagenum"
-        :change="change"
-        :count="state.count.all"
-        :pageInfo="state.pageInfo"/>
+          <pipelines-table-component
+            :pipelines="state.pipelines"
+            :service="service"/>
+        </div>
+
+        <gl-pagination
+          v-if="shouldRenderPagination"
+          :pagenum="pagenum"
+          :change="change"
+          :count="state.count.all"
+          :pageInfo="state.pageInfo"/>
+      </div>
     </div>
   `,
 };
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index da5a676274f..5e157db3396 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,6 +1,7 @@
 - disable_initialization = local_assigns.fetch(:disable_initialization, false)
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
+  "help-page-path" => help_page_path('ci/quick_start/README')
 } }
 
 - content_for :page_specific_javascripts do
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 38cea4429ba..3d73284699f 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -2,10 +2,6 @@
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag("common_vue")
-  = page_specific_javascript_bundle_tag("vue_pipelines")
-
 #pipelines-list-vue{ data: { endpoint: namespace_project_pipelines_path(@project.namespace, @project, format: :json),
   "css-class" => container_class,
   "help-page-path" => help_page_path('ci/quick_start/README'),
@@ -19,3 +15,6 @@
   "tags-path" => project_pipelines_path(@project, scope: :tags),
   "has-ci" => @repository.gitlab_ci_yml,
   "ci-lint-path" => ci_lint_path } }
+
+= page_specific_javascript_bundle_tag('common_vue')
+= page_specific_javascript_bundle_tag('vue_pipelines')