primevue-mirror/untitled

// 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())

//     });
// });