vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #2337 from tugcekucukoglu/tests 

Tests
pull/2338/head
Tuğçe Küçükoğlu 2022-03-18 16:41:22 +03:00 committed by GitHub
parent b0ca984853 83c00a2181
commit 8fe44b9499
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 565 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
jest.config.js
View File

@ -29,5 +29,6 @@ module.exports = {
},
testMatch: [
"**/src/components/**/*.spec.{j,t}s?(x)"
]
],
timers: "fake"
}

52
src/components/message/Message.spec.js Normal file
View File

@ -0,0 +1,52 @@
import { mount } from '@vue/test-utils';
import Message from './Message.vue';
describe('Message.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Message, {
props: {
severity: 'error'
},
slots: {
default: 'Error Message Content'
}
});
});
it('should exist', () => {
expect(wrapper.find('.p-message.p-component').exists()).toBe(true);
expect(wrapper.find('.p-message.p-component').classes()).toContain('p-message-error');
expect(wrapper.find('.p-message-text').text()).toContain('Error Message Content');
});
it('should close the message', async () => {
await wrapper.vm.close({});
expect(wrapper.vm.visible).toBe(false);
expect(wrapper.emitted().close[0]).toEqual([{}]);
});
});
describe('Message.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Message, {
props: {
severity: 'error',
life: 3000,
sticky: false
},
slots: {
default: 'Error Message Content'
}
});
});
it('should sticky and life works', async () => {
jest.runTimersToTime(3001);
expect(wrapper.vm.visible).toBe(false);
});
});

78
src/components/multiselect/MultiSelect.spec.js Normal file
View File

@ -0,0 +1,78 @@
import { mount } from '@vue/test-utils';
import PrimeVue from '@/components/config/PrimeVue';
import MultiSelect from './MultiSelect.vue';
describe('MultiSelect.vue', () => {
let wrapper;
beforeEach(async () => {
wrapper = mount(MultiSelect, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true
}
},
props: {
modelValue: null,
options: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
optionLabel: 'name',
placeholder: 'Select Cities'
}
});
await wrapper.vm.onClick({});
});
it('should exist', () => {
expect(wrapper.find('.p-multiselect.p-component').exists()).toBe(true);
expect(wrapper.find('.p-multiselect-label.p-placeholder').text()).toBe('Select Cities');
expect(wrapper.find('.p-multiselect-panel').exists()).toBe(true);
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].findAll('span')[1].text()).toBe('New York');
});
it('should select an item', async () => {
await wrapper.vm.onOptionSelect({}, wrapper.vm.options[0]);
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0]]]);
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
});
it('should select multiple item', async () => {
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
await wrapper.vm.onOptionSelect({}, wrapper.vm.options[1]);
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0], wrapper.vm.options[1]]]);
await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]]});
expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
expect(wrapper.findAll('li.p-multiselect-item')[1].classes()).toContain('p-highlight');
});
it('should close panel', async () => {
await wrapper.vm.onCloseClick();
expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
});
it('should chip work', async () => {
await wrapper.setProps({ display: 'chip', 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');
});
});

140
src/components/orderlist/OrderList.spec.js Normal file
View File

@ -0,0 +1,140 @@
import { mount } from '@vue/test-utils';
import OrderList from './OrderList.vue';
describe('OrderList.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(OrderList, {
props: {
modelValue: [
{
"id": "1000",
"code": "vbb124btr",
"name": "Game Controller",
"description": "Product Description",
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch",
"description": "Product Description",
"image": "black-watch.jpg",
"price": 72,
"category": "Accessories",
"quantity": 61,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band",
"description": "Product Description",
"image": "blue-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1003",
"code": "244wgerg2",
"name": "Blue T-Shirt",
"description": "Product Description",
"image": "blue-t-shirt.jpg",
"price": 29,
"category": "Clothing",
"quantity": 25,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1004",
"code": "h456wer53",
"name": "Bracelet",
"description": "Product Description",
"image": "bracelet.jpg",
"price": 15,
"category": "Accessories",
"quantity": 73,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1005",
"code": "cm230f032",
"name": "Gaming Set",
"description": "Product Description",
"image": "gaming-set.jpg",
"price": 299,
"category": "Electronics",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 3
}
]
},
slots: {
header: 'List of Products',
item: `
<template #item="slotProps">
<div class="product-item">
<div class="image-container">
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div>
<div class="product-list-detail">
<h6 class="mb-2">{{slotProps.item.name}}</h6>
<i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{slotProps.item.category}}</span>
</div>
<div class="product-list-action">
<h6 class="mb-2">\${{slotProps.item.price}}</h6>
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
</div>
</div>
</template>
`
}
});
});
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);
});
it('should select item', async () => {
await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0], 0);
expect(wrapper.emitted()['update:selection'][0]).toEqual([[wrapper.vm.modelValue[0]]]);
await wrapper.setProps({ selection: [wrapper.vm.modelValue[0]] });
expect(wrapper.findAll('li.p-orderlist-item')[0].classes()).toContain('p-highlight');
});
it('should slot works', () => {
expect(wrapper.find('.p-orderlist-header').text()).toBe('List of Products');
expect(wrapper.findAll('.product-item').length).toBe(6);
});
it('should change order', async () => {
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');
await wrapper.vm.moveUp({});
expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual(wrapper.vm.modelValue[2]);
});
});

8
src/components/orderlist/OrderList.vue
View File

@ -96,7 +96,7 @@ export default {
isSelected(item) {
return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
},
moveUp() {
moveUp(event) {
if (this.d_selection) {
let value = [...this.modelValue];
@ -124,7 +124,7 @@ export default {
});
}
},
moveTop() {
moveTop(event) {
if(this.d_selection) {
let value = [...this.modelValue];
@ -150,7 +150,7 @@ export default {
});
}
},
moveDown() {
moveDown(event) {
if(this.d_selection) {
let value = [...this.modelValue];
@ -178,7 +178,7 @@ export default {
});
}
},
moveBottom() {
moveBottom(event) {
if (this.d_selection) {
let value = [...this.modelValue];

160
src/components/organizationchart/OrganizationChart.spec.js Normal file
View File

@ -0,0 +1,160 @@
import { mount } from '@vue/test-utils';
import OrganizationChart from './OrganizationChart.vue';
describe('OrganizationChart.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(OrganizationChart, {
props: {
value: {
key: '0',
type: 'person',
styleClass: 'p-person',
data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
children: [
{
key: '0_0',
type: 'person',
styleClass: 'p-person',
data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
children:[{
key: '0_0_0',
data: {label: 'Tax'},
selectable: false,
styleClass: 'department-cfo'
},
{
key: '0_0_1',
data: {label: 'Legal'},
selectable: false,
styleClass: 'department-cfo'
}],
},
{
key: '0_1',
type: 'person',
styleClass: 'p-person',
data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
children:[{
key: '0_1_0',
data: {label: 'Operations'},
selectable: false,
styleClass: 'department-coo'
}]
},
{
key: '0_2',
type: 'person',
styleClass: 'p-person',
data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
children:[{
key: '0_2_0',
data: {label: 'Development'},
selectable: false,
styleClass: 'department-cto',
children:[{
key: '0_2_0_0',
data: {label: 'Analysis'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_0_1',
data: {label: 'Front End'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_0_2',
data: {label: 'Back End'},
selectable: false,
styleClass: 'department-cto'
}]
},
{
key: '0_2_1',
data: {label: 'QA'},
selectable: false,
styleClass: 'department-cto'
},
{
key: '0_2_2',
data: {label: 'R&D'},
selectable: false,
styleClass: 'department-cto'
}]
}
]
},
collapsible: true,
selectionMode: 'single',
selectionKeys: {}
},
slots: {
slots: {
default: `
<template #default="slotProps">
<span>{{slotProps.node.data.label}}</span>
</template>
`,
person: `
<template #person="slotProps">
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
<div class="node-content">
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>
`
}
}
});
});
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.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
});
it('should collapsed and expand', async () => {
await wrapper.vm.onNodeToggle(wrapper.vm.value);
expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-up');
expect(wrapper.emitted()['node-collapse'][0]).toEqual([wrapper.vm.value]);
expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ '0': true }]);
expect(wrapper.vm.d_collapsedKeys).toEqual({ '0': true });
await wrapper.vm.onNodeToggle(wrapper.vm.value);
expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
expect(wrapper.emitted()['node-expand'][0]).toEqual([wrapper.vm.value]);
expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{}]);
expect(wrapper.vm.d_collapsedKeys).toEqual({});
});
it('should item select and unselect', async () => {
const contents = wrapper.findAll('.p-organizationchart-node-content');
await wrapper.vm.onNodeClick(wrapper.vm.value);
expect(wrapper.emitted()['node-select'][0]).toEqual([wrapper.vm.value]);
expect(wrapper.emitted()['update:selectionKeys'][0]).toEqual([{ '0': true }]);
await wrapper.setProps({ selectionKeys: { '0': true } });
expect(contents[0].classes()).toContain('p-highlight');
await wrapper.vm.onNodeClick(wrapper.vm.value);
expect(wrapper.emitted()['node-unselect'][0]).toEqual([wrapper.vm.value]);
expect(wrapper.emitted()['update:selectionKeys'][1]).toEqual([{}]);
await wrapper.setProps({ selectionKeys: {} });
expect(contents[0].classes()).not.toContain('p-highlight');
});
});

47
src/components/overlaypanel/OverlayPanel.spec.js Normal file
View File

@ -0,0 +1,47 @@
import { mount } from '@vue/test-utils';
import PrimeVue from '@/components/config/PrimeVue';
import OverlayPanel from './OverlayPanel.vue';
describe('OverlayPanel.vue', () => {
let wrapper;
beforeEach(async () => {
wrapper = mount(OverlayPanel, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true
}
},
props: {
showCloseIcon: true,
ariaCloseLabel: 'exit'
},
slots: {
default: 'PrimeVue'
}
});
await wrapper.vm.toggle({}, {});
});
it('should exist', () => {
expect(wrapper.find('.p-overlaypanel.p-component').exists()).toBe(true);
expect(wrapper.find('.p-overlaypanel-content').exists()).toBe(true);
expect(wrapper.find('.p-overlaypanel-content').text()).toBe('PrimeVue');
expect(wrapper.find('.p-overlaypanel-close').exists()).toBe(true);
expect(wrapper.find('.p-overlaypanel-close').attributes()['aria-label']).toBe('exit');
});
it('should toggle itself', async () => {
await wrapper.vm.toggle({}, {});
expect(wrapper.find('.p-overlaypanel.p-component').exists()).toBe(false);
});
it('should close icon work', async () => {
await wrapper.vm.hide();
expect(wrapper.vm.visible).toBe(false);
});
});

49
src/components/paginator/Paginator.spec.js Normal file
View File

@ -0,0 +1,49 @@
import { mount } from '@vue/test-utils';
import Paginator from './Paginator.vue';
describe('Paginator.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Paginator, {
props: {
rows: 10,
totalRecords: 120,
rowsPerPageOptions: [10,20,30]
}
});
});
it('should exist', () => {
expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
expect(wrapper.find('.p-paginator-icon.pi-angle-double-left').exists()).toBe(true);
expect(wrapper.find('.p-paginator-icon.pi-angle-right').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.find('.p-paginator-first').classes()).toContain('p-disabled');
expect(wrapper.find('.p-paginator-prev').classes()).toContain('p-disabled');
expect(wrapper.vm.pageCount).toBe(12);
});
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.find('.p-paginator-next').classes()).toContain('p-disabled');
expect(wrapper.find('.p-paginator-last').classes()).toContain('p-disabled');
});
it('should change row count', async () => {
await wrapper.vm.onRowChange(20);
expect(wrapper.vm.d_rows).toBe(20);
expect(wrapper.emitted()['update:rows'][0]).toEqual([20]);
expect(wrapper.vm.pageCount).toBe(6);
await wrapper.setProps({ rows: 20 });
expect(wrapper.find('.p-dropdown-label').text()).toBe('20');
});
});

33
src/components/panel/Panel.spec.js Normal file
View File

@ -0,0 +1,33 @@
import { mount } from '@vue/test-utils';
import Panel from './Panel.vue';
describe('Panel.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Panel, {
props: {
header: 'PrimeVue'
},
slots: {
default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>'
}
});
});
it('should exist', () => {
expect(wrapper.find('.p-panel.p-component').exists()).toBe(true);
expect(wrapper.find('.p-panel-content').text()).toBe('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt');
expect(wrapper.find('.p-panel-title').text()).toBe('PrimeVue');
});
it('should be toggleable', async () => {
await wrapper.setProps({ toggleable: true });
expect(wrapper.find('.p-panel.p-component').classes()).toContain('p-panel-toggleable');
await wrapper.vm.toggle({});
expect(wrapper.emitted().toggle[0]).toEqual([{originalEvent: {}, value: true}]);
});
});