datatable tests fixed

src/components/datatable/DataTable.spec.js

@@ -198,38 +198,17 @@ describe('DataTable.vue', () => {
                             <Column header="Profits" :colspan="2" />
                         </Row>
                         <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
+                            <Column header="Last Year"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
+                            <Column header="This Year"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
+                            <Column header="Last Year"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
+                            <Column header="This Year"/>
                         </Row>
                     </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
                     <ColumnGroup type="footer">
                         <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
+                            <Column footer="Totals:" :colspan="3"/>
-                            <Column :footer="lastYearTotal" />
+                            <Column footer="Last Year Total" />
-                            <Column :footer="thisYearTotal" />
+                            <Column footer="This Year Total" />
                         </Row>
                     </ColumnGroup>
                 </DataTable>
@@ -270,102 +249,10 @@ describe('DataTable.vue', () => {
                 }
             }
         });
+
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header');
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer');
-    });
 
-    it('should column group and row templating', () => {
-        wrapper = mount({
-            components: {
-                DataTable,
-                ColumnGroup,
-                Row,
-                Column
-            },
-            template: `
-                <DataTable :value="sales" responsiveLayout="scroll">
-                    <ColumnGroup type="header">
-                        <Row>
-                            <Column header="Product" :rowspan="3" />
-                            <Column header="Sale Rate" :colspan="4" />
-                        </Row>
-                        <Row>
-                            <Column header="Sales" :colspan="2" />
-                            <Column header="Profits" :colspan="2" />
-                        </Row>
-                        <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
-                        </Row>
-                    </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
-                    <ColumnGroup type="footer">
-                        <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                            <Column :footer="lastYearTotal" />
-                            <Column :footer="thisYearTotal" />
-                        </Row>
-                    </ColumnGroup>
-                </DataTable>
-            `,
-            data() {
-                return {
-                    sales: null
-                }
-            },
-            created() {
-                this.sales = [
-                    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-                    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-                    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
-                ];
-            },
-            methods: {
-                formatCurrency(value) {
-                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-                }
-            },
-            computed: {
-                lastYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.lastYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                },
-                thisYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.thisYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                }
-            }
-        });
         const headerRows = wrapper.findAll('.p-datatable-thead > tr');
 
         expect(headerRows.length).toEqual(3);
@@ -384,150 +271,78 @@ describe('DataTable.vue', () => {
         expect(headerRows[2].findAll('th')[1].text()).toEqual('This Year');
         expect(headerRows[2].findAll('th')[2].text()).toEqual('Last Year');
         expect(headerRows[2].findAll('th')[3].text()).toEqual('This Year');
-    });
 
-    it('should column group templating', () => {
-        wrapper = mount({
-            components: {
-                DataTable,
-                ColumnGroup,
-                Row,
-                Column
-            },
-            template: `
-                <DataTable :value="sales" responsiveLayout="scroll">
-                    <ColumnGroup type="header">
-                        <Row>
-                            <Column header="Product" :rowspan="3" />
-                            <Column header="Sale Rate" :colspan="4" />
-                        </Row>
-                        <Row>
-                            <Column header="Sales" :colspan="2" />
-                            <Column header="Profits" :colspan="2" />
-                        </Row>
-                        <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
-                        </Row>
-                    </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
-                    <ColumnGroup type="footer">
-                        <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                            <Column :footer="lastYearTotal" />
-                            <Column :footer="thisYearTotal" />
-                        </Row>
-                    </ColumnGroup>
-                </DataTable>
-            `,
-            data() {
-                return {
-                    sales: null
-                }
-            },
-            created() {
-                this.sales = [
-                    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-                    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-                    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
-                ];
-            },
-            methods: {
-                formatCurrency(value) {
-                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-                }
-            },
-            computed: {
-                lastYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.lastYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                },
-                thisYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.thisYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                }
-            }
-        });
         const footerRows = wrapper.findAll('.p-datatable-tfoot > tr');
 
         expect(footerRows.length).toEqual(1);
 
         expect(footerRows[0].findAll('td')[0].attributes().colspan).toEqual('3');
-        expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
+        expect(footerRows[0].findAll('td')[1].text()).toEqual('Last Year Total');
-        expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
+        expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
-    });
-
-
-    // pagination
-    it('should have a paginator', async () => {
-        await wrapper.setProps({ value: data, paginator: true, rows: 5 });
-
-        expect(wrapper.find('.p-paginator').exists()).toBe(true);
-        expect(wrapper.findAll('.p-paginator-page').length).toEqual(2);
-        expect(wrapper.find('.p-paginator-next').exists()).toBe(true);
-        expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled');
-        expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-highlight');
-        expect(wrapper.find('.p-paginator-current').text()).toBe('Showing 1 to 5 of 10');
-
-        await wrapper.vm.onPage({page: 1, first: 5, rows: 5, pageCount: 2});
-        
-        expect(wrapper.findAll('.p-paginator-page')[0].classes()).not.toContain('p-highlight');
-        expect(wrapper.findAll('.p-paginator-page')[1].classes()).toContain('p-highlight');
     });
 
 
     // sorting
     it('should single sort', async () => {
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
+
         const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
         const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
 
         await sortableTH.trigger('click');
 
         expect(headerClick).toHaveBeenCalled();
         expect(sortableTH.classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
         expect(wrapper.emitted()['update:sortField'][0]).toEqual(['code']);
         expect(wrapper.emitted()['value-change'][0]).not.toBeNull();
     });
 
     it('should multiple sort', async () => {
-        const sortableTHs = wrapper.findAll('.p-sortable-column');
+        wrapper = mount(DataTable, {
-        const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                sortMode: 'multiple'
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
 
-        await wrapper.setProps({ sortMode: 'multiple' });
+        const sortableTHs = wrapper.findAll('.p-sortable-column');
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+        const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
 
         await sortableTHs[0].trigger('click');
 
         expect(headerClick).toHaveBeenCalled();
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
+
+        const seconCellText = wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text();
 
         await sortableTHs[1].trigger('click');
 
@@ -536,31 +351,74 @@ describe('DataTable.vue', () => {
         expect(wrapper.emitted()['update:multiSortMeta'][0]).toEqual([[{ field: 'code', order: 1 }]]);
         expect(wrapper.emitted()['update:multiSortMeta'][1]).toEqual([[{ field: 'name', order: 1 }]]);
         expect(wrapper.emitted()['value-change'][0]).not.toEqual(wrapper.emitted()['value-change'][1]);
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text()).not.toEqual(seconCellText);
     });
 
     it('should have presort', async () => {
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                sortOrder: -1,
+                sortField: 'code'
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
+
         const presortedTH = wrapper.findAll('.p-sortable-column')[0];
 
-        await wrapper.setProps({ sortOrder: -1, sortField: 'code' });
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual('Game Controller');
-
         expect(presortedTH.classes()).toContain('p-highlight');
     });
 
     it('should remove sort', async () => {
-        const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                removableSort: true
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
 
-        await wrapper.setProps({ removableSort: true });
+        const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
 
         await sortableTH.trigger('click');
         
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('ascending');
 
+        const updatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
         await sortableTH.trigger('click');
 
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(updatedFirstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('descending');
 
+        const latestUpdatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
         await sortableTH.trigger('click');
 
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(latestUpdatedFirstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('none');
     });
 
@@ -1301,8 +1159,7 @@ describe('DataTable.vue', () => {
         expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating');
     });
 
-    // expandable row groups
+    it('should have expandable row groups and expand rows', async () => {
-    it('should expand', () => {
         wrapper = mount(DataTable, {
             global: {
                 components: {
@@ -1310,31 +1167,124 @@ describe('DataTable.vue', () => {
                 }
             },
             props: {
-                value: smallData,
+                value: [
+                    {
+                        "id":1000,
+                        "name":"James Butt",
+                        "country":{
+                            "name":"Algeria",
+                            "code":"dz"
+                        },
+                        "company":"Benton, John B Jr",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1001,
+                        "name":"Josephine Darakjy",
+                        "country":{
+                            "name":"Egypt",
+                            "code":"eg"
+                        },
+                        "company":"Chanay, Jeffrey A Esq",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    },
+                    {
+                        "id":1013,
+                        "name":"Graciela Ruta",
+                        "country":{
+                            "name":"Chile",
+                            "code":"cl"
+                        },
+                        "company":"Buckley Miller & Wright",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    },
+                    {
+                        "id":1021,
+                        "name":"Veronika Inouye",
+                        "country":{
+                            "name":"Ecuador",
+                            "code":"ec"
+                        },
+                        "company":"C 4 Network Inc",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1026,
+                        "name":"Chanel Caudy",
+                        "country":{
+                            "name":"Argentina",
+                            "code":"ar"
+                        },
+                        "company":"Professional Image Inc",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1027,
+                        "name":"Ezekiel Chui",
+                        "country":{
+                            "name":"Ireland",
+                            "code":"ie"
+                        },
+                        "company":"Sider, Donald C Esq",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    }
+                ],
                 rowGroupMode: 'subheader',
-                groupRowsBy: 'name',
+                groupRowsBy: 'representative.name',
                 sortMode: 'single',
-                sortField: 'name',
+                sortField: 'representative.name',
                 sortOrder: 1,
                 scrollable: true,
                 expandableRowGroups: true,
-                expandedRowGroups: ['Blue Band']
+                expandedRowGroups: null,
+                responsiveLayout: 'scroll'
             },
             slots: {
                 default: `
-                    <Column field="code" header="Code"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
                     <Column field="name" header="Name"></Column>
+                    <Column field="country" header="Country"></Column>
+                    <Column field="company" header="Company"></Column>
                 `,
-                groupheader: `GroupHeader Templating`,
+                groupheader: `
-                groupfooter: `GroupFooter Templating`
+                    <template #groupheader="slotProps">
+                        <span class="image-text">{{slotProps.data.representative.name}}</span>
+                    </template>
+                `
             }
         });
 
-        expect(wrapper.find('.p-column-title').text()).toBe('Code');
+        expect(wrapper.findAll('.p-datatable-thead > tr > th').length).toBe(3);
+        expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header').length).toBe(2);
+        expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header')[0].text()).toBe('Amy Elsner');
+
+        const firstToggler = wrapper.findAll('.p-row-toggler')[0];
+
+        await firstToggler.trigger('click');
+
+        expect(wrapper.emitted()['update:expandedRowGroups'][0]).toEqual([['Amy Elsner']]);
+        expect(wrapper.emitted()['rowgroup-expand'][0][0].data).toBe('Amy Elsner');
     });
 
-    // rowspan grouping
+    it('should have rowspan grouping', async () => {
-    it('should rowspan', async () => {
         wrapper = mount(DataTable, {
             global: {
                 components: {
@@ -1342,25 +1292,65 @@ describe('DataTable.vue', () => {
                 }
             },
             props: {
-                value: smallData,
+                value: [
+                    {
+                        "id": "1000",
+                        "code": "vbb124btr",
+                        "name": "Game Controller"
+                    },
+                    {
+                        "id": "1001",
+                        "code": "nvklal433",
+                        "name": "Black Watch"
+                    },
+                    {
+                        "id": "1002",
+                        "code": "zz21cz3c1",
+                        "name": "Blue Band"
+                    },
+                    {
+                        "id": "1003",
+                        "code": "vbb124btrvbb124btr",
+                        "name": "Game Controller"
+                    },
+                    {
+                        "id": "1004",
+                        "code": "nvklal433nvklal433",
+                        "name": "Black Watch"
+                    },
+                    {
+                        "id": "1006",
+                        "code": "zz21cz3c1zz21cz3c1",
+                        "name": "Blue Band"
+                    }
+                ],
                 rowGroupMode: 'rowspan',
                 groupRowsBy: 'name',
                 sortMode: 'single',
                 sortField: 'name',
                 sortOrder: 1,
-                scrollable: true
+                scrollable: true,
+                responsiveLayout: 'scroll'
             },
             slots: {
                 default: `
-                    <Column field="code" header="Code"></Column>
+                    <Column header="#">
+                        <template #body="slotProps">
+                            {{slotProps.index}}
+                        </template>
+                    </Column>
                     <Column field="name" header="Name"></Column>
-                `,
+                    <Column field="code" header="Code"></Column>
-                groupheader: `GroupHeader Templating`,
+                `
-                groupfooter: `GroupFooter Templating`
             }
         });
 
-        expect(wrapper.find('td > span').text()).toBe('Code');
+        expect(wrapper.find('.p-datatable-thead > tr').findAll('th')[0].text()).toBe('#');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[0].text()).toBe('0');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).toBe('Black Watch');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].attributes().rowspan).toBe('2');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[2].findAll('td')[1].attributes().rowspan).toBe('2');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
     });
 
 

untitled

@@ -1,185 +0,0 @@
-// 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())
-
-//     });
-// });