Commit f1dca5a3 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '36118-add-linked-pipeline-mini-list-to-pipelines-table' into 'master'

Add linked pipelines to pipelines table component [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!66748
parents 85fc352f 0e4ec627
......@@ -55,7 +55,7 @@ export default {
label: s__('Pipeline|Stages'),
thClass: DEFAULT_TH_CLASSES,
tdClass: DEFAULT_TD_CLASS,
columnClass: 'gl-w-15p',
columnClass: 'gl-w-quarter',
thAttr: { 'data-testid': 'stages-th' },
},
{
......@@ -70,12 +70,14 @@ export default {
key: 'actions',
thClass: DEFAULT_TH_CLASSES,
tdClass: DEFAULT_TD_CLASS,
columnClass: 'gl-w-20p',
columnClass: 'gl-w-15p',
thAttr: { 'data-testid': 'actions-th' },
},
],
components: {
GlTable,
LinkedPipelinesMiniList: () =>
import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
PipelinesCommit,
PipelineMiniGraph,
PipelineOperations,
......@@ -182,12 +184,23 @@ export default {
<div class="stage-cell">
<!-- This empty div should be removed, see https://gitlab.com/gitlab-org/gitlab/-/issues/323488 -->
<div></div>
<linked-pipelines-mini-list
v-if="item.triggered_by"
:triggered-by="[item.triggered_by]"
data-testid="mini-graph-upstream"
/>
<pipeline-mini-graph
v-if="item.details && item.details.stages && item.details.stages.length > 0"
class="gl-display-inline"
:stages="item.details.stages"
:update-dropdown="updateGraphDropdown"
@pipelineActionRequestComplete="onPipelineActionRequestComplete"
/>
<linked-pipelines-mini-list
v-if="item.triggered.length"
:triggered="item.triggered"
data-testid="mini-graph-downstream"
/>
</div>
</template>
......
export const triggered = [
{
id: 602,
user: {
id: 1,
name: 'Administrator',
username: 'root',
state: 'active',
avatar_url:
'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
web_url: 'http://gdk.test:3000/root',
show_status: false,
path: '/root',
},
active: false,
coverage: null,
source: 'pipeline',
source_job: { name: 'trigger_job_on_mr' },
path: '/root/job-log-sections/-/pipelines/602',
details: {
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/root/job-log-sections/-/pipelines/602',
illustration: null,
favicon:
'/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
},
},
project: {
id: 36,
name: 'job-log-sections',
full_path: '/root/job-log-sections',
full_name: 'Administrator / job-log-sections',
},
},
];
export const triggeredBy = {
id: 614,
user: {
id: 1,
name: 'Administrator',
username: 'root',
state: 'active',
avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
web_url: 'http://gdk.test:3000/root',
show_status: false,
path: '/root',
},
active: false,
coverage: null,
source: 'web',
source_job: { name: null },
path: '/root/trigger-downstream/-/pipelines/614',
details: {
status: {
icon: 'status_success',
text: 'passed',
label: 'passed',
group: 'success',
tooltip: 'passed',
has_details: true,
details_path: '/root/trigger-downstream/-/pipelines/614',
illustration: null,
favicon:
'/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
},
},
project: {
id: 42,
name: 'trigger-downstream',
full_path: '/root/trigger-downstream',
full_name: 'Administrator / trigger-downstream',
},
};
import { mount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import PipelinesTable from '~/pipelines/components/pipelines_list/pipelines_table.vue';
import { triggeredBy, triggered } from './mock_data';
jest.mock('~/pipelines/event_hub');
describe('Pipelines Table', () => {
let pipeline;
let wrapper;
const jsonFixtureName = 'pipelines/pipelines.json';
const defaultProps = {
pipelines: [],
viewType: 'root',
};
const createMockPipeline = () => {
const { pipelines } = getJSONFixture(jsonFixtureName);
return pipelines.find((p) => p.user !== null && p.commit !== null);
};
const createComponent = (props = {}) => {
wrapper = extendedWrapper(
mount(PipelinesTable, {
propsData: {
...defaultProps,
...props,
},
}),
);
};
const findUpstream = () => wrapper.findByTestId('mini-graph-upstream');
const findDownstream = () => wrapper.findByTestId('mini-graph-downstream');
beforeEach(() => {
pipeline = createMockPipeline();
});
afterEach(() => {
wrapper.destroy();
});
describe('Pipelines Table', () => {
describe('upstream linked pipelines', () => {
beforeEach(() => {
pipeline = createMockPipeline();
pipeline.triggered_by = triggeredBy;
createComponent({ pipelines: [pipeline] });
});
it('should render only a upstream pipeline', () => {
expect(findUpstream().exists()).toBe(true);
expect(findDownstream().exists()).toBe(false);
});
it('should pass an array of the correct data to the linked pipeline component', () => {
const triggeredByProps = findUpstream().props('triggeredBy');
expect(triggeredByProps).toEqual(expect.any(Array));
expect(triggeredByProps).toHaveLength(1);
expect(triggeredByProps[0]).toBe(triggeredBy);
});
});
describe('downstream linked pipelines', () => {
beforeEach(() => {
pipeline = createMockPipeline();
pipeline.triggered = triggered;
createComponent({ pipelines: [pipeline] });
});
it('should render only a downstream pipeline', () => {
expect(findDownstream().exists()).toBe(true);
expect(findUpstream().exists()).toBe(false);
});
});
describe('upstream and downstream linked pipelines', () => {
beforeEach(() => {
pipeline = createMockPipeline();
pipeline.triggered = triggered;
pipeline.triggered_by = triggeredBy;
createComponent({ pipelines: [pipeline] });
});
it('should render both downstream and upstream pipelines', () => {
expect(findDownstream().exists()).toBe(true);
expect(findUpstream().exists()).toBe(true);
});
});
});
});
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