first tests added

.eslintrc.js

@@ -13,5 +13,16 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
 }

jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+    "preset": "@vue/cli-plugin-unit-jest",
+    "transform": {
+        "^.+\\.vue$": "vue-jest"
+    },
+    "moduleNameMapper": {
+        "^primevue/ripple(.*)$": "<rootDir>/src/components/ripple/Ripple.js",
+        "^primevue/tooltip(.*)$": "<rootDir>/src/components/tooltip/Tooltip.js",
+        "^primevue/useconfirm(.*)$": "<rootDir>/src/components/useconfirm/UseConfirm.js",
+        "^primevue/usetoast(.*)$": "<rootDir>/src/components/usetoast/UseToast.js",
+        "^primevue/utils(.*)$": "<rootDir>/src/components/utils/Utils.js",
+        "^primevue/api(.*)$": "<rootDir>/src/components/api/Api.js",
+        "^primevue/button(.*)$": "<rootDir>/src/components/button/Button.vue",
+        "^primevue/inputtext(.*)$": "<rootDir>/src/components/inputtext/InputText.vue",
+        "^primevue/dialog(.*)$": "<rootDir>/src/components/dialog/Dialog.vue",
+        "^primevue/menu(.*)$": "<rootDir>/src/components/menu/Menu.vue",
+        "^primevue/tieredmenu(.*)$": "<rootDir>/src/components/tieredmenu/TieredMenu.vue",
+        "^primevue/dropdown(.*)$": "<rootDir>/src/components/dropdown/Dropdown.vue",
+        "^primevue/inputnumber(.*)$": "<rootDir>/src/components/inputnumber/InputNumber.vue",
+        "^primevue/paginator(.*)$": "<rootDir>/src/components/paginator/Paginator.vue",
+        "^primevue/progressbar(.*)$": "<rootDir>/src/components/progressbar/ProgressBar.vue",
+        "^primevue/message(.*)$": "<rootDir>/src/components/message/Message.vue",
+        "^primevue/tree(.*)$": "<rootDir>/src/components/tree/Tree.vue",
+        "^primevue/confirmationeventbus(.*)$": "<rootDir>/src/components/confirmationeventbus/ConfirmationEventBus.js",
+        "^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"
+    }
+}

package.json

@@ -38,6 +38,8 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/test-utils": "^2.0.0-0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "3.1.5",
     "@vuelidate/core": "^2.0.0-alpha.14",
@@ -65,6 +67,7 @@
     "sass-loader": "^8.0.2",
     "vue": "3.1.5",
     "vue-router": "^4.0.0-0",
+    "vue-jest": "^5.0.0-0",
     "webpack-cli": "^4.3.0"
   }
 }

tests/unit/Button.spec.js

@@ -0,0 +1,85 @@
+import { h } from 'vue';
+import { mount } from '@vue/test-utils';
+import Button from '@/components/button/Button.vue';
+
+describe('Button.vue', () => {
+	it('is Button element exist', () => {
+		const wrapper = mount(Button);
+
+		expect(wrapper.find('.p-button.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-button-label').exists()).toBe(true);
+	})
+});
+
+describe('Button.vue', () => {
+	it('is icon exist and right position', () => {
+        const icon = 'pi pi-discord';
+        const iconPos = 'right';
+        const label = 'Save';
+        const props = { icon, iconPos };
+        let wrapper;
+
+        wrapper = mount(Button, {
+            props
+        });
+
+		expect(wrapper.find('.p-button-icon-only').exists()).toBe(true);
+
+        wrapper = mount(Button, {
+            props: { ...props, label }
+        });
+
+        expect(wrapper.find('.p-button-icon.p-button-icon-' + iconPos).exists()).toBe(true);
+	})
+});
+
+describe('Button.vue', () => {
+    it('is badge working', () => {
+        const badge = '5';
+        const badgeClass= 'p-badge-danger';
+        const wrapper = mount(Button, {
+            props: { badge, badgeClass }
+        });
+
+
+        expect(wrapper.find('.p-badge').text()).toEqual(badge);
+        expect(wrapper.find('.' + badgeClass).exists()).toBe(true);
+    })
+});
+
+describe('Button.vue', () => {
+    it('is loading working', async () => {
+        const loadingIcon = 'pi pi-discord';
+        const wrapper = mount(Button, {
+            props: {
+                loading: false,
+                loadingIcon
+            }
+        });
+        
+        expect(wrapper.find('.p-disabled').exists()).toBe(false);
+
+        await wrapper.setProps({ loading: true })
+        const array = loadingIcon.split(' ');
+		const lastIcon = '.' + array.join('.');
+
+        expect(wrapper.find('.p-button-loading').exists()).toBe(true);
+        expect(wrapper.find('.p-button-loading-icon' + lastIcon).exists()).toBe(true);
+
+        await wrapper.setProps({ loading: false });
+
+        expect(wrapper.find('.p-button-loading').exists()).toBe(false);
+    })
+});
+
+describe('Button.vue', () => {
+    it('should render default slot', () => {
+        const wrapper = mount(Button, {
+            slots: {
+                default: h('span', {class: 'ml-2 font-bold'}, 'Default PrimeVue Button')
+            }
+        });
+
+        expect(wrapper.html()).toBe('<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>');
+    })
+});

tests/unit/Dialog.spec.js

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import Dialog from '@/components/dialog/Dialog.vue';
+
+describe('Dialog.vue', () => {
+	it('is Dialog element exist', () => {
+		const wrapper = mount(Dialog);
+
+		expect(wrapper.find('.p-dialog.p-component').exists()).toBe(false);
+	})
+});

tests/unit/Dropdown.spec.js

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import PrimeVue from '@/components/config/PrimeVue';
+import Dropdown from '@/components/dropdown/Dropdown.vue';
+
+'use strict';
+
+describe('Dropdown', () => {
+    let wrapper; 
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+
+        wrapper = mount(Dropdown, {
+            global: {
+                plugins: [PrimeVue]
+            }
+        });
+    });
+
+    it('should Dropdown exist', async () => {
+        expect(wrapper.find('.p-dropdown.p-component').exists()).toBe(true);
+
+        await wrapper.trigger('click');
+        // console.log('before', new Date());
+        // Promise.resolve().then(() => jest.advanceTimersByTime(1000));
+        jest.advanceTimersByTime(1000);
+
+        // console.log('after', new Date());
+
+        // expect(wrapper.find('.p-dropdowwn-panel')).toBe(true);
+        // console.log(wrapper.html());
+    })
+});

tests/unit/InputText.spec.js

@@ -0,0 +1,30 @@
+import { mount } from  '@vue/test-utils';
+import InputText from '@/components/inputText/InputText.vue';
+
+describe('InputText.vue', () => {
+    it('is InputText component exists', async () => {
+        const wrapper = mount(InputText);
+
+        expect(wrapper.find('.p-inputtext.p-component').exists()).toBe(true);
+
+        await wrapper.setProps({ modelValue: 'PrimeVue' });
+
+        expect(wrapper.find('.p-filled').exists()).toBe(true);
+
+        const input = wrapper.find('input');
+        expect(input.element.value).toEqual('PrimeVue');
+    })
+});
+
+describe('InputText.vue', () => {
+    it('input event', async () => {
+        const wrapper = mount(InputText);
+        const input = wrapper.find('input');
+
+        // await input.trigger('input', { keyCode: 65 });
+        input.element.value = 'a';
+        input.trigger('input');
+
+        expect(input.element.value).toEqual('a');
+    })
+});

tests/unit/Tag.spec.js

@@ -0,0 +1,69 @@
+import { h } from 'vue';
+import { mount } from '@vue/test-utils';
+import Tag from '@/components/tag/Tag.vue';
+
+describe('Tag.vue', () => {
+	it('is Tag element exist', () => {
+		const wrapper = mount(Tag);
+
+		expect(wrapper.find('.p-tag.p-component').exists()).toBe(true);
+	})
+});
+
+describe('Tag.vue', () => {
+	it('renders props severity when passed', () => {
+		const severity = 'info';
+		const wrapper = mount(Tag, {
+			props: { severity }
+		});
+
+		expect(wrapper.find('.p-tag-' + severity).exists()).toBe(true);
+	})
+});
+
+describe('Tag.vue', () => {
+	it('renders props value when passed', () => {
+		const value = 'submit';
+		const wrapper = mount(Tag, {
+			props: { value }
+		});
+
+		expect(wrapper.find('span').text()).toBe(value);
+	})
+});
+
+describe('Tag.vue', () => {
+	it('renders props icon when passed', () => {
+		const icon = 'pi pi-discord';
+		const wrapper = mount(Tag, {
+			props: { icon }
+		});
+		const array = icon.split(' ');
+		const lastIcon = '.' + array.join('.');
+
+		expect(wrapper.find('.p-tag-icon').isVisible()).toBe(true);
+        expect(wrapper.find('.p-tag-icon' + lastIcon).exists()).toBe(true);
+	})
+});
+
+describe('Tag.vue', () => {
+    it('should be rounded', () => {
+        const wrapper = mount(Tag, {
+            props: { rounded: true }
+        });
+
+        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('<span class="p-tag p-component"><!--v-if--><i class="pi pi-discord"></i></span>');
+    })
+});

tests/unit/example.spec.js

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
-    })
-    expect(wrapper.text()).toMatch(msg)
-  })
-})