Skip to content

G
gitlab-ce
Commit 1d448a66 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Phil Hughes
Browse files
Options

Create responsive mobile view for pipelines table

parent 2b34f3f2
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 418 deletions
app/assets/javascripts/environments/components/environment_item.vue
View file @ 1d448a66
......@@ -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
......
app/assets/javascripts/pipelines/components/pipeline_url.vue
View file @ 1d448a66
......@@ -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>
app/assets/javascripts/pipelines/components/pipelines_actions.vue
View file @ 1d448a66
......@@ -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"
......
app/assets/javascripts/pipelines/components/time_ago.vue
View file @ 1d448a66
......@@ -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>
app/assets/javascripts/vue_shared/components/commit.vue
View file @ 1d448a66
......@@ -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>
......
app/assets/javascripts/vue_shared/components/pipelines_table.vue
View file @ 1d448a66
......@@ -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>
app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
View file @ 1d448a66
......@@ -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">
<div class="table-section section-25">
<div
class="table-mobile-header"
role="rowheader">
Commit
</div>
<div class="table-mobile-content">
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
:commit-url="commitUrl"
:short-sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor"/>
</div>
</div>
<pipeline-stage
:stage="stage"
:update-dropdown="updateGraphDropdown"
/>
<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>
</td>
</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>
app/assets/stylesheets/framework/page-header.scss
View file @ 1d448a66
......@@ -59,4 +59,8 @@
margin: 0 2px 0 3px;
}
}
.ci-status {
margin-right: 10px;
}
}
app/assets/stylesheets/framework/responsive-tables.scss
View file @ 1d448a66
......@@ -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) {
......
app/assets/stylesheets/pages/environments.scss
View file @ 1d448a66
......@@ -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%;
}
......
app/assets/stylesheets/pages/pipelines.scss
View file @ 1d448a66
......@@ -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
......
app/assets/stylesheets/pages/status.scss
View file @ 1d448a66
.container-fluid {
.ci-status {
padding: 2px 7px 4px;
margin-right: 10px;
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;
}
@mixin status-color($color-light, $color-main, $color-dark) {
color: $color-main;
border-color: $color-main;
&.ci-failed {
color: $red-500;
border-color: $red-500;
&:not(span):hover {
background-color: $color-light;
color: $color-dark;
border-color: $color-dark;
&:not(span):hover {
background-color: $red-50;
color: $red-600;
border-color: $red-600;
svg {
fill: $red-600;
}
}
svg {
fill: $red-500;
}
svg {
fill: $color-dark;
}
}
&.ci-success {
color: $green-600;
border-color: $green-500;
svg {
fill: $color-main;
}
}
&:not(span):hover {
background-color: $green-50;
color: $green-700;
border-color: $green-600;
.ci-status {
padding: 2px 7px 4px;
border: 1px solid $gray-darker;
white-space: nowrap;
border-radius: 4px;
svg {
fill: $green-600;
}
}
&:hover,
&:focus {
text-decoration: none;
}
svg {
fill: $green-500;
}
}
svg {
height: 13px;
width: 13px;
position: relative;
top: 2px;
overflow: visible;
}
&.ci-canceled,
&.ci-disabled {
color: $gl-text-color;
border-color: $gl-text-color;
&.ci-failed {
@include status-color($red-50, $red-500, $red-600);
}
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
&.ci-success {
@include status-color($green-50, $green-500, $green-700);
}
svg {
fill: $gl-text-color;
}
}
&.ci-canceled,
&.ci-disabled,
&.ci-manual {
color: $gl-text-color;
border-color: $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;
}
&:not(span):hover {
background-color: rgba($gl-text-color, .07);
}
}
&.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-pending,
&.ci-failed_with_warnings,
&.ci-success_with_warnings {
@include status-color($orange-50, $orange-500, $orange-700);
}
&.ci-created,
&.ci-skipped {
color: $gl-text-color-secondary;
border-color: $gl-text-color-secondary;
&.ci-info,
&.ci-running {
@include status-color($blue-50, $blue-500, $blue-600);
}
&:not(span):hover {
background-color: rgba($gl-text-color-secondary, .07);
}
&.ci-created,
&.ci-skipped {
color: $gl-text-color-secondary;
border-color: $gl-text-color-secondary;
svg {
fill: $gl-text-color-secondary;
}
&:not(span):hover {
background-color: rgba($gl-text-color-secondary, .07);
}
&.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;
}
svg {
fill: $gl-text-color-secondary;
}
}
}
......
app/views/projects/deployments/_deployment.html.haml
View file @ 1d448a66
......@@ -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
changelogs/unreleased/31415-responsive-pipelines-table-2.yml 0 → 100644
View file @ 1d448a66
---
title: Create responsive mobile view for pipelines table
merge_request:
author:
spec/features/merge_requests/created_from_fork_spec.rb
View file @ 1d448a66
......@@ -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
......
spec/features/merge_requests/pipelines_spec.rb
View file @ 1d448a66
......@@ -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
......
spec/features/projects/pipelines/pipelines_spec.rb
View file @ 1d448a66
......@@ -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
......
spec/javascripts/pipelines/pipeline_url_spec.js
View file @ 1d448a66
......@@ -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');
});
......
spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
View file @ 1d448a66
......@@ -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);
});
});
......
spec/javascripts/vue_shared/components/pipelines_table_spec.js
View file @ 1d448a66
......@@ -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);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7