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

Merge pull request #2456 from tugcekucukoglu/datatable-testing 

DataTable tests added
pull/2457/head
Tuğçe Küçükoğlu 2022-04-18 15:29:37 +03:00 committed by GitHub
parent 5d81a04bbe bd135fbd55
commit 10ab377f44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 1608 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1423
src/components/datatable/DataTable.spec.js Normal file
View File

File diff suppressed because it is too large Load Diff

185
untitled Normal file
View File

@ -0,0 +1,185 @@
// window.HTMLElement.prototype.getBoundingClientRect = function () {};
it('should filtercallback work', async () => {
wrapper = mount({
components: {
DataTable,
Column,
Button,
InputText
},
template: `
<DataTable :value="value" v-model:filters="filters" :globalFilterFields="['code', 'name']" filterDisplay="row">
<template #header>
<div class="flex justify-content-end">
<span class="p-input-icon-left ">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div>
</template>
<Column field="code" header="Code">
<template #body="{data}">
{{data.code}}
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
</template>
</Column>
<Column field="name" header="Name">
<template #body="{data}">
{{data.name}}
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
</template>
</Column>
</DataTable>
`,
data() {
return {
value: smallData,
filters: null
}
},
created() {
this.initFilters1();
},
methods: {
clearFilter1() {
this.initFilters1();
},
initFilters1() {
this.filters = {
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
'code': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
}
}
}
});
const inputs = wrapper.findAll('input.p-column-filter');
// const onFilterApply = jest.spyOn(wrapper.vm, 'onFilterApply');
console.log(inputs[0].html())
// inputs[0].element.value = 'z';
// await inputs[0].setValue('z');
// await inputs[0].trigger('keydown.enter');
await inputs[0].trigger('input', { key: 'z' });
await wrapper.vm.$nextTick();
// expect(onFilterApply).toHaveBeenCalled();
console.log(wrapper.vm.filters.code)
});
it('should start drag over the column', async () => {
const firstTH = wrapper.findAll('th')[0];
const headerContent = wrapper.findAll('.p-column-header-content')[0];
console.log(firstTH)
await wrapper.setProps({ reorderableColumns: true });
await wrapper.vm.onColumnHeaderDragStart({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, dataTransfer: { setData: () => {}} });
await wrapper.vm.onColumnHeaderDragOver({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
await wrapper.vm.onColumnHeaderDragLeave({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
await wrapper.vm.onColumnHeaderDrop({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
console.log(wrapper.componentVM.draggedColumn)
});
it('should have row styling', async () => {
await wrapper.setProps({ rowClass: (data) => {console.log(data)}});
console.log()
});
// describe('DataTable and ContextMenu', () => {
// it('should exist', async () => {
// const wrapper = mount({
// global: {
// mocks: {
// $primevue: {
// config: {
// 'ripple': true,
// 'inputStyle': 'outlined'
// }
// }
// },
// stubs: ['router-link'],
// },
// components: {
// DataTable,
// Column,
// ContextMenu
// },
// template: `
// <DataTable :value="smallData" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
// <Column field="code" header="Code"></Column>
// <Column field="name" header="Name"></Column>
// </DataTable>
// <ContextMenu :model="menuModel" ref="cm" />
// `,
// data() {
// return {
// smallData: [
// {
// "id": "1000",
// "code": "vbb124btr",
// "name": "Game Controller"
// },
// {
// "id": "1001",
// "code": "nvklal433",
// "name": "Black Watch"
// },
// {
// "id": "1002",
// "code": "zz21cz3c1",
// "name": "Blue Band"
// }
// ],
// selectedProduct: null,
// menuModel: [
// {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
// {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
// ]
// }
// },
// methods: {
// onRowContextMenu(event) {
// this.$refs.cm.show(event.originalEvent);
// },
// viewProduct(product) {
// console.log(product);
// },
// deleteProduct(product) {
// this.products = this.products.filter((p) => p.id !== product.id);
// this.selectedProduct = null;
// },
// }
// });
// const firstTD = wrapper.findAll('td')[0];
// const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}};
// wrapper.componentVM.onRowContextMenu({ originalEvent: { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}} });
// // console.log(wrapper.html())
// });
// });