Skip to content

G
gitlab-ce
Commit 0838bbc8 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera
Browse files
Options

Merge branch '220328-refactor-compliance-dashboard-merge-requests' into 'master' 

Refactor compliance dashboard merge requests

See merge request gitlab-org/gitlab!38168
parents 04a53f93 b6f66433
Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 239 deletions
ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue
View file @ 0838bbc8
<script> <script>
import { GlTabs, GlTab, GlTooltipDirective } from '@gitlab/ui'; import Cookies from 'js-cookie';
import { isEmpty } from 'lodash'; import { GlTabs, GlTab } from '@gitlab/ui';
import { __ } from '~/locale';
import { sprintf, __, s__ } from '~/locale'; import MergeRequestsGrid from './merge_requests/grid.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import ApprovalStatus from './approval_status.vue';
import Approvers from './approvers.vue';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import MergeRequest from './merge_request.vue'; import { COMPLIANCE_TAB_COOKIE_KEY } from '../constants';
import Pagination from './pagination.vue';
import PipelineStatus from './pipeline_status.vue';
import GridColumnHeading from './grid_column_heading.vue';
export default { export default {
name: 'ComplianceDashboard', name: 'ComplianceDashboard',
directives: {
GlTooltip: GlTooltipDirective,
},
components: { components: {
ApprovalStatus, MergeRequestsGrid,
Approvers,
EmptyState, EmptyState,
GridColumnHeading,
MergeRequest,
Pagination,
PipelineStatus,
GlTab, GlTab,
GlTabs, GlTabs,
}, },
mixins: [timeagoMixin],
props: { props: {
emptyStateSvgPath: { emptyStateSvgPath: {
type: String, type: String,
...@@ -51,28 +35,13 @@ export default { ...@@ -51,28 +35,13 @@ export default {
}, },
}, },
methods: { methods: {
key(id, value) { showTabs() {
return `${id}-${value}`; return Cookies.get(COMPLIANCE_TAB_COOKIE_KEY) === 'true';
},
timeAgoString(mergedAt) {
return sprintf(s__('merged %{timeAgo}'), {
timeAgo: this.timeFormatted(mergedAt),
});
},
timeTooltip(mergedAt) {
return this.tooltipTitle(mergedAt);
},
hasStatus(status) {
return !isEmpty(status);
}, },
}, },
strings: { strings: {
heading: __('Compliance Dashboard'), heading: __('Compliance Dashboard'),
subheading: __('Here you will find recent merge request activity'), subheading: __('Here you will find recent merge request activity'),
mergeRequestLabel: __('Merge Request'),
approvalStatusLabel: __('Approval Status'),
pipelineStatusLabel: __('Pipeline'),
updatesLabel: __('Updates'),
mergeRequestsTabLabel: __('Merge Requests'), mergeRequestsTabLabel: __('Merge Requests'),
}, },
}; };
...@@ -84,61 +53,16 @@ export default { ...@@ -84,61 +53,16 @@ export default {
<h4>{{ $options.strings.heading }}</h4> <h4>{{ $options.strings.heading }}</h4>
<p>{{ $options.strings.subheading }}</p> <p>{{ $options.strings.subheading }}</p>
</header> </header>
<gl-tabs>
<gl-tabs v-if="showTabs()">
<gl-tab> <gl-tab>
<template #title> <template #title>
<span>{{ $options.strings.mergeRequestsTabLabel }}</span> <span>{{ $options.strings.mergeRequestsTabLabel }}</span>
</template> </template>
<div class="dashboard-grid"> <merge-requests-grid :merge-requests="mergeRequests" :is-last-page="isLastPage" />
<grid-column-heading :heading="$options.strings.mergeRequestLabel" />
<grid-column-heading
:heading="$options.strings.approvalStatusLabel"
class="gl-text-center"
/>
<grid-column-heading
:heading="$options.strings.pipelineStatusLabel"
class="gl-text-center"
/>
<grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" />
<template v-for="mergeRequest in mergeRequests">
<merge-request :key="key(mergeRequest.id, 'MR')" :merge-request="mergeRequest" />
<div
:key="key(mergeRequest.id, 'approvalStatus')"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<approval-status
v-if="hasStatus(mergeRequest.approval_status)"
:status="mergeRequest.approval_status"
/>
</div>
<div
:key="key(mergeRequest.id, 'pipeline')"
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<pipeline-status
v-if="hasStatus(mergeRequest.pipeline_status)"
:status="mergeRequest.pipeline_status"
/>
</div>
<div
:key="key(mergeRequest.id, 'updates')"
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers :approvers="mergeRequest.approved_by_users" />
<span class="gl-text-gray-700">
<time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
timeAgoString(mergeRequest.merged_at)
}}</time>
</span>
</div>
</template>
</div>
<pagination :is-last-page="isLastPage" />
</gl-tab> </gl-tab>
</gl-tabs> </gl-tabs>
<merge-requests-grid v-else :merge-requests="mergeRequests" :is-last-page="isLastPage" />
</div> </div>
<empty-state v-else :image-path="emptyStateSvgPath" /> <empty-state v-else :image-path="emptyStateSvgPath" />
</template> </template>
ee/app/assets/javascripts/compliance_dashboard/components/approvers.vue → ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue
View file @ 0838bbc8
<script> <script>
import { sprintf, __ } from '~/locale'; import { sprintf, __ } from '~/locale';
import { GlAvatarLink, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui'; import { GlAvatarLink, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
import { PRESENTABLE_APPROVERS_LIMIT } from '../constants'; import { PRESENTABLE_APPROVERS_LIMIT } from '../../constants';
export default { export default {
directives: { directives: {
......
ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue 0 → 100644
View file @ 0838bbc8
<script>
import { GlTooltipDirective } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { sprintf, __ } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import ApprovalStatus from './approval_status.vue';
import Approvers from './approvers.vue';
import MergeRequest from './merge_request.vue';
import PipelineStatus from './pipeline_status.vue';
import GridColumnHeading from '../shared/grid_column_heading.vue';
import Pagination from '../shared/pagination.vue';
export default {
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
ApprovalStatus,
Approvers,
GridColumnHeading,
MergeRequest,
PipelineStatus,
Pagination,
},
mixins: [timeagoMixin],
props: {
mergeRequests: {
type: Array,
required: true,
},
isLastPage: {
type: Boolean,
required: false,
default: false,
},
},
methods: {
key(id, value) {
return `${id}-${value}`;
},
timeAgoString(mergedAt) {
return sprintf(__('merged %{timeAgo}'), {
timeAgo: this.timeFormatted(mergedAt),
});
},
timeTooltip(mergedAt) {
return this.tooltipTitle(mergedAt);
},
hasStatus(status) {
return !isEmpty(status);
},
},
strings: {
mergeRequestLabel: __('Merge Request'),
approvalStatusLabel: __('Approval Status'),
pipelineStatusLabel: __('Pipeline'),
updatesLabel: __('Updates'),
},
keyTypes: {
mergeRequest: 'MR',
approvalStatus: 'approvalStatus',
pipeline: 'pipeline',
updates: 'updates',
},
};
</script>
<template>
<div>
<div class="dashboard-grid">
<grid-column-heading :heading="$options.strings.mergeRequestLabel" />
<grid-column-heading :heading="$options.strings.approvalStatusLabel" class="gl-text-center" />
<grid-column-heading :heading="$options.strings.pipelineStatusLabel" class="gl-text-center" />
<grid-column-heading :heading="$options.strings.updatesLabel" class="gl-text-right" />
<template v-for="mergeRequest in mergeRequests">
<merge-request
:key="key(mergeRequest.id, $options.keyTypes.mergeRequest)"
:merge-request="mergeRequest"
/>
<div
:key="key(mergeRequest.id, $options.keyTypes.approvalStatus)"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<approval-status
v-if="hasStatus(mergeRequest.approval_status)"
:status="mergeRequest.approval_status"
/>
</div>
<div
:key="key(mergeRequest.id, $options.keyTypes.pipeline)"
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<pipeline-status
v-if="hasStatus(mergeRequest.pipeline_status)"
:status="mergeRequest.pipeline_status"
/>
</div>
<div
:key="key(mergeRequest.id, $options.keyTypes.updates)"
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers :approvers="mergeRequest.approved_by_users" />
<span class="gl-text-gray-700">
<time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
timeAgoString(mergeRequest.merged_at)
}}</time>
</span>
</div>
</template>
</div>
<pagination class="gl-mt-5" :is-last-page="isLastPage" />
</div>
</template>
ee/app/assets/javascripts/compliance_dashboard/constants.js
View file @ 0838bbc8
export const PRESENTABLE_APPROVERS_LIMIT = 2; export const PRESENTABLE_APPROVERS_LIMIT = 2;
export default {}; export const COMPLIANCE_TAB_COOKIE_KEY = 'compliance_dashboard_tabs';
ee/spec/frontend/compliance_dashboard/components/__snapshots__/dashboard_spec.js.snap
View file @ 0838bbc8
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ComplianceDashboard component when there are merge requests matches the snapshot 1`] = ` exports[`ComplianceDashboard component when there are merge requests and the show tabs cookie is true matches the snapshot 1`] = `
<div <div
class="compliance-dashboard" class="compliance-dashboard"
> >
...@@ -26,97 +26,9 @@ exports[`ComplianceDashboard component when there are merge requests matches the ...@@ -26,97 +26,9 @@ exports[`ComplianceDashboard component when there are merge requests matches the
> >
<template> <template>
<div <merge-requests-grid-stub
class="dashboard-grid" mergerequests="[object Object],[object Object]"
> />
<grid-column-heading-stub
heading="Merge Request"
/>
<grid-column-heading-stub
class="gl-text-center"
heading="Approval Status"
/>
<grid-column-heading-stub
class="gl-text-center"
heading="Pipeline"
/>
<grid-column-heading-stub
class="gl-text-right"
heading="Updates"
/>
<div
data-testid="merge-request"
>
Merge request 0
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
<div
data-testid="merge-request"
>
Merge request 1
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
</div>
<pagination-stub />
</template> </template>
<template> <template>
<span> <span>
...@@ -128,6 +40,28 @@ exports[`ComplianceDashboard component when there are merge requests matches the ...@@ -128,6 +40,28 @@ exports[`ComplianceDashboard component when there are merge requests matches the
</div> </div>
`; `;
exports[`ComplianceDashboard component when there are merge requests matches the snapshot 1`] = `
<div
class="compliance-dashboard"
>
<header
class="gl-my-5"
>
<h4>
Compliance Dashboard
</h4>
<p>
Here you will find recent merge request activity
</p>
</header>
<merge-requests-grid-stub
mergerequests="[object Object],[object Object]"
/>
</div>
`;
exports[`ComplianceDashboard component when there are no merge requests matches the snapshot 1`] = ` exports[`ComplianceDashboard component when there are no merge requests matches the snapshot 1`] = `
<empty-state-stub <empty-state-stub
imagepath="empty.svg" imagepath="empty.svg"
......
ee/spec/frontend/compliance_dashboard/components/dashboard_spec.js
View file @ 0838bbc8
import Cookies from 'js-cookie';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlTabs, GlTab } from '@gitlab/ui'; import { GlTabs, GlTab } from '@gitlab/ui';
import ComplianceDashboard from 'ee/compliance_dashboard/components/dashboard.vue'; import ComplianceDashboard from 'ee/compliance_dashboard/components/dashboard.vue';
import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue'; import MergeRequestGrid from 'ee/compliance_dashboard/components/merge_requests/grid.vue';
import PipelineStatus from 'ee/compliance_dashboard/components/pipeline_status.vue'; import { COMPLIANCE_TAB_COOKIE_KEY } from 'ee/compliance_dashboard/constants';
import Approvers from 'ee/compliance_dashboard/components/approvers.vue';
import { createMergeRequests } from '../mock_data'; import { createMergeRequests } from '../mock_data';
describe('ComplianceDashboard component', () => { describe('ComplianceDashboard component', () => {
let wrapper; let wrapper;
const findMergeRequests = () => wrapper.findAll('[data-testid="merge-request"]'); const isLastPage = false;
const findTime = () => wrapper.find('time'); const mergeRequests = createMergeRequests({ count: 2 });
const findApprovalStatus = () => wrapper.find(ApprovalStatus);
const findPipelineStatus = () => wrapper.find(PipelineStatus); const findMergeRequestsGrid = () => wrapper.find(MergeRequestGrid);
const findApprovers = () => wrapper.find(Approvers);
const findDashboardTabs = () => wrapper.find(GlTabs); const findDashboardTabs = () => wrapper.find(GlTabs);
const createComponent = (props = {}, options = {}) => { const createComponent = (props = {}) => {
return shallowMount(ComplianceDashboard, { return shallowMount(ComplianceDashboard, {
propsData: { propsData: {
mergeRequests: createMergeRequests({ count: 2, options }), mergeRequests,
isLastPage: false, isLastPage,
emptyStateSvgPath: 'empty.svg', emptyStateSvgPath: 'empty.svg',
...props, ...props,
}, },
stubs: { stubs: {
GlTab, GlTab,
MergeRequest: {
props: { mergeRequest: Object },
template: `<div data-testid="merge-request">{{ mergeRequest.title }}</div>`,
},
}, },
}); });
}; };
...@@ -41,50 +36,41 @@ describe('ComplianceDashboard component', () => { ...@@ -41,50 +36,41 @@ describe('ComplianceDashboard component', () => {
describe('when there are merge requests', () => { describe('when there are merge requests', () => {
beforeEach(() => { beforeEach(() => {
Cookies.set(COMPLIANCE_TAB_COOKIE_KEY, false);
wrapper = createComponent(); wrapper = createComponent();
}); });
afterEach(() => {
Cookies.remove(COMPLIANCE_TAB_COOKIE_KEY);
});
it('matches the snapshot', () => { it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('renders a list of merge requests', () => { it('renders the merge requests', () => {
expect(findMergeRequests().length).toEqual(2); expect(findMergeRequestsGrid().exists()).toBe(true);
}); });
it('renders the dashboard tabs', () => { it('sets the MergeRequestGrid properties', () => {
expect(findDashboardTabs().exists()).toEqual(true); expect(findMergeRequestsGrid().props('mergeRequests')).toBe(mergeRequests);
expect(findMergeRequestsGrid().props('isLastPage')).toBe(isLastPage);
}); });
describe('approval status', () => { describe('and the show tabs cookie is true', () => {
it('does not render if there is no approval status', () => { beforeEach(() => {
expect(findApprovalStatus().exists()).toBe(false); Cookies.set(COMPLIANCE_TAB_COOKIE_KEY, true);
wrapper = createComponent();
}); });
it('renders if there is an approval status', () => { it('matches the snapshot', () => {
wrapper = createComponent({}, { approvalStatus: 'success' }); expect(wrapper.element).toMatchSnapshot();
expect(findApprovalStatus().exists()).toBe(true);
});
});
describe('pipeline status', () => {
it('does not render if there is no pipeline', () => {
expect(findPipelineStatus().exists()).toBe(false);
}); });
it('renders if there is a pipeline', () => { it('renders the dashboard tabs', () => {
wrapper = createComponent({}, { addPipeline: true }); expect(findDashboardTabs().exists()).toBe(true);
expect(findPipelineStatus().exists()).toBe(true);
}); });
}); });
it('renders the approvers list', () => {
expect(findApprovers().exists()).toBe(true);
});
it('renders the "merged at" time', () => {
expect(findTime().text()).toEqual('merged 2 days ago');
});
}); });
describe('when there are no merge requests', () => { describe('when there are no merge requests', () => {
...@@ -97,11 +83,7 @@ describe('ComplianceDashboard component', () => { ...@@ -97,11 +83,7 @@ describe('ComplianceDashboard component', () => {
}); });
it('does not render merge requests', () => { it('does not render merge requests', () => {
expect(findMergeRequests().exists()).toEqual(false); expect(findMergeRequestsGrid().exists()).toBe(false);
});
it('does not render the dashboard tabs', () => {
expect(findDashboardTabs().exists()).toEqual(false);
}); });
}); });
}); });
ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap 0 → 100644
View file @ 0838bbc8
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] = `
<div>
<div
class="dashboard-grid"
>
<grid-column-heading-stub
heading="Merge Request"
/>
<grid-column-heading-stub
class="gl-text-center"
heading="Approval Status"
/>
<grid-column-heading-stub
class="gl-text-center"
heading="Pipeline"
/>
<grid-column-heading-stub
class="gl-text-right"
heading="Updates"
/>
<div
data-testid="merge-request"
>
Merge request 0
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
<div
data-testid="merge-request"
>
Merge request 1
</div>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="dashboard-pipeline gl-display-flex gl-align-items-center gl-justify-content-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5"
>
<!---->
</div>
<div
class="gl-text-right gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5 gl-relative"
>
<approvers-stub
approvers=""
/>
<span
class="gl-text-gray-700"
>
<time>
merged 2 days ago
</time>
</span>
</div>
</div>
<pagination-stub
class="gl-mt-5"
/>
</div>
`;
ee/spec/frontend/compliance_dashboard/components/approval_status_spec.js → ee/spec/frontend/compliance_dashboard/components/merge_requests/approval_status_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlLink } from '@gitlab/ui'; import { GlLink } from '@gitlab/ui';
import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue'; import ApprovalStatus from 'ee/compliance_dashboard/components/merge_requests/approval_status.vue';
describe('ApprovalStatus component', () => { describe('ApprovalStatus component', () => {
let wrapper; let wrapper;
......
ee/spec/frontend/compliance_dashboard/components/approvers_spec.js → ee/spec/frontend/compliance_dashboard/components/merge_requests/approvers_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlAvatarLink } from '@gitlab/ui'; import { GlAvatarLink } from '@gitlab/ui';
import Approvers from 'ee/compliance_dashboard/components/approvers.vue'; import Approvers from 'ee/compliance_dashboard/components/merge_requests/approvers.vue';
import { PRESENTABLE_APPROVERS_LIMIT } from 'ee/compliance_dashboard/constants'; import { PRESENTABLE_APPROVERS_LIMIT } from 'ee/compliance_dashboard/constants';
import { createApprovers } from '../mock_data'; import { createApprovers } from '../../mock_data';
describe('MergeRequest component', () => { describe('MergeRequest component', () => {
let wrapper; let wrapper;
......
ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js 0 → 100644
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils';
import MergeRequestsGrid from 'ee/compliance_dashboard/components/merge_requests/grid.vue';
import ApprovalStatus from 'ee/compliance_dashboard/components/merge_requests/approval_status.vue';
import PipelineStatus from 'ee/compliance_dashboard/components/merge_requests/pipeline_status.vue';
import Approvers from 'ee/compliance_dashboard/components/merge_requests/approvers.vue';
import { createMergeRequests } from '../../mock_data';
describe('MergeRequestsGrid component', () => {
let wrapper;
const findMergeRequests = () => wrapper.findAll('[data-testid="merge-request"]');
const findTime = () => wrapper.find('time');
const findApprovalStatus = () => wrapper.find(ApprovalStatus);
const findPipelineStatus = () => wrapper.find(PipelineStatus);
const findApprovers = () => wrapper.find(Approvers);
const createComponent = (options = {}) => {
return shallowMount(MergeRequestsGrid, {
propsData: {
mergeRequests: createMergeRequests({ count: 2, options }),
isLastPage: false,
},
stubs: {
MergeRequest: {
props: { mergeRequest: Object },
template: `<div data-testid="merge-request">{{ mergeRequest.title }}</div>`,
},
},
});
};
afterEach(() => {
wrapper.destroy();
});
describe('when intialized', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('renders a list of merge requests', () => {
expect(findMergeRequests().length).toBe(2);
});
describe('approval status', () => {
it('does not render if there is no approval status', () => {
expect(findApprovalStatus().exists()).toBe(false);
});
it('renders if there is an approval status', () => {
wrapper = createComponent({ approvalStatus: 'success' });
expect(findApprovalStatus().exists()).toBe(true);
});
});
describe('pipeline status', () => {
it('does not render if there is no pipeline', () => {
expect(findPipelineStatus().exists()).toBe(false);
});
it('renders if there is a pipeline', () => {
wrapper = createComponent({ addPipeline: true });
expect(findPipelineStatus().exists()).toBe(true);
});
});
it('renders the approvers list', () => {
expect(findApprovers().exists()).toBe(true);
});
it('renders the "merged at" time', () => {
expect(findTime().text()).toBe('merged 2 days ago');
});
});
});
ee/spec/frontend/compliance_dashboard/components/merge_request_spec.js → ee/spec/frontend/compliance_dashboard/components/merge_requests/merge_request_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlAvatarLink, GlAvatar } from '@gitlab/ui'; import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
import MergeRequest from 'ee/compliance_dashboard/components/merge_request.vue'; import MergeRequest from 'ee/compliance_dashboard/components/merge_requests/merge_request.vue';
import { createMergeRequest } from '../mock_data'; import { createMergeRequest } from '../../mock_data';
describe('MergeRequest component', () => { describe('MergeRequest component', () => {
let wrapper; let wrapper;
......
ee/spec/frontend/compliance_dashboard/components/pipeline_status_spec.js → ee/spec/frontend/compliance_dashboard/components/merge_requests/pipeline_status_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import PipelineStatus from 'ee/compliance_dashboard/components/pipeline_status.vue'; import PipelineStatus from 'ee/compliance_dashboard/components/merge_requests/pipeline_status.vue';
import { createPipelineStatus } from '../mock_data'; import { createPipelineStatus } from '../../mock_data';
describe('PipelineStatus component', () => { describe('PipelineStatus component', () => {
let wrapper; let wrapper;
......
ee/spec/frontend/compliance_dashboard/components/grid_column_heading_spec.js → ee/spec/frontend/compliance_dashboard/components/shared/grid_column_heading_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import GridColumnHeading from 'ee/compliance_dashboard/components/grid_column_heading.vue'; import GridColumnHeading from 'ee/compliance_dashboard/components/shared/grid_column_heading.vue';
describe('GridColumnHeading component', () => { describe('GridColumnHeading component', () => {
let wrapper; let wrapper;
......
ee/spec/frontend/compliance_dashboard/components/pagination_spec.js → ee/spec/frontend/compliance_dashboard/components/shared/pagination_spec.js
View file @ 0838bbc8
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlPagination } from '@gitlab/ui'; import { GlPagination } from '@gitlab/ui';
import Pagination from 'ee/compliance_dashboard/components/pagination.vue'; import Pagination from 'ee/compliance_dashboard/components/shared/pagination.vue';
describe('MergeRequest component', () => { describe('Pagination component', () => {
let wrapper; let wrapper;
const findGlPagination = () => wrapper.find(GlPagination); const findGlPagination = () => wrapper.find(GlPagination);
......
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