refactor(NoteableDiscussion): Extracted ResolveDiscussionButton from
This commit is contained in:
parent
bbf6e65dd2
commit
56c62208f6
|
@ -0,0 +1,28 @@
|
|||
<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';
|
|||
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
import noteableNote from './noteable_note.vue';
|
||||
import noteHeader from './note_header.vue';
|
||||
import resolveDiscussionButton from './discussion_resolve_button.vue';
|
||||
import toggleRepliesWidget from './toggle_replies_widget.vue';
|
||||
import noteSignedOutWidget from './note_signed_out_widget.vue';
|
||||
import noteEditedText from './note_edited_text.vue';
|
||||
|
@ -35,6 +36,7 @@ export default {
|
|||
noteSignedOutWidget,
|
||||
noteEditedText,
|
||||
noteForm,
|
||||
resolveDiscussionButton,
|
||||
jumpToNextDiscussionButton,
|
||||
toggleRepliesWidget,
|
||||
placeholderNote,
|
||||
|
@ -453,16 +455,12 @@ Please check your network connection and try again.`;
|
|||
>
|
||||
Reply...
|
||||
</button>
|
||||
<div v-if="discussion.resolvable">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default ml-sm-2"
|
||||
@click="resolveHandler()"
|
||||
>
|
||||
<i v-if="isResolving" aria-hidden="true" class="fa fa-spinner fa-spin"></i>
|
||||
{{ resolveButtonTitle }}
|
||||
</button>
|
||||
</div>
|
||||
<resolve-discussion-button
|
||||
v-if="discussion.resolvable"
|
||||
:is-resolving="isResolving"
|
||||
:button-title="resolveButtonTitle"
|
||||
@onClick="resolveHandler"
|
||||
/>
|
||||
<div
|
||||
v-if="discussion.resolvable"
|
||||
class="btn-group discussion-actions ml-sm-2"
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Refactored NoteableDiscussion by extracting ResolveDiscussionButton
|
||||
merge_request: 24505
|
||||
author: Martin Hobert
|
||||
type: other
|
|
@ -0,0 +1,74 @@
|
|||
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);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue