kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Create responsive mobile view for pipelines table

This commit is contained in:
Annabel Dunstone Gray 2017-06-16 12:00:28 +00:00 committed by Phil Hughes
parent 2b34f3f20d
commit 1d448a66d7
20 changed files with 347 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/environments/components/environment_item.vue
View File

@ -535,10 +535,10 @@ export default {
</span>
</div>
<div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
<div class="table-section section-30 table-button-footer" role="gridcell">
<div
v-if="!model.isFolder"
class="btn-group environment-action-buttons"
class="btn-group table-action-buttons"
role="group">
<actions-component

44
app/assets/javascripts/pipelines/components/pipeline_url.vue
View File

@ -23,7 +23,7 @@ export default {
};
</script>
<template>
<td>
<div class="table-section section-15 hidden-xs hidden-sm">
<a
:href="pipeline.path"
class="js-pipeline-url-link">
@ -42,24 +42,26 @@ export default {
class="js-pipeline-url-api api">
API
</span>
<span
v-if="pipeline.flags.latest"
class="js-pipeline-url-lastest label label-success"
title="Latest pipeline for this branch"
ref="tooltip">
latest
</span>
<span
v-if="pipeline.flags.yaml_errors"
class="js-pipeline-url-yaml label label-danger"
:title="pipeline.yaml_errors"
ref="tooltip">
yaml invalid
</span>
<span
v-if="pipeline.flags.stuck"
class="js-pipeline-url-stuck label label-warning">
stuck
</span>
</td>
<div class="label-container">
<span
v-if="pipeline.flags.latest"
class="js-pipeline-url-latest label label-success"
title="Latest pipeline for this branch"
ref="tooltip">
latest
</span>
<span
v-if="pipeline.flags.yaml_errors"
class="js-pipeline-url-yaml label label-danger"
:title="pipeline.yaml_errors"
ref="tooltip">
yaml invalid
</span>
<span
v-if="pipeline.flags.stuck"
class="js-pipeline-url-stuck label label-warning">
stuck
</span>
</div>
</div>
</template>

2
app/assets/javascripts/pipelines/components/pipelines_actions.vue
View File

@ -56,7 +56,7 @@
<div class="btn-group">
<button
type="button"
class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
class="dropdown-new btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
title="Manual job"
data-toggle="dropdown"
data-placement="top"

56
app/assets/javascripts/pipelines/components/time_ago.vue
View File

@ -55,31 +55,39 @@
};
</script>
<template>
<td class="pipelines-time-ago">
<p
class="duration"
v-if="hasDuration">
<span v-html="iconTimerSvg">
</span>
{{durationFormated}}
</p>
<div class="table-section section-15 pipelines-time-ago">
<div
class="table-mobile-header"
role="rowheader">
Duration
</div>
<div class="table-mobile-content">
<p
class="duration"
v-if="hasDuration">
<span
v-html="iconTimerSvg">
</span>
{{durationFormated}}
</p>
<p
class="finished-at"
v-if="hasFinishedTime">
<p
class="finished-at hidden-xs hidden-sm"
v-if="hasFinishedTime">
<i
class="fa fa-calendar"
aria-hidden="true">
</i>
<i
class="fa fa-calendar"
aria-hidden="true">
</i>
<time
ref="tooltip"
data-placement="top"
data-container="body"
:title="tooltipTitle(finishedTime)">
{{timeFormated(finishedTime)}}
</time>
</p>
</td>
<time
ref="tooltip"
data-placement="top"
data-container="body"
:title="tooltipTitle(finishedTime)">
{{timeFormated(finishedTime)}}
</time>
</p>
</div>
</div>
</script>

4
app/assets/javascripts/vue_shared/components/commit.vue
View File

@ -110,7 +110,7 @@
</script>
<template>
<div class="branch-commit">
<div v-if="hasCommitRef" class="icon-container">
<div v-if="hasCommitRef" class="icon-container hidden-xs">
<i
v-if="tag"
class="fa fa-tag"
@ -125,7 +125,7 @@
<a
v-if="hasCommitRef"
class="ref-name"
class="ref-name hidden-xs"
:href="commitRef.ref_url">
{{commitRef.name}}
</a>

57
app/assets/javascripts/vue_shared/components/pipelines_table.vue
View File

@ -28,28 +28,37 @@
};
</script>
<template>
<table class="table ci-table">
<thead>
<tr>
<th class="js-pipeline-status pipeline-status">Status</th>
<th class="js-pipeline-info pipeline-info">Pipeline</th>
<th class="js-pipeline-commit pipeline-commit">Commit</th>
<th class="js-pipeline-stages pipeline-stages">Stages</th>
<th class="js-pipeline-date pipeline-date"></th>
<th class="js-pipeline-actions pipeline-actions"></th>
</tr>
</thead>
<tbody>
<template
v-for="model in pipelines"
:model="model">
<tr
is="pipelines-table-row-component"
:pipeline="model"
:service="service"
:update-graph-dropdown="updateGraphDropdown"
/>
</template>
</tbody>
</table>
<div class="ci-table">
<div
class="gl-responsive-table-row table-row-header"
role="row">
<div
class="table-section section-10 js-pipeline-status pipeline-status"
role="rowheader">
Status
</div>
<div
class="table-section section-15 js-pipeline-info pipeline-info"
role="rowheader">
Pipeline
</div>
<div
class="table-section section-25 js-pipeline-commit pipeline-commit"
role="rowheader">
Commit
</div>
<div
class="table-section section-15 js-pipeline-stages pipeline-stages"
role="rowheader">
Stages
</div>
</div>
<pipelines-table-row-component
v-for="model in pipelines"
:key="model.id"
:pipeline="model"
:service="service"
:update-graph-dropdown="updateGraphDropdown"
/>
</div>
</template>

86
app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
View File

@ -200,47 +200,74 @@ export default {
}
return {};
},
displayPipelineActions() {
return this.pipeline.flags.retryable ||
this.pipeline.flags.cancelable ||
this.pipeline.details.manual_actions.length ||
this.pipeline.details.artifacts.length;
},
},
};
</script>
<template>
<tr class="commit">
<td class="commit-link">
<ci-badge :status="pipelineStatus" />
</td>
<div class="commit gl-responsive-table-row">
<div class="table-section section-10 commit-link">
<div class="table-mobile-header"
role="rowheader">
Status
</div>
<div class="table-mobile-content">
<ci-badge :status="pipelineStatus"/>
</div>
</div>
<pipeline-url :pipeline="pipeline" />
<td>
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
:commit-url="commitUrl"
:short-sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor"
/>
</td>
<td class="stage-cell">
<div class="stage-container dropdown js-mini-pipeline-graph"
v-if="pipeline.details.stages.length > 0"
v-for="stage in pipeline.details.stages">
<pipeline-stage
:stage="stage"
:update-dropdown="updateGraphDropdown"
/>
<div class="table-section section-25">
<div
class="table-mobile-header"
role="rowheader">
Commit
</div>
</td>
<div class="table-mobile-content">
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
:commit-url="commitUrl"
:short-sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor"/>
</div>
</div>
<div class="table-section section-wrap section-15 stage-cell">
<div
class="table-mobile-header"
role="rowheader">
Stages
</div>
<div class="table-mobile-content">
<div class="stage-container dropdown js-mini-pipeline-graph"
v-if="pipeline.details.stages.length > 0"
v-for="stage in pipeline.details.stages">
<pipeline-stage
:stage="stage"
:update-dropdown="updateGraphDropdown"
/>
</div>
</div>
</div>
<pipelines-timeago
:duration="pipelineDuration"
:finished-time="pipelineFinishedAt"
/>
<td class="pipeline-actions">
<div class="pull-right btn-group">
<div
v-if="displayPipelineActions"
class="table-section section-20 table-button-footer pipeline-actions">
<div class="btn-group table-action-buttons">
<pipelines-actions-component
v-if="pipeline.details.manual_actions.length"
:actions="pipeline.details.manual_actions"
@ -249,6 +276,7 @@ export default {
<pipelines-artifacts-component
v-if="pipeline.details.artifacts.length"
class="hidden-xs hidden-sm"
:artifacts="pipeline.details.artifacts"
/>
@ -271,6 +299,6 @@ export default {
confirm-action-message="Are you sure you want to cancel this pipeline?"
/>
</div>
</td>
</tr>
</div>
</div>
</template>

4
app/assets/stylesheets/framework/page-header.scss
View File

@ -59,4 +59,8 @@
margin: 0 2px 0 3px;
}
}
.ci-status {
margin-right: 10px;
}
}

48
app/assets/stylesheets/framework/responsive-tables.scss
View File

@ -36,13 +36,58 @@
align-self: stretch;
padding: 10px;
align-items: center;
height: 62px;
min-height: 62px;
&:not(:first-of-type) {
border-top: 1px solid $white-normal;
}
}
}
&.section-wrap {
white-space: normal;
@media (max-width: $screen-sm-max) {
flex-wrap: wrap;
}
}
}
}
.table-button-footer {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.table-action-buttons {
padding: 10px 5px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
> .external-url,
> .btn {
flex: 1 1 28px;
margin: 0 5px;
}
.dropdown-new {
width: 100%;
}
.dropdown-menu {
min-width: initial;
}
}
}
}
@ -56,6 +101,7 @@
.table-mobile-header {
color: $gl-text-color-secondary;
text-align: left;
@include flex-max-width(40);
@media (min-width: $screen-md-min) {

37
app/assets/stylesheets/pages/environments.scss
View File

@ -124,43 +124,6 @@
}
.gl-responsive-table-row {
.environments-actions {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.environment-action-buttons {
padding: 10px 5px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
> .external-url,
> .btn {
flex: 1;
flex-basis: 28px;
margin: 0 5px;
}
.dropdown-new {
width: 100%;
}
.dropdown-menu {
min-width: initial;
}
}
}
}
.branch-commit {
max-width: 100%;
}

176
app/assets/stylesheets/pages/pipelines.scss
View File

@ -10,17 +10,13 @@
.table-holder {
width: 100%;
@media (max-width: $screen-sm-max) {
overflow: auto;
}
}
.commit-title {
margin: 0;
}
.table.ci-table {
.ci-table {
.label {
margin-bottom: 3px;
@ -30,11 +26,6 @@
color: $black;
}
.stage-cell {
min-width: 130px; // Guarantees we show at least 4 stages in line
width: 20%;
}
.pipelines-time-ago {
text-align: right;
}
@ -108,39 +99,7 @@
}
}
.table.ci-table {
&.builds-page tbody tr {
height: 71px;
}
tr {
th {
padding: 16px 8px;
border: none;
}
td {
padding: 10px 8px;
}
td.environments-actions {
padding-right: 0;
}
td.stage-cell {
padding: 10px 0;
}
.commit-link {
padding: 9px 8px 10px 2px;
}
}
tbody {
border-top-width: 1px;
}
.ci-table {
.build.retried {
background-color: $gray-lightest;
}
@ -194,13 +153,6 @@
color: $gl-link-color;
}
.commit-title {
max-width: 225px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.label {
margin-right: 4px;
}
@ -253,11 +205,7 @@
}
.stage-cell {
font-size: 0;
padding: 0 4px;
> .stage-container > div > button > span > svg,
> .stage-container > button > svg {
.mini-pipeline-graph-dropdown-toggle svg {
height: 22px;
width: 22px;
position: absolute;
@ -631,6 +579,23 @@
font-weight: normal;
}
@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
border-color: $color-main;
color: $color-main;
&:hover,
&:focus,
&:active {
background-color: $color-light;
border-color: $color-dark;
color: $color-dark;
svg {
fill: $color-dark;
}
}
}
// Dropdown button in mini pipeline graph
.mini-pipeline-graph-dropdown-toggle {
border-radius: 100px;
@ -670,100 +635,32 @@
// Dropdown button animation in mini pipeline graph
&.ci-status-icon-success {
border-color: $green-500;
color: $green-500;
&:hover,
&:focus,
&:active {
background-color: $green-50;
border-color: $green-600;
color: $green-600;
svg {
fill: $green-600;
}
}
@include mini-pipeline-graph-color($green-50, $green-500, $green-600);
}
&.ci-status-icon-failed {
border-color: $red-500;
color: $red-500;
&:hover,
&:focus,
&:active {
background-color: $red-50;
border-color: $red-600;
color: $red-600;
svg {
fill: $red-600;
}
}
@include mini-pipeline-graph-color($red-50, $red-500, $red-600);
}
&.ci-status-icon-pending,
&.ci-status-icon-success_with_warnings {
border-color: $orange-500;
color: $orange-500;
&:hover,
&:focus,
&:active {
background-color: $orange-50;
border-color: $orange-600;
color: $orange-600;
svg {
fill: $orange-600;
}
}
@include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
}
&.ci-status-icon-running {
border-color: $blue-400;
color: $blue-400;
&:hover,
&:focus,
&:active {
background-color: $blue-50;
border-color: $blue-600;
color: $blue-600;
svg {
fill: $blue-600;
}
}
@include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
}
&.ci-status-icon-canceled,
&.ci-status-icon-disabled,
&.ci-status-icon-not-found,
&.ci-status-icon-manual {
border-color: $gl-text-color;
color: $gl-text-color;
&:hover,
&:focus,
&:active {
background-color: rgba($gl-text-color, 0.1);
border-color: $gl-text-color;
}
@include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
}
&.ci-status-icon-created,
&.ci-status-icon-skipped {
border-color: $gray-darkest;
color: $gray-darkest;
&:hover,
&:focus,
&:active {
background-color: rgba($gray-darkest, 0.1);
border-color: $gray-darkest;
}
@include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
}
}
@ -842,6 +739,10 @@
top: 1px;
vertical-align: text-bottom;
position: relative;
@media (max-width: $screen-xs-max) {
max-width: 60%;
}
}
// status icon on the left
@ -932,6 +833,11 @@
left: 50%;
transform: translate(-50%, 0);
border-width: 0 5px 6px;
@media (max-width: $screen-sm-max) {
left: 100%;
margin-left: -12px;
}
}
&::before {
@ -949,9 +855,15 @@
* Center dropdown menu in mini graph
*/
.mini-pipeline-graph-dropdown-menu.dropdown-menu {
right: auto;
left: 50%;
transform: translate(-50%, 0);
transform: translate(-80%, 0);
min-width: 150px;
@media(min-width: $screen-md-min) {
transform: translate(-50%, 0);
right: auto;
left: 50%;
min-width: 240px;
}
}
/**
* Terminal

210
app/assets/stylesheets/pages/status.scss
View File

@ -1,142 +1,82 @@
.container-fluid {
.ci-status {
padding: 2px 7px 4px;
margin-right: 10px;
border: 1px solid $gray-darker;
white-space: nowrap;
border-radius: 4px;
@mixin status-color($color-light, $color-main, $color-dark) {
color: $color-main;
border-color: $color-main;
&:hover,
&:focus {
text-decoration: none;
&:not(span):hover {
background-color: $color-light;
color: $color-dark;
border-color: $color-dark;
svg {
fill: $color-dark;
}
}
svg {
fill: $color-main;
}
}
.ci-status {
padding: 2px 7px 4px;
border: 1px solid $gray-darker;
white-space: nowrap;
border-radius: 4px;
&:hover,
&:focus {
text-decoration: none;
}
svg {
height: 13px;
width: 13px;
position: relative;
top: 2px;
overflow: visible;
}
&.ci-failed {
@include status-color($red-50, $red-500, $red-600);
}
&.ci-success {
@include status-color($green-50, $green-500, $green-700);
}
&.ci-canceled,
&.ci-disabled,
&.ci-manual {
color: $gl-text-color;
border-color: $gl-text-color;
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
}
&.ci-pending,
&.ci-failed_with_warnings,
&.ci-success_with_warnings {
@include status-color($orange-50, $orange-500, $orange-700);
}
&.ci-info,
&.ci-running {
@include status-color($blue-50, $blue-500, $blue-600);
}
&.ci-created,
&.ci-skipped {
color: $gl-text-color-secondary;
border-color: $gl-text-color-secondary;
&:not(span):hover {
background-color: rgba($gl-text-color-secondary, .07);
}
svg {
height: 13px;
width: 13px;
position: relative;
top: 2px;
overflow: visible;
}
&.ci-failed {
color: $red-500;
border-color: $red-500;
&:not(span):hover {
background-color: $red-50;
color: $red-600;
border-color: $red-600;
svg {
fill: $red-600;
}
}
svg {
fill: $red-500;
}
}
&.ci-success {
color: $green-600;
border-color: $green-500;
&:not(span):hover {
background-color: $green-50;
color: $green-700;
border-color: $green-600;
svg {
fill: $green-600;
}
}
svg {
fill: $green-500;
}
}
&.ci-canceled,
&.ci-disabled {
color: $gl-text-color;
border-color: $gl-text-color;
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
svg {
fill: $gl-text-color;
}
}
&.ci-pending,
&.ci-success_with_warnings,
&.ci-failed_with_warnings {
color: $orange-600;
border-color: $orange-500;
&:not(span):hover {
background-color: $orange-50;
color: $orange-700;
border-color: $orange-600;
svg {
fill: $orange-600;
}
}
svg {
fill: $orange-500;
}
}
&.ci-info,
&.ci-running {
color: $blue-500;
border-color: $blue-500;
&:not(span):hover {
background-color: $blue-50;
color: $blue-600;
border-color: $blue-600;
svg {
fill: $blue-600;
}
}
svg {
fill: $blue-500;
}
}
&.ci-created,
&.ci-skipped {
color: $gl-text-color-secondary;
border-color: $gl-text-color-secondary;
&:not(span):hover {
background-color: rgba($gl-text-color-secondary, .07);
}
svg {
fill: $gl-text-color-secondary;
}
}
&.ci-manual {
color: $gl-text-color;
border-color: $gl-text-color;
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
svg {
fill: $gl-text-color;
}
fill: $gl-text-color-secondary;
}
}
}

4
app/views/projects/deployments/_deployment.html.haml
View File

@ -20,7 +20,7 @@
.table-mobile-header{ role: 'rowheader' } Created
%span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
.table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
.btn-group.environment-action-buttons
.table-section.section-20.table-button-footer{ role: 'gridcell' }
.btn-group.table-action-button
= render 'projects/deployments/actions', deployment: deployment
= render 'projects/deployments/rollback', deployment: deployment

4
changelogs/unreleased/31415-responsive-pipelines-table-2.yml Normal file
View File

@ -0,0 +1,4 @@
---
title: Create responsive mobile view for pipelines table
merge_request:
author:

2
spec/features/merge_requests/created_from_fork_spec.rb
View File

@ -56,7 +56,7 @@ feature 'Merge request created from fork' do
visit_merge_request(merge_request)
page.within('.merge-request-tabs') { click_link 'Pipelines' }
page.within('table.ci-table') do
page.within('.ci-table') do
expect(page).to have_content pipeline.status
expect(page).to have_content pipeline.id
end

2
spec/features/merge_requests/pipelines_spec.rb
View File

@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do
end
wait_for_requests
expect(page).to have_selector('.pipeline-actions')
expect(page).to have_selector('.stage-cell')
end
end

2
spec/features/projects/pipelines/pipelines_spec.rb
View File

@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do
end
it 'has a dropdown with play button' do
expect(page).to have_selector('.dropdown-toggle.btn.btn-default .icon-play')
expect(page).to have_selector('.dropdown-new.btn.btn-default .icon-play')
end
it 'has link to the manual action' do

4
spec/javascripts/pipelines/pipeline_url_spec.js
View File

@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
},
}).$mount();
expect(component.$el.tagName).toEqual('TD');
expect(component.$el.getAttribute('class')).toContain('table-section');
});
it('should render a link the provided path and id', () => {
@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
},
}).$mount();
expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest');
expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
});

18
spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
View File

@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
it('should render a table row', () => {
component = buildComponent(pipeline);
expect(component.$el).toEqual('TR');
expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
});
describe('status column', () => {
@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
it('should render a pipeline link', () => {
expect(
component.$el.querySelector('td.commit-link a').getAttribute('href'),
component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
).toEqual(pipeline.path);
});
it('should render status text', () => {
expect(
component.$el.querySelector('td.commit-link a').textContent,
component.$el.querySelector('.table-section.commit-link a').textContent,
).toContain(pipeline.details.status.text);
});
});
@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
it('should render a pipeline link', () => {
expect(
component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
).toEqual(pipeline.path);
});
it('should render pipeline ID', () => {
expect(
component.$el.querySelector('td:nth-child(2) a > span').textContent,
component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
).toEqual(`#${pipeline.id}`);
});
describe('when a user is provided', () => {
it('should render user information', () => {
expect(
component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
).toEqual(pipeline.user.path);
expect(
component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
).toEqual(pipeline.user.name);
});
});
@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
it('should render an icon for each stage', () => {
expect(
component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
).toEqual(pipeline.details.stages.length);
});
});
@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
it('should render the provided actions', () => {
expect(
component.$el.querySelectorAll('td:nth-child(6) ul li').length,
component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
).toEqual(pipeline.details.manual_actions.length);
});
});

16
spec/javascripts/vue_shared/components/pipelines_table_spec.js
View File

@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
});
it('should render a table', () => {
expect(component.$el).toEqual('TABLE');
expect(component.$el.getAttribute('class')).toContain('ci-table');
});
it('should render table head with correct columns', () => {
expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
});
});
@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
service: {},
},
}).$mount();
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
});
});
@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
},
}).$mount();
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
});
});
});