Merge pull request #6170 from avramz/test-unit

Chore: Unit tests (#5095)
primefaces · Aug 2, 2024 · 1287131 · 1287131
2 parents 8dcd70c + 42e25c5
commit 1287131
Show file tree

Hide file tree

Showing 54 changed files with 303 additions and 461 deletions.
diff --git a/packages/primevue/src/accordion/Accordion.spec.js b/packages/primevue/src/accordion/Accordion.spec.js
@@ -40,115 +40,25 @@ describe('Accordion.vue', () => {
 
     it('should Accordion and AccordionTab component exist', () => {
         expect(wrapper.find('.p-accordion.p-component').exists()).toBe(true);
-        expect(wrapper.find('.p-accordion-tab').exists()).toBe(true);
-        expect(wrapper.findAll('.p-accordion-tab').length).toBe(3);
+        expect(wrapper.find('.p-accordionpanel').exists()).toBe(true);
+        expect(wrapper.findAll('.p-accordionpanel').length).toBe(3);
     });
 
     it('should activeIndex change', async () => {
         await wrapper.setProps({ activeIndex: 1 });
 
-        const allTabs = wrapper.findAll('.p-accordion-tab');
+        const allTabs = wrapper.findAll('.p-accordionpanel');
 
-        expect(allTabs[0].classes()).not.toContain('p-accordion-tab-active');
-        expect(allTabs[1].classes()).toContain('p-accordion-tab-active');
+        expect(allTabs[0].classes()).not.toContain('p-accordionpanel-active');
+        expect(allTabs[1].classes()).toContain('p-accordionpanel-active');
     });
 
-    it('should work tab click', async () => {
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
+    it('should work panel click', async () => {
+        const firstHeader = wrapper.find('button.p-accordionheader');
 
         await firstHeader.trigger('click');
 
         expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([0]);
         expect(wrapper.emitted()['tab-click'][0][0].index).toEqual(0);
     });
-
-    it('When invalid key triggered OnTabKey should break', async () => {
-        const keydownOptions = ['onTabHomeKey', 'onTabEnterKey', 'onTabEndKey', 'onTabArrowDownKey', 'onTabArrowUpKey'];
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-
-        await firstHeader.trigger('keydown', { code: 'ArrowRight' });
-
-        for (const keydownOption of keydownOptions) {
-            expect(vi.spyOn(wrapper.vm, keydownOption)).not.toHaveBeenCalled();
-        }
-    });
-
-    it('When keydown enter is triggered on component header changeActiveIndex should be triggered', async () => {
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-        const changeActiveIndexSpy = vi.spyOn(wrapper.vm, 'changeActiveIndex');
-
-        await firstHeader.trigger('keydown', { code: 'Enter' });
-
-        expect(changeActiveIndexSpy).toHaveBeenCalled();
-    });
-
-    it('When keydown end is triggered on component header changeFocusedTab should be triggered', async () => {
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-        const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab');
-        const findLastHeaderActionSpy = vi.spyOn(wrapper.vm, 'findLastHeaderAction');
-
-        await firstHeader.trigger('keydown', { code: 'End' });
-
-        expect(changeFocusedTabSpy).toHaveBeenCalled();
-        expect(findLastHeaderActionSpy).toHaveBeenCalled();
-    });
-
-    it('When keydown home is triggered on component header changeFocusedTab should be triggered', async () => {
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-        const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab');
-        const findFirstHeaderActionSpy = vi.spyOn(wrapper.vm, 'findFirstHeaderAction');
-
-        await firstHeader.trigger('keydown', { code: 'Home' });
-
-        expect(changeFocusedTabSpy).toHaveBeenCalled();
-        expect(findFirstHeaderActionSpy).toHaveBeenCalled();
-    });
-
-    it('When keydown ArrowUp is triggered and findPrevHeaderAction is true changeFocusedTab should be triggered', async () => {
-        const findPrevHeaderActionSpy = vi.spyOn(wrapper.vm, 'findPrevHeaderAction').mockImplementation(() => true);
-        const onTabEndKeySpy = vi.spyOn(wrapper.vm, 'onTabEndKey');
-        const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab').mockImplementation(() => true);
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-
-        await firstHeader.trigger('keydown', { code: 'ArrowUp' });
-
-        expect(findPrevHeaderActionSpy).toHaveBeenCalled();
-        expect(changeFocusedTabSpy).toHaveBeenCalled();
-        expect(onTabEndKeySpy).toHaveBeenCalledTimes(0);
-    });
-
-    it('When keydown ArrowUp is triggered and findPrevHeaderAction is false onTabEndKey should be triggered', async () => {
-        const findPrevHeaderActionSpy = vi.spyOn(wrapper.vm, 'findPrevHeaderAction').mockImplementation(() => false);
-        const onTabEndKeySpy = vi.spyOn(wrapper.vm, 'onTabEndKey');
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-
-        await firstHeader.trigger('keydown', { code: 'ArrowUp' });
-
-        expect(findPrevHeaderActionSpy).toHaveBeenCalled();
-        expect(onTabEndKeySpy).toHaveBeenCalled();
-    });
-
-    it('When keydown ArrowDown is triggered and nextHeaderAction is true changeFocusedTab should be triggered', async () => {
-        const findNextHeaderActionSpy = vi.spyOn(wrapper.vm, 'findNextHeaderAction').mockImplementation(() => true);
-        const onTabHomeKeySpy = vi.spyOn(wrapper.vm, 'onTabHomeKey');
-        const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab').mockImplementation(() => true);
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-
-        await firstHeader.trigger('keydown', { code: 'ArrowDown' });
-
-        expect(findNextHeaderActionSpy).toHaveBeenCalled();
-        expect(changeFocusedTabSpy).toHaveBeenCalled();
-        expect(onTabHomeKeySpy).toHaveBeenCalledTimes(0);
-    });
-
-    it('When keydown ArrowDown is triggered and nextHeaderAction is false onTabHomeKey should be triggered', async () => {
-        const findNextHeaderActionSpy = vi.spyOn(wrapper.vm, 'findNextHeaderAction').mockImplementation(() => false);
-        const onTabHomeKeySpy = vi.spyOn(wrapper.vm, 'onTabHomeKey');
-        const firstHeader = wrapper.find('a.p-accordion-header-link');
-
-        await firstHeader.trigger('keydown', { code: 'ArrowDown' });
-
-        expect(findNextHeaderActionSpy).toHaveBeenCalled();
-        expect(onTabHomeKeySpy).toHaveBeenCalled();
-    });
 });
diff --git a/packages/primevue/src/autocomplete/AutoComplete.spec.js b/packages/primevue/src/autocomplete/AutoComplete.spec.js
@@ -51,8 +51,8 @@ describe('AutoComplete.vue', () => {
             suggestions: [{ name: 'Bahrain', code: 'BH' }]
         });
 
-        expect(wrapper.find('.p-autocomplete-items').exists()).toBe(true);
-        expect(wrapper.findAll('.p-autocomplete-item').length).toBe(1);
+        expect(wrapper.find('.p-autocomplete-list').exists()).toBe(true);
+        expect(wrapper.findAll('.p-autocomplete-option').length).toBe(1);
     });
 
     it('should show overlay and empty-message if there are no suggestions', async () => {
@@ -65,8 +65,8 @@ describe('AutoComplete.vue', () => {
             suggestions: []
         });
 
-        expect(wrapper.find('.p-autocomplete-items').exists()).toBe(true);
-        expect(wrapper.findAll('.p-autocomplete-item').length).toBe(0);
+        expect(wrapper.find('.p-autocomplete-list').exists()).toBe(true);
+        expect(wrapper.findAll('.p-autocomplete-option').length).toBe(0);
         expect(wrapper.find('.p-autocomplete-empty-message').exists()).toBe(true);
     });
 

diff --git a/packages/primevue/src/avatar/Avatar.spec.js b/packages/primevue/src/avatar/Avatar.spec.js
@@ -20,8 +20,8 @@ describe('Avatar.vue', () => {
         expect(wrapper.find('.p-avatar.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-avatar-lg').exists()).toBe(true);
         expect(wrapper.find('.p-avatar-circle').exists()).toBe(true);
-        expect(wrapper.find('.p-avatar-text').exists()).toBe(true);
-        expect(wrapper.find('.p-avatar-text').text()).toBe('T');
+        expect(wrapper.find('.p-avatar-label').exists()).toBe(true);
+        expect(wrapper.find('.p-avatar-label').text()).toBe('T');
     });
 
     it('should exist', async () => {

diff --git a/packages/primevue/src/blockui/BlockUI.spec.js b/packages/primevue/src/blockui/BlockUI.spec.js
@@ -1,12 +1,21 @@
 import { mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
 import { beforeEach, expect } from 'vitest';
 import BlockUI from './BlockUI.vue';
 
 let wrapper = null;
 
 describe('BlockUI.vue', () => {
     beforeEach(() => {
-        wrapper = mount(BlockUI);
+        wrapper = mount(BlockUI, {
+            attachTo: document.body,
+            global: {
+                plugins: [PrimeVue],
+                stubs: {
+                    teleport: true
+                }
+            }
+        });
     });
 
     afterEach(() => {

diff --git a/packages/primevue/src/breadcrumb/Breadcrumb.spec.js b/packages/primevue/src/breadcrumb/Breadcrumb.spec.js
@@ -27,7 +27,7 @@ describe('Breadcrumb', () => {
         });
 
         expect(wrapper.find('.p-breadcrumb.p-component').exists()).toBe(true);
-        expect(wrapper.findAll('.p-menuitem-separator').length).toBe(5);
-        expect(wrapper.findAll('.p-menuitem-text').length).toBe(5);
+        expect(wrapper.findAll('.p-breadcrumb-separator').length).toBe(5);
+        expect(wrapper.findAll('.p-breadcrumb-item-label').length).toBe(5);
     });
 });
diff --git a/packages/primevue/src/button/Button.spec.js b/packages/primevue/src/button/Button.spec.js
@@ -79,6 +79,6 @@ describe('Button.vue', () => {
             }
         });
 
-        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
+        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-p-disabled="false" data-pc-section="root" pc7=""><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
     });
 });
diff --git a/packages/primevue/src/carousel/Carousel.spec.js b/packages/primevue/src/carousel/Carousel.spec.js
@@ -81,7 +81,7 @@ describe('Carousel.vue', () => {
 
         expect(firstItem.classes()).toContain('p-carousel-item-active');
 
-        const nextBtn = wrapper.find('.p-carousel-next');
+        const nextBtn = wrapper.find('.p-carousel-next-button');
 
         await nextBtn.trigger('click');
 

diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.spec.js b/packages/primevue/src/cascadeselect/CascadeSelect.spec.js
@@ -106,20 +106,20 @@ describe('CascadeSelect.vue', () => {
 
         await wrapper.trigger('click');
 
-        expect(wrapper.find('.p-cascadeselect-panel.p-cascadeselect-items').exists()).toBe(true);
-        expect(wrapper.findAll('.p-cascadeselect-item').length).toBe(3);
-        expect(wrapper.findAll('.p-cascadeselect-item-text')[0].text()).toBe('Australia');
+        expect(wrapper.find('.p-cascadeselect-list').exists()).toBe(true);
+        expect(wrapper.findAll('.p-cascadeselect-option').length).toBe(3);
+        expect(wrapper.findAll('.p-cascadeselect-option-text')[0].text()).toBe('Australia');
 
-        const firstGroup = wrapper.findAll('.p-cascadeselect-item-content')[0];
+        const firstGroup = wrapper.findAll('.p-cascadeselect-option-content')[0];
 
         await firstGroup.trigger('click');
 
-        expect(wrapper.find('.p-cascadeselect-panel.p-cascadeselect-sublist').exists()).toBe(true);
+        expect(wrapper.find('.p-cascadeselect-list .p-cascadeselect-option-list').exists()).toBe(true);
 
-        const sublist = wrapper.find('.p-cascadeselect-panel.p-cascadeselect-sublist');
+        const sublist = wrapper.find('.p-cascadeselect-list .p-cascadeselect-option-list');
 
-        expect(sublist.findAll('.p-cascadeselect-item.p-cascadeselect-item-group').length).toBe(2);
-        expect(sublist.findAll('.p-cascadeselect-item-text')[0].text()).toBe('New South Wales');
+        expect(sublist.findAll('.p-cascadeselect-option').length).toBe(2);
+        expect(sublist.findAll('.p-cascadeselect-option-text')[0].text()).toBe('New South Wales');
     });
 
     it('should accept custom icons', async () => {
@@ -130,7 +130,7 @@ describe('CascadeSelect.vue', () => {
 
         await nextTick();
 
-        expect(wrapper.find('.p-cascadeselect-trigger-icon').classes()).toContain('pi-discord');
+        expect(wrapper.find('.p-cascadeselect-dropdown-icon').classes()).toContain('pi-discord');
 
         await wrapper.trigger('click');
 

diff --git a/packages/primevue/src/checkbox/Checkbox.spec.js b/packages/primevue/src/checkbox/Checkbox.spec.js
@@ -21,6 +21,6 @@ describe('Checkbox.vue', () => {
     it('should exist', async () => {
         await wrapper.setProps({ modelValue: true });
 
-        expect(wrapper.find('.p-checkbox.p-highlight').exists()).toBe(true);
+        expect(wrapper.find('.p-checkbox.p-checkbox-checked').exists()).toBe(true);
     });
 });
diff --git a/packages/primevue/src/chip/Chip.spec.js b/packages/primevue/src/chip/Chip.spec.js
@@ -21,7 +21,7 @@ describe('Chip.vue', () => {
     it('should exists', () => {
         expect(wrapper.find('.p-chip.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-chip-icon').classes()).toContain('pi-primevue');
-        expect(wrapper.find('.p-chip-text').text()).toBe('PrimeVue');
+        expect(wrapper.find('.p-chip-label').text()).toBe('PrimeVue');
         expect(wrapper.find('.p-chip-remove-icon').exists()).toBe(true);
     });
 

diff --git a/packages/primevue/src/colorpicker/ColorPicker.spec.js b/packages/primevue/src/colorpicker/ColorPicker.spec.js
@@ -21,11 +21,11 @@ describe('ColorPicker.vue', () => {
 
     it('should exist', () => {
         expect(wrapper.find('.p-colorpicker.p-component').exists()).toBe(true);
-        expect(wrapper.find('.p-colorpicker-preview.p-inputtext').exists()).toBe(true);
+        expect(wrapper.find('input.p-colorpicker-preview').exists()).toBe(true);
     });
 
     it('should input click triggered', async () => {
-        const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
+        const input = wrapper.find('input.p-colorpicker-preview');
         const onInputClick = vi.spyOn(wrapper.vm, 'onInputClick');
 
         await input.trigger('click');
@@ -37,7 +37,7 @@ describe('ColorPicker.vue', () => {
     });
 
     it('should mouse events triggered', async () => {
-        const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
+        const input = wrapper.find('input.p-colorpicker-preview');
 
         await input.trigger('click');
 
@@ -49,11 +49,11 @@ describe('ColorPicker.vue', () => {
         wrapper.vm.onColorMousedown(event);
 
         expect(onColorMousedown).toHaveBeenCalled();
-        expect(wrapper.find('.p-colorpicker-preview.p-inputtext').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
+        expect(wrapper.find('input.p-colorpicker-preview').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
 
         wrapper.vm.onHueMousedown(event2);
 
         expect(onHueMousedown).toHaveBeenCalled();
-        expect(wrapper.find('.p-colorpicker-preview.p-inputtext').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
+        expect(wrapper.find('input.p-colorpicker-preview').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
     });
 });
diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
@@ -191,7 +191,7 @@ export default {
             this.autoFocusAccept = null;
             this.autoFocusReject = null;
 
-            DomHandler.focus(this.target);
+            focus(this.target);
             this.target = null;
 
             this.unbindOutsideClickListener();

diff --git a/packages/primevue/src/contextmenu/ContextMenu.spec.js b/packages/primevue/src/contextmenu/ContextMenu.spec.js
@@ -154,8 +154,8 @@ describe('ContextMenu.vue', () => {
 
         expect(show).toHaveBeenCalled();
         expect(wrapper.find('.p-contextmenu.p-component').exists()).toBe(true);
-        expect(wrapper.findAll('.p-menuitem').length).toBe(5);
-        expect(wrapper.findAll('.p-menuitem-text')[0].text()).toBe('File');
+        expect(wrapper.findAll('.p-contextmenu-item').length).toBe(5);
+        expect(wrapper.findAll('.p-contextmenu-item-label')[0].text()).toBe('File');
     });
 
     it('should hide menu', async () => {