Skip to content

G
gitlab-ce
Commit 52a83481 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Add Requirement description support 

Adds Description field support for Requirements.
parent 5f3de8d2
Show whitespace changes
Inline Side-by-side
Showing with 885 additions and 371 deletions
ee/app/assets/javascripts/requirements/components/requirement_form.vue
View file @ 52a83481
<script>
import { GlDrawer, GlFormGroup, GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
import '~/behaviors/markdown/render_gfm';
import $ from 'jquery';
import {
GlDrawer,
GlFormGroup,
GlFormTextarea,
GlButton,
GlFormCheckbox,
GlTooltipDirective,
GlSafeHtmlDirective as SafeHtml,
} from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { __, sprintf } from '~/locale';
import ZenMode from '~/zen_mode';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import RequirementStatusBadge from './requirement_status_badge.vue';
import RequirementMeta from '../mixins/requirement_meta';
import { MAX_TITLE_LENGTH, TestReportStatus } from '../constants';
export default {
events: {
drawerClose: 'drawer-close',
disableEdit: 'disable-edit',
enableEdit: 'enable-edit',
},
titleInvalidMessage: sprintf(__('Requirement title cannot have more than %{limit} characters.'), {
limit: MAX_TITLE_LENGTH,
}),
......@@ -15,7 +35,15 @@ export default {
GlFormTextarea,
GlFormCheckbox,
GlButton,
MarkdownField,
RequirementStatusBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
SafeHtml,
},
mixins: [RequirementMeta],
inject: ['descriptionPreviewPath', 'descriptionHelpPath'],
props: {
drawerOpen: {
type: Boolean,
......@@ -26,6 +54,11 @@ export default {
required: false,
default: null,
},
enableRequirementEdit: {
type: Boolean,
required: false,
default: false,
},
requirementRequestActive: {
type: Boolean,
required: true,
......@@ -33,8 +66,10 @@ export default {
},
data() {
return {
zenModeEnabled: false,
title: this.requirement?.title || '',
satisfied: this.requirement?.satisfied || false,
description: this.requirement?.description || '',
};
},
computed: {
......@@ -48,19 +83,17 @@ export default {
return this.isCreate ? __('Create requirement') : __('Save changes');
},
titleInvalid() {
return this.title.length > MAX_TITLE_LENGTH;
return this.title?.length > MAX_TITLE_LENGTH;
},
disableSaveButton() {
return this.title === '' || this.titleInvalid || this.requirementRequestActive;
},
reference() {
return `REQ-${this.requirement?.iid}`;
},
},
watch: {
requirement: {
handler(value) {
this.title = value?.title || '';
this.description = value?.description || '';
this.satisfied = value?.satisfied || false;
},
deep: true,
......@@ -69,10 +102,25 @@ export default {
// Clear `title` and `satisfied` value on drawer close.
if (!value) {
this.title = '';
this.description = '';
this.satisfied = false;
}
},
},
mounted() {
this.zenMode = new ZenMode();
$(this.$refs.gfmContainer).renderGFM();
$(document).on('zen_mode:enter', () => {
this.zenModeEnabled = true;
});
$(document).on('zen_mode:leave', () => {
this.zenModeEnabled = false;
});
},
beforeDestroy() {
$(document).off('zen_mode:enter');
$(document).off('zen_mode:leave');
},
methods: {
getDrawerHeaderHeight() {
const wrapperEl = document.querySelector('.js-requirements-container-wrapper');
......@@ -100,31 +148,83 @@ export default {
return null;
},
handleSave() {
if (this.isCreate) {
this.$emit('save', this.title);
handleFormInputKeyDown() {
if (this.zenModeEnabled) {
// Exit Zen mode, don't close the drawer.
this.zenModeEnabled = false;
this.zenMode.exit();
} else {
this.$emit('save', {
iid: this.requirement.iid,
title: this.title,
lastTestReportState: this.newLastTestReportState(),
});
this.$emit(this.$options.events.disableEdit);
}
},
handleSave() {
const { title, description } = this;
const eventParams = {
title,
description,
};
if (!this.isCreate) {
eventParams.iid = this.requirement.iid;
eventParams.lastTestReportState = this.newLastTestReportState();
}
this.$emit('save', eventParams);
},
handleCancel() {
this.$emit(
this.isCreate ? this.$options.events.drawerClose : this.$options.events.disableEdit,
);
},
},
};
</script>
<template>
<gl-drawer :open="drawerOpen" :header-height="getDrawerHeaderHeight()" @close="$emit('cancel')">
<gl-drawer
:open="drawerOpen"
:header-height="getDrawerHeaderHeight()"
:class="{ 'zen-mode gl-absolute': zenModeEnabled }"
class="requirement-form-drawer"
@close="$emit($options.events.drawerClose)"
>
<template #header>
<h4 class="gl-m-0">{{ fieldLabel }}</h4>
<h4 v-if="isCreate" class="gl-m-0">{{ __('New Requirement') }}</h4>
<div v-else class="gl-display-flex gl-align-items-center">
<strong class="gl-text-gray-500">{{ reference }}</strong>
<requirement-status-badge
v-if="testReport"
:test-report="testReport"
:last-test-report-manually-created="requirement.lastTestReportManuallyCreated"
class="gl-ml-3"
/>
</div>
</template>
<template>
<div class="requirement-form">
<span v-if="!isCreate" class="text-muted">{{ reference }}</span>
<div v-if="!enableRequirementEdit && !isCreate" class="requirement-details">
<div
class="title-container gl-display-flex gl-border-b-1 gl-border-b-solid gl-border-gray-100"
>
<h3 v-safe-html="titleHtml" class="title qa-title gl-flex-grow-1 gl-m-0 gl-mb-3"></h3>
<gl-button
v-if="canUpdate && !isArchived"
v-gl-tooltip.bottom
data-testid="edit"
:title="__('Edit title and description')"
icon="pencil"
class="btn-edit gl-align-self-start"
@click="$emit($options.events.enableEdit, $event)"
/>
</div>
<div data-testid="descriptionContainer" class="description-container gl-mt-3">
<div ref="gfmContainer" v-safe-html="descriptionHtml" class="md"></div>
</div>
</div>
<div v-else class="requirement-form">
<div class="requirement-form-container" :class="{ 'gl-flex-grow-1 gl-mt-2': !isCreate }">
<div data-testid="form-error-container" class="flash-container"></div>
<gl-form-group
data-testid="title"
:label="__('Title')"
:invalid-feedback="$options.titleInvalidMessage"
:state="!titleInvalid"
......@@ -137,12 +237,39 @@ export default {
autofocus
resize
:disabled="requirementRequestActive"
:placeholder="__('Describe the requirement here')"
:placeholder="__('Requirement title')"
max-rows="25"
class="requirement-form-textarea"
:class="{ 'gl-field-error-outline': titleInvalid }"
@keyup.escape.exact="$emit('cancel')"
@keydown.escape.exact.stop="handleFormInputKeyDown"
@keydown.meta.enter="handleSave"
@keydown.ctrl.enter="handleSave"
/>
</gl-form-group>
<gl-form-group data-testid="description" class="common-note-form">
<label for="requirementDescription" class="d-block col-form-label gl-pb-0!">
{{ __('Description') }}
</label>
<markdown-field
:markdown-preview-path="descriptionPreviewPath"
:markdown-docs-path="descriptionHelpPath"
:enable-autocomplete="false"
:textarea-value="description"
>
<template #textarea>
<textarea
id="requirementDescription"
v-model="description"
:data-supports-quick-actions="false"
:aria-label="__('Description')"
:placeholder="__('Describe the requirement here')"
class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea"
@keydown.escape.exact.stop="handleFormInputKeyDown"
@keydown.meta.enter="handleSave"
@keydown.ctrl.enter="handleSave"
></textarea>
</template>
</markdown-field>
<gl-form-checkbox v-if="!isCreate" v-model="satisfied" class="gl-mt-6">{{
__('Satisfied')
}}</gl-form-checkbox>
......@@ -162,7 +289,7 @@ export default {
variant="default"
category="primary"
class="js-requirement-cancel"
@click="$emit('cancel')"
@click="handleCancel"
>
{{ __('Cancel') }}
</gl-button>
......
ee/app/assets/javascripts/requirements/components/requirement_item.vue
View file @ 52a83481
<script>
import { escape } from 'lodash';
import { GlPopover, GlLink, GlAvatar, GlButton, GlTooltipDirective } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { getTimeago } from '~/lib/utils/datetime_utility';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import RequirementStatusBadge from './requirement_status_badge.vue';
import RequirementMeta from '../mixins/requirement_meta';
import { FilterState } from '../constants';
export default {
......@@ -20,7 +18,7 @@ export default {
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
mixins: [RequirementMeta, timeagoMixin],
props: {
requirement: {
type: Object,
......@@ -42,36 +40,13 @@ export default {
required: false,
default: false,
},
active: {
type: Boolean,
required: false,
default: false,
},
computed: {
reference() {
return `REQ-${this.requirement.iid}`;
},
canUpdate() {
return this.requirement.userPermissions.updateRequirement;
},
canArchive() {
return this.requirement.userPermissions.adminRequirement;
},
createdAt() {
return sprintf(__('created %{timeAgo}'), {
timeAgo: escape(getTimeago().format(this.requirement.createdAt)),
});
},
updatedAt() {
return sprintf(__('updated %{timeAgo}'), {
timeAgo: escape(getTimeago().format(this.requirement.updatedAt)),
});
},
isArchived() {
return this.requirement?.state === FilterState.archived;
},
author() {
return this.requirement.author;
},
testReport() {
return this.requirement.testReports.nodes[0];
},
computed: {
showIssuableMetaActions() {
return Boolean(this.canUpdate || this.canArchive || this.testReport);
},
......@@ -105,7 +80,11 @@ export default {
</script>
<template>
<li class="issue requirement" :class="{ 'disabled-content': stateChangeRequestActive }">
<li
class="issue requirement gl-cursor-pointer"
:class="{ 'disabled-content': stateChangeRequestActive, 'gl-bg-blue-50': active }"
@click="$emit('show-click', requirement)"
>
<div class="issue-box">
<div class="issuable-info-container">
<span class="issuable-reference text-muted d-none d-sm-block mr-2">{{ reference }}</span>
......@@ -119,7 +98,7 @@ export default {
<span
v-gl-tooltip:tooltipcontainer.bottom
:title="tooltipTitle(requirement.createdAt)"
>{{ createdAt }}</span
>{{ createdAtFormatted }}</span
>
{{ __('by') }}
<gl-link ref="authorLink" class="author-link js-user-link" :href="author.webUrl">
......@@ -130,7 +109,7 @@ export default {
v-gl-tooltip:tooltipcontainer.bottom
:title="tooltipTitle(requirement.updatedAt)"
class="issuable-updated-at"
>&middot; {{ updatedAt }}</span
>&middot; {{ updatedAtFormatted }}</span
>
</div>
<requirement-status-badge
......@@ -154,7 +133,7 @@ export default {
v-gl-tooltip
icon="pencil"
:title="__('Edit')"
@click="$emit('editClick', requirement)"
@click="$emit('edit-click', requirement)"
/>
</li>
<li v-if="canArchive && !isArchived" class="requirement-archive d-sm-block">
......@@ -164,7 +143,7 @@ export default {
icon="archive"
:loading="stateChangeRequestActive"
:title="__('Archive')"
@click="handleArchiveClick"
@click.stop="handleArchiveClick"
/>
</li>
<li v-if="canArchive && isArchived" class="requirement-reopen d-sm-block">
......
ee/app/assets/javascripts/requirements/components/requirements_empty_state.vue
View file @ 52a83481
......@@ -53,7 +53,7 @@ export default {
:description="emptyStateDescription"
>
<template v-if="emptyStateDescription && canCreateRequirement" #actions>
<gl-button category="primary" variant="success" @click="$emit('clickNewRequirement')">{{
<gl-button category="primary" variant="success" @click="$emit('click-new-requirement')">{{
__('New requirement')
}}</gl-button>
</template>
......
ee/app/assets/javascripts/requirements/components/requirements_root.vue
View file @ 52a83481
<script>
import { GlPagination } from '@gitlab/ui';
import * as Sentry from '~/sentry/wrapper';
import { __, sprintf } from '~/locale';
import Api from '~/api';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import createFlash from '~/flash';
import { urlParamsToObject } from '~/lib/utils/common_utils';
import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
......@@ -153,9 +152,11 @@ export default {
pageInfo: requirementsRoot?.pageInfo || {},
};
},
error: e => {
createFlash(__('Something went wrong while fetching requirements list.'));
Sentry.captureException(e);
error() {
createFlash({
message: __('Something went wrong while fetching requirements list.'),
captureError: true,
});
},
},
requirementsCount: {
......@@ -174,9 +175,11 @@ export default {
ALL: opened + archived,
};
},
error: e => {
createFlash(__('Something went wrong while fetching requirements count.'));
Sentry.captureException(e);
error() {
createFlash({
message: __('Something went wrong while fetching requirements count.'),
captureError: true,
});
},
},
},
......@@ -186,8 +189,9 @@ export default {
textSearch: this.initialTextSearch,
authorUsernames: this.initialAuthorUsernames,
sortBy: this.initialSortBy,
showCreateForm: false,
showEditForm: false,
showRequirementCreateDrawer: false,
showRequirementViewDrawer: false,
enableRequirementEdit: false,
editedRequirement: null,
createRequirementRequestActive: false,
stateChangeRequestActiveFor: 0,
......@@ -225,7 +229,7 @@ export default {
return this.requirementsCount[this.filterBy];
},
showEmptyState() {
return this.requirementsListEmpty && !this.showCreateForm;
return this.requirementsListEmpty && !this.showRequirementCreateDrawer;
},
showPaginationControls() {
const { hasPreviousPage, hasNextPage } = this.requirements.pageInfo;
......@@ -337,7 +341,8 @@ export default {
replace: true,
});
},
updateRequirement({ iid, title, state, lastTestReportState, errorFlashMessage }) {
updateRequirement(requirement = {}, { errorFlashMessage, flashMessageContainer } = {}) {
const { iid, title, description, state, lastTestReportState } = requirement;
const updateRequirementInput = {
projectPath: this.projectPath,
iid,
......@@ -346,6 +351,9 @@ export default {
if (title) {
updateRequirementInput.title = title;
}
if (description) {
updateRequirementInput.description = description;
}
if (state) {
updateRequirementInput.state = state;
}
......@@ -361,8 +369,12 @@ export default {
},
})
.catch(e => {
createFlash(errorFlashMessage);
Sentry.captureException(e);
createFlash({
message: errorFlashMessage,
parent: flashMessageContainer,
captureError: true,
});
throw e;
});
},
handleTabClick({ filterBy }) {
......@@ -382,13 +394,18 @@ export default {
this.$nextTick(() => this.$apollo.queries.requirements.refetch());
},
handleNewRequirementClick() {
this.showCreateForm = true;
this.showRequirementCreateDrawer = true;
},
handleShowRequirementClick(requirement) {
this.showRequirementViewDrawer = true;
this.editedRequirement = requirement;
},
handleEditRequirementClick(requirement) {
this.showEditForm = true;
this.showRequirementViewDrawer = true;
this.enableRequirementEdit = true;
this.editedRequirement = requirement;
},
handleNewRequirementSave(title) {
handleNewRequirementSave({ title, description }) {
this.createRequirementRequestActive = true;
return this.$apollo
.mutate({
......@@ -397,87 +414,105 @@ export default {
createRequirementInput: {
projectPath: this.projectPath,
title,
description,
},
},
})
.then(({ data }) => {
if (!data.createRequirement.errors.length) {
.then(res => {
const createReqMutation = res?.data?.createRequirement || {};
if (createReqMutation.errors?.length === 0) {
this.$apollo.queries.requirementsCount.refetch();
this.$apollo.queries.requirements.refetch();
this.$toast.show(
sprintf(__('Requirement %{reference} has been added'), {
reference: `REQ-${data.createRequirement.requirement.iid}`,
reference: `REQ-${createReqMutation.requirement.iid}`,
}),
);
this.showCreateForm = false;
this.showRequirementCreateDrawer = false;
} else {
throw new Error(`Error creating a requirement`);
throw new Error(`Error creating a requirement ${res.message}`);
}
})
.catch(e => {
createFlash(__('Something went wrong while creating a requirement.'));
Sentry.captureException(e);
createFlash({
message: __('Something went wrong while creating a requirement.'),
parent: this.$el,
captureError: true,
});
throw new Error(`Error creating a requirement ${e.message}`);
})
.finally(() => {
this.createRequirementRequestActive = false;
});
},
handleRequirementEdit(enableRequirementEdit) {
this.enableRequirementEdit = enableRequirementEdit;
},
handleNewRequirementCancel() {
this.showCreateForm = false;
this.showRequirementCreateDrawer = false;
},
handleUpdateRequirementSave(params) {
handleUpdateRequirementSave(requirement) {
this.createRequirementRequestActive = true;
return this.updateRequirement({
...params,
return this.updateRequirement(requirement, {
errorFlashMessage: __('Something went wrong while updating a requirement.'),
flashMessageContainer: this.$el,
})
.then(({ data }) => {
if (!data.updateRequirement.errors.length) {
this.showEditForm = false;
this.editedRequirement = null;
.then(res => {
const updateReqMutation = res?.data?.updateRequirement || {};
if (updateReqMutation.errors?.length === 0) {
this.enableRequirementEdit = false;
this.editedRequirement = updateReqMutation.requirement;
this.$toast.show(
sprintf(__('Requirement %{reference} has been updated'), {
reference: `REQ-${data.updateRequirement.requirement.iid}`,
reference: `REQ-${this.editedRequirement.iid}`,
}),
);
} else {
throw new Error(`Error updating a requirement`);
throw new Error(`Error updating a requirement ${res.message}`);
}
})
.finally(() => {
this.createRequirementRequestActive = false;
});
},
handleRequirementStateChange(params) {
this.stateChangeRequestActiveFor = params.iid;
return this.updateRequirement({
...params,
handleRequirementStateChange(requirement) {
this.stateChangeRequestActiveFor = requirement.iid;
return this.updateRequirement(requirement, {
errorFlashMessage:
params.state === FilterState.opened
requirement.state === FilterState.opened
? __('Something went wrong while reopening a requirement.')
: __('Something went wrong while archiving a requirement.'),
}).then(({ data }) => {
if (!data.updateRequirement.errors.length) {
})
.then(res => {
const updateReqMutation = res?.data?.updateRequirement || {};
if (updateReqMutation.errors?.length === 0) {
this.$apollo.queries.requirementsCount.refetch();
this.stateChangeRequestActiveFor = 0;
const reference = `REQ-${updateReqMutation.requirement.iid}`;
let toastMessage;
if (params.state === FilterState.opened) {
if (requirement.state === FilterState.opened) {
toastMessage = sprintf(__('Requirement %{reference} has been reopened'), {
reference: `REQ-${data.updateRequirement.requirement.iid}`,
reference,
});
} else {
toastMessage = sprintf(__('Requirement %{reference} has been archived'), {
reference: `REQ-${data.updateRequirement.requirement.iid}`,
reference,
});
}
this.$toast.show(toastMessage);
} else {
throw new Error(`Error archiving a requirement`);
throw new Error(`Error archiving a requirement ${res.message}`);
}
})
.finally(() => {
this.stateChangeRequestActiveFor = 0;
});
},
handleUpdateRequirementCancel() {
this.showEditForm = false;
handleUpdateRequirementDrawerClose() {
this.enableRequirementEdit = false;
this.showRequirementViewDrawer = false;
this.editedRequirement = null;
},
handleFilterRequirements(filters = []) {
......@@ -532,10 +567,10 @@ export default {
<requirements-tabs
:filter-by="filterBy"
:requirements-count="requirementsCount"
:show-create-form="showCreateForm"
:show-create-form="showRequirementCreateDrawer"
:can-create-requirement="canCreateRequirement"
@clickTab="handleTabClick"
@clickNewRequirement="handleNewRequirementClick"
@click-tab="handleTabClick"
@click-new-requirement="handleNewRequirementClick"
/>
<filtered-search-bar
:namespace="projectPath"
......@@ -550,17 +585,20 @@ export default {
@onSort="handleSortRequirements"
/>
<requirement-create-form
:drawer-open="showCreateForm"
:drawer-open="showRequirementCreateDrawer"
:requirement-request-active="createRequirementRequestActive"
@save="handleNewRequirementSave"
@cancel="handleNewRequirementCancel"
@drawer-close="handleNewRequirementCancel"
/>
<requirement-edit-form
:drawer-open="showEditForm"
:drawer-open="showRequirementViewDrawer"
:requirement="editedRequirement"
:enable-requirement-edit="enableRequirementEdit"
:requirement-request-active="createRequirementRequestActive"
@save="handleUpdateRequirementSave"
@cancel="handleUpdateRequirementCancel"
@enable-edit="handleRequirementEdit(true)"
@disable-edit="handleRequirementEdit(false)"
@drawer-close="handleUpdateRequirementDrawerClose"
/>
<requirements-empty-state
v-if="showEmptyState"
......@@ -568,7 +606,7 @@ export default {
:empty-state-path="emptyStatePath"
:requirements-count="requirementsCount"
:can-create-requirement="canCreateRequirement"
@clickNewRequirement="handleNewRequirementClick"
@click-new-requirement="handleNewRequirementClick"
/>
<requirements-loading
v-show="requirementsListLoading"
......@@ -585,7 +623,9 @@ export default {
:key="requirement.iid"
:requirement="requirement"
:state-change-request-active="stateChangeRequestActiveFor === requirement.iid"
@editClick="handleEditRequirementClick"
:active="editedRequirement && editedRequirement.iid === requirement.iid"
@show-click="handleShowRequirementClick"
@edit-click="handleEditRequirementClick"
@archiveClick="handleRequirementStateChange"
@reopenClick="handleRequirementStateChange"
/>
......
ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
View file @ 52a83481
......@@ -50,7 +50,7 @@ export default {
id="state-opened"
data-state="opened"
:title="__('Filter by requirements that are currently opened.')"
@click="$emit('clickTab', { filterBy: $options.FilterState.opened })"
@click="$emit('click-tab', { filterBy: $options.FilterState.opened })"
>
{{ __('Open') }}
<gl-badge class="badge-pill">{{ requirementsCount.OPENED }}</gl-badge>
......@@ -61,7 +61,7 @@ export default {
id="state-archived"
data-state="archived"
:title="__('Filter by requirements that are currently archived.')"
@click="$emit('clickTab', { filterBy: $options.FilterState.archived })"
@click="$emit('click-tab', { filterBy: $options.FilterState.archived })"
>
{{ __('Archived') }}
<gl-badge class="badge-pill">{{ requirementsCount.ARCHIVED }}</gl-badge>
......@@ -72,7 +72,7 @@ export default {
id="state-all"
data-state="all"
:title="__('Show all requirements.')"
@click="$emit('clickTab', { filterBy: $options.FilterState.all })"
@click="$emit('click-tab', { filterBy: $options.FilterState.all })"
>
{{ __('All') }}
<gl-badge class="badge-pill">{{ requirementsCount.ALL }}</gl-badge>
......@@ -85,7 +85,7 @@ export default {
variant="success"
class="js-new-requirement qa-new-requirement-button"
:disabled="showCreateForm"
@click="$emit('clickNewRequirement')"
@click="$emit('click-new-requirement')"
>{{ __('New requirement') }}</gl-button
>
</div>
......
ee/app/assets/javascripts/requirements/mixins/requirement_meta.js 0 → 100644
View file @ 52a83481
import { __, sprintf } from '~/locale';
import { getTimeago } from '~/lib/utils/datetime_utility';
import { FilterState } from '../constants';
export default {
computed: {
reference() {
return `REQ-${this.requirement?.iid}`;
},
titleHtml() {
return this.requirement?.titleHtml;
},
descriptionHtml() {
return this.requirement?.descriptionHtml;
},
isArchived() {
return this.requirement?.state === FilterState.archived;
},
author() {
return this.requirement?.author;
},
createdAtFormatted() {
return sprintf(__('created %{timeAgo}'), {
timeAgo: getTimeago().format(this.requirement?.createdAt),
});
},
updatedAtFormatted() {
return sprintf(__('updated %{timeAgo}'), {
timeAgo: getTimeago().format(this.requirement?.updatedAt),
});
},
testReport() {
return this.requirement?.testReports.nodes[0];
},
canUpdate() {
return this.requirement?.userPermissions.updateRequirement;
},
canArchive() {
return this.requirement?.userPermissions.adminRequirement;
},
},
};
ee/app/assets/javascripts/requirements/queries/projectRequirements.query.graphql
View file @ 52a83481
#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
#import "./requirement.fragment.graphql"
query projectRequirementsEE(
$projectPath: ID!
$state: RequirementState
......@@ -7,7 +10,7 @@ query projectRequirementsEE(
$nextPageCursor: String = ""
$authorUsernames: [String!] = []
$search: String = ""
$sortBy: Sort = created_desc
$sortBy: Sort = CREATED_DESC
) {
project(fullPath: $projectPath) {
requirements(
......@@ -21,36 +24,10 @@ query projectRequirementsEE(
sort: $sortBy
) {
nodes {
iid
title
createdAt
updatedAt
state
lastTestReportState
lastTestReportManuallyCreated
testReports(first: 1, sort: created_desc) {
nodes {
id
state
createdAt
}
}
userPermissions {
updateRequirement
adminRequirement
}
author {
name
username
avatarUrl
webUrl
}
...Requirement
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
...PageInfo
}
}
}
......
ee/app/assets/javascripts/requirements/queries/requirement.fragment.graphql 0 → 100644
View file @ 52a83481
#import "~/graphql_shared/fragments/author.fragment.graphql"
fragment Requirement on Requirement {
iid
title
titleHtml
description
descriptionHtml
createdAt
updatedAt
state
lastTestReportState
lastTestReportManuallyCreated
testReports(first: 1, sort: CREATED_DESC) {
nodes {
id
state
createdAt
}
}
userPermissions {
updateRequirement
adminRequirement
}
author {
...Author
}
}
ee/app/assets/javascripts/requirements/queries/updateRequirement.mutation.graphql
View file @ 52a83481
#import "./requirement.fragment.graphql"
mutation updateRequirement($updateRequirementInput: UpdateRequirementInput!) {
updateRequirement(input: $updateRequirementInput) {
clientMutationId
errors
requirement {
iid
title
state
updatedAt
lastTestReportState
testReports(first: 1, sort: created_desc) {
nodes {
id
state
createdAt
}
}
...Requirement
}
}
}
ee/app/assets/javascripts/requirements/requirements_bundle.js
View file @ 52a83481
......@@ -38,6 +38,10 @@ export default () => {
components: {
RequirementsRoot,
},
provide: {
descriptionPreviewPath: el.dataset.descriptionPreviewPath,
descriptionHelpPath: el.dataset.descriptionHelpPath,
},
data() {
const {
filterBy,
......
ee/app/assets/stylesheets/pages/requirements.scss
View file @ 52a83481
......@@ -20,6 +20,12 @@
overflow-y: auto !important;
}
}
.requirement-form-drawer.zen-mode {
// We need to override `z-index` provided to GlDrawer
// in Zen mode to enable full-screen editing.
z-index: auto !important;
}
}
.requirements-list-container {
......@@ -73,7 +79,11 @@
}
.gl-drawer {
width: 480px;
// Both width & min-width
// are defined as per Pajamas
// See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44902#note_429056182
width: 28%;
min-width: 400px;
padding-left: $gl-padding;
padding-right: $gl-padding;
box-shadow: none;
......
ee/app/views/projects/requirements_management/requirements/index.html.haml
View file @ 52a83481
......@@ -31,6 +31,8 @@
all: total_requirements,
requirements_web_url: project_requirements_management_requirements_path(@project),
can_create_requirement: "#{can?(current_user, :create_requirement, @project)}",
description_preview_path: preview_markdown_path(@project),
description_help_path: help_page_path('user/markdown'),
empty_state_path: image_path('illustrations/empty-state/empty-requirements-lg.svg') } }
- if current_tab_count == 0
-# Show regular spinner only when there will be no
......
ee/changelogs/unreleased/224622-requirement-description-support.yml 0 → 100644
View file @ 52a83481
---
title: Add support for providing requirement description.
merge_request: 44902
author:
type: added
ee/spec/features/projects/requirements_management/requirements_list_spec.rb
View file @ 52a83481
......@@ -6,10 +6,10 @@ RSpec.describe 'Requirements list', :js do
let_it_be(:user) { create(:user) }
let_it_be(:user_guest) { create(:user) }
let_it_be(:project) { create(:project, :repository) }
let_it_be(:requirement1) { create(:requirement, project: project, title: 'Some requirement-1', author: user, created_at: 5.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement2) { create(:requirement, project: project, title: 'Some requirement-2', author: user, created_at: 6.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement3) { create(:requirement, project: project, title: 'Some requirement-3', author: user, created_at: 7.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement_archived) { create(:requirement, project: project, title: 'Some requirement-3', state: :archived, author: user, created_at: 8.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement1) { create(:requirement, project: project, title: 'Some requirement-1', description: 'Sample description', author: user, created_at: 5.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement2) { create(:requirement, project: project, title: 'Some requirement-2', description: 'Sample description', author: user, created_at: 6.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement3) { create(:requirement, project: project, title: 'Some requirement-3', description: 'Sample description', author: user, created_at: 7.days.ago, updated_at: 2.days.ago) }
let_it_be(:requirement_archived) { create(:requirement, project: project, title: 'Some requirement-3', description: 'Sample description', state: :archived, author: user, created_at: 8.days.ago, updated_at: 2.days.ago) }
def create_requirement(title)
page.within('.nav-controls') do
......@@ -131,34 +131,51 @@ RSpec.describe 'Requirements list', :js do
end
end
it 'shows title and description along with edit button in drawer' do
find('.requirements-list li.requirement', match: :first).click
page.within('.requirement-form-drawer') do
expect(page.find('.title-container')).to have_content(requirement1.title)
expect(page.find('.title-container')).to have_selector('button.btn-edit')
expect(page.find('.description-container')).to have_content(requirement1.description)
end
end
it 'shows edit form when edit button is clicked for a requirement' do
page.within('.requirements-list li.requirement', match: :first) do
find('li.requirement-edit button[title="Edit"]').click
end
page.within('.requirement-form-drawer') do
expect(page.find('.gl-drawer-header span', match: :first)).to have_content("REQ-#{requirement1.iid}")
expect(page.find('textarea#requirementTitle')['value']).to have_content("#{requirement1.title}")
expect(page.find('textarea#requirementDescription')['value']).to have_content("#{requirement1.description}")
expect(page.find('input[type="checkbox"]')['checked']).to eq(requirement1.last_test_report_state)
expect(page.find('.js-requirement-save')).to have_content('Save changes')
end
end
it 'updates requirement using edit form' do
requirement_title = 'Foobar'
requirement_description = 'Baz'
page.within('.requirements-list li.requirement', match: :first) do
find('li.requirement-edit button[title="Edit"]').click
end
page.within('.requirement-form') do
page.within('.requirement-form-drawer') do
find('textarea#requirementTitle').native.send_keys requirement_title
find('button.js-requirement-save').click
find('textarea#requirementDescription').native.send_keys requirement_description
find('input[type="checkbox"]').click
click_button 'Save changes'
wait_for_all_requests
end
page.within('.requirements-list li.requirement', match: :first) do
expect(page.find('.issue-title-text')).to have_content(requirement_title)
end
end
it 'saves updated title for requirement using edit form' do
page.within('.requirements-list li.requirement', match: :first) do
find('li.requirement-edit button[title="Edit"]').click
end
page.within('.requirement-form') do
expect(page.find('span', match: :first)).to have_content("REQ-#{requirement1.iid}")
expect(page.find('textarea#requirementTitle')['value']).to have_content("#{requirement1.title}")
expect(page.find('.js-requirement-save')).to have_content('Save changes')
expect(page.find('.requirement-status-badge')).to have_content('satisfied')
end
end
......
ee/spec/frontend/requirements/components/requirement_form_spec.js
View file @ 52a83481
import $ from 'jquery';
import { shallowMount } from '@vue/test-utils';
import { GlDrawer, GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
import { getByText } from '@testing-library/dom';
import { GlDrawer, GlFormCheckbox, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
import RequirementForm from 'ee/requirements/components/requirement_form.vue';
import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
import { TestReportStatus, MAX_TITLE_LENGTH } from 'ee/requirements/constants';
import { mockRequirementsOpen } from '../mock_data';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import ZenMode from '~/zen_mode';
import { mockRequirementsOpen, mockTestReport } from '../mock_data';
const createComponent = ({
drawerOpen = true,
......@@ -12,21 +19,30 @@ const createComponent = ({
requirementRequestActive = false,
} = {}) =>
shallowMount(RequirementForm, {
provide: {
descriptionPreviewPath: '/gitlab-org/gitlab-test/preview_markdown',
descriptionHelpPath: '/help/user/markdown',
},
propsData: {
drawerOpen,
requirement,
requirementRequestActive,
},
stubs: {
GlDrawer,
MarkdownField,
},
});
const findGlFormTextArea = wrapper => wrapper.find(GlFormTextarea);
const findGlFormCheckbox = wrapper => wrapper.find(GlFormCheckbox);
describe('RequirementForm', () => {
let renderGFMSpy;
let documentEventSpyOn;
let wrapper;
let wrapperWithRequirement;
beforeEach(() => {
renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
documentEventSpyOn = jest.spyOn($.prototype, 'on');
wrapper = createComponent();
wrapperWithRequirement = createComponent({
requirement: mockRequirementsOpen[0],
......@@ -87,26 +103,28 @@ describe('RequirementForm', () => {
});
});
});
describe('reference', () => {
it('returns string containing `requirement.iid` prefixed with `REQ-`', () => {
expect(wrapperWithRequirement.vm.reference).toBe(`REQ-${mockRequirementsOpen[0].iid}`);
});
});
});
describe('watchers', () => {
describe('requirement', () => {
describe('when requirement is not null', () => {
it('renders the value of `requirement.title` as title', async () => {
it('renders the value of `requirement.title` as title and `requirement.description` as description', async () => {
wrapper.setProps({
requirement: mockRequirementsOpen[0],
enableRequirementEdit: true,
});
await wrapper.vm.$nextTick();
expect(findGlFormTextArea(wrapper).attributes('value')).toBe(
mockRequirementsOpen[0].title,
expect(
wrapper
.find('[data-testid="title"]')
.find(GlFormTextarea)
.attributes('value'),
).toBe(mockRequirementsOpen[0].title);
expect(wrapper.find('[data-testid="description"] textarea').element.value).toBe(
mockRequirementsOpen[0].description,
);
});
......@@ -118,26 +136,34 @@ describe('RequirementForm', () => {
`renders the satisfied checkbox according to the value of \`requirement.satisfied\`=$satisfied`,
async ({ requirement, satisfied }) => {
wrapper = createComponent();
wrapper.setProps({ requirement });
wrapper.setProps({ requirement, enableRequirementEdit: true });
await wrapper.vm.$nextTick();
expect(findGlFormCheckbox(wrapper).vm.$attrs.checked).toBe(satisfied);
expect(wrapper.find(GlFormCheckbox).vm.$attrs.checked).toBe(satisfied);
},
);
});
describe('when requirement is null', () => {
beforeEach(() => {
wrapperWithRequirement.setProps({
wrapper.setProps({
requirement: null,
enableRequirementEdit: true,
});
});
it('renders empty string as title', async () => {
await wrapperWithRequirement.vm.$nextTick();
it('renders empty string as title and description', async () => {
await wrapper.vm.$nextTick();
expect(findGlFormTextArea(wrapperWithRequirement).attributes('value')).toBe('');
expect(
wrapper
.find('[data-testid="title"]')
.find(GlFormTextarea)
.attributes('value'),
).toBe('');
expect(wrapper.find('[data-testid="description"] textarea').element.value).toBe('');
expect(wrapper.find(GlFormCheckbox).exists()).toBe(false);
});
});
});
......@@ -155,7 +181,38 @@ describe('RequirementForm', () => {
await wrapper.vm.$nextTick();
expect(wrapper.vm.title).toBe('');
expect(wrapper.vm.description).toBe('');
expect(wrapper.vm.satisfied).toBe(false);
});
});
});
describe('mounted', () => {
it('initializes `zenMode` prop on component', () => {
expect(wrapper.vm.zenMode instanceof ZenMode).toBe(true);
});
it('calls `renderGFM` on `$refs.gfmContainer`', () => {
expect(renderGFMSpy).toHaveBeenCalled();
});
it('binds events `zen_mode:enter` & `zen_mode:leave` events on document', () => {
expect(documentEventSpyOn).toHaveBeenCalledWith('zen_mode:enter', expect.any(Function));
expect(documentEventSpyOn).toHaveBeenCalledWith('zen_mode:leave', expect.any(Function));
});
});
describe('beforeDestroy', () => {
let documentEventSpyOff;
it('unbinds events `zen_mode:enter` & `zen_mode:leave` events on document', () => {
const wrapperTemp = createComponent();
documentEventSpyOff = jest.spyOn($.prototype, 'off');
wrapperTemp.destroy();
expect(documentEventSpyOff).toHaveBeenCalledWith('zen_mode:enter');
expect(documentEventSpyOff).toHaveBeenCalledWith('zen_mode:leave');
});
});
......@@ -188,33 +245,53 @@ describe('RequirementForm', () => {
});
describe('handleSave', () => {
it('emits `save` event on component with `title` as param when form is in create mode', () => {
it('emits `save` event on component with object as param containing `title` & `description` when form is in create mode', () => {
const title = 'foo';
const description = '_bar_';
wrapper.setData({
title: 'foo',
title,
description,
});
wrapper.vm.handleSave();
return wrapper.vm.$nextTick(() => {
expect(wrapper.emitted('save')).toBeTruthy();
expect(wrapper.emitted('save')[0]).toEqual(['foo']);
});
expect(wrapper.emitted('save')[0]).toEqual([
{
title,
description,
},
]);
});
it('emits `save` event on component with object as param containing `iid` & `title` & `lastTestReportState` when form is in update mode', () => {
it('emits `save` event on component with object as param containing `iid`, `title`, `description` & `lastTestReportState` when form is in update mode', () => {
const { iid, title, description } = mockRequirementsOpen[0];
wrapperWithRequirement.vm.handleSave();
return wrapperWithRequirement.vm.$nextTick(() => {
expect(wrapperWithRequirement.emitted('save')).toBeTruthy();
expect(wrapperWithRequirement.emitted('save')[0]).toEqual([
{
iid: mockRequirementsOpen[0].iid,
title: mockRequirementsOpen[0].title,
iid,
title,
description,
lastTestReportState: wrapperWithRequirement.vm.newLastTestReportState(),
},
]);
});
});
describe('handleCancel', () => {
it('emits `drawer-close` event when form create mode', () => {
wrapper.vm.handleCancel();
expect(wrapper.emitted('drawer-close')).toBeTruthy();
});
it('emits `disable-edit` event when form edit mode', () => {
wrapperWithRequirement.vm.handleCancel();
expect(wrapperWithRequirement.emitted('disable-edit')).toBeTruthy();
});
});
});
......@@ -223,57 +300,128 @@ describe('RequirementForm', () => {
expect(wrapper.find(GlDrawer).exists()).toBe(true);
});
it('renders element containing requirement reference when form is in edit mode', () => {
expect(wrapperWithRequirement.find('span').text()).toBe(`REQ-${mockRequirementsOpen[0].iid}`);
describe('create requirement', () => {
it('renders drawer header with string "New Requirement"', () => {
expect(getByText(wrapper.element, 'New Requirement')).not.toBeNull();
});
it('does not render gl-form-checkbox when form is in create mode', () => {
expect(findGlFormCheckbox(wrapper).exists()).toBe(false);
it('renders title and description input fields', () => {
expect(wrapper.find('[data-testid="title"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="description"]').exists()).toBe(true);
});
it('renders gl-form-checkbox when form is in edit mode', () => {
expect(findGlFormCheckbox(wrapperWithRequirement).exists()).toBe(true);
it('renders save button component', () => {
const saveButton = wrapper.find('.js-requirement-save');
expect(saveButton.exists()).toBe(true);
expect(saveButton.text()).toBe('Create requirement');
});
it('renders gl-form-group component', () => {
const glFormGroup = wrapper.find(GlFormGroup);
it('renders cancel button component', () => {
const cancelButton = wrapper.find('.js-requirement-cancel');
expect(cancelButton.exists()).toBe(true);
expect(cancelButton.text()).toBe('Cancel');
});
});
expect(glFormGroup.exists()).toBe(true);
expect(glFormGroup.attributes('label')).toBe('Title');
expect(glFormGroup.attributes('label-for')).toBe('requirementTitle');
expect(glFormGroup.attributes('invalid-feedback')).toBe(
`Requirement title cannot have more than ${MAX_TITLE_LENGTH} characters.`,
describe('view requirement', () => {
it('renders drawer header with `requirement.reference` and test report badge', () => {
expect(
getByText(wrapperWithRequirement.element, `REQ-${mockRequirementsOpen[0].iid}`),
).not.toBeNull();
expect(wrapperWithRequirement.find(RequirementStatusBadge).exists()).toBe(true);
expect(wrapperWithRequirement.find(RequirementStatusBadge).props('testReport')).toBe(
mockTestReport,
);
expect(glFormGroup.attributes('state')).toBe('true');
});
it('renders gl-form-textarea component', () => {
const glFormTextarea = findGlFormTextArea(wrapper);
it('renders requirement title', () => {
expect(
getByText(wrapperWithRequirement.element, mockRequirementsOpen[0].titleHtml),
).not.toBeNull();
});
it('renders edit button', () => {
const editButtonEl = wrapperWithRequirement.find('[data-testid="edit"]');
expect(editButtonEl.exists()).toBe(true);
expect(editButtonEl.props('icon')).toBe('pencil');
expect(editButtonEl.attributes('title')).toBe('Edit title and description');
});
it('renders requirement description', () => {
const descriptionEl = wrapperWithRequirement.find('[data-testid="descriptionContainer"]');
expect(descriptionEl.exists()).toBe(true);
expect(descriptionEl.text()).toBe('fortitudinis fomentis dolor mitigari solet.');
});
describe('edit', () => {
beforeEach(async () => {
wrapperWithRequirement.setProps({
enableRequirementEdit: true,
});
expect(glFormTextarea.exists()).toBe(true);
expect(glFormTextarea.attributes('id')).toBe('requirementTitle');
expect(glFormTextarea.attributes('placeholder')).toBe('Describe the requirement here');
expect(glFormTextarea.attributes('max-rows')).toBe('25');
await wrapperWithRequirement.vm.$nextTick();
});
it('renders gl-form-textarea component populated with `requirement.title` when `requirement` prop is defined', () => {
expect(findGlFormTextArea(wrapperWithRequirement).attributes('value')).toBe(
mockRequirementsOpen[0].title,
it('renders flash error container', () => {
expect(wrapperWithRequirement.find('[data-testid="form-error-container"]').exists()).toBe(
true,
);
});
it('renders save button component', () => {
const saveButton = wrapper.find('.js-requirement-save');
it('renders title input field', () => {
const titleInputEl = wrapperWithRequirement.find('[data-testid="title"]');
const titleTextarea = titleInputEl.find(GlFormTextarea);
expect(saveButton.exists()).toBe(true);
expect(saveButton.text()).toBe('Create requirement');
expect(titleInputEl.exists()).toBe(true);
expect(titleInputEl.attributes()).toMatchObject({
label: 'Title',
state: 'true',
'label-for': 'requirementTitle',
'invalid-feedback': `Requirement title cannot have more than ${MAX_TITLE_LENGTH} characters.`,
});
it('renders cancel button component', () => {
const cancelButton = wrapper.find('.js-requirement-cancel');
expect(titleTextarea.exists()).toBe(true);
expect(titleTextarea.attributes()).toMatchObject({
id: 'requirementTitle',
placeholder: 'Requirement title',
value: mockRequirementsOpen[0].title,
'max-rows': '25',
});
});
expect(cancelButton.exists()).toBe(true);
expect(cancelButton.text()).toBe('Cancel');
it('renders description input field', () => {
const descriptionInputEl = wrapperWithRequirement.find('[data-testid="description"]');
const markdownEl = descriptionInputEl.find(MarkdownField);
const descriptionTextarea = markdownEl.find('textarea');
expect(descriptionInputEl.exists()).toBe(true);
expect(descriptionInputEl.find('label').text()).toBe('Description');
expect(markdownEl.exists()).toBe(true);
expect(markdownEl.props()).toMatchObject({
markdownPreviewPath: '/gitlab-org/gitlab-test/preview_markdown',
markdownDocsPath: '/help/user/markdown',
enableAutocomplete: false,
textareaValue: mockRequirementsOpen[0].description,
});
expect(descriptionTextarea.exists()).toBe(true);
expect(descriptionTextarea.attributes()).toMatchObject({
id: 'requirementDescription',
placeholder: 'Describe the requirement here',
'aria-label': 'Description',
});
});
it('renders satisfied checkbox field', () => {
expect(wrapperWithRequirement.find(GlFormCheckbox).exists()).toBe(true);
expect(wrapperWithRequirement.find(GlFormCheckbox).text()).toBe('Satisfied');
});
});
});
});
});
ee/spec/frontend/requirements/components/requirement_item_spec.js
View file @ 52a83481
......@@ -32,64 +32,6 @@ describe('RequirementItem', () => {
wrapperArchived.destroy();
});
describe('computed', () => {
describe('reference', () => {
it('returns string containing `requirement.iid` prefixed with "REQ-"', () => {
expect(wrapper.vm.reference).toBe(`REQ-${requirement1.iid}`);
});
});
describe('canUpdate', () => {
it('returns value of `requirement.userPermissions.updateRequirement`', () => {
expect(wrapper.vm.canUpdate).toBe(requirement1.userPermissions.updateRequirement);
});
});
describe('canArchive', () => {
it('returns value of `requirement.userPermissions.updateRequirement`', () => {
expect(wrapper.vm.canArchive).toBe(requirement1.userPermissions.adminRequirement);
});
});
describe('createdAt', () => {
it('returns timeago-style string representing `requirement.createdAt`', () => {
// We don't have to be accurate here as it is already covered in rspecs
expect(wrapper.vm.createdAt).toContain('created');
expect(wrapper.vm.createdAt).toContain('ago');
});
});
describe('updatedAt', () => {
it('returns timeago-style string representing `requirement.updatedAt`', () => {
// We don't have to be accurate here as it is already covered in rspecs
expect(wrapper.vm.updatedAt).toContain('updated');
expect(wrapper.vm.updatedAt).toContain('ago');
});
});
describe('isArchived', () => {
it('returns `true` when current requirement is archived', () => {
expect(wrapperArchived.vm.isArchived).toBe(true);
});
it('returns `false` when current requirement is archived', () => {
expect(wrapper.vm.isArchived).toBe(false);
});
});
describe('author', () => {
it('returns value of `requirement.author`', () => {
expect(wrapper.vm.author).toBe(requirement1.author);
});
});
describe('testReport', () => {
it('returns testReport object from reports array within `requirement`', () => {
expect(wrapper.vm.testReport).toBe(mockTestReport);
});
});
});
describe('methods', () => {
describe('handleArchiveClick', () => {
it('emits `archiveClick` event on component with object containing `requirement.iid` & `state` as "ARCHIVED" as param', () => {
......@@ -139,6 +81,13 @@ describe('RequirementItem', () => {
});
});
it('emits `show-click` event with requirement as param', () => {
wrapper.trigger('click');
expect(wrapper.emitted('show-click')).toBeTruthy();
expect(wrapper.emitted('show-click')[0]).toEqual([requirement1]);
});
it('renders element containing requirement reference', () => {
expect(wrapper.find('.issuable-reference').text()).toBe(`REQ-${requirement1.iid}`);
});
......@@ -186,6 +135,11 @@ describe('RequirementItem', () => {
expect(editButtonEl.exists()).toBe(true);
expect(editButtonEl.attributes('title')).toBe('Edit');
editButtonEl.vm.$emit('click');
expect(wrapper.emitted('edit-click')).toBeTruthy();
expect(wrapper.emitted('edit-click')[0]).toEqual([wrapper.vm.requirement]);
});
it('does not render element containing requirement `Edit` button when `requirement.userPermissions.updateRequirement` is false', () => {
......
ee/spec/frontend/requirements/components/requirements_root_spec.js
View file @ 52a83481
......@@ -12,10 +12,9 @@ import createRequirement from 'ee/requirements/queries/createRequirement.mutatio
import updateRequirement from 'ee/requirements/queries/updateRequirement.mutation.graphql';
import { TEST_HOST } from 'helpers/test_constants';
import * as Sentry from '~/sentry/wrapper';
import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import createFlash from '~/flash';
import {
FilterState,
......@@ -140,9 +139,9 @@ describe('RequirementsRoot', () => {
});
describe('showEmptyState', () => {
it('returns `false` when `showCreateForm` is true', () => {
it('returns `false` when `showRequirementCreateDrawer` is true', () => {
wrapper.setData({
showCreateForm: true,
showRequirementCreateDrawer: true,
});
return wrapper.vm.$nextTick(() => {
......@@ -329,6 +328,28 @@ describe('RequirementsRoot', () => {
);
});
it('calls `$apollo.mutate` with variables containing `description` when it is included in object param', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdateMutationResult);
wrapper.vm.updateRequirement({
iid: '1',
description: '_foo_',
});
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
mutation: updateRequirement,
variables: {
updateRequirementInput: {
projectPath: 'gitlab-org/gitlab-shell',
iid: '1',
description: '_foo_',
},
},
}),
);
});
it('calls `$apollo.mutate` with variables containing `state` when it is included in object param', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdateMutationResult);
......@@ -396,35 +417,49 @@ describe('RequirementsRoot', () => {
});
});
it('calls `createFlash` with provided `errorFlashMessage` param and `Sentry.captureException` when request fails', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(new Error());
jest.spyOn(Sentry, 'captureException').mockImplementation();
it('calls `createFlash` with provided `errorFlashMessage` param when request fails', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(new Error({}));
return wrapper.vm
.updateRequirement({
.updateRequirement(
{
iid: '1',
},
{
errorFlashMessage: 'Something went wrong',
})
.then(() => {
expect(createFlash).toHaveBeenCalledWith('Something went wrong');
expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Object));
},
)
.catch(() => {
expect(createFlash).toHaveBeenCalledWith({
message: 'Something went wrong',
captureError: true,
});
});
});
});
describe('handleNewRequirementClick', () => {
it('sets `showCreateForm` prop to `true`', () => {
it('sets `showRequirementCreateDrawer` prop to `true`', () => {
wrapper.vm.handleNewRequirementClick();
expect(wrapper.vm.showCreateForm).toBe(true);
expect(wrapper.vm.showRequirementCreateDrawer).toBe(true);
});
});
describe('handleShowRequirementClick', () => {
it('sets `showRequirementViewDrawer` prop to `true`', () => {
wrapper.vm.handleShowRequirementClick(mockRequirementsOpen[0]);
expect(wrapper.vm.showRequirementViewDrawer).toBe(true);
expect(wrapper.vm.editedRequirement).toBe(mockRequirementsOpen[0]);
});
});
describe('handleEditRequirementClick', () => {
it('sets `showEditForm` prop to `true` and `editedRequirement` to value of passed param', () => {
it('sets `showRequirementViewDrawer` prop to `true` and `editedRequirement` to value of passed param', () => {
wrapper.vm.handleEditRequirementClick(mockRequirementsOpen[0]);
expect(wrapper.vm.showEditForm).toBe(true);
expect(wrapper.vm.showRequirementViewDrawer).toBe(true);
expect(wrapper.vm.editedRequirement).toBe(mockRequirementsOpen[0]);
});
});
......@@ -446,7 +481,10 @@ describe('RequirementsRoot', () => {
.spyOn(wrapper.vm.$apollo, 'mutate')
.mockReturnValue(Promise.resolve(mockMutationResult));
wrapper.vm.handleNewRequirementSave('foo');
wrapper.vm.handleNewRequirementSave({
title: 'foo',
description: '_bar_',
});
expect(wrapper.vm.createRequirementRequestActive).toBe(true);
});
......@@ -456,7 +494,10 @@ describe('RequirementsRoot', () => {
.spyOn(wrapper.vm.$apollo, 'mutate')
.mockReturnValue(Promise.resolve(mockMutationResult));
wrapper.vm.handleNewRequirementSave('foo');
wrapper.vm.handleNewRequirementSave({
title: 'foo',
description: '_bar_',
});
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
......@@ -465,13 +506,14 @@ describe('RequirementsRoot', () => {
createRequirementInput: {
projectPath: 'gitlab-org/gitlab-shell',
title: 'foo',
description: '_bar_',
},
},
}),
);
});
it('sets `showCreateForm` and `createRequirementRequestActive` props to `false` and refetches requirements count and list when request is successful', () => {
it('sets `showRequirementCreateDrawer` and `createRequirementRequestActive` props to `false` and refetches requirements count and list when request is successful', () => {
jest
.spyOn(wrapper.vm.$apollo, 'mutate')
.mockReturnValue(Promise.resolve(mockMutationResult));
......@@ -482,10 +524,15 @@ describe('RequirementsRoot', () => {
.spyOn(wrapper.vm.$apollo.queries.requirements, 'refetch')
.mockImplementation(jest.fn());
return wrapper.vm.handleNewRequirementSave('foo').then(() => {
return wrapper.vm
.handleNewRequirementSave({
title: 'foo',
description: '_bar_',
})
.then(() => {
expect(wrapper.vm.$apollo.queries.requirementsCount.refetch).toHaveBeenCalled();
expect(wrapper.vm.$apollo.queries.requirements.refetch).toHaveBeenCalled();
expect(wrapper.vm.showCreateForm).toBe(false);
expect(wrapper.vm.showRequirementCreateDrawer).toBe(false);
expect(wrapper.vm.createRequirementRequestActive).toBe(false);
});
});
......@@ -493,7 +540,12 @@ describe('RequirementsRoot', () => {
it('calls `$toast.show` with string "Requirement added successfully" when request is successful', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockMutationResult);
return wrapper.vm.handleNewRequirementSave('foo').then(() => {
return wrapper.vm
.handleNewRequirementSave({
title: 'foo',
description: '_bar_',
})
.then(() => {
expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Requirement REQ-1 has been added');
});
});
......@@ -501,10 +553,17 @@ describe('RequirementsRoot', () => {
it('sets `createRequirementRequestActive` prop to `false` and calls `createFlash` when `$apollo.mutate` request fails', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
return wrapper.vm.handleNewRequirementSave('foo').then(() => {
expect(createFlash).toHaveBeenCalledWith(
'Something went wrong while creating a requirement.',
);
return wrapper.vm
.handleNewRequirementSave({
title: 'foo',
description: '_bar_',
})
.catch(() => {
expect(createFlash).toHaveBeenCalledWith({
message: 'Something went wrong while creating a requirement.',
captureError: true,
parent: expect.any(Object),
});
expect(wrapper.vm.createRequirementRequestActive).toBe(false);
});
});
......@@ -533,12 +592,14 @@ describe('RequirementsRoot', () => {
expect.objectContaining({
iid: '1',
title: 'foo',
}),
expect.objectContaining({
errorFlashMessage: 'Something went wrong while updating a requirement.',
}),
);
});
it('sets `showEditForm` to `true`, `editedRequirement` to `null` and `createRequirementRequestActive` prop to `false` when request is successful', () => {
it('sets `showRequirementViewDrawer` to `true`, `editedRequirement` to `null` and `createRequirementRequestActive` prop to `false` when request is successful', () => {
jest.spyOn(wrapper.vm, 'updateRequirement').mockResolvedValue(mockUpdateMutationResult);
return wrapper.vm
......@@ -547,8 +608,10 @@ describe('RequirementsRoot', () => {
title: 'foo',
})
.then(() => {
expect(wrapper.vm.showEditForm).toBe(false);
expect(wrapper.vm.editedRequirement).toBe(null);
expect(wrapper.vm.enableRequirementEdit).toBe(false);
expect(wrapper.vm.editedRequirement).toEqual(
mockUpdateMutationResult.data.updateRequirement.requirement,
);
expect(wrapper.vm.createRequirementRequestActive).toBe(false);
});
});
......@@ -582,14 +645,14 @@ describe('RequirementsRoot', () => {
});
describe('handleNewRequirementCancel', () => {
it('sets `showCreateForm` prop to `false`', () => {
it('sets `showRequirementCreateDrawer` prop to `false`', () => {
wrapper.setData({
showCreateForm: true,
showRequirementCreateDrawer: true,
});
wrapper.vm.handleNewRequirementCancel();
expect(wrapper.vm.showCreateForm).toBe(false);
expect(wrapper.vm.showRequirementCreateDrawer).toBe(false);
});
});
......@@ -617,6 +680,8 @@ describe('RequirementsRoot', () => {
expect.objectContaining({
iid: '1',
state: FilterState.opened,
}),
expect.objectContaining({
errorFlashMessage: 'Something went wrong while reopening a requirement.',
}),
);
......@@ -634,6 +699,8 @@ describe('RequirementsRoot', () => {
expect.objectContaining({
iid: '1',
state: FilterState.archived,
}),
expect.objectContaining({
errorFlashMessage: 'Something went wrong while archiving a requirement.',
}),
);
......@@ -693,11 +760,12 @@ describe('RequirementsRoot', () => {
});
});
describe('handleUpdateRequirementCancel', () => {
it('sets `showEditForm` prop to `false` and `editedRequirement` to `null`', () => {
wrapper.vm.handleUpdateRequirementCancel();
describe('handleUpdateRequirementDrawerClose', () => {
it('sets `enableRequirementEdit` & `showRequirementViewDrawer` to false and `editedRequirement` to `null`', () => {
wrapper.vm.handleUpdateRequirementDrawerClose();
expect(wrapper.vm.showEditForm).toBe(false);
expect(wrapper.vm.enableRequirementEdit).toBe(false);
expect(wrapper.vm.showRequirementViewDrawer).toBe(false);
expect(wrapper.vm.editedRequirement).toBe(null);
});
});
......@@ -847,9 +915,9 @@ describe('RequirementsRoot', () => {
expect(wrapper.find('requirement-edit-form-stub').exists()).toBe(true);
});
it('does not render requirement-empty-state component when `showCreateForm` prop is `true`', () => {
it('does not render requirement-empty-state component when `showRequirementCreateDrawer` prop is `true`', () => {
wrapper.setData({
showCreateForm: true,
showRequirementCreateDrawer: true,
});
return wrapper.vm.$nextTick(() => {
......
ee/spec/frontend/requirements/mixins/requirement_meta_spec.js 0 → 100644
View file @ 52a83481
import { shallowMount } from '@vue/test-utils';
import RequirementItem from 'ee/requirements/components/requirement_item.vue';
import { FilterState } from 'ee/requirements/constants';
import { mockAuthor, mockTestReport, requirement1 as mockRequirement } from '../mock_data';
const createComponent = (requirement = mockRequirement) =>
shallowMount(RequirementItem, {
propsData: {
requirement,
},
});
describe('RequirementMeta Mixin', () => {
let wrapper;
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('computed', () => {
describe('reference', () => {
it('returns string containing `requirement.iid` prefixed with `REQ-`', () => {
expect(wrapper.vm.reference).toBe(`REQ-${mockRequirement.iid}`);
});
});
describe('titleHtml', () => {
it('returns value of `requirement.titleHtml`', () => {
expect(wrapper.vm.titleHtml).toBe(mockRequirement.titleHtml);
});
});
describe('descriptionHtml', () => {
it('returns value of `requirement.descriptionHtml`', () => {
expect(wrapper.vm.descriptionHtml).toBe(mockRequirement.descriptionHtml);
});
});
describe('isArchived', () => {
it('returns true when `requirement.state` is "ARCHIVED"', async () => {
wrapper.setProps({
requirement: {
...mockRequirement,
state: FilterState.archived,
},
});
await wrapper.vm.$nextTick();
expect(wrapper.vm.isArchived).toBe(true);
});
it('returns false when `requirement.state` is "OPENED"', () => {
expect(wrapper.vm.isArchived).toBe(false);
});
});
describe('author', () => {
it('returns value of `requirement.author`', () => {
expect(wrapper.vm.author).toBe(mockAuthor);
});
});
describe('createdAtFormatted', () => {
it('returns timeago-style string representing `requirement.createdAtFormatted`', () => {
// We don't have to be accurate here as it is already covered in rspecs
expect(wrapper.vm.createdAtFormatted).toContain('created');
expect(wrapper.vm.createdAtFormatted).toContain('ago');
});
});
describe('updatedAtFormatted', () => {
it('returns timeago-style string representing `requirement.updatedAtFormatted`', () => {
// We don't have to be accurate here as it is already covered in rspecs
expect(wrapper.vm.updatedAtFormatted).toContain('updated');
expect(wrapper.vm.updatedAtFormatted).toContain('ago');
});
});
describe('testReport', () => {
it('returns testReport object from reports array within `requirement`', () => {
expect(wrapper.vm.testReport).toBe(mockTestReport);
});
});
describe('canUpdate', () => {
it('returns value of `requirement.userPermissions.updateRequirement`', () => {
expect(wrapper.vm.canUpdate).toBe(mockRequirement.userPermissions.updateRequirement);
});
});
describe('canArchive', () => {
it('returns value of `requirement.userPermissions.updateRequirement`', () => {
expect(wrapper.vm.canArchive).toBe(mockRequirement.userPermissions.adminRequirement);
});
});
});
});
ee/spec/frontend/requirements/mock_data.js
View file @ 52a83481
......@@ -34,6 +34,10 @@ export const mockTestReportMissing = {
export const requirement1 = {
iid: '1',
title: 'Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.',
titleHtml:
'Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.',
description: 'fortitudinis _fomentis_ dolor mitigari solet.',
descriptionHtml: 'fortitudinis <i>fomentis</i> dolor mitigari solet.',
createdAt: '2020-03-19T08:09:09Z',
updatedAt: '2020-03-20T08:09:09Z',
state: 'OPENED',
......@@ -50,6 +54,10 @@ export const requirement1 = {
export const requirement2 = {
iid: '2',
title: 'Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit.',
titleHtml:
'Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit.',
description: 'ut eius facti _probabilis_ ratio reddi possit.',
descriptionHtml: 'ut eius facti <i>probabilis</i> ratio reddi possit.',
createdAt: '2020-03-19T08:08:14Z',
updatedAt: '2020-03-20T08:08:14Z',
state: 'OPENED',
......@@ -66,6 +74,9 @@ export const requirement2 = {
export const requirement3 = {
iid: '3',
title: 'Non modo carum sibi quemque, verum etiam vehementer carum esse',
titleHtml: 'Non modo carum sibi quemque, verum etiam vehementer carum esse',
description: 'verum etiam _vehementer_ carum esse.',
descriptionHtml: 'verum etiam <i>vehementer</i> carum esse.',
createdAt: '2020-03-19T08:08:25Z',
updatedAt: '2020-03-20T08:08:25Z',
state: 'OPENED',
......@@ -82,6 +93,9 @@ export const requirement3 = {
export const requirementArchived = {
iid: '23',
title: 'Cuius quidem, quoniam Stoicus fuit',
titleHtml: 'Cuius quidem, quoniam Stoicus fuit',
description: 'quoniam _Stoicus_ fuit.',
descriptionHtml: 'quoniam <i>Stoicus</i> fuit.',
createdAt: '2020-03-31T13:31:40Z',
updatedAt: '2020-03-31T13:31:40Z',
state: 'ARCHIVED',
......
locale/gitlab.pot
View file @ 52a83481
......@@ -22208,6 +22208,9 @@ msgstr ""
msgid "Requirement %{reference} has been updated"
msgstr ""
msgid "Requirement title"
msgstr ""
msgid "Requirement title cannot have more than %{limit} characters."
msgstr ""
......
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