From 71d6789db8ab3ab5ca0f4fb7f7242e545e17db88 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 10:40:12 +0200 Subject: [PATCH 01/28] - confugure vitest - TreeButton.spec, Tree.spec update tests --- apps/showcase/config.setup.js | 17 +++++++++++++++++ apps/showcase/vitest.config.js | 10 ++-------- .../src/togglebutton/ToggleButton.spec.js | 6 +++--- packages/primevue/src/tree/Tree.spec.js | 4 ++-- 4 files changed, 24 insertions(+), 13 deletions(-) create mode 100644 apps/showcase/config.setup.js diff --git a/apps/showcase/config.setup.js b/apps/showcase/config.setup.js new file mode 100644 index 000000000..54cb1d177 --- /dev/null +++ b/apps/showcase/config.setup.js @@ -0,0 +1,17 @@ +import { config } from '@vue/test-utils'; +import { defaultOptions } from 'primevue/config'; + +config.global.mocks['$primevue'] = { + config: defaultOptions +}; + +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addEventListener: vi.fn(), + removeEventListener: vi.fn() + })) +}); diff --git a/apps/showcase/vitest.config.js b/apps/showcase/vitest.config.js index be1b5ef4d..6602f0560 100644 --- a/apps/showcase/vitest.config.js +++ b/apps/showcase/vitest.config.js @@ -2,10 +2,8 @@ import vue from '@vitejs/plugin-vue'; import path from 'path'; import { mergeConfig } from 'vite'; import { defineConfig } from 'vitest/config'; -import aliasConfig from './nuxt-vite.config.js'; export default mergeConfig( - aliasConfig, defineConfig({ plugins: [vue()], test: { @@ -18,12 +16,8 @@ export default mergeConfig( provider: 'istanbul', reporter: ['text', 'json', 'html'] }, - setupFiles: [path.resolve(__dirname, './components/lib/config/PrimeVue.spec.js')] - }, - resolve: { - alias: { - //'primevue/config': path.resolve(__dirname, './components/lib/config/PrimeVue.js') - } + setupFiles: [path.resolve(__dirname, './config.setup.js')], + include: [path.resolve(__dirname, '../../**/*.spec.js')] } }) ); diff --git a/packages/primevue/src/togglebutton/ToggleButton.spec.js b/packages/primevue/src/togglebutton/ToggleButton.spec.js index b21e4d490..3a8a1715f 100644 --- a/packages/primevue/src/togglebutton/ToggleButton.spec.js +++ b/packages/primevue/src/togglebutton/ToggleButton.spec.js @@ -16,7 +16,7 @@ describe('ToggleButton', () => { it('is ToggleButton exist', () => { expect(wrapper.find('.p-togglebutton.p-component').exists()).toBe(true); - expect(wrapper.find('span.pi-times.p-button-icon').exists()).toBe(true); + expect(wrapper.find('span.pi-times.p-togglebutton-icon').exists()).toBe(true); }); it('should have onIcon', async () => { @@ -44,11 +44,11 @@ describe('ToggleButton', () => { style: 'width: 10em' }); - expect(wrapper.find('.p-button-label').text()).toBe('I confirm'); + expect(wrapper.find('.p-togglebutton-label').text()).toBe('I confirm'); expect(wrapper.attributes().style).toContain('width: 10em'); await wrapper.setProps({ modelValue: false }); - expect(wrapper.find('.p-button-label').text()).toBe('I reject'); + expect(wrapper.find('.p-togglebutton-label').text()).toBe('I reject'); }); }); diff --git a/packages/primevue/src/tree/Tree.spec.js b/packages/primevue/src/tree/Tree.spec.js index a791a3ba3..3abc504cb 100644 --- a/packages/primevue/src/tree/Tree.spec.js +++ b/packages/primevue/src/tree/Tree.spec.js @@ -48,7 +48,7 @@ describe('Tree.vue', () => { } }); - let searchField = wrapper.find('input.p-tree-filter'); + let searchField = wrapper.find('input.p-inputtext'); await searchField.trigger('keydown.space'); @@ -57,7 +57,7 @@ describe('Tree.vue', () => { it('should render icon', ({ expect }) => { expect(wrapper.find('span.pi-inbox').exists()).toBeTruthy(); - expect(wrapper.find('span.pi-inbox').classes('p-treenode-icon')).toBeTruthy(); + expect(wrapper.find('span.pi-inbox').classes('p-tree-node-icon')).toBeTruthy(); }); it('should render icon slot', ({ expect }) => { From fa844bda11da200075a934ba61e360780ab8e1fe Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 15:32:14 +0200 Subject: [PATCH 02/28] - confugure vitest --- apps/showcase/config.setup.js | 17 ----------------- packages/primevue/vitest.config.js | 3 +-- 2 files changed, 1 insertion(+), 19 deletions(-) delete mode 100644 apps/showcase/config.setup.js diff --git a/apps/showcase/config.setup.js b/apps/showcase/config.setup.js deleted file mode 100644 index 54cb1d177..000000000 --- a/apps/showcase/config.setup.js +++ /dev/null @@ -1,17 +0,0 @@ -import { config } from '@vue/test-utils'; -import { defaultOptions } from 'primevue/config'; - -config.global.mocks['$primevue'] = { - config: defaultOptions -}; - -Object.defineProperty(window, 'matchMedia', { - writable: true, - value: vi.fn().mockImplementation((query) => ({ - matches: false, - media: query, - onchange: null, - addEventListener: vi.fn(), - removeEventListener: vi.fn() - })) -}); diff --git a/packages/primevue/vitest.config.js b/packages/primevue/vitest.config.js index 6602f0560..0cd05af06 100644 --- a/packages/primevue/vitest.config.js +++ b/packages/primevue/vitest.config.js @@ -16,8 +16,7 @@ export default mergeConfig( provider: 'istanbul', reporter: ['text', 'json', 'html'] }, - setupFiles: [path.resolve(__dirname, './config.setup.js')], - include: [path.resolve(__dirname, '../../**/*.spec.js')] + setupFiles: [path.resolve(__dirname, './src/config/Config.spec.js')] } }) ); From 8bfea139e4fd9e3f1e215bad0f3066dfa39b2326 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 15:50:43 +0200 Subject: [PATCH 03/28] - fix tests --- packages/primevue/src/tag/Tag.spec.js | 24 +++++++++---------- .../primevue/src/terminal/Terminal.spec.js | 4 ++-- packages/primevue/src/toast/Toast.spec.js | 2 +- .../src/toggleswitch/ToggleSwitch.spec.js | 4 ++-- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/primevue/src/tag/Tag.spec.js b/packages/primevue/src/tag/Tag.spec.js index 5345af639..6204d1dd3 100644 --- a/packages/primevue/src/tag/Tag.spec.js +++ b/packages/primevue/src/tag/Tag.spec.js @@ -46,6 +46,18 @@ describe('Tag.vue', () => { }); }); +describe('Tag.vue', () => { + it('should render default slot', () => { + const wrapper = mount(Tag, { + slots: { + default: h('i', { class: 'pi pi-discord' }, '') + } + }); + + expect(wrapper.html()).toBe(''); + }); +}); + describe('Tag.vue', () => { it('should be rounded', () => { const wrapper = mount(Tag, { @@ -55,15 +67,3 @@ describe('Tag.vue', () => { expect(wrapper.find('.p-tag-rounded').exists()).toBe(true); }); }); - -describe('Tag.vue', () => { - it('should render default slot', () => { - const wrapper = mount(Tag, { - slots: { - default: h('i', { class: 'pi pi-discord' }, '') - } - }); - - expect(wrapper.html()).toBe(''); - }); -}); diff --git a/packages/primevue/src/terminal/Terminal.spec.js b/packages/primevue/src/terminal/Terminal.spec.js index bd9d08d93..0ddb9db9b 100644 --- a/packages/primevue/src/terminal/Terminal.spec.js +++ b/packages/primevue/src/terminal/Terminal.spec.js @@ -36,7 +36,7 @@ describe('Terminal.vue', () => { }); expect(wrapper.find('.p-terminal.p-component').exists()).toBe(true); - expect(wrapper.find('input.p-terminal-input').exists()).toBe(true); + expect(wrapper.find('input.p-terminal-prompt-value').exists()).toBe(true); }); it('should return invalid command', async () => { @@ -72,6 +72,6 @@ describe('Terminal.vue', () => { }); expect(wrapper.find('.p-terminal.p-component').exists()).toBe(true); - expect(wrapper.find('input.p-terminal-input').exists()).toBe(true); + expect(wrapper.find('input.p-terminal-prompt-value').exists()).toBe(true); }); }); diff --git a/packages/primevue/src/toast/Toast.spec.js b/packages/primevue/src/toast/Toast.spec.js index d7e98dbd4..d9c19c114 100644 --- a/packages/primevue/src/toast/Toast.spec.js +++ b/packages/primevue/src/toast/Toast.spec.js @@ -83,7 +83,7 @@ describe('Toast.vue', () => { messages: [{ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 }] }); - const icon = wrapper.find('.p-toast-icon-close-icon'); + const icon = wrapper.find('.p-toast-close-icon'); expect(icon.classes()).toContain('pi-discord'); }); diff --git a/packages/primevue/src/toggleswitch/ToggleSwitch.spec.js b/packages/primevue/src/toggleswitch/ToggleSwitch.spec.js index f7a749398..046bf648d 100644 --- a/packages/primevue/src/toggleswitch/ToggleSwitch.spec.js +++ b/packages/primevue/src/toggleswitch/ToggleSwitch.spec.js @@ -13,8 +13,8 @@ describe('ToggleSwitch.vue', () => { expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]); await wrapper.setProps({ modelValue: true }); - + // expect(wrapper.vm.checked).toBe(true); - expect(wrapper.find('.p-toggleswitch').classes()).toContain('p-highlight'); + expect(wrapper.find('.p-toggleswitch').classes()).toContain('p-toggleswitch-checked'); }); }); From dbe55014d42a0591d59440fac2607d898dd0b2ee Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 15:59:22 +0200 Subject: [PATCH 04/28] - fix SpeedDial.spec.js, SplitButton.spec.js --- packages/primevue/src/speeddial/SpeedDial.spec.js | 4 ++-- packages/primevue/src/splitbutton/SplitButton.spec.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/primevue/src/speeddial/SpeedDial.spec.js b/packages/primevue/src/speeddial/SpeedDial.spec.js index f06f5d198..6714324cc 100644 --- a/packages/primevue/src/speeddial/SpeedDial.spec.js +++ b/packages/primevue/src/speeddial/SpeedDial.spec.js @@ -51,7 +51,7 @@ describe('SpeedDial.vue', () => { expect(wrapper.emitted()['click'][0]).toEqual([{}]); expect(wrapper.emitted()['show'][0]).toEqual([]); - expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-opened'); + expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-open'); expect(wrapper.findAll('li.p-speeddial-item')[0].attributes().style).toBe('transition-delay: 0ms;'); }); @@ -60,7 +60,7 @@ describe('SpeedDial.vue', () => { await wrapper.vm.onClick({}); - expect(wrapper.find('.p-speeddial').classes()).not.toContain('p-speeddial-opened'); + expect(wrapper.find('.p-speeddial').classes()).not.toContain('p-speeddial-open'); expect(wrapper.findAll('li.p-speeddial-item')[wrapper.findAll('li.p-speeddial-item').length - 1].attributes().style).toBe('transition-delay: 0ms;'); }); diff --git a/packages/primevue/src/splitbutton/SplitButton.spec.js b/packages/primevue/src/splitbutton/SplitButton.spec.js index aa567e09e..915bc66d1 100644 --- a/packages/primevue/src/splitbutton/SplitButton.spec.js +++ b/packages/primevue/src/splitbutton/SplitButton.spec.js @@ -43,8 +43,8 @@ describe('SplitButton.vue', () => { it('should exist', () => { expect(wrapper.find('.p-splitbutton.p-component').exists()).toBe(true); expect(wrapper.find('.p-tieredmenu.p-component').exists()).toBe(true); - expect(wrapper.findAll('li.p-menuitem').length).toBe(4); - expect(wrapper.find('.p-splitbutton-defaultbutton').exists()).toBe(true); + expect(wrapper.findAll('li.p-tieredmenu-item').length).toBe(4); + expect(wrapper.find('.p-splitbutton-button').exists()).toBe(true); expect(wrapper.find('.p-button-label').text()).toBe('Save'); }); From d7c44ce029e0144c41fa89554b17d5df6e2e5adb Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 16:05:49 +0200 Subject: [PATCH 05/28] - fix SelectButton.spec.js, Skeleton.spec.js --- packages/primevue/src/selectbutton/SelectButton.spec.js | 6 +++--- packages/primevue/src/skeleton/Skeleton.spec.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/primevue/src/selectbutton/SelectButton.spec.js b/packages/primevue/src/selectbutton/SelectButton.spec.js index 78aa66bb0..a3d7277f6 100644 --- a/packages/primevue/src/selectbutton/SelectButton.spec.js +++ b/packages/primevue/src/selectbutton/SelectButton.spec.js @@ -15,7 +15,7 @@ describe('SelectButton.vue', () => { it('should exist', () => { expect(wrapper.find('.p-selectbutton.p-component').exists()).toBe(true); - expect(wrapper.findAll('.p-button.p-component').length).toBe(2); + expect(wrapper.findAll('.p-togglebutton.p-component').length).toBe(2); }); it('should option select', async () => { @@ -25,7 +25,7 @@ describe('SelectButton.vue', () => { await wrapper.setProps({ modelValue: wrapper.vm.options[0] }); - expect(wrapper.findAll('.p-button.p-component')[0].classes()).toContain('p-highlight'); + expect(wrapper.findAll('.p-togglebutton.p-component')[0].classes()).toContain('p-togglebutton-checked'); }); }); @@ -50,6 +50,6 @@ describe('multiple select', () => { it('should select', async () => { await wrapper.setProps({ modelValue: wrapper.vm.options }); - expect(wrapper.findAll('.p-highlight').length).toBe(3); + expect(wrapper.findAll('.p-togglebutton-checked').length).toBe(3); }); }); diff --git a/packages/primevue/src/skeleton/Skeleton.spec.js b/packages/primevue/src/skeleton/Skeleton.spec.js index c9be419dd..28ac8bf87 100644 --- a/packages/primevue/src/skeleton/Skeleton.spec.js +++ b/packages/primevue/src/skeleton/Skeleton.spec.js @@ -33,6 +33,6 @@ describe('Skeleton.vue', () => { it('should remove animation', async () => { await wrapper.setProps({ animation: 'none' }); - expect(wrapper.find('.p-skeleton').classes()).toContain('p-skeleton-none'); + expect(wrapper.find('.p-skeleton').classes()).toContain('p-skeleton-animation-none'); }); }); From 74bf24060a39d2f67a5b2fe048d38ec301e7bea9 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 16:51:40 +0200 Subject: [PATCH 06/28] - fix Select.spec.js --- packages/primevue/src/select/Select.spec.js | 31 +++++++++++++-------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/primevue/src/select/Select.spec.js b/packages/primevue/src/select/Select.spec.js index 7640b4d1a..e5a7d3777 100644 --- a/packages/primevue/src/select/Select.spec.js +++ b/packages/primevue/src/select/Select.spec.js @@ -58,10 +58,10 @@ describe('option checks', () => { it('should show the options', () => { expect(wrapper.find('.p-select-label.p-placeholder').text()).toBe('Select a City'); - expect(wrapper.find('.p-select-items-wrapper > .p-select-items').exists()).toBe(true); - expect(wrapper.find('.p-select-item').exists()).toBe(true); - expect(wrapper.findAll('.p-select-item').length).toBe(5); - expect(wrapper.findAll('.p-select-item')[0].text()).toBe('New York'); + expect(wrapper.find('.p-select-items-wrapper > .p-select-list').exists()).toBe(true); + expect(wrapper.find('.p-select-option').exists()).toBe(true); + expect(wrapper.findAll('.p-select-option').length).toBe(5); + expect(wrapper.findAll('.p-select-option')[0].text()).toBe('New York'); }); }); @@ -79,7 +79,14 @@ describe('clear checks', () => { props: { clearIcon: 'pi pi-discord', modelValue: 'value', - showClear: true + showClear: true, + options: [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' } + ] } }); @@ -122,7 +129,7 @@ describe('editable checks', () => { it('should show the options', () => { expect(wrapper.find('.p-select-label.p-placeholder').exists()).toBe(false); - expect(wrapper.find('.p-select-label.p-inputtext').exists()).toBe(true); + expect(wrapper.find('.p-select-label[type="text"]').exists()).toBe(true); }); }); @@ -180,8 +187,8 @@ describe('option groups checks', () => { }); it('should show the option groups', () => { - expect(wrapper.findAll('.p-select-item-group').length).toBe(3); - expect(wrapper.findAll('.p-select-item-group')[0].text()).toBe('Germany'); + expect(wrapper.findAll('.p-select-option-group').length).toBe(3); + expect(wrapper.findAll('.p-select-option-group')[0].text()).toBe('Germany'); }); }); @@ -298,11 +305,11 @@ describe('loader checks', () => { }); it('should show the loader', async () => { - expect(wrapper.find('.p-select-trigger-icon').classes()).toContain('pi-discord'); + expect(wrapper.find('.p-select-loading-icon').classes()).toContain('pi-discord'); await wrapper.setProps({ loading: false }); - expect(wrapper.find('.p-select-trigger-icon').classes()).not.toContain('pi-discord'); + expect(wrapper.find('.p-select-loading-icon').exists()).toBe(false); }); }); @@ -341,7 +348,7 @@ describe('filter checks', () => { it('should make filtering', async () => { const filterInput = wrapper.find('.p-select-filter'); - const filterIcon = wrapper.find('.p-select-filter-icon'); + const filterIcon = wrapper.find('[data-pc-section="filtericon"]'); expect(filterInput.exists()).toBe(true); expect(filterIcon.classes()).toContain('pi-discord'); @@ -356,6 +363,6 @@ describe('filter checks', () => { await wrapper.setData({ filterValue: 'c' }); - expect(wrapper.findAll('.p-select-item').length).toBe(2); + expect(wrapper.findAll('.p-select-option').length).toBe(2); }); }); From d26a7b74e420ad192eaaf78336e3886f540ab8e2 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 17:00:16 +0200 Subject: [PATCH 07/28] - fix Select.spec.js, Rating.spec.js, RadioButton.spec.js, ProgressSpinner.spec.js --- .../src/progressspinner/ProgressSpinner.spec.js | 10 +++++----- packages/primevue/src/radiobutton/RadioButton.spec.js | 2 +- packages/primevue/src/rating/Rating.spec.js | 2 +- packages/primevue/src/select/Select.spec.js | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/primevue/src/progressspinner/ProgressSpinner.spec.js b/packages/primevue/src/progressspinner/ProgressSpinner.spec.js index e71c6608f..e7e31b264 100644 --- a/packages/primevue/src/progressspinner/ProgressSpinner.spec.js +++ b/packages/primevue/src/progressspinner/ProgressSpinner.spec.js @@ -15,10 +15,10 @@ describe('ProgressSpinner.vue', () => { }); it('should exist', () => { - expect(wrapper.find('.p-progress-spinner').exists()).toBe(true); - expect(wrapper.find('svg.p-progress-spinner-svg').exists()).toBe(true); - expect(wrapper.find('svg.p-progress-spinner-svg').attributes().style).toBe('animation-duration: .5s;'); - expect(wrapper.find('circle.p-progress-spinner-circle').attributes().fill).toBe('green'); - expect(wrapper.find('circle.p-progress-spinner-circle').attributes().strokeMiterlimit).toBe('10'); + expect(wrapper.find('.p-progressspinner').exists()).toBe(true); + expect(wrapper.find('svg.p-progressspinner-spin').exists()).toBe(true); + expect(wrapper.find('svg.p-progressspinner-spin').attributes().style).toBe('animation-duration: .5s;'); + expect(wrapper.find('circle.p-progressspinner-circle').attributes().fill).toBe('green'); + expect(wrapper.find('circle.p-progressspinner-circle').attributes().strokeMiterlimit).toBe('10'); }); }); diff --git a/packages/primevue/src/radiobutton/RadioButton.spec.js b/packages/primevue/src/radiobutton/RadioButton.spec.js index facec8515..e321b6656 100644 --- a/packages/primevue/src/radiobutton/RadioButton.spec.js +++ b/packages/primevue/src/radiobutton/RadioButton.spec.js @@ -43,7 +43,7 @@ describe('RadioButton.vue', () => { await wrapper.setProps({ modelValue: 'Tatooine' }); expect(wrapper.vm.checked).toBe(true); - expect(wrapper.find('.p-radiobutton').classes()).toContain('p-highlight'); + expect(wrapper.find('.p-radiobutton').classes()).toContain('p-radiobutton-checked'); }); it('When component focused onFocus method should be called', async () => { diff --git a/packages/primevue/src/rating/Rating.spec.js b/packages/primevue/src/rating/Rating.spec.js index fc0e45550..a6dca11ec 100644 --- a/packages/primevue/src/rating/Rating.spec.js +++ b/packages/primevue/src/rating/Rating.spec.js @@ -29,7 +29,7 @@ describe('Rating.vue', () => { }); it('When star is clicked, onOptionClick method should triggered', async () => { - await wrapper.find('.p-rating-item').trigger('click'); + await wrapper.find('.p-rating-option').trigger('click'); expect(wrapper.find('[data-p-focused="true"]').exists()).toBe(true); }); diff --git a/packages/primevue/src/select/Select.spec.js b/packages/primevue/src/select/Select.spec.js index e5a7d3777..6dd3d869e 100644 --- a/packages/primevue/src/select/Select.spec.js +++ b/packages/primevue/src/select/Select.spec.js @@ -21,7 +21,7 @@ describe('Select.vue', () => { it('should Select exist', () => { expect(wrapper.find('.p-select.p-component').exists()).toBe(true); - expect(wrapper.find('.p-select-panel').exists()).toBe(true); + expect(wrapper.find('.p-select-overlay').exists()).toBe(true); expect(wrapper.find('.p-select-empty-message').exists()).toBe(true); expect(wrapper.find('.p-inputwrapper-filled').exists()).toBe(false); expect(wrapper.find('.p-inputwrapper-focus').exists()).toBe(true); @@ -58,7 +58,7 @@ describe('option checks', () => { it('should show the options', () => { expect(wrapper.find('.p-select-label.p-placeholder').text()).toBe('Select a City'); - expect(wrapper.find('.p-select-items-wrapper > .p-select-list').exists()).toBe(true); + expect(wrapper.find('.p-select-list-container > .p-select-list').exists()).toBe(true); expect(wrapper.find('.p-select-option').exists()).toBe(true); expect(wrapper.findAll('.p-select-option').length).toBe(5); expect(wrapper.findAll('.p-select-option')[0].text()).toBe('New York'); @@ -78,7 +78,7 @@ describe('clear checks', () => { }, props: { clearIcon: 'pi pi-discord', - modelValue: 'value', + modelValue: { name: 'New York', code: 'NY' }, showClear: true, options: [ { name: 'New York', code: 'NY' }, From 9af790d90aa2430a652fe0ea71a6344fb6f12001 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 17:04:33 +0200 Subject: [PATCH 08/28] - fix Popover.spec.js --- packages/primevue/src/popover/Popover.spec.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/primevue/src/popover/Popover.spec.js b/packages/primevue/src/popover/Popover.spec.js index b57164cea..6ccce11be 100644 --- a/packages/primevue/src/popover/Popover.spec.js +++ b/packages/primevue/src/popover/Popover.spec.js @@ -13,9 +13,6 @@ describe('Popover.vue', () => { teleport: true } }, - props: { - showCloseIcon: true - }, slots: { default: 'PrimeVue' } @@ -28,6 +25,5 @@ describe('Popover.vue', () => { expect(wrapper.find('.p-popover.p-component').exists()).toBe(true); expect(wrapper.find('.p-popover-content').exists()).toBe(true); expect(wrapper.find('.p-popover-content').text()).toBe('PrimeVue'); - expect(wrapper.find('.p-popover-close').exists()).toBe(true); }); }); From 1812af1186363a13338bc99051fdfd84d3ee241b Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 18:37:42 +0200 Subject: [PATCH 09/28] - fix PickList.spec.js --- packages/primevue/src/picklist/PickList.spec.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/primevue/src/picklist/PickList.spec.js b/packages/primevue/src/picklist/PickList.spec.js index 3a319936e..053c88a6a 100644 --- a/packages/primevue/src/picklist/PickList.spec.js +++ b/packages/primevue/src/picklist/PickList.spec.js @@ -47,13 +47,13 @@ describe('PickList.vue', () => { it('should exist', () => { expect(wrapper.find('.p-picklist.p-component').exists()).toBe(true); - expect(wrapper.find('.p-picklist-list-wrapper.p-picklist-source-wrapper').exists()).toBe(true); - expect(wrapper.find('.p-picklist-list-wrapper.p-picklist-target-wrapper').exists()).toBe(true); + expect(wrapper.find('.p-picklist-list-container.p-picklist-source-list-container').exists()).toBe(true); + expect(wrapper.find('.p-picklist-list-container.p-picklist-target-list-container').exists()).toBe(true); }); it('should slots work', () => { - expect(wrapper.find('.p-picklist-source-wrapper > .p-picklist-header').text()).toBe('Available'); - expect(wrapper.find('.p-picklist-target-wrapper > .p-picklist-header').text()).toBe('Selected'); + expect(wrapper.find('.p-picklist-source-list-container .p-listbox-header').text()).toBe('Available'); + expect(wrapper.find('.p-picklist-target-list-container .p-listbox-header').text()).toBe('Selected'); }); it('should update sourceList and targetList', async () => { @@ -95,15 +95,20 @@ describe('PickList.vue', () => { }); it('should select an item from source list', async () => { - await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0][0], 0, 0); + const sourceListItem = wrapper.find('.p-picklist-source-list-container .p-listbox-option'); + expect(sourceListItem.classes()).not.toContain('p-listbox-option-selected'); + + await sourceListItem.trigger('click'); + + expect(sourceListItem.classes()).toContain('p-listbox-option-selected'); expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[wrapper.vm.modelValue[0][0]], []]); }); it('should dblclick an item from source list', async () => { await wrapper.setProps({ selection: [[wrapper.vm.modelValue[0][0]], []] }); - await wrapper.vm.onItemDblClick({}, wrapper.vm.modelValue[0][0], 0); + wrapper.vm.onItemDblClick({}, 0); expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual([wrapper.vm.modelValue[0][0]]); expect(wrapper.emitted()['move-to-target'][0]).toEqual([{ originalEvent: {}, items: [wrapper.vm.modelValue[0][0]] }]); From d7bd83b70a1bc549c109bbfbc35c577656413493 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 18:53:38 +0200 Subject: [PATCH 10/28] - fix Password.spec.js --- packages/primevue/src/password/Password.spec.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/primevue/src/password/Password.spec.js b/packages/primevue/src/password/Password.spec.js index adaaee56a..5d2d942f1 100644 --- a/packages/primevue/src/password/Password.spec.js +++ b/packages/primevue/src/password/Password.spec.js @@ -22,7 +22,7 @@ describe('Password.vue', () => { it('should exist', () => { expect(wrapper.find('.p-password.p-component').exists()).toBe(true); - expect(wrapper.find('.p-password-panel').exists()).toBe(true); + expect(wrapper.find('.p-password-overlay').exists()).toBe(true); }); it('should update modelValue', async () => { @@ -32,23 +32,24 @@ describe('Password.vue', () => { }); it('should meter update', async () => { - expect(wrapper.find('.p-password-info').text()).toBe('Enter a password'); + expect(wrapper.find('.p-password-content [data-pc-section="info"]').text()).toBe('Enter a password'); await wrapper.vm.onKeyUp(event); - expect(wrapper.find('.p-password-info').text()).toBe('Weak'); + expect(wrapper.find('.p-password-content [data-pc-section="info"]').text()).toBe('Weak'); - expect(wrapper.find('.p-password-strength').classes()).toContain('weak'); + expect(wrapper.find('.p-password-meter-label').classes()).toContain('p-password-meter-weak'); }); it('should toggle mask', async () => { - await wrapper.setProps({ toggleMask: true, showIcon: 'pi pi-eye', hideIcon: 'pi pi-eye-slash' }); + await wrapper.setProps({ toggleMask: true }); - expect(wrapper.find('.pi.pi-eye').exists()).toBe(true); + expect(wrapper.find('.p-password-toggle-mask-icon.p-password-unmask-icon').exists()).toBe(true); + expect(wrapper.find('.p-password-toggle-mask-icon.p-password-mask-icon').exists()).toBe(false); await wrapper.vm.onMaskToggle(); - expect(wrapper.find('.pi.pi-eye').exists()).toBe(false); - expect(wrapper.find('.pi.pi-eye-slash').exists()).toBe(true); + expect(wrapper.find('.p-password-toggle-mask-icon.p-password-unmask-icon').exists()).toBe(false); + expect(wrapper.find('.p-password-toggle-mask-icon.p-password-mask-icon').exists()).toBe(true); }); }); From 305752ef3caf017e54ef4adb6f27e736abbbd348 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 19:04:29 +0200 Subject: [PATCH 11/28] - fix Paginator.spec.js, PanelMenu.spec.js --- packages/primevue/src/paginator/Paginator.spec.js | 12 ++++++------ packages/primevue/src/panelmenu/PanelMenu.spec.js | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/primevue/src/paginator/Paginator.spec.js b/packages/primevue/src/paginator/Paginator.spec.js index fd8e2c80a..5b077cef5 100644 --- a/packages/primevue/src/paginator/Paginator.spec.js +++ b/packages/primevue/src/paginator/Paginator.spec.js @@ -20,9 +20,9 @@ describe('Paginator.vue', () => { it('should exist', () => { expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true); - expect(wrapper.findAll('.p-paginator-page.p-paginator-element').length).toBe(5); - expect(wrapper.find('.p-dropdown.p-component').exists()).toBe(true); - expect(wrapper.find('.p-dropdown-label').text()).toBe('10'); + expect(wrapper.findAll('.p-paginator-page').length).toBe(5); + expect(wrapper.find('.p-select.p-component').exists()).toBe(true); + expect(wrapper.find('.p-select-label').text()).toBe('10'); expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled'); expect(wrapper.find('.p-paginator-prev').classes()).toContain('p-disabled'); expect(wrapper.vm.pageCount).toBe(12); @@ -31,8 +31,8 @@ describe('Paginator.vue', () => { it('show jump to the end', async () => { await wrapper.vm.changePageToLast({ preventDefault: () => {} }); - expect(wrapper.findAll('.p-paginator-page.p-paginator-element')[4].classes()).toContain('p-highlight'); - expect(wrapper.findAll('.p-paginator-page.p-paginator-element')[4].text()).toBe('12'); + expect(wrapper.findAll('.p-paginator-page')[4].classes()).toContain('p-paginator-page-selected'); + expect(wrapper.findAll('.p-paginator-page')[4].text()).toBe('12'); expect(wrapper.find('.p-paginator-next').classes()).toContain('p-disabled'); expect(wrapper.find('.p-paginator-last').classes()).toContain('p-disabled'); }); @@ -46,6 +46,6 @@ describe('Paginator.vue', () => { await wrapper.setProps({ rows: 20 }); - expect(wrapper.find('.p-dropdown-label').text()).toBe('20'); + expect(wrapper.find('.p-select-label').text()).toBe('20'); }); }); diff --git a/packages/primevue/src/panelmenu/PanelMenu.spec.js b/packages/primevue/src/panelmenu/PanelMenu.spec.js index 542b1e1fa..58c47e695 100644 --- a/packages/primevue/src/panelmenu/PanelMenu.spec.js +++ b/packages/primevue/src/panelmenu/PanelMenu.spec.js @@ -61,9 +61,9 @@ describe('PanelMenu', () => { it('should exist', () => { expect(wrapper.find('.p-panelmenu.p-component').exists()).toBe(true); - expect(wrapper.findAll('.p-menuitem').length).toBe(6); - expect(wrapper.findAll('.p-toggleable-content').length).toBe(7); - expect(wrapper.findAll('.p-submenu-list').length).toBe(3); + expect(wrapper.findAll('.p-panelmenu-item').length).toBe(6); + expect(wrapper.findAll('.p-panelmenu-item-content').length).toBe(6); + expect(wrapper.findAll('.p-panelmenu-submenu').length).toBe(3); }); it('should update expandedKeys', async () => { From 30afab81784d6fdd64acb4c3fc19f2218e9f35a4 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 19:14:29 +0200 Subject: [PATCH 12/28] - fix OrderList.spec.js, OrganizationChart.spec.js --- packages/primevue/src/orderlist/OrderList.spec.js | 14 +++++++------- .../organizationchart/OrganizationChart.spec.js | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/primevue/src/orderlist/OrderList.spec.js b/packages/primevue/src/orderlist/OrderList.spec.js index 46f57f0c5..4ec863b0c 100644 --- a/packages/primevue/src/orderlist/OrderList.spec.js +++ b/packages/primevue/src/orderlist/OrderList.spec.js @@ -113,21 +113,21 @@ describe('OrderList.vue', () => { it('should exist', () => { expect(wrapper.find('.p-orderlist.p-component').exists()).toBe(true); expect(wrapper.find('.p-orderlist-controls').exists()).toBe(true); - expect(wrapper.findAll('li.p-orderlist-item').length).toBe(6); + expect(wrapper.findAll('li.p-listbox-option').length).toBe(6); }); it('should select item', async () => { - await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0], 0); + const listBoxOption = wrapper.find('li.p-listbox-option'); - expect(wrapper.emitted()['update:selection'][0]).toEqual([[wrapper.vm.modelValue[0]]]); + expect(listBoxOption.classes()).not.toContain('p-listbox-option-selected'); - await wrapper.setProps({ selection: [wrapper.vm.modelValue[0]] }); + await listBoxOption.trigger('click'); - expect(wrapper.findAll('li.p-orderlist-item')[0].classes()).toContain('p-highlight'); + expect(wrapper.findAll('li.p-listbox-option')[0].classes()).toContain('p-listbox-option-selected'); }); it('should slot works', () => { - expect(wrapper.find('.p-orderlist-header').text()).toBe('List of Products'); + expect(wrapper.find('.p-listbox-header').text()).toBe('List of Products'); expect(wrapper.findAll('.product-item').length).toBe(6); }); @@ -135,7 +135,7 @@ describe('OrderList.vue', () => { await wrapper.setProps({ selection: [wrapper.vm.modelValue[2]] }); await wrapper.setData({ d_selection: [wrapper.vm.modelValue[2]] }); - expect(wrapper.findAll('li.p-orderlist-item')[2].classes()).toContain('p-highlight'); + expect(wrapper.findAll('li.p-listbox-option')[2].classes()).toContain('p-listbox-option-selected'); await wrapper.vm.moveUp({}); diff --git a/packages/primevue/src/organizationchart/OrganizationChart.spec.js b/packages/primevue/src/organizationchart/OrganizationChart.spec.js index 077b25edc..0ecaaa7bb 100644 --- a/packages/primevue/src/organizationchart/OrganizationChart.spec.js +++ b/packages/primevue/src/organizationchart/OrganizationChart.spec.js @@ -123,7 +123,7 @@ describe('OrganizationChart.vue', () => { it('should exist', () => { expect(wrapper.find('.p-organizationchart.p-component').exists()).toBe(true); expect(wrapper.find('table.p-organizationchart-table').exists()).toBe(true); - expect(wrapper.findAll('.p-node-toggler-icon').length).toBe(5); + expect(wrapper.findAll('.p-organizationchart-node-toggle-button').length).toBe(5); }); it('should collapsed and expand', async () => { @@ -141,7 +141,7 @@ describe('OrganizationChart.vue', () => { }); it('should item select and unselect', async () => { - const contents = wrapper.findAll('.p-organizationchart-node-content'); + const contents = wrapper.findAll('.p-organizationchart-node.p-organizationchart-node-selectable'); await wrapper.vm.onNodeClick(wrapper.vm.value); @@ -150,7 +150,7 @@ describe('OrganizationChart.vue', () => { await wrapper.setProps({ selectionKeys: { 0: true } }); - expect(contents[0].classes()).toContain('p-highlight'); + expect(contents[0].classes()).toContain('p-organizationchart-node-selected'); await wrapper.vm.onNodeClick(wrapper.vm.value); From 943e8c49623d7f56b8b6ca7c95c08a91b85a5696 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 19:38:45 +0200 Subject: [PATCH 13/28] - fix MultiSelect.spec.js --- .../src/multiselect/MultiSelect.spec.js | 46 ++++++------------- 1 file changed, 14 insertions(+), 32 deletions(-) diff --git a/packages/primevue/src/multiselect/MultiSelect.spec.js b/packages/primevue/src/multiselect/MultiSelect.spec.js index 185a046fe..2c0d004cf 100644 --- a/packages/primevue/src/multiselect/MultiSelect.spec.js +++ b/packages/primevue/src/multiselect/MultiSelect.spec.js @@ -36,9 +36,9 @@ describe('MultiSelect.vue', () => { await wrapper.vm.onContainerClick(); - expect(wrapper.findAll('li.p-multiselect-item').length).toBe(5); - expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['aria-label']).toBe('New York'); - expect(wrapper.findAll('li.p-multiselect-item')[0].text()).toBe('New York'); + expect(wrapper.findAll('li.p-multiselect-option').length).toBe(5); + expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['aria-label']).toBe('New York'); + expect(wrapper.findAll('li.p-multiselect-option')[0].text()).toBe('New York'); }); it('should select an item', async () => { @@ -49,7 +49,7 @@ describe('MultiSelect.vue', () => { await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] }); await wrapper.vm.onContainerClick(); - expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true'); + expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['data-p-selected']).toBe('true'); expect(wrapper.find('.p-multiselect-label').text()).toBe('New York'); }); @@ -63,14 +63,8 @@ describe('MultiSelect.vue', () => { await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] }); await wrapper.vm.onContainerClick(); - expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true'); - expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-selected']).toBe('true'); - }); - - it('should close panel', async () => { - await wrapper.vm.onCloseClick(); - - expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false); + expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['data-p-selected']).toBe('true'); + expect(wrapper.findAll('li.p-multiselect-option')[1].attributes()['data-p-selected']).toBe('true'); }); it('should chip work', async () => { @@ -79,8 +73,8 @@ describe('MultiSelect.vue', () => { modelValue: [wrapper.vm.options[0]] }); - expect(wrapper.find('.p-multiselect-token').exists()).toBe(true); - expect(wrapper.find('.p-multiselect-token-label').text()).toBe('New York'); + expect(wrapper.find('.p-chip.p-multiselect-chip').exists()).toBe(true); + expect(wrapper.find('.p-chip.p-multiselect-chip > .p-chip-label').text()).toBe('New York'); }); describe('custom icons', () => { @@ -91,7 +85,7 @@ describe('MultiSelect.vue', () => { removeTokenIcon: 'pi pi-discord' }); - const icon = wrapper.find('.p-multiselect-token-icon'); + const icon = wrapper.find('.p-chip-remove-icon'); expect(icon.classes()).toContain('pi-discord'); }); @@ -101,7 +95,7 @@ describe('MultiSelect.vue', () => { dropdownIcon: 'pi pi-discord' }); - const icon = wrapper.find('.p-multiselect-trigger-icon'); + const icon = wrapper.find('.p-multiselect-dropdown [data-pc-section="dropdownicon"]'); expect(icon.classes()).toContain('pi-discord'); }); @@ -114,19 +108,7 @@ describe('MultiSelect.vue', () => { await wrapper.vm.onContainerClick(); - const icon = wrapper.find('.p-multiselect-filter-icon'); - - expect(icon.classes()).toContain('pi-discord'); - }); - - it('should have custom close icon', async () => { - await wrapper.setProps({ - closeIcon: 'pi pi-discord' - }); - - await wrapper.vm.onContainerClick(); - - const icon = wrapper.find('.p-multiselect-close-icon'); + const icon = wrapper.find('.p-multiselect-filter-container [data-pc-section="filtericon"]'); expect(icon.classes()).toContain('pi-discord'); }); @@ -191,7 +173,7 @@ describe('MultiSelect.vue', () => { }); await wrapper.vm.onContainerClick(); - expect(wrapper.find('.p-multiselect-item-group').exists()).toBe(true); + expect(wrapper.find('.p-multiselect-option-group').exists()).toBe(true); }); it('should show emit the filter event when filter text is entered', async () => { @@ -227,8 +209,8 @@ describe('MultiSelect.vue', () => { input.value = 'Ber'; await wrapper.vm.onFilterChange({ target: input }); - expect(wrapper.findAll('.p-multiselect-item-group').length).toBe(1); - expect(wrapper.find('.p-multiselect-item-group').text()).toBe('Germany'); + expect(wrapper.findAll('.p-multiselect-list').length).toBe(1); + expect(wrapper.find('.p-multiselect-option-group').text()).toBe('Germany'); }); }); }); From 09aee632b3703611abfb66a582a612ff8aa9c80d Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 20:29:19 +0200 Subject: [PATCH 14/28] - fix Menu.spec.js, Menubar.spec.js, Message.spec.js --- packages/primevue/src/menu/Menu.spec.js | 10 +++++----- packages/primevue/src/menubar/Menubar.spec.js | 8 ++++---- packages/primevue/src/message/Message.spec.js | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/primevue/src/menu/Menu.spec.js b/packages/primevue/src/menu/Menu.spec.js index 653d9d82a..eef41f3b2 100644 --- a/packages/primevue/src/menu/Menu.spec.js +++ b/packages/primevue/src/menu/Menu.spec.js @@ -57,11 +57,11 @@ describe('Menu.vue', () => { it('should exist', () => { expect(wrapper.find('.p-menu.p-component').exists()).toBe(true); - expect(wrapper.findAll('.p-submenu-header').length).toBe(2); - expect(wrapper.findAll('.p-submenu-header')[0].text()).toBe('Options'); - expect(wrapper.findAll('.p-menuitem').length).toBe(4); - expect(wrapper.findAll('.p-menuitem')[0].find('span.p-menuitem-text').text()).toBe('Update'); - expect(wrapper.findAll('.p-menuitem')[2].find('a').attributes().href).toBe('https://vuejs.org/'); + expect(wrapper.findAll('.p-menu-submenu-label').length).toBe(2); + expect(wrapper.findAll('.p-menu-submenu-label')[0].text()).toBe('Options'); + expect(wrapper.findAll('.p-menu-item').length).toBe(4); + expect(wrapper.findAll('.p-menu-item')[0].find('span.p-menu-item-label').text()).toBe('Update'); + expect(wrapper.findAll('.p-menu-item')[2].find('a').attributes().href).toBe('https://vuejs.org/'); }); it('should popup work', async () => { diff --git a/packages/primevue/src/menubar/Menubar.spec.js b/packages/primevue/src/menubar/Menubar.spec.js index 9c3e39c65..066abe9ba 100644 --- a/packages/primevue/src/menubar/Menubar.spec.js +++ b/packages/primevue/src/menubar/Menubar.spec.js @@ -60,10 +60,10 @@ describe('Menubar.vue', () => { it('should exist', () => { expect(wrapper.find('.p-menubar.p-component').exists()).toBe(true); expect(wrapper.find('.p-menubar-root-list').exists()).toBe(true); - expect(wrapper.findAll('ul.p-submenu-list').length).toBe(2); - expect(wrapper.findAll('ul.p-submenu-list')[0].findAll('li.p-menuitem')[0].find('.p-menuitem-text').text()).toBe('New'); - expect(wrapper.findAll('li.p-menuitem').length).toBe(7); - expect(wrapper.findAll('li.p-menuitem-separator').length).toBe(1); + expect(wrapper.findAll('ul.p-menubar-submenu').length).toBe(2); + expect(wrapper.findAll('ul.p-menubar-submenu')[0].findAll('li.p-menubar-item')[0].find('.p-menubar-item-label').text()).toBe('New'); + expect(wrapper.findAll('li.p-menubar-item').length).toBe(7); + expect(wrapper.findAll('li.p-menubar-separator').length).toBe(1); }); it('should slot visible', () => { diff --git a/packages/primevue/src/message/Message.spec.js b/packages/primevue/src/message/Message.spec.js index 523fbd47b..6b82c616b 100644 --- a/packages/primevue/src/message/Message.spec.js +++ b/packages/primevue/src/message/Message.spec.js @@ -29,7 +29,7 @@ describe('Message.vue', () => { }); it('should have custom close icon if provided', async () => { - await wrapper.setProps({ closeIcon: 'pi pi-discord' }); + await wrapper.setProps({ closeIcon: 'pi pi-discord', closable: true }); const icon = wrapper.find('.p-message-close-icon'); expect(icon.classes()).toContain('pi-discord'); From 7c308fe41bc63f6f0b0f379f50e02e0ec358bb0e Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 20:55:57 +0200 Subject: [PATCH 15/28] - fix InputNumber.spec.js, InputSwitch.spec.js, Listbox.spec.js, MegaMenu.spec.js --- .../src/inputnumber/InputNumber.spec.js | 4 ++-- .../src/inputswitch/InputSwitch.spec.js | 6 +++--- packages/primevue/src/listbox/Listbox.spec.js | 8 ++++---- .../primevue/src/megamenu/MegaMenu.spec.js | 20 +++++++++---------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/primevue/src/inputnumber/InputNumber.spec.js b/packages/primevue/src/inputnumber/InputNumber.spec.js index 080dab187..ba10151f4 100644 --- a/packages/primevue/src/inputnumber/InputNumber.spec.js +++ b/packages/primevue/src/inputnumber/InputNumber.spec.js @@ -44,7 +44,7 @@ describe('InputNumber.vue', () => { it('is keypress called when pressed a number', async () => { wrapper.find('input.p-inputnumber-input').element.setSelectionRange(2, 2); - await wrapper.vm.onInputKeyPress({ which: 49, preventDefault: () => {} }); + await wrapper.vm.onInputKeyPress({ key: '1', preventDefault: () => {} }); expect(wrapper.emitted().input[0][0].value).toBe(11); }); @@ -52,7 +52,7 @@ describe('InputNumber.vue', () => { it('is keypress called when pressed minus', async () => { wrapper.find('input.p-inputnumber-input').element.setSelectionRange(0, 0); - await wrapper.vm.onInputKeyPress({ keyCode: 45, preventDefault: () => {} }); + await wrapper.vm.onInputKeyPress({ key: '-', preventDefault: () => {} }); expect(wrapper.emitted().input[0][0].value).toBe(-1); }); diff --git a/packages/primevue/src/inputswitch/InputSwitch.spec.js b/packages/primevue/src/inputswitch/InputSwitch.spec.js index df8f16fc5..e5f15f4c9 100644 --- a/packages/primevue/src/inputswitch/InputSwitch.spec.js +++ b/packages/primevue/src/inputswitch/InputSwitch.spec.js @@ -5,8 +5,8 @@ describe('InputSwitch.vue', () => { it('should exist', async () => { const wrapper = mount(InputSwitch); - expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true); - expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true); + expect(wrapper.find('.p-toggleswitch.p-component').exists()).toBe(true); + expect(wrapper.find('.p-toggleswitch-slider').exists()).toBe(true); await wrapper.vm.onChange({}); @@ -15,6 +15,6 @@ describe('InputSwitch.vue', () => { await wrapper.setProps({ modelValue: true }); expect(wrapper.vm.checked).toBe(true); - expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight'); + expect(wrapper.find('.p-toggleswitch').classes()).toContain('p-toggleswitch-checked'); }); }); diff --git a/packages/primevue/src/listbox/Listbox.spec.js b/packages/primevue/src/listbox/Listbox.spec.js index 9c1b69c6c..23084674c 100644 --- a/packages/primevue/src/listbox/Listbox.spec.js +++ b/packages/primevue/src/listbox/Listbox.spec.js @@ -22,8 +22,8 @@ describe('Listbox.vue', () => { it('should exist', () => { expect(wrapper.find('.p-listbox.p-component').exists()).toBe(true); - expect(wrapper.findAll('li.p-listbox-item').length).toBe(5); - expect(wrapper.findAll('li.p-listbox-item')[0].attributes()['aria-label']).toBe('New York'); + expect(wrapper.findAll('li.p-listbox-option').length).toBe(5); + expect(wrapper.findAll('li.p-listbox-option')[0].attributes()['aria-label']).toBe('New York'); }); it('should select a list item', async () => { @@ -33,7 +33,7 @@ describe('Listbox.vue', () => { await wrapper.setProps({ modelValue: wrapper.vm.options[0] }); - expect(wrapper.findAll('li.p-listbox-item')[0].classes()).toContain('p-highlight'); + expect(wrapper.findAll('li.p-listbox-option')[0].classes()).toContain('p-listbox-option-selected'); }); describe('filter', () => { @@ -43,7 +43,7 @@ describe('Listbox.vue', () => { filterIcon: 'pi pi-discord' }); - const icon = wrapper.find('.p-listbox-filter-icon'); + const icon = wrapper.find('.p-inputicon [data-pc-section="filtericon"]'); expect(icon.classes()).toContain('pi-discord'); }); diff --git a/packages/primevue/src/megamenu/MegaMenu.spec.js b/packages/primevue/src/megamenu/MegaMenu.spec.js index d0517587e..4c5d6dd7f 100644 --- a/packages/primevue/src/megamenu/MegaMenu.spec.js +++ b/packages/primevue/src/megamenu/MegaMenu.spec.js @@ -60,28 +60,28 @@ describe('MegaMenu.vue', () => { expect(wrapper.find('.p-megamenu.p-component').exists()).toBe(true); expect(wrapper.find('.p-megamenu-root-list').exists()).toBe(true); expect(wrapper.findAll('ul.p-megamenu-submenu').length).toBe(5); - expect(wrapper.findAll('li.p-menuitem').length).toBe(12); - expect(wrapper.findAll('li.p-menuitem')[0].findAll('span.p-menuitem-text')[0].text()).toBe('Videos'); - expect(wrapper.findAll('li.p-megamenu-submenu-header')[0].text()).toBe('Video 1'); - expect(wrapper.findAll('li.p-menuitem')[1].findAll('span.p-menuitem-text')[0].text()).toBe('Video 1.1'); + expect(wrapper.findAll('li.p-megamenu-item').length).toBe(12); + expect(wrapper.findAll('li.p-megamenu-item')[0].findAll('span.p-megamenu-item-label')[0].text()).toBe('Videos'); + expect(wrapper.findAll('li.p-megamenu-submenu-label')[0].text()).toBe('Video 1'); + expect(wrapper.findAll('li.p-megamenu-item')[1].findAll('span.p-megamenu-item-label')[0].text()).toBe('Video 1.1'); }); it('should select item', async () => { - const firstItem = wrapper.findAll('li.p-menuitem')[0]; + const firstItem = wrapper.findAll('li.p-megamenu-item')[0]; - await firstItem.find('.p-menuitem-content').trigger('click'); + await firstItem.find('.p-megamenu-item-content').trigger('click'); - expect(firstItem.classes()).toContain('p-menuitem-active'); + expect(firstItem.classes()).toContain('p-megamenu-item-active'); }); it('should deselect item', async () => { - const firstItem = wrapper.findAll('li.p-menuitem')[0]; - const firstItemContent = firstItem.find('.p-menuitem-content'); + const firstItem = wrapper.findAll('li.p-megamenu-item')[0]; + const firstItemContent = firstItem.find('.p-megamenu-item-content'); await firstItemContent.trigger('click'); await firstItemContent.trigger('click'); - expect(firstItem.classes()).not.toContain('p-menuitem-active'); + expect(firstItem.classes()).not.toContain('p-megamenu-item-active'); }); it('should orientation work', async () => { From cdcee4ca8af23c58877b795e10a01491e0b1b7b5 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 21:20:37 +0200 Subject: [PATCH 16/28] - fix Image.spec.js, Inplace.spec.js, InputChips.spec.js --- packages/primevue/src/image/Image.spec.js | 6 +-- packages/primevue/src/inplace/Inplace.spec.js | 52 ------------------- .../src/inputchips/InputChips.spec.js | 14 ++--- 3 files changed, 10 insertions(+), 62 deletions(-) diff --git a/packages/primevue/src/image/Image.spec.js b/packages/primevue/src/image/Image.spec.js index 59c160562..a854f8ab2 100644 --- a/packages/primevue/src/image/Image.spec.js +++ b/packages/primevue/src/image/Image.spec.js @@ -34,9 +34,9 @@ describe('Image.vue', () => { } }); - expect(wrapper.find('.p-image-preview-container').exists()).toBe(true); - expect(wrapper.find('.p-image-preview-indicator').exists()).toBe(true); - expect(wrapper.find('.p-image-mask').exists()).toBe(false); + expect(wrapper.find('.p-image-preview').exists()).toBe(true); + expect(wrapper.find('.p-image-toolbar').exists()).toBe(false); + expect(wrapper.find('.p-image-preview-mask').exists()).toBe(true); await wrapper.setData({ maskVisible: true }); diff --git a/packages/primevue/src/inplace/Inplace.spec.js b/packages/primevue/src/inplace/Inplace.spec.js index a4adb3809..c06cdffcf 100644 --- a/packages/primevue/src/inplace/Inplace.spec.js +++ b/packages/primevue/src/inplace/Inplace.spec.js @@ -35,56 +35,4 @@ describe('Inplace.vue', () => { expect(wrapper.emitted()['update:active'][1]).toEqual([false]); }); - - it('closable inplace', async () => { - const wrapper = mount(Inplace, { - global: { - components: { - InputText - } - }, - props: { - closable: true - }, - slots: { - display: `{{'Click to Edit'}}`, - content: `` - } - }); - - expect(wrapper.find('.p-inplace-closable').exists()).toBe(true); - expect(wrapper.find('.p-inplace-display').text()).toBe('Click to Edit'); - - await wrapper.vm.open({}); - - expect(wrapper.find('.p-inputtext').exists()).toBe(true); - expect(wrapper.find('.p-inplace-content').exists()).toBe(true); - - await wrapper.vm.close({}); - - expect(wrapper.find('.p-inplace-display').exists()).toBe(true); - expect(wrapper.find('.p-inplace-content').exists()).toBe(false); - }); - - it('should have custom close icon', async () => { - const wrapper = mount(Inplace, { - global: { - components: { - InputText - } - }, - props: { - closable: true, - closeIcon: 'pi pi-discord' - }, - slots: { - display: `{{'Click to Edit'}}`, - content: `` - } - }); - - await wrapper.vm.open({}); - - expect(wrapper.find('.pi.pi-discord').exists()).toBe(true); - }); }); diff --git a/packages/primevue/src/inputchips/InputChips.spec.js b/packages/primevue/src/inputchips/InputChips.spec.js index 8d1a9483e..9000d6c3a 100644 --- a/packages/primevue/src/inputchips/InputChips.spec.js +++ b/packages/primevue/src/inputchips/InputChips.spec.js @@ -14,8 +14,8 @@ describe('InputChips.vue', () => { it('should exist', () => { expect(wrapper.find('.p-inputchips.p-component.p-inputwrapper').exists()).toBe(true); - expect(wrapper.find('ul.p-inputchips-multiple-container').exists()).toBe(true); - expect(wrapper.find('li.p-inputchips-input-token').exists()).toBe(true); + expect(wrapper.find('ul.p-inputwrapper-filled').exists()).toBe(false); + expect(wrapper.find('li.p-inputchips-input-item').exists()).toBe(true); }); it('should add item', async () => { @@ -26,18 +26,18 @@ describe('InputChips.vue', () => { await wrapper.setProps({ modelValue: ['PrimeVue'] }); expect(addItem).toHaveBeenCalled(); - expect(wrapper.findAll('.p-inputchips-token').length).toBe(1); - expect(wrapper.find('.p-inputchips-token-label').exists()).toBe(true); - expect(wrapper.find('.p-inputchips-token-label').text()).toBe('PrimeVue'); + expect(wrapper.findAll('.p-chip').length).toBe(1); + expect(wrapper.find('.p-chip-label').exists()).toBe(true); + expect(wrapper.find('.p-chip-label').text()).toBe('PrimeVue'); }); it('should have correct custom chip removal icon', async () => { await wrapper.setProps({ modelValue: ['foo', 'bar'], - removeTokenIcon: 'pi pi-discord' + chipIcon: 'pi pi-discord' }); - const icon = wrapper.find('.p-inputchips-token-icon'); + const icon = wrapper.find('[data-pc-section="removeicon"]'); expect(icon.classes()).toContain('pi-discord'); }); From f5efd2b0f7d6e6fb8a98e77c45d0072651ecb907 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 21:44:22 +0200 Subject: [PATCH 17/28] - fix Fieldset.spec.js, Galleria.spec.js --- packages/primevue/src/fieldset/Fieldset.spec.js | 3 ++- packages/primevue/src/galleria/Galleria.spec.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/primevue/src/fieldset/Fieldset.spec.js b/packages/primevue/src/fieldset/Fieldset.spec.js index a1612f7eb..14c3112b6 100644 --- a/packages/primevue/src/fieldset/Fieldset.spec.js +++ b/packages/primevue/src/fieldset/Fieldset.spec.js @@ -20,7 +20,8 @@ describe('Fieldset.vue', () => { it('should exist', () => { expect(wrapper.find('.p-fieldset.p-component').exists()).toBe(true); expect(wrapper.find('.p-fieldset-legend').exists()).toBe(true); - expect(wrapper.find('.p-toggleable-content').exists()).toBe(true); + expect(wrapper.find('.p-fieldset-toggle-button').exists()).toBe(true); + expect(wrapper.find('.p-fieldset-content-container').exists()).toBe(true); }); it('toggleable check', async () => { diff --git a/packages/primevue/src/galleria/Galleria.spec.js b/packages/primevue/src/galleria/Galleria.spec.js index b9d3dffd0..3508ec0d2 100644 --- a/packages/primevue/src/galleria/Galleria.spec.js +++ b/packages/primevue/src/galleria/Galleria.spec.js @@ -48,17 +48,17 @@ describe('Gallleria.vue', () => { it('should exist', () => { expect(wrapper.find('.p-galleria.p-component').exists()).toBe(true); - expect(wrapper.findAll('.p-galleria-item-container > .p-galleria-item').length).toBe(1); + expect(wrapper.findAll('.p-galleria-items > .p-galleria-item').length).toBe(1); expect(wrapper.findAll('.p-galleria-thumbnail-item-active').length).toBe(2); }); it('should active item change', async () => { - expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 1'); + expect(wrapper.find('.p-galleria-items-container img').attributes().alt).toBe('Description for Image 1'); wrapper.vm.onActiveItemChange(1); await wrapper.setProps({ activeIndex: 1 }); - expect(wrapper.find('.p-galleria-item-container img').attributes().alt).toBe('Description for Image 2'); + expect(wrapper.find('.p-galleria-items-container img').attributes().alt).toBe('Description for Image 2'); expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([1]); }); }); From d8d2231782ca30ec4e4a5175a69e202226fe8441 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 21:50:53 +0200 Subject: [PATCH 18/28] - fix Dialog.spec.js --- packages/primevue/src/dialog/Dialog.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/primevue/src/dialog/Dialog.spec.js b/packages/primevue/src/dialog/Dialog.spec.js index 4e87281f4..2f4a5c8b0 100644 --- a/packages/primevue/src/dialog/Dialog.spec.js +++ b/packages/primevue/src/dialog/Dialog.spec.js @@ -79,7 +79,7 @@ describe('closable', () => { await wrapper.setProps({ visible: true }); - const icon = wrapper.find('.p-dialog-header-close-icon'); + const icon = wrapper.find('.p-dialog-close-button .p-button-icon'); expect(icon.classes()).toContain('pi-discord'); }); @@ -111,7 +111,7 @@ describe('maximizable', () => { await wrapper.setProps({ visible: true }); await wrapper.setData({ maximized: false }); - const icon = wrapper.find('.p-dialog-header-maximize-icon'); + const icon = wrapper.find('.p-dialog-maximize-button .p-button-icon'); expect(icon.classes()).toContain('pi-discord'); From 6c6e627545cdae766681cea30078fd5a3f6997ba Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 22:01:37 +0200 Subject: [PATCH 19/28] - fix DatePicker.spec.js --- packages/primevue/src/datepicker/DatePicker.spec.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/primevue/src/datepicker/DatePicker.spec.js b/packages/primevue/src/datepicker/DatePicker.spec.js index 2ecd2988f..901546fdd 100644 --- a/packages/primevue/src/datepicker/DatePicker.spec.js +++ b/packages/primevue/src/datepicker/DatePicker.spec.js @@ -14,23 +14,24 @@ describe('DatePicker.vue', () => { } }, props: { - modelValue: new Date() + modelValue: '' } }); }); it('should exist', async () => { expect(wrapper.find('.p-datepicker.p-component').exists()).toBe(true); - expect(wrapper.find('.p-inputtext').exists()).toBe(true); + expect(wrapper.find('.p-datepicker-input').exists()).toBe(true); - let input = wrapper.find('.p-inputtext'); + let input = wrapper.find('.p-datepicker-input'); await input.trigger('focus'); expect(wrapper.find('.p-datepicker.p-component').exists()).toBe(true); expect(wrapper.find('.p-datepicker-today').exists()).toBe(true); - expect(wrapper.find('.p-highlight').exists()).toBe(true); - expect(wrapper.find('.p-highlight').text()).toEqual(new Date().getDate().toString()); + expect(wrapper.find('.p-datepicker-prev-button').exists()).toBe(true); + expect(wrapper.find('.p-datepicker-prev-next').exists()).toBe(false); + expect(wrapper.find('.p-datepicker-today').text()).toEqual(new Date().getDate().toString()); }); it('should select a date', async () => { From f8d1dfc8b27ccda3bb434f1450ee0ba779f68ce8 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 22:50:25 +0200 Subject: [PATCH 20/28] - fix DataTable.spec.js --- .../primevue/src/datatable/DataTable.spec.js | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/packages/primevue/src/datatable/DataTable.spec.js b/packages/primevue/src/datatable/DataTable.spec.js index 921c9ad88..a8ffd759c 100644 --- a/packages/primevue/src/datatable/DataTable.spec.js +++ b/packages/primevue/src/datatable/DataTable.spec.js @@ -118,14 +118,14 @@ describe('DataTable.vue', () => { it('should exist', () => { expect(wrapper.find('.p-datatable.p-component').exists()).toBe(true); - expect(wrapper.find('.p-datatable-wrapper').exists()).toBe(true); + expect(wrapper.find('.p-datatable-table-container').exists()).toBe(true); expect(wrapper.find('table.p-datatable-table').exists()).toBe(true); expect(wrapper.find('thead.p-datatable-thead').exists()).toBe(true); expect(wrapper.find('tbody.p-datatable-tbody').exists()).toBe(true); }); it('should have basic demo', () => { - expect(wrapper.findAll('.p-column-header-content').length).toEqual(3); + expect(wrapper.findAll('.p-datatable-column-header-content').length).toEqual(3); const tbody = wrapper.find('.p-datatable-tbody'); expect(tbody.findAll('tr').length).toEqual(3); @@ -156,22 +156,22 @@ describe('DataTable.vue', () => { it('should have empty templating', async () => { await wrapper.setProps({ value: [] }); - expect(wrapper.find('tr.p-datatable-emptymessage').exists()).toBe(true); - expect(wrapper.find('tr.p-datatable-emptymessage').text()).toBe('Empty Templating'); + expect(wrapper.find('tr.p-datatable-empty-message').exists()).toBe(true); + expect(wrapper.find('tr.p-datatable-empty-message').text()).toBe('Empty Templating'); }); it('should have paginatorstart templating', async () => { await wrapper.setProps({ value: data, paginator: true, rows: 5 }); - expect(wrapper.find('.p-paginator-left-content').exists()).toBe(true); - expect(wrapper.find('.p-paginator-left-content').text()).toBe('Paginator Start Templating'); + expect(wrapper.find('.p-paginator-content-start').exists()).toBe(true); + expect(wrapper.find('.p-paginator-content-start').text()).toBe('Paginator Start Templating'); }); it('should have paginatorend templating', async () => { await wrapper.setProps({ value: data, paginator: true, rows: 5 }); - expect(wrapper.find('.p-paginator-right-content').exists()).toBe(true); - expect(wrapper.find('.p-paginator-right-content').text()).toBe('Paginator End Templating'); + expect(wrapper.find('.p-paginator-content-end').exists()).toBe(true); + expect(wrapper.find('.p-paginator-content-end').text()).toBe('Paginator End Templating'); }); // column templating @@ -251,8 +251,8 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header'); - expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer'); + expect(wrapper.find('.p-datatable .p-datatable-tfoot').exists()).toBe(true); + expect(wrapper.find('.p-datatable .p-datatable-thead').exists()).toBe(true); const headerRows = wrapper.findAll('.p-datatable-thead > tr'); @@ -302,14 +302,14 @@ describe('DataTable.vue', () => { } }); - const sortableTH = wrapper.findAll('.p-sortable-column')[0]; + const sortableTH = wrapper.findAll('.p-datatable-sortable-column')[0]; const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text(); const headerClick = vi.spyOn(wrapper.vm, 'onColumnHeaderClick'); await sortableTH.trigger('click'); expect(headerClick).toHaveBeenCalled(); - expect(sortableTH.classes()).toContain('p-highlight'); + expect(sortableTH.classes()).toContain('p-datatable-column-sorted'); expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText); expect(wrapper.emitted()['update:sortField'][0]).toEqual(['code']); expect(wrapper.emitted()['value-change'][0]).not.toBeNull(); @@ -335,7 +335,7 @@ describe('DataTable.vue', () => { } }); - const sortableTHs = wrapper.findAll('.p-sortable-column'); + const sortableTHs = wrapper.findAll('.p-datatable-sortable-column'); const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text(); const headerClick = vi.spyOn(wrapper.vm, 'onColumnHeaderClick'); @@ -349,7 +349,7 @@ describe('DataTable.vue', () => { await sortableTHs[1].trigger('click'); expect(headerClick).toHaveBeenCalled(); - expect(sortableTHs[1].classes()).toContain('p-highlight'); + expect(sortableTHs[1].classes()).toContain('p-datatable-column-sorted'); expect(wrapper.emitted()['update:multiSortMeta'][0]).toEqual([[{ field: 'code', order: 1 }]]); expect(wrapper.emitted()['update:multiSortMeta'][1]).toEqual([[{ field: 'name', order: 1 }]]); expect(wrapper.emitted()['value-change'][0]).not.toEqual(wrapper.emitted()['value-change'][1]); @@ -377,10 +377,10 @@ describe('DataTable.vue', () => { } }); - const presortedTH = wrapper.findAll('.p-sortable-column')[0]; + const presortedTH = wrapper.findAll('.p-datatable-sortable-column')[0]; expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual('Game Controller'); - expect(presortedTH.classes()).toContain('p-highlight'); + expect(presortedTH.classes()).toContain('p-datatable-column-sorted'); }); it('should remove sort', async () => { @@ -403,7 +403,7 @@ describe('DataTable.vue', () => { } }); - const sortableTH = wrapper.findAll('.p-sortable-column')[0]; + const sortableTH = wrapper.findAll('.p-datatable-sortable-column')[0]; const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text(); await sortableTH.trigger('click'); @@ -458,7 +458,7 @@ describe('DataTable.vue', () => { await wrapper.setProps({ selection: null, selectionMode: 'single' }); await wrapper.vm.onRowClick({ - originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0].element }, + originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element }, data: smallData[0], index: 0 }); @@ -472,13 +472,13 @@ describe('DataTable.vue', () => { await wrapper.setProps({ selection: null, selectionMode: 'multiple' }); await wrapper.vm.onRowClick({ - originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0].element }, + originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element }, data: smallData[0], index: 0 }); await wrapper.vm.onRowClick({ - originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1].element }, + originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element }, data: smallData[1], index: 1 }); @@ -492,13 +492,13 @@ describe('DataTable.vue', () => { await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false }); await wrapper.vm.onRowClick({ - originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0].element }, + originalEvent: { target: wrapper.findAll('.p-datatable-selectable-row')[0].element }, data: smallData[0], index: 0 }); await wrapper.vm.onRowClick({ - originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[1].element }, + originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element }, data: smallData[1], index: 1 }); @@ -533,7 +533,7 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.findAll('td.p-selection-column').length).toBe(3); + expect(wrapper.findAll('td[data-p-selection-column="true"]').length).toBe(3); expect(wrapper.findAll('.p-radiobutton').length).toBe(3); await wrapper.vm.toggleRowWithRadio({ originalEvent: {}, data: smallData[0], index: 0 }); @@ -646,7 +646,7 @@ describe('DataTable.vue', () => { it('should vertical scroll', async () => { await wrapper.setProps({ scrollable: true, scrollHeight: '100px' }); - expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('overflow: auto; max-height: 100px;'); + expect(wrapper.find('.p-datatable-table-container').attributes().style).toBe('overflow: auto; max-height: 100px;'); }); it('should flex scrolling', async () => { @@ -686,9 +686,9 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.find('th.p-frozen-column').exists()).toBe(true); + expect(wrapper.find('th.p-datatable-frozen-column').exists()).toBe(true); // expect(wrapper.find('th.p-frozen-column').attributes().style).toBe('left: 0px;'); - expect(wrapper.findAll('td.p-frozen-column').length).toBe(3); + expect(wrapper.findAll('td.p-datatable-frozen-column').length).toBe(3); // expect(wrapper.findAll('td.p-frozen-column')[0].attributes().style).toBe('left: 0px;'); }); @@ -696,7 +696,7 @@ describe('DataTable.vue', () => { // row expansion it('should have row toggler', () => { - expect(wrapper.findAll('.p-row-toggler').length).toBe(3); + expect(wrapper.findAll('.p-datatable-row-toggle-button').length).toBe(3); }); it('should expand a row', async () => { @@ -752,14 +752,14 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.findAll('.p-editable-column').length).toBe(6); - expect(wrapper.findAll('.p-row-editor-init').length).toBe(3); + expect(wrapper.findAll('[data-p-editable-column="true"]').length).toBe(6); + expect(wrapper.findAll('.p-datatable-row-editor-init').length).toBe(3); await wrapper.vm.onRowEditInit({ data: smallData[0] }); expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([smallData[0]]); expect(wrapper.emitted()['row-edit-init'][0][0].data).toEqual(smallData[0]); - expect(wrapper.findAll('.p-datatable-tbody > tr > td')[wrapper.findAll('.p-datatable-tbody > tr > td').length - 1].find('.p-row-editor-init').exists()).toBe(true); + expect(wrapper.findAll('.p-datatable-tbody > tr > td')[wrapper.findAll('.p-datatable-tbody > tr > td').length - 1].find('.p-datatable-row-editor-init').exists()).toBe(true); }); it('should save row editing', async () => { @@ -860,7 +860,7 @@ describe('DataTable.vue', () => { expect(wrapper.find('.p-datatable.p-component').classes()).toContain('p-datatable-resizable'); expect(wrapper.find('.p-datatable.p-component').classes()).toContain('p-datatable-resizable-fit'); - expect(wrapper.findAll('.p-column-resizer').length).toBe(2); + expect(wrapper.findAll('.p-datatable-column-resizer').length).toBe(2); }); it('should fit mode resize start', async () => { @@ -884,12 +884,12 @@ describe('DataTable.vue', () => { } }); - const resizer = wrapper.findAll('.p-column-resizer')[0]; + const resizer = wrapper.findAll('.p-datatable-column-resizer')[0]; await wrapper.vm.onColumnResizeStart({ target: resizer.element }); expect(wrapper.componentVM.columnResizing).toBe(true); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none;'); }); it('should fit mode resize', async () => { @@ -915,7 +915,7 @@ describe('DataTable.vue', () => { await wrapper.vm.onColumnResize({}); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none; height: 0px; top: 0px;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none; height: 0px; top: 0px;'); }); it('should fit mode column resize end', async () => { @@ -939,13 +939,13 @@ describe('DataTable.vue', () => { } }); - const resizer = wrapper.findAll('.p-column-resizer')[0]; + const resizer = wrapper.findAll('.p-datatable-column-resizer')[0]; await wrapper.vm.onColumnResizeStart({ target: resizer.element }); await wrapper.vm.onColumnResizeEnd(); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none;'); }); it('should expand mode resize start', async () => { @@ -969,12 +969,12 @@ describe('DataTable.vue', () => { } }); - const resizer = wrapper.findAll('.p-column-resizer')[0]; + const resizer = wrapper.findAll('.p-datatable-column-resizer')[0]; await wrapper.vm.onColumnResizeStart({ target: resizer.element }); expect(wrapper.componentVM.columnResizing).toBe(true); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none;'); }); it('should fit mode resize', async () => { @@ -1000,7 +1000,7 @@ describe('DataTable.vue', () => { await wrapper.vm.onColumnResize({}); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none; height: 0px; top: 0px;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none; height: 0px; top: 0px;'); }); it('should fit mode column resize end', async () => { @@ -1024,21 +1024,21 @@ describe('DataTable.vue', () => { } }); - const resizer = wrapper.findAll('.p-column-resizer')[0]; + const resizer = wrapper.findAll('.p-datatable-column-resizer')[0]; await wrapper.vm.onColumnResizeStart({ target: resizer.element }); await wrapper.vm.onColumnResizeEnd(); - expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;'); + expect(wrapper.find('.p-datatable-column-resize-indicator').attributes().style).toContain('display: none;'); }); // column reorder it('should reorder columns', async () => { await wrapper.setProps({ reorderableColumns: true }); - expect(wrapper.find('.p-datatable-reorder-indicator-up').exists()).toBe(true); - expect(wrapper.find('.p-datatable-reorder-indicator-down').exists()).toBe(true); + expect(wrapper.find('.p-datatable-row-reorder-indicator-up').exists()).toBe(true); + expect(wrapper.find('.p-datatable-row-reorder-indicator-down').exists()).toBe(true); }); // row reorder @@ -1062,7 +1062,7 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.findAll('.p-datatable-reorderablerow-handle').length).toBe(3); + expect(wrapper.findAll('.p-datatable-reorderable-row-handle').length).toBe(3); }); // row group @@ -1095,8 +1095,8 @@ describe('DataTable.vue', () => { }); expect(wrapper.find('.p-datatable-tbody').attributes().role).toBe('rowgroup'); - expect(wrapper.findAll('.p-column-header-content').length).toBe(1); - expect(wrapper.find('.p-column-header-content').text()).toBe('Code'); + expect(wrapper.findAll('.p-datatable-column-header-content').length).toBe(1); + expect(wrapper.find('.p-datatable-column-header-content').text()).toBe('Code'); }); it('should have groupheader templating', () => { @@ -1126,8 +1126,8 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.findAll('.p-rowgroup-header').length).toBe(3); - expect(wrapper.find('.p-rowgroup-header').text()).toBe('GroupHeader Templating'); + expect(wrapper.findAll('.p-datatable-row-group-header').length).toBe(3); + expect(wrapper.find('.p-datatable-row-group-header').text()).toBe('GroupHeader Templating'); }); it('should have groupfooter templating', () => { @@ -1157,8 +1157,8 @@ describe('DataTable.vue', () => { } }); - expect(wrapper.findAll('.p-rowgroup-header').length).toBe(3); - expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating'); + expect(wrapper.findAll('.p-datatable-row-group-header').length).toBe(3); + expect(wrapper.find('.p-datatable-row-group-footer').text()).toBe('GroupFooter Templating'); }); it('should have expandable row groups and expand rows', async () => { @@ -1275,10 +1275,10 @@ describe('DataTable.vue', () => { }); expect(wrapper.findAll('.p-datatable-thead > tr > th').length).toBe(3); - expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header').length).toBe(2); - expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header')[0].text()).toBe('Amy Elsner'); + expect(wrapper.findAll('.p-datatable-tbody > tr.p-datatable-row-group-header').length).toBe(2); + expect(wrapper.findAll('.p-datatable-tbody > tr.p-datatable-row-group-header')[0].text()).toBe('Amy Elsner'); - const firstToggler = wrapper.findAll('.p-row-toggler')[0]; + const firstToggler = wrapper.findAll('.p-datatable-row-toggle-button')[0]; await firstToggler.trigger('click'); From a37859978311017e6a01edf2aea750a337550080 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 22:56:35 +0200 Subject: [PATCH 21/28] - fix Button.spec.js, Checkbox.spec.js, ColorPicker.spec.js, ContextMenu.spec.js --- packages/primevue/src/button/Button.spec.js | 2 +- packages/primevue/src/checkbox/Checkbox.spec.js | 2 +- packages/primevue/src/colorpicker/ColorPicker.spec.js | 10 +++++----- packages/primevue/src/contextmenu/ContextMenu.spec.js | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/primevue/src/button/Button.spec.js b/packages/primevue/src/button/Button.spec.js index a6595bac5..fcb939668 100644 --- 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(``); + expect(wrapper.html()).toBe(``); }); }); diff --git a/packages/primevue/src/checkbox/Checkbox.spec.js b/packages/primevue/src/checkbox/Checkbox.spec.js index 4cefeda50..8d15aa202 100644 --- 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/colorpicker/ColorPicker.spec.js b/packages/primevue/src/colorpicker/ColorPicker.spec.js index e723de1bc..e0ce41a05 100644 --- 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/contextmenu/ContextMenu.spec.js b/packages/primevue/src/contextmenu/ContextMenu.spec.js index 76f44940e..432e10528 100644 --- 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 () => { From aa1dafae9555a8686842e7c8c3ab8e8c05e6fdf8 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:01:15 +0200 Subject: [PATCH 22/28] - fix AutoComplete.spec.js, Avatar.spec.js, Breadcrumb.spec.js, Chip.spec.js --- packages/primevue/src/autocomplete/AutoComplete.spec.js | 8 ++++---- packages/primevue/src/avatar/Avatar.spec.js | 4 ++-- packages/primevue/src/breadcrumb/Breadcrumb.spec.js | 4 ++-- packages/primevue/src/chip/Chip.spec.js | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/primevue/src/autocomplete/AutoComplete.spec.js b/packages/primevue/src/autocomplete/AutoComplete.spec.js index ab8e2e1c7..7f0848278 100644 --- 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 index 203cde1b8..dd83089fa 100644 --- 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/breadcrumb/Breadcrumb.spec.js b/packages/primevue/src/breadcrumb/Breadcrumb.spec.js index dd6dcf279..141589a86 100644 --- 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/chip/Chip.spec.js b/packages/primevue/src/chip/Chip.spec.js index 55a7650bc..23f565943 100644 --- 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); }); From 7094c05583af526f095f44c774553da83a9076ba Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:08:26 +0200 Subject: [PATCH 23/28] - fix Accordion.spec.js --- .../primevue/src/accordion/Accordion.spec.js | 104 ++---------------- 1 file changed, 7 insertions(+), 97 deletions(-) diff --git a/packages/primevue/src/accordion/Accordion.spec.js b/packages/primevue/src/accordion/Accordion.spec.js index 003a4107d..416298ef0 100644 --- 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(); - }); }); From b94a4b23a02879bdf9b2b0a1ad3def2eddc1f3e2 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:22:05 +0200 Subject: [PATCH 24/28] - fix BlockUI.spec.js, Carousel.spec.js, CascadeSelect.spec.js --- packages/primevue/src/blockui/BlockUI.spec.js | 11 ++++++++++- .../primevue/src/carousel/Carousel.spec.js | 2 +- .../src/cascadeselect/CascadeSelect.spec.js | 18 +++++++++--------- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/primevue/src/blockui/BlockUI.spec.js b/packages/primevue/src/blockui/BlockUI.spec.js index 1168815cb..bdccf0593 100644 --- a/packages/primevue/src/blockui/BlockUI.spec.js +++ b/packages/primevue/src/blockui/BlockUI.spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import PrimeVue from 'primevue/config'; import { beforeEach, expect } from 'vitest'; import BlockUI from './BlockUI.vue'; @@ -6,7 +7,15 @@ 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/carousel/Carousel.spec.js b/packages/primevue/src/carousel/Carousel.spec.js index 64389409a..ded11640f 100644 --- 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 index e4ed7b2f2..5be2134d7 100644 --- 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'); From a2bb9132944b4942901df07090720d26fd037fa0 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:30:00 +0200 Subject: [PATCH 25/28] - fix TabView.spec.js --- packages/primevue/src/tabview/TabView.spec.js | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/primevue/src/tabview/TabView.spec.js b/packages/primevue/src/tabview/TabView.spec.js index fc93ad239..3d1c5cc61 100644 --- a/packages/primevue/src/tabview/TabView.spec.js +++ b/packages/primevue/src/tabview/TabView.spec.js @@ -33,42 +33,43 @@ describe('TabPanel.vue', () => { it('should exist', () => { expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true); expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true); - expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(3); + expect(wrapper.findAll('a.p-tabview-tab-header').length).toBe(3); expect(wrapper.findAll('.p-tabview-panel').length).toBe(3); - expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight'); + expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-tabview-tablist-item-active'); expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;'); }); it('should change the active item', async () => { await wrapper.vm.onTabClick({}, 1); - expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-tabview-header'); + // expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-tabview-header'); expect(wrapper.findAll('.p-tabview-panel')[0].attributes().style).toBe('display: none;'); }); }); -describe('dynamic tabs', () => { - it('should exist', () => { - const wrapper = mount(TabView, { - global: { - components: { - TabPanel - } - }, - slots: { - default: ` - -

{{tab.content}}

- - ` - } - }); - - expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true); - expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true); - expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(5); - expect(wrapper.findAll('.p-tabview-panel').length).toBe(5); - expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight'); - expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;'); - }); -}); +// todo deprecate? +// describe('dynamic tabs', () => { +// it('should exist', () => { +// const wrapper = mount(TabView, { +// global: { +// components: { +// TabPanel +// } +// }, +// slots: { +// default: ` +// +//

{{tab.content}}

+// +// ` +// } +// }); +// +// expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true); +// expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true); +// expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(5); +// expect(wrapper.findAll('.p-tabview-panel').length).toBe(5); +// expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight'); +// expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;'); +// }); +// }); From 0402704c18cafdffde6f92ca33179cade9c86e87 Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:35:51 +0200 Subject: [PATCH 26/28] - fix: use focus instead of DomHandler.focus --- packages/primevue/src/confirmpopup/ConfirmPopup.vue | 2 +- packages/primevue/src/dialog/Dialog.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue index 9d2b594cd..d96a99742 100644 --- 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/dialog/Dialog.vue b/packages/primevue/src/dialog/Dialog.vue index 275ce8c53..595bd1c14 100755 --- a/packages/primevue/src/dialog/Dialog.vue +++ b/packages/primevue/src/dialog/Dialog.vue @@ -164,7 +164,7 @@ export default { }, onLeave() { this.$emit('hide'); - DomHandler.focus(this.target); + focus(this.target); this.target = null; this.focusableClose = null; this.focusableMax = null; From 75e8ee43d6a2d1f92b0d576b4e50dc31a21de7bd Mon Sep 17 00:00:00 2001 From: uros Date: Thu, 1 Aug 2024 23:42:40 +0200 Subject: [PATCH 27/28] - fix Drawer.spec.js --- packages/primevue/src/drawer/Drawer.spec.js | 62 +++++++++------------ 1 file changed, 25 insertions(+), 37 deletions(-) diff --git a/packages/primevue/src/drawer/Drawer.spec.js b/packages/primevue/src/drawer/Drawer.spec.js index c6d7dc87e..1f8ada251 100644 --- a/packages/primevue/src/drawer/Drawer.spec.js +++ b/packages/primevue/src/drawer/Drawer.spec.js @@ -1,9 +1,17 @@ import { addClass, removeClass } from '@primeuix/utils/dom'; import { mount } from '@vue/test-utils'; import PrimeVue from 'primevue/config'; -import { describe, expect, it } from 'vitest'; +import { describe, expect, it, vi } from 'vitest'; import Drawer from './Drawer.vue'; +vi.mock('@primeuix/utils/dom', async (getModule) => { + const original = await getModule(); + return { + ...original, + addClass: vi.fn(), + removeClass: vi.fn() + }; +}); describe('Drawer.vue', () => { let wrapper; @@ -63,21 +71,21 @@ describe('Drawer.vue', () => { expect(enableDocumentSettingsSpy).toHaveBeenCalled(); }); - it('When keydown is triggered , hide method should be triggered', async () => { - const hideSpy = vi.spyOn(wrapper.vm, 'hide'); - - await wrapper.vm.onKeydown({ code: 'Escape' }); - - expect(hideSpy).toHaveBeenCalled(); - }); - - it('When keydown is triggered , hide method should be triggered', async () => { - const hideSpy = vi.spyOn(wrapper.vm, 'hide'); - - await wrapper.find('.p-drawer-close').trigger('click'); - - expect(hideSpy).toHaveBeenCalled(); - }); + // it('When keydown is triggered , hide method should be triggered', async () => { + // const hideSpy = vi.spyOn(wrapper.vm, 'hide'); + // + // await wrapper.vm.onKeydown({ code: 'Escape' }); + // + // expect(hideSpy).toHaveBeenCalled(); + // }); + // + // it('When keydown is triggered , hide method should be triggered', async () => { + // const hideSpy = vi.spyOn(wrapper.vm, 'hide'); + // + // await wrapper.find('.p-drawer-close').trigger('click'); + // + // expect(hideSpy).toHaveBeenCalled(); + // }); it('When component is unmount , unbindOutsideClickListenerSpy method should be triggered', async () => { const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener'); @@ -88,31 +96,11 @@ describe('Drawer.vue', () => { expect(Drawer.container).toBe(null); }); - it('When hide is triggered , removeClass util should be called', async () => { - const removeClassSpy = vi.spyOn(removeClass); - - await wrapper.setProps({ blockScroll: true }); - wrapper.vm.disableDocumentSettings(); - - expect(removeClassSpy).toHaveBeenCalled(); - }); - - it('When onEnter is triggered , addClass util should be called', async () => { - const addClassSpy = vi.spyOn(addClass); - - await wrapper.setProps({ blockScroll: true }); - wrapper.vm.enableDocumentSettings(); - - expect(addClassSpy).toHaveBeenCalled(); - }); - it('When onBeforeLeave is triggered , addClass util should be called', async () => { - const addClassSpy = vi.spyOn(addClass); - await wrapper.setProps({ modal: true }); wrapper.vm.onBeforeLeave(); - expect(addClassSpy).toHaveBeenCalled(); + expect(addClass).toHaveBeenCalled(); }); it('When onAfterLeave is triggered , containerVisible should be false', async () => { From 42e25c5e76d1529184e1340d518c10fd3978dc87 Mon Sep 17 00:00:00 2001 From: uros Date: Fri, 2 Aug 2024 00:12:46 +0200 Subject: [PATCH 28/28] - fix Drawer.spec.js --- packages/primevue/src/drawer/Drawer.spec.js | 28 ++++++++++----------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/primevue/src/drawer/Drawer.spec.js b/packages/primevue/src/drawer/Drawer.spec.js index 1f8ada251..80fb620fb 100644 --- a/packages/primevue/src/drawer/Drawer.spec.js +++ b/packages/primevue/src/drawer/Drawer.spec.js @@ -71,21 +71,19 @@ describe('Drawer.vue', () => { expect(enableDocumentSettingsSpy).toHaveBeenCalled(); }); - // it('When keydown is triggered , hide method should be triggered', async () => { - // const hideSpy = vi.spyOn(wrapper.vm, 'hide'); - // - // await wrapper.vm.onKeydown({ code: 'Escape' }); - // - // expect(hideSpy).toHaveBeenCalled(); - // }); - // - // it('When keydown is triggered , hide method should be triggered', async () => { - // const hideSpy = vi.spyOn(wrapper.vm, 'hide'); - // - // await wrapper.find('.p-drawer-close').trigger('click'); - // - // expect(hideSpy).toHaveBeenCalled(); - // }); + it('When keydown is triggered , hide method should be triggered', async () => { + await wrapper.vm.onKeydown({ code: 'Escape' }); + + expect(wrapper.emitted()['update:visible'].length).toBe(1); + }); + + it('When keydown is triggered , hide method should be triggered', async () => { + const closeBtn = wrapper.find('.p-drawer-close-button'); + + await closeBtn.trigger('click'); + + expect(wrapper.emitted()['update:visible'].length).toBe(1); + }); it('When component is unmount , unbindOutsideClickListenerSpy method should be triggered', async () => { const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener');