From 3851e6f06a444f482ed7c96c2ad2ee33778f1d8d Mon Sep 17 00:00:00 2001 From: Mike Kutnik Date: Tue, 16 Jul 2024 23:43:38 +0200 Subject: [PATCH] fix: missing default labels in ConfirmDialog and ConfirmPopup --- .../src/confirmdialog/ConfirmDialog.spec.js | 10 +- .../src/confirmdialog/ConfirmDialog.vue | 36 +++++-- .../src/confirmpopup/ConfirmPopup.spec.js | 97 +++++++++++++++++++ .../src/confirmpopup/ConfirmPopup.vue | 36 +++++-- 4 files changed, 155 insertions(+), 24 deletions(-) create mode 100644 packages/primevue/src/confirmpopup/ConfirmPopup.spec.js diff --git a/packages/primevue/src/confirmdialog/ConfirmDialog.spec.js b/packages/primevue/src/confirmdialog/ConfirmDialog.spec.js index 94d7ab4d1..4be883f30 100644 --- a/packages/primevue/src/confirmdialog/ConfirmDialog.spec.js +++ b/packages/primevue/src/confirmdialog/ConfirmDialog.spec.js @@ -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'); diff --git a/packages/primevue/src/confirmdialog/ConfirmDialog.vue b/packages/primevue/src/confirmdialog/ConfirmDialog.vue index 6e55258b6..d9d1d480f 100644 --- a/packages/primevue/src/confirmdialog/ConfirmDialog.vue +++ b/packages/primevue/src/confirmdialog/ConfirmDialog.vue @@ -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; diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.spec.js b/packages/primevue/src/confirmpopup/ConfirmPopup.spec.js new file mode 100644 index 000000000..cfb090032 --- /dev/null +++ b/packages/primevue/src/confirmpopup/ConfirmPopup.spec.js @@ -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(); + }); +}); diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue index bb8c4d62b..022c97685 100644 --- a/packages/primevue/src/confirmpopup/ConfirmPopup.vue +++ b/packages/primevue/src/confirmpopup/ConfirmPopup.vue @@ -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;