Skip to content

G
gitlab-ce
Commit a8fdc573 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch 'ntepluhina-refactor-design-management-to-gitlab-ui-1' into 'master' 

Update design discussions to use GitLab UI components

See merge request gitlab-org/gitlab!41686
parents 63124283 b14ded85
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 77 deletions
app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
View file @ a8fdc573
<script> <script>
import { ApolloMutation } from 'vue-apollo'; import { ApolloMutation } from 'vue-apollo';
import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui'; import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
...@@ -27,6 +27,7 @@ export default { ...@@ -27,6 +27,7 @@ export default {
GlLink, GlLink,
ToggleRepliesWidget, ToggleRepliesWidget,
TimeAgoTooltip, TimeAgoTooltip,
GlBadge,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -148,14 +149,14 @@ export default { ...@@ -148,14 +149,14 @@ export default {
} }
}, },
onCreateNoteError(err) { onCreateNoteError(err) {
this.$emit('createNoteError', err); this.$emit('create-note-error', err);
}, },
hideForm() { hideForm() {
this.isFormRendered = false; this.isFormRendered = false;
this.discussionComment = ''; this.discussionComment = '';
}, },
showForm() { showForm() {
this.$emit('openForm', this.discussion.id); this.$emit('open-form', this.discussion.id);
this.isFormRendered = true; this.isFormRendered = true;
}, },
toggleResolvedStatus() { toggleResolvedStatus() {
...@@ -167,11 +168,11 @@ export default { ...@@ -167,11 +168,11 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
if (data.errors?.length > 0) { if (data.errors?.length > 0) {
this.$emit('resolveDiscussionError', data.errors[0]); this.$emit('resolve-discussion-error', data.errors[0]);
} }
}) })
.catch(err => { .catch(err => {
this.$emit('resolveDiscussionError', err); this.$emit('resolve-discussion-error', err);
}) })
.finally(() => { .finally(() => {
this.isResolving = false; this.isResolving = false;
...@@ -192,13 +193,12 @@ export default { ...@@ -192,13 +193,12 @@ export default {
<template> <template>
<div class="design-discussion-wrapper"> <div class="design-discussion-wrapper">
<div <gl-badge
class="badge badge-pill gl-display-flex gl-align-items-center gl-justify-content-center" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
:class="{ resolved: discussion.resolved }" :class="{ resolved: discussion.resolved }"
type="button"
> >
{{ discussion.index }} {{ discussion.index }}
</div> </gl-badge>
<ul <ul
class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none" class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
data-qa-selector="design_discussion_content" data-qa-selector="design_discussion_content"
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
:is-resolving="isResolving" :is-resolving="isResolving"
:class="{ 'gl-bg-blue-50': isDiscussionActive }" :class="{ 'gl-bg-blue-50': isDiscussionActive }"
@error="$emit('updateNoteError', $event)" @error="$emit('update-note-error', $event)"
> >
<template v-if="discussion.resolvable" #resolveDiscussion> <template v-if="discussion.resolvable" #resolveDiscussion>
<button <button
...@@ -216,7 +216,6 @@ export default { ...@@ -216,7 +216,6 @@ export default {
:class="{ 'is-active': discussion.resolved }" :class="{ 'is-active': discussion.resolved }"
:title="resolveCheckboxText" :title="resolveCheckboxText"
:aria-label="resolveCheckboxText" :aria-label="resolveCheckboxText"
type="button"
class="line-resolve-btn note-action-button gl-mr-3" class="line-resolve-btn note-action-button gl-mr-3"
data-testid="resolve-button" data-testid="resolve-button"
@click.stop="toggleResolvedStatus" @click.stop="toggleResolvedStatus"
...@@ -252,7 +251,7 @@ export default { ...@@ -252,7 +251,7 @@ export default {
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
:is-resolving="isResolving" :is-resolving="isResolving"
:class="{ 'gl-bg-blue-50': isDiscussionActive }" :class="{ 'gl-bg-blue-50': isDiscussionActive }"
@error="$emit('updateNoteError', $event)" @error="$emit('update-note-error', $event)"
/> />
<li v-show="isReplyPlaceholderVisible" class="reply-wrapper"> <li v-show="isReplyPlaceholderVisible" class="reply-wrapper">
<reply-placeholder <reply-placeholder
...@@ -275,8 +274,8 @@ export default { ...@@ -275,8 +274,8 @@ export default {
v-model="discussionComment" v-model="discussionComment"
:is-saving="loading" :is-saving="loading"
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
@submitForm="mutate" @submit-form="mutate"
@cancelForm="hideForm" @cancel-form="hideForm"
> >
<template v-if="discussion.resolvable" #resolveCheckbox> <template v-if="discussion.resolvable" #resolveCheckbox>
<label data-testid="resolve-checkbox"> <label data-testid="resolve-checkbox">
......
app/assets/javascripts/design_management/components/design_notes/design_note.vue
View file @ a8fdc573
<script> <script>
/* eslint-disable vue/no-v-html */ /* eslint-disable vue/no-v-html */
import { ApolloMutation } from 'vue-apollo'; import { ApolloMutation } from 'vue-apollo';
import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { GlTooltipDirective, GlIcon, GlLink } from '@gitlab/ui';
import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql'; import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
...@@ -18,6 +18,7 @@ export default { ...@@ -18,6 +18,7 @@ export default {
DesignReplyForm, DesignReplyForm,
ApolloMutation, ApolloMutation,
GlIcon, GlIcon,
GlLink,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -83,27 +84,27 @@ export default { ...@@ -83,27 +84,27 @@ export default {
:img-alt="author.username" :img-alt="author.username"
:img-size="40" :img-size="40"
/> />
<div class="d-flex justify-content-between"> <div class="gl-display-flex gl-justify-content-space-between">
<div> <div>
<a <gl-link
v-once v-once
:href="author.webUrl" :href="author.webUrl"
class="js-user-link" class="js-user-link"
:data-user-id="author.id" :data-user-id="author.id"
:data-username="author.username" :data-username="author.username"
> >
<span class="note-header-author-name bold">{{ author.name }}</span> <span class="note-header-author-name gl-font-weight-bold">{{ author.name }}</span>
<span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span> <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
<span class="note-headline-light">@{{ author.username }}</span> <span class="note-headline-light">@{{ author.username }}</span>
</a> </gl-link>
<span class="note-headline-light note-headline-meta"> <span class="note-headline-light note-headline-meta">
<span class="system-note-message"> <slot></slot> </span> <span class="system-note-message"> <slot></slot> </span>
<a <gl-link
class="note-timestamp system-note-separator gl-display-block gl-mb-2" class="note-timestamp system-note-separator gl-display-block gl-mb-2"
:href="`#note_${noteAnchorId}`" :href="`#note_${noteAnchorId}`"
> >
<time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" /> <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
</a> </gl-link>
</span> </span>
</div> </div>
<div class="gl-display-flex"> <div class="gl-display-flex">
...@@ -122,7 +123,7 @@ export default { ...@@ -122,7 +123,7 @@ export default {
</div> </div>
<template v-if="!isEditing"> <template v-if="!isEditing">
<div <div
class="note-text js-note-text md" class="note-text js-note-text"
data-qa-selector="note_content" data-qa-selector="note_content"
v-html="note.bodyHtml" v-html="note.bodyHtml"
></div> ></div>
...@@ -143,9 +144,9 @@ export default { ...@@ -143,9 +144,9 @@ export default {
:is-saving="loading" :is-saving="loading"
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
:is-new-comment="false" :is-new-comment="false"
class="mt-5" class="gl-mt-5"
@submitForm="mutate" @submit-form="mutate"
@cancelForm="hideForm" @cancel-form="hideForm"
/> />
</apollo-mutation> </apollo-mutation>
</timeline-entry-item> </timeline-entry-item>
......
app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
View file @ a8fdc573
<script> <script>
import { GlDeprecatedButton, GlModal } from '@gitlab/ui'; import { GlButton, GlModal } from '@gitlab/ui';
import MarkdownField from '~/vue_shared/components/markdown/field.vue'; import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
name: 'DesignReplyForm', name: 'DesignReplyForm',
components: { components: {
MarkdownField, MarkdownField,
GlDeprecatedButton, GlButton,
GlModal, GlModal,
}, },
props: { props: {
...@@ -66,13 +66,13 @@ export default { ...@@ -66,13 +66,13 @@ export default {
}, },
methods: { methods: {
submitForm() { submitForm() {
if (this.hasValue) this.$emit('submitForm'); if (this.hasValue) this.$emit('submit-form');
}, },
cancelComment() { cancelComment() {
if (this.hasValue && this.formText !== this.value) { if (this.hasValue && this.formText !== this.value) {
this.$refs.cancelCommentModal.show(); this.$refs.cancelCommentModal.show();
} else { } else {
this.$emit('cancelForm'); this.$emit('cancel-form');
} }
}, },
focusInput() { focusInput() {
...@@ -112,20 +112,21 @@ export default { ...@@ -112,20 +112,21 @@ export default {
</markdown-field> </markdown-field>
<slot name="resolveCheckbox"></slot> <slot name="resolveCheckbox"></slot>
<div class="note-form-actions gl-display-flex gl-justify-content-space-between"> <div class="note-form-actions gl-display-flex gl-justify-content-space-between">
<gl-deprecated-button <gl-button
ref="submitButton" ref="submitButton"
:disabled="!hasValue || isSaving" :disabled="!hasValue || isSaving"
category="primary"
variant="success" variant="success"
type="submit" type="submit"
data-track-event="click_button" data-track-event="click_button"
data-qa-selector="save_comment_button" data-qa-selector="save_comment_button"
@click="$emit('submitForm')" @click="$emit('submit-form')"
> >
{{ buttonText }} {{ buttonText }}
</gl-deprecated-button> </gl-button>
<gl-deprecated-button ref="cancelButton" @click="cancelComment">{{ <gl-button ref="cancelButton" variant="default" category="primary" @click="cancelComment">{{
__('Cancel') __('Cancel')
}}</gl-deprecated-button> }}</gl-button>
</div> </div>
<gl-modal <gl-modal
ref="cancelCommentModal" ref="cancelCommentModal"
...@@ -134,7 +135,7 @@ export default { ...@@ -134,7 +135,7 @@ export default {
:ok-title="modalSettings.okTitle" :ok-title="modalSettings.okTitle"
:cancel-title="modalSettings.cancelTitle" :cancel-title="modalSettings.cancelTitle"
modal-id="cancel-comment-modal" modal-id="cancel-comment-modal"
@ok="$emit('cancelForm')" @ok="$emit('cancel-form')"
>{{ modalSettings.content }} >{{ modalSettings.content }}
</gl-modal> </gl-modal>
</form> </form>
......
app/assets/javascripts/design_management/components/design_sidebar.vue
View file @ a8fdc573
...@@ -159,11 +159,11 @@ export default { ...@@ -159,11 +159,11 @@ export default {
:resolved-discussions-expanded="resolvedDiscussionsExpanded" :resolved-discussions-expanded="resolvedDiscussionsExpanded"
:discussion-with-open-form="discussionWithOpenForm" :discussion-with-open-form="discussionWithOpenForm"
data-testid="unresolved-discussion" data-testid="unresolved-discussion"
@createNoteError="$emit('onDesignDiscussionError', $event)" @create-note-error="$emit('onDesignDiscussionError', $event)"
@updateNoteError="$emit('updateNoteError', $event)" @update-note-error="$emit('updateNoteError', $event)"
@resolveDiscussionError="$emit('resolveDiscussionError', $event)" @resolve-discussion-error="$emit('resolveDiscussionError', $event)"
@click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
@openForm="updateDiscussionWithOpenForm" @open-form="updateDiscussionWithOpenForm"
/> />
<template v-if="resolvedDiscussions.length > 0"> <template v-if="resolvedDiscussions.length > 0">
<gl-button <gl-button
......
app/assets/javascripts/design_management/pages/design/index.vue
View file @ a8fdc573
...@@ -372,8 +372,8 @@ export default { ...@@ -372,8 +372,8 @@ export default {
v-model="comment" v-model="comment"
:is-saving="loading" :is-saving="loading"
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
@submitForm="mutate" @submit-form="mutate"
@cancelForm="closeCommentForm" @cancel-form="closeCommentForm"
/> </apollo-mutation /> </apollo-mutation
></template> ></template>
</design-sidebar> </design-sidebar>
......
changelogs/unreleased/ntepluhina-refactor-design-management-to-gitlab-ui-1.yml 0 → 100644
View file @ a8fdc573
---
title: Update design discussions to use GitLab UI components
merge_request: 41686
author:
type: other
spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
View file @ a8fdc573
...@@ -17,15 +17,15 @@ exports[`Design note component should match the snapshot 1`] = ` ...@@ -17,15 +17,15 @@ exports[`Design note component should match the snapshot 1`] = `
/> />
<div <div
class="d-flex justify-content-between" class="gl-display-flex gl-justify-content-space-between"
> >
<div> <div>
<a <gl-link-stub
class="js-user-link" class="js-user-link"
data-user-id="author-id" data-user-id="author-id"
> >
<span <span
class="note-header-author-name bold" class="note-header-author-name gl-font-weight-bold"
> >
</span> </span>
...@@ -37,7 +37,7 @@ exports[`Design note component should match the snapshot 1`] = ` ...@@ -37,7 +37,7 @@ exports[`Design note component should match the snapshot 1`] = `
> >
@ @
</span> </span>
</a> </gl-link-stub>
<span <span
class="note-headline-light note-headline-meta" class="note-headline-light note-headline-meta"
...@@ -46,7 +46,7 @@ exports[`Design note component should match the snapshot 1`] = ` ...@@ -46,7 +46,7 @@ exports[`Design note component should match the snapshot 1`] = `
class="system-note-message" class="system-note-message"
/> />
<a <gl-link-stub
class="note-timestamp system-note-separator gl-display-block gl-mb-2" class="note-timestamp system-note-separator gl-display-block gl-mb-2"
href="#note_123" href="#note_123"
> >
...@@ -55,7 +55,7 @@ exports[`Design note component should match the snapshot 1`] = ` ...@@ -55,7 +55,7 @@ exports[`Design note component should match the snapshot 1`] = `
time="2019-07-26T15:02:20Z" time="2019-07-26T15:02:20Z"
tooltipplacement="bottom" tooltipplacement="bottom"
/> />
</a> </gl-link-stub>
</span> </span>
</div> </div>
...@@ -68,7 +68,7 @@ exports[`Design note component should match the snapshot 1`] = ` ...@@ -68,7 +68,7 @@ exports[`Design note component should match the snapshot 1`] = `
</div> </div>
<div <div
class="note-text js-note-text md" class="note-text js-note-text"
data-qa-selector="note_content" data-qa-selector="note_content"
/> />
......
spec/frontend/design_management/components/design_notes/__snapshots__/design_reply_form_spec.js.snap
View file @ a8fdc573
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design reply form component renders button text as "Comment" when creating a comment 1`] = ` exports[`Design reply form component renders button text as "Comment" when creating a comment 1`] = `
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\"> "<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
<!----> <!---->
Comment <!----> <span class=\\"gl-button-text\\">
</button>" Comment
</span></button>"
`; `;
exports[`Design reply form component renders button text as "Save comment" when creating a comment 1`] = ` exports[`Design reply form component renders button text as "Save comment" when creating a comment 1`] = `
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\"> "<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
<!----> <!---->
Save comment <!----> <span class=\\"gl-button-text\\">
</button>" Save comment
</span></button>"
`; `;
spec/frontend/design_management/components/design_notes/design_discussion_spec.js
View file @ a8fdc573
...@@ -232,7 +232,7 @@ describe('Design discussions component', () => { ...@@ -232,7 +232,7 @@ describe('Design discussions component', () => {
{ discussionComment: 'test', isFormRendered: true }, { discussionComment: 'test', isFormRendered: true },
); );
findReplyForm().vm.$emit('submitForm'); findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(mutationVariables); expect(mutate).toHaveBeenCalledWith(mutationVariables);
await mutate(); await mutate();
...@@ -250,7 +250,7 @@ describe('Design discussions component', () => { ...@@ -250,7 +250,7 @@ describe('Design discussions component', () => {
return wrapper.vm return wrapper.vm
.$nextTick() .$nextTick()
.then(() => { .then(() => {
findReplyForm().vm.$emit('cancelForm'); findReplyForm().vm.$emit('cancel-form');
expect(wrapper.vm.discussionComment).toBe(''); expect(wrapper.vm.discussionComment).toBe('');
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
...@@ -321,6 +321,6 @@ describe('Design discussions component', () => { ...@@ -321,6 +321,6 @@ describe('Design discussions component', () => {
createComponent(); createComponent();
findReplyPlaceholder().vm.$emit('onClick'); findReplyPlaceholder().vm.$emit('onClick');
expect(wrapper.emitted('openForm')).toBeTruthy(); expect(wrapper.emitted('open-form')).toBeTruthy();
}); });
}); });
spec/frontend/design_management/components/design_notes/design_note_spec.js
View file @ a8fdc573
...@@ -133,8 +133,8 @@ describe('Design note component', () => { ...@@ -133,8 +133,8 @@ describe('Design note component', () => {
expect(findReplyForm().exists()).toBe(true); expect(findReplyForm().exists()).toBe(true);
}); });
it('hides the form on hideForm event', () => { it('hides the form on cancel-form event', () => {
findReplyForm().vm.$emit('cancelForm'); findReplyForm().vm.$emit('cancel-form');
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(findReplyForm().exists()).toBe(false); expect(findReplyForm().exists()).toBe(false);
...@@ -142,8 +142,8 @@ describe('Design note component', () => { ...@@ -142,8 +142,8 @@ describe('Design note component', () => {
}); });
}); });
it('calls a mutation on submitForm event and hides a form', () => { it('calls a mutation on submit-form event and hides a form', () => {
findReplyForm().vm.$emit('submitForm'); findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalled(); expect(mutate).toHaveBeenCalled();
return mutate() return mutate()
......
spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
View file @ a8fdc573
...@@ -70,7 +70,7 @@ describe('Design reply form component', () => { ...@@ -70,7 +70,7 @@ describe('Design reply form component', () => {
}); });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeFalsy(); expect(wrapper.emitted('submit-form')).toBeFalsy();
}); });
}); });
...@@ -80,20 +80,20 @@ describe('Design reply form component', () => { ...@@ -80,20 +80,20 @@ describe('Design reply form component', () => {
}); });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeFalsy(); expect(wrapper.emitted('submit-form')).toBeFalsy();
}); });
}); });
it('emits cancelForm event on pressing escape button on textarea', () => { it('emits cancelForm event on pressing escape button on textarea', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
expect(wrapper.emitted('cancelForm')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
it('emits cancelForm event on clicking Cancel button', () => { it('emits cancelForm event on clicking Cancel button', () => {
findCancelButton().vm.$emit('click'); findCancelButton().vm.$emit('click');
expect(wrapper.emitted('cancelForm')).toHaveLength(1); expect(wrapper.emitted('cancel-form')).toHaveLength(1);
}); });
}); });
...@@ -112,7 +112,7 @@ describe('Design reply form component', () => { ...@@ -112,7 +112,7 @@ describe('Design reply form component', () => {
findSubmitButton().vm.$emit('click'); findSubmitButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
}); });
...@@ -122,7 +122,7 @@ describe('Design reply form component', () => { ...@@ -122,7 +122,7 @@ describe('Design reply form component', () => {
}); });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
}); });
...@@ -132,7 +132,7 @@ describe('Design reply form component', () => { ...@@ -132,7 +132,7 @@ describe('Design reply form component', () => {
}); });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
}); });
...@@ -147,7 +147,7 @@ describe('Design reply form component', () => { ...@@ -147,7 +147,7 @@ describe('Design reply form component', () => {
it('emits cancelForm event on Escape key if text was not changed', () => { it('emits cancelForm event on Escape key if text was not changed', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
expect(wrapper.emitted('cancelForm')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
it('opens confirmation modal on Escape key when text has changed', () => { it('opens confirmation modal on Escape key when text has changed', () => {
...@@ -162,7 +162,7 @@ describe('Design reply form component', () => { ...@@ -162,7 +162,7 @@ describe('Design reply form component', () => {
it('emits cancelForm event on Cancel button click if text was not changed', () => { it('emits cancelForm event on Cancel button click if text was not changed', () => {
findCancelButton().trigger('click'); findCancelButton().trigger('click');
expect(wrapper.emitted('cancelForm')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
it('opens confirmation modal on Cancel button click when text has changed', () => { it('opens confirmation modal on Cancel button click when text has changed', () => {
...@@ -178,7 +178,7 @@ describe('Design reply form component', () => { ...@@ -178,7 +178,7 @@ describe('Design reply form component', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
findModal().vm.$emit('ok'); findModal().vm.$emit('ok');
expect(wrapper.emitted('cancelForm')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
}); });
}); });
spec/frontend/design_management/components/design_sidebar_spec.js
View file @ a8fdc573
...@@ -154,22 +154,22 @@ describe('Design management design sidebar component', () => { ...@@ -154,22 +154,22 @@ describe('Design management design sidebar component', () => {
}); });
it('emits correct event on discussion create note error', () => { it('emits correct event on discussion create note error', () => {
findFirstDiscussion().vm.$emit('createNoteError', 'payload'); findFirstDiscussion().vm.$emit('create-note-error', 'payload');
expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]); expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]);
}); });
it('emits correct event on discussion update note error', () => { it('emits correct event on discussion update note error', () => {
findFirstDiscussion().vm.$emit('updateNoteError', 'payload'); findFirstDiscussion().vm.$emit('update-note-error', 'payload');
expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]); expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]);
}); });
it('emits correct event on discussion resolve error', () => { it('emits correct event on discussion resolve error', () => {
findFirstDiscussion().vm.$emit('resolveDiscussionError', 'payload'); findFirstDiscussion().vm.$emit('resolve-discussion-error', 'payload');
expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]); expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
}); });
it('changes prop correctly on opening discussion form', () => { it('changes prop correctly on opening discussion form', () => {
findFirstDiscussion().vm.$emit('openForm', 'some-id'); findFirstDiscussion().vm.$emit('open-form', 'some-id');
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id'); expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
......
spec/frontend/design_management/pages/design/index_spec.js
View file @ a8fdc573
...@@ -210,7 +210,7 @@ describe('Design management design index page', () => { ...@@ -210,7 +210,7 @@ describe('Design management design index page', () => {
}, },
); );
findDiscussionForm().vm.$emit('submitForm'); findDiscussionForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables); expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
return wrapper.vm return wrapper.vm
...@@ -235,7 +235,7 @@ describe('Design management design index page', () => { ...@@ -235,7 +235,7 @@ describe('Design management design index page', () => {
}, },
); );
findDiscussionForm().vm.$emit('cancelForm'); findDiscussionForm().vm.$emit('cancel-form');
expect(wrapper.vm.comment).toBe(''); expect(wrapper.vm.comment).toBe('');
......
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