Commit f4f63b99 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '229214-replace-LoadingButton-with-GlButton' into 'master'

Replace LoadingButton with GlButton for the comment dismissal modal

Closes #229214

See merge request gitlab-org/gitlab!40882
parents 131021c3 dc63b0a6
---
title: Replace LoadingButton with GlButton for the comment dismissal modal
merge_request: 40882
author:
type: performance
......@@ -2,13 +2,11 @@
import { GlButton } from '@gitlab/ui';
import Tracking from '~/tracking';
import { s__ } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
export default {
name: 'DismissalCommentModalFooter',
components: {
GlButton,
LoadingButton,
},
props: {
isDismissingVulnerability: {
......@@ -68,14 +66,15 @@ export default {
<gl-button variant="default" category="primary" class="js-cancel" @click="$emit('cancel')">
{{ __('Cancel') }}
</gl-button>
<loading-button
<gl-button
:loading="isDismissingVulnerability"
:disabled="isDismissingVulnerability"
:label="submitLabel"
data-qa-selector="add_and_dismiss_button"
class="js-loading-button"
container-class="btn btn-close"
data-testid="add_and_dismiss_button"
variant="warning"
@click="handleSubmit"
/>
>
{{ submitLabel }}
</gl-button>
</div>
</template>
import { mount } from '@vue/test-utils';
import component from 'ee/vue_shared/security_reports/components/dismissal_comment_modal_footer.vue';
import Tracking from '~/tracking';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
jest.mock('~/tracking');
......@@ -9,6 +8,8 @@ describe('DismissalCommentModalFooter', () => {
let origPage;
let wrapper;
const findAddAndDismissButton = () => wrapper.find('[data-testid="add_and_dismiss_button"]');
afterEach(() => {
document.body.dataset.page = origPage;
wrapper.destroy();
......@@ -25,11 +26,11 @@ describe('DismissalCommentModalFooter', () => {
});
it('should render the "Add comment and dismiss" button', () => {
expect(wrapper.find(LoadingButton).text()).toBe('Add comment & dismiss');
expect(findAddAndDismissButton().text()).toBe('Add comment & dismiss');
});
it('should emit the "addCommentAndDismiss" event when clicked', () => {
wrapper.find(LoadingButton).trigger('click');
findAddAndDismissButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().addCommentAndDismiss).toBeTruthy();
......@@ -59,11 +60,11 @@ describe('DismissalCommentModalFooter', () => {
});
it('should render the "Add comment and dismiss" button', () => {
expect(wrapper.find(LoadingButton).text()).toBe('Add comment');
expect(findAddAndDismissButton().text()).toBe('Add comment');
});
it('should emit the "addCommentAndDismiss" event when clicked', () => {
wrapper.find(LoadingButton).trigger('click');
findAddAndDismissButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().addDismissalComment).toBeTruthy();
......@@ -82,11 +83,11 @@ describe('DismissalCommentModalFooter', () => {
});
it('should render the "Save comment" button', () => {
expect(wrapper.find(LoadingButton).text()).toBe('Save comment');
expect(findAddAndDismissButton().text()).toBe('Save comment');
});
it('should emit the "addCommentAndDismiss" event when clicked', () => {
wrapper.find(LoadingButton).trigger('click');
findAddAndDismissButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().addDismissalComment).toBeTruthy();
......
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