Commit 43b69832 authored by Phil Hughes's avatar Phil Hughes

Fixes the styling of the resolve thread button

Moves the resolve thread button to the GitLab UI button component
parent e2e3b618
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
export default {
name: 'ResolveDiscussionButton',
components: {
GlLoadingIcon,
GlButton,
},
props: {
isResolving: {
......@@ -21,8 +21,7 @@ export default {
</script>
<template>
<button ref="button" type="button" class="btn btn-default ml-sm-2" @click="$emit('onClick')">
<gl-loading-icon v-if="isResolving" ref="isResolvingIcon" inline />
<gl-button :loading="isResolving" class="ml-sm-2" @click="$emit('onClick')">
{{ buttonTitle }}
</button>
</gl-button>
</template>
import { shallowMount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import resolveDiscussionButton from '~/notes/components/discussion_resolve_button.vue';
const buttonTitle = 'Resolve discussion';
......@@ -26,9 +27,9 @@ describe('resolveDiscussionButton', () => {
});
it('should emit a onClick event on button click', () => {
const button = wrapper.find({ ref: 'button' });
const button = wrapper.find(GlButton);
button.trigger('click');
button.vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted()).toEqual({
......@@ -38,7 +39,7 @@ describe('resolveDiscussionButton', () => {
});
it('should contain the provided button title', () => {
const button = wrapper.find({ ref: 'button' });
const button = wrapper.find(GlButton);
expect(button.text()).toContain(buttonTitle);
});
......@@ -51,9 +52,9 @@ describe('resolveDiscussionButton', () => {
},
});
const button = wrapper.find({ ref: 'isResolvingIcon' });
const button = wrapper.find(GlButton);
expect(button.exists()).toEqual(true);
expect(button.props('loading')).toEqual(true);
});
it('should only show a loading spinner while resolving', () => {
......@@ -64,10 +65,10 @@ describe('resolveDiscussionButton', () => {
},
});
const button = wrapper.find({ ref: 'isResolvingIcon' });
const button = wrapper.find(GlButton);
wrapper.vm.$nextTick(() => {
expect(button.exists()).toEqual(false);
expect(button.props('loading')).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