Merge pull request #2660 from tugcekucukoglu/testing

ToggleButton - TriStateCheckbox - InputNumber tests added

jest.config.js

@@ -25,7 +25,8 @@ module.exports = {
         "^primevue/toasteventbus(.*)$": "<rootDir>/src/components/toasteventbus/ToastEventBus.js",
         "^primevue/overlayeventbus(.*)$": "<rootDir>/src/components/overlayeventbus/OverlayEventBus.js",
         "^primevue/terminalservice(.*)$": "<rootDir>/src/components/terminalservice/TerminalService.js",
-        "^primevue/virtualscroller(.*)$": "<rootDir>/src/components/virtualscroller/VirtualScroller.vue"
+        "^primevue/virtualscroller(.*)$": "<rootDir>/src/components/virtualscroller/VirtualScroller.vue",
+        "^primevue/portal(.*)$": "<rootDir>/src/components/portal/Portal.vue"
     },
     testMatch: [
         "**/src/components/**/*.spec.{j,t}s?(x)"

src/components/inputnumber/InputNumber.spec.js

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils';
+import InputNumber from './InputNumber.vue';
+
+describe('InputNumber.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(InputNumber, {
+            props: {
+                modelValue: 1
+            }
+        });
+    });
+
+    it('is exist', () => {
+        expect(wrapper.find('.p-inputnumber.p-component').exists()).toBe(true);
+        expect(wrapper.find('input.p-inputnumber-input').exists()).toBe(true);
+    });
+
+    it('is keydown called when down and up keys pressed', async () => {
+        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 1 }, preventDefault: () => {}});
+        
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([2]);
+
+        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 2 }, preventDefault: () => {}})
+        
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([1]);
+    });
+
+    it('is keydown called when tab key pressed', async () => {
+        await wrapper.vm.onInputKeyDown({which: 9, target: { value: '12' }, preventDefault: () => {}});
+        
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([12]);
+        expect(wrapper.find('input.p-inputnumber-input').attributes()['aria-valuenow']).toBe('12');
+    });
+
+    it('is keydown called when enter key pressed', async () => {
+        await wrapper.vm.onInputKeyDown({which: 13, target: { value: '12' }, preventDefault: () => {}});
+        
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([12]);
+        expect(wrapper.find('input.p-inputnumber-input').attributes()['aria-valuenow']).toBe('12');
+    });
+
+    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: () => {}});
+
+        expect(wrapper.emitted().input[0][0].value).toBe(11);
+    });
+
+    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: () => {}});
+
+        expect(wrapper.emitted().input[0][0].value).toBe(-1);
+    });
+
+    it('should have min boundary', async () => {
+        await wrapper.setProps({ modelValue: 95, min: 95});
+
+        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 96 }, preventDefault: () => {}});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([95]);
+
+        await wrapper.vm.onInputKeyDown({which: 40, target: { value: 95 }, preventDefault: () => {}});
+
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([95]);
+    });
+
+    it('should have max boundary', async () => {
+        await wrapper.setProps({ modelValue: 99, max: 100});
+
+        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 99 }, preventDefault: () => {}});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([100]);
+
+        await wrapper.vm.onInputKeyDown({which: 38, target: { value: 100 }, preventDefault: () => {}});
+
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([100]);
+    });
+
+    it('should have currency', async () => {
+        await wrapper.setProps({ modelValue: 12345, mode: 'currency', currency: 'USD', locale: 'en-US'});
+
+        expect(wrapper.find('input.p-inputnumber-input').element._value).toBe('$12,345.00');
+    });
+
+    it('should have prefix', async () => {
+        await wrapper.setProps({ modelValue: 20, prefix: '%' });
+
+        expect(wrapper.find('input.p-inputnumber-input').element._value).toBe('%20');
+    });
+});

src/components/togglebutton/ToggleButton.spec.js

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import ToggleButton from './ToggleButton.vue';
+
+describe('ToggleButton', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(ToggleButton, {
+            props: {
+                modelValue: false,
+                onIcon: 'pi pi-check',
+                offIcon: 'pi pi-times'
+            }
+        });
+    });
+
+    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);
+    });
+
+    it('should have onIcon', async () => {
+        await wrapper.setProps({ modelValue: true });
+        
+        expect(wrapper.find('span.pi-check').exists()).toBe(true);
+    });
+
+    it('should click works', async () => {
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+        await wrapper.setProps({ modelValue: true });
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
+    });
+
+    it('should be customized', async () => {
+        await wrapper.setProps({
+            modelValue: true,
+            onLabel: 'I confirm',
+            offLabel: 'I reject',
+            style: 'width: 10em'
+        });
+
+        expect(wrapper.find('.p-button-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');
+    });
+});

src/components/tristatecheckbox/TriStateCheckbox.spec.js

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import TriStateCheckbox from './TriStateCheckbox.vue';
+
+describe('TriStateCheckbox.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(TriStateCheckbox, {
+            props: {
+                modelValue: null
+            }
+        });
+    });
+
+    it('is TriStateCheckbox exist', () => {
+        expect(wrapper.find('.p-checkbox.p-component').exists()).toBe(true);
+    });
+
+    it('is state changed', async () => {
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+        await wrapper.setProps({modelValue: true});
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
+
+        await wrapper.setProps({modelValue: false});
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][2]).toEqual([null]);
+    });
+
+    it('is icon chenaged', async () => {
+        expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-check');
+        expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-times');
+
+        await wrapper.setProps({modelValue: true});
+
+        expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-check');
+
+        await wrapper.setProps({modelValue: false});
+
+        expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-times');
+    });
+});