diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-20 15:36:02 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-03-20 16:16:19 +0000 |
commit | 446b59dd4ee88f8ef86272c39408560a0107c48a (patch) | |
tree | dc6eef4b89111775dd4176f6db08fd95af57c293 /app/assets/javascripts | |
parent | 2c85a20482c2e33f307ad8faf60e41e199aa25b8 (diff) | |
download | gitlab-ce-446b59dd4ee88f8ef86272c39408560a0107c48a.tar.gz |
Adds tests to new empty and error states
Diffstat (limited to 'app/assets/javascripts')
5 files changed, 67 insertions, 42 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> `, }; |