DataTable tests added
Tuğçe Küçükoğlu
parent
5d81a04bbe
commit
bd135fbd55
File diff suppressed because it is too large
Load Diff
|
|
@ -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())
|
||||
|
||||
// });
|
||||
// });
|
||||
Loading…
Reference in New Issue