Merge pull request #6077 from m-kutnik/master

fix: missing default labels in ConfirmDialog and ConfirmPopup
primefaces · Jul 26, 2024 · d697f82 · d697f82
2 parents d78678c + 3851e6f
commit d697f82
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 20 deletions.
diff --git 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
@@ -141,22 +141,38 @@ export default {
             return this.confirmation ? this.confirmation.position : null;
         },
         acceptLabel() {
-            if (this.confirmation) {
-                const confirmation = this.confirmation;
+            if (!this.confirmation) {
+                return null;
+            }
+
+            const confirmation = this.confirmation;
+
+            if (confirmation.acceptLabel) {
+                return confirmation.acceptLabel;
+            }
 
-                return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
+            if (confirmation.acceptProps?.label) {
+                return confirmation.acceptProps.label;
             }
 
-            return null;
+            return this.$primevue.config.locale.accept;
         },
         rejectLabel() {
-            if (this.confirmation) {
-                const confirmation = this.confirmation;
+            if (!this.confirmation) {
+                return null;
+            }
+
+            const confirmation = this.confirmation;
+
+            if (confirmation.rejectLabel) {
+                return confirmation.rejectLabel;
+            }
 
-                return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
+            if (confirmation.rejectProps?.label) {
+                return confirmation.rejectProps.label;
             }
 
-            return null;
+            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
@@ -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
@@ -303,22 +303,38 @@ export default {
             return this.confirmation ? this.confirmation.message : null;
         },
         acceptLabel() {
-            if (this.confirmation) {
-                const confirmation = this.confirmation;
+            if (!this.confirmation) {
+                return null;
+            }
+
+            const confirmation = this.confirmation;
+
+            if (confirmation.acceptLabel) {
+                return confirmation.acceptLabel;
+            }
 
-                return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
+            if (confirmation.acceptProps?.label) {
+                return confirmation.acceptProps.label;
             }
 
-            return null;
+            return this.$primevue.config.locale.accept;
         },
         rejectLabel() {
-            if (this.confirmation) {
-                const confirmation = this.confirmation;
+            if (!this.confirmation) {
+                return null;
+            }
+
+            const confirmation = this.confirmation;
+
+            if (confirmation.rejectLabel) {
+                return confirmation.rejectLabel;
+            }
 
-                return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
+            if (confirmation.rejectProps?.label) {
+                return confirmation.rejectProps.label;
             }
 
-            return null;
+            return this.$primevue.config.locale.reject;
         },
         acceptIcon() {
             return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;