Commit f6c8e9c6 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'refactor/56366-extract-resolve-discussion-button' into 'master'

refactor(NoteableDiscussion): Extracted ResolveDiscussionButton from

See merge request gitlab-org/gitlab-ce!24505
parents bbf6e65d 56c62208
<script>
export default {
name: 'ResolveDiscussionButton',
props: {
isResolving: {
type: Boolean,
required: false,
default: false,
},
buttonTitle: {
type: String,
required: true,
},
},
};
</script>
<template>
<button ref="button" type="button" class="btn btn-default ml-sm-2" @click="$emit('onClick')">
<i
v-if="isResolving"
ref="isResolvingIcon"
aria-hidden="true"
class="fa fa-spinner fa-spin"
></i>
{{ buttonTitle }}
</button>
</template>
...@@ -12,6 +12,7 @@ import { SYSTEM_NOTE } from '../constants'; ...@@ -12,6 +12,7 @@ import { SYSTEM_NOTE } from '../constants';
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 noteableNote from './noteable_note.vue'; import noteableNote from './noteable_note.vue';
import noteHeader from './note_header.vue'; import noteHeader from './note_header.vue';
import resolveDiscussionButton from './discussion_resolve_button.vue';
import toggleRepliesWidget from './toggle_replies_widget.vue'; import toggleRepliesWidget from './toggle_replies_widget.vue';
import noteSignedOutWidget from './note_signed_out_widget.vue'; import noteSignedOutWidget from './note_signed_out_widget.vue';
import noteEditedText from './note_edited_text.vue'; import noteEditedText from './note_edited_text.vue';
...@@ -35,6 +36,7 @@ export default { ...@@ -35,6 +36,7 @@ export default {
noteSignedOutWidget, noteSignedOutWidget,
noteEditedText, noteEditedText,
noteForm, noteForm,
resolveDiscussionButton,
jumpToNextDiscussionButton, jumpToNextDiscussionButton,
toggleRepliesWidget, toggleRepliesWidget,
placeholderNote, placeholderNote,
...@@ -453,16 +455,12 @@ Please check your network connection and try again.`; ...@@ -453,16 +455,12 @@ Please check your network connection and try again.`;
> >
Reply... Reply...
</button> </button>
<div v-if="discussion.resolvable"> <resolve-discussion-button
<button v-if="discussion.resolvable"
type="button" :is-resolving="isResolving"
class="btn btn-default ml-sm-2" :button-title="resolveButtonTitle"
@click="resolveHandler()" @onClick="resolveHandler"
> />
<i v-if="isResolving" aria-hidden="true" class="fa fa-spinner fa-spin"></i>
{{ resolveButtonTitle }}
</button>
</div>
<div <div
v-if="discussion.resolvable" v-if="discussion.resolvable"
class="btn-group discussion-actions ml-sm-2" class="btn-group discussion-actions ml-sm-2"
......
---
title: Refactored NoteableDiscussion by extracting ResolveDiscussionButton
merge_request: 24505
author: Martin Hobert
type: other
import resolveDiscussionButton from '~/notes/components/discussion_resolve_button.vue';
import { createLocalVue, shallowMount } from '@vue/test-utils';
const buttonTitle = 'Resolve discussion';
describe('resolveDiscussionButton', () => {
let wrapper;
let localVue;
const factory = options => {
localVue = createLocalVue();
wrapper = shallowMount(resolveDiscussionButton, {
localVue,
...options,
});
};
beforeEach(() => {
factory({
propsData: {
isResolving: false,
buttonTitle,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('should emit a onClick event on button click', () => {
const button = wrapper.find({ ref: 'button' });
button.trigger('click');
expect(wrapper.emitted()).toEqual({
onClick: [[]],
});
});
it('should contain the provided button title', () => {
const button = wrapper.find({ ref: 'button' });
expect(button.text()).toContain(buttonTitle);
});
it('should show a loading spinner while resolving', () => {
factory({
propsData: {
isResolving: true,
buttonTitle,
},
});
const button = wrapper.find({ ref: 'isResolvingIcon' });
expect(button.exists()).toEqual(true);
});
it('should only show a loading spinner while resolving', () => {
factory({
propsData: {
isResolving: false,
buttonTitle,
},
});
const button = wrapper.find({ ref: 'isResolvingIcon' });
localVue.nextTick(() => {
expect(button.exists()).toEqual(false);
});
});
});
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