fix: missing default labels in ConfirmDialog and ConfirmPopup

pull/6077/head
Mike Kutnik 2024-07-16 23:43:38 +02:00
parent 5cd2c86057
commit 3851e6f06a
4 changed files with 155 additions and 24 deletions

View File

@ -28,7 +28,9 @@ describe('ConfirmDialog', () => {
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
expect(wrapper.find('.p-dialog-title').text()).toBe('Confirmation');
expect(wrapper.find('.p-confirm-dialog-message').text()).toBe('Are you sure you want to proceed?');
expect(wrapper.find('.p-confirmdialog-message').text()).toBe('Are you sure you want to proceed?');
expect(wrapper.find('.p-confirmdialog-accept-button').text()).toBe('Yes');
expect(wrapper.find('.p-confirmdialog-reject-button').text()).toBe('No');
await wrapper.vm.reject();
@ -61,7 +63,7 @@ describe('ConfirmDialog', () => {
await wrapper.vm.$nextTick();
const acceptTriggered = vi.spyOn(wrapper.componentVM.confirmation, 'accept');
const CDAcceptBtn = wrapper.find('.p-confirm-dialog-accept');
const CDAcceptBtn = wrapper.find('.p-confirmdialog-accept-button');
await CDAcceptBtn.trigger('click');
@ -94,7 +96,7 @@ describe('ConfirmDialog', () => {
await wrapper.vm.$nextTick();
const rejectTriggered = vi.spyOn(wrapper.componentVM.confirmation, 'reject');
const CDRejectBtn = wrapper.find('.p-confirm-dialog-reject');
const CDRejectBtn = wrapper.find('.p-confirmdialog-reject-button');
await CDRejectBtn.trigger('click');
@ -124,7 +126,7 @@ describe('ConfirmDialog', () => {
await wrapper.vm.$nextTick();
const dialogCloseBtn = wrapper.find('.p-dialog-header-close');
const dialogCloseBtn = wrapper.find('.p-dialog-header .p-button');
await dialogCloseBtn.trigger('click');

View File

@ -141,22 +141,38 @@ export default {
return this.confirmation ? this.confirmation.position : null;
},
acceptLabel() {
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
if (!this.confirmation) {
return null;
}
return null;
const confirmation = this.confirmation;
if (confirmation.acceptLabel) {
return confirmation.acceptLabel;
}
if (confirmation.acceptProps?.label) {
return confirmation.acceptProps.label;
}
return this.$primevue.config.locale.accept;
},
rejectLabel() {
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
if (!this.confirmation) {
return null;
}
return null;
const confirmation = this.confirmation;
if (confirmation.rejectLabel) {
return confirmation.rejectLabel;
}
if (confirmation.rejectProps?.label) {
return confirmation.rejectProps.label;
}
return this.$primevue.config.locale.reject;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;

View File

@ -0,0 +1,97 @@
import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config';
import ConfirmPopup from './ConfirmPopup.vue';
describe('ConfirmPopup', () => {
it('should exist', async () => {
const wrapper = mount(ConfirmPopup, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true,
transition: false
}
},
data() {
return {
confirmation: {
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle'
},
visible: true
};
}
});
await wrapper.vm.$nextTick();
expect(wrapper.find('[role="alertdialog"]').isVisible()).toBe(true);
expect(wrapper.find('.p-confirmpopup-message').text()).toBe('Are you sure you want to proceed?');
expect(wrapper.find('.p-confirmpopup-accept-button').text()).toBe('Yes');
expect(wrapper.find('.p-confirmpopup-reject-button').text()).toBe('No');
});
it('should dialog trigger the accept function', async () => {
const wrapper = mount(ConfirmPopup, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true,
transition: false
}
},
data() {
return {
confirmation: {
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {},
reject: () => {}
},
visible: true
};
}
});
await wrapper.vm.$nextTick();
const acceptTriggered = vi.spyOn(wrapper.componentVM.confirmation, 'accept');
const CDAcceptBtn = wrapper.find('.p-confirmpopup-accept-button');
await CDAcceptBtn.trigger('click');
expect(acceptTriggered).toBeCalled();
});
it('should dialog trigger the reject function', async () => {
const wrapper = mount(ConfirmPopup, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true,
transition: false
}
},
data() {
return {
confirmation: {
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {},
reject: () => {}
},
visible: true
};
}
});
await wrapper.vm.$nextTick();
const rejectTriggered = vi.spyOn(wrapper.componentVM.confirmation, 'reject');
const CDRejectBtn = wrapper.find('.p-confirmpopup-reject-button');
await CDRejectBtn.trigger('click');
expect(rejectTriggered).toBeCalled();
});
});

View File

@ -303,22 +303,38 @@ export default {
return this.confirmation ? this.confirmation.message : null;
},
acceptLabel() {
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
if (!this.confirmation) {
return null;
}
return null;
const confirmation = this.confirmation;
if (confirmation.acceptLabel) {
return confirmation.acceptLabel;
}
if (confirmation.acceptProps?.label) {
return confirmation.acceptProps.label;
}
return this.$primevue.config.locale.accept;
},
rejectLabel() {
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
if (!this.confirmation) {
return null;
}
return null;
const confirmation = this.confirmation;
if (confirmation.rejectLabel) {
return confirmation.rejectLabel;
}
if (confirmation.rejectProps?.label) {
return confirmation.rejectProps.label;
}
return this.$primevue.config.locale.reject;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;