import { mount } from '@vue/test-utils';
import DataTable from './DataTable.vue';
import ColumnGroup from '@/components/columngroup/ColumnGroup.vue';
import Row from '@/components/row/Row.vue';
import Column from '@/components/column/Column.vue';
import Button from '@/components/button/Button.vue';
import InputText from '@/components/inputtext/InputText.vue';
import {FilterMatchMode} from 'primevue/api';

window.URL.createObjectURL = function() {};

const smallData = [
    {
        "id": "1000",
        "code": "vbb124btr",
        "name": "Game Controller"
    },
    {
        "id": "1001",
        "code": "nvklal433",
        "name": "Black Watch"
    },
    {
        "id": "1002",
        "code": "zz21cz3c1",
        "name": "Blue Band"
    }
];

const data = [
    {
        "id": "1000",
        "code": "vbb124btr",
        "name": "Game Controller"
    },
    {
        "id": "1001",
        "code": "nvklal433",
        "name": "Black Watch"
    },
    {
        "id": "1002",
        "code": "zz21cz3c1",
        "name": "Blue Band"
    },
    {
        "id": "1003",
        "code": "244wgerg2",
        "name": "Blue T-Shirt"
    },
    {
        "id": "1004",
        "code": "h456wer53",
        "name": "Bracelet"
    },
    {
        "id": "1005",
        "code": "cm230f032",
        "name": "Gaming Set"
    },
    {
        "id": "1006",
        "code": "bib36pfvm",
        "name": "Chakra Bracelet"
    },
    {
        "id": "1007",
        "code": "mbvjkgip5",
        "name": "Galaxy Earrings"
    },
    {
        "id": "1008",
        "code": "f230fh0g3",
        "name": "Bamboo Watch"
    },
    {
        "id": "1009",
        "code": "av2231fwg",
        "name": "Brown Purse"
    }
];

describe('DataTable.vue', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column,
                    Button
                }
            },
            props: {
                value: smallData,
                expandedRows: [],
                paginatorTemplate: 'CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
                rowsPerPageOptions: [5, 6, 7],
                currentPageReportTemplate: 'Showing {first} to {last} of {totalRecords}'
            },
            slots: {
                default: `
                    <Column :expander="true" />
                    <Column field="code" header="Code" sortable></Column>
                    <Column field="name" header="Name" sortable></Column>
                `,
                header: `Header Templating`,
                footer: `Footer Templating`,
                expansion: `Expansion Templating`,
                empty: `Empty Templating`,
                paginatorstart: `Paginator Start Templating`,
                paginatorend: `Paginator End Templating`
            }
        });
    });

    it('should exist', () => {
        expect(wrapper.find('.p-datatable.p-component').exists()).toBe(true);
        expect(wrapper.find('.p-datatable-wrapper').exists()).toBe(true);
        expect(wrapper.find('table.p-datatable-table').exists()).toBe(true);
        expect(wrapper.find('thead.p-datatable-thead').exists()).toBe(true);
        expect(wrapper.find('tbody.p-datatable-tbody').exists()).toBe(true);
    });

    it('should have basic demo', () => {
        expect(wrapper.findAll('.p-column-header-content').length).toEqual(3);
        const tbody = wrapper.find('.p-datatable-tbody');

        expect(tbody.findAll('tr').length).toEqual(3);

        const rows = tbody.findAll('tr');

        expect(rows[0].findAll('td').length).toEqual(3);
    });


    // table templating
    it('should have header template', () => {
        expect(wrapper.find('.p-datatable-header').exists()).toBe(true);
        expect(wrapper.find('.p-datatable-header').text()).toBe('Header Templating');
    });

    it('should have footer template', () => {
        expect(wrapper.find('.p-datatable-footer').exists()).toBe(true);
        expect(wrapper.find('.p-datatable-footer').text()).toBe('Footer Templating');
    });

    it('should have expansion template', async () => {
        await wrapper.setProps({ expandedRows: [smallData[0]] });

        expect(wrapper.find('tr.p-datatable-row-expansion').exists()).toBe(true);
        expect(wrapper.find('tr.p-datatable-row-expansion').text()).toBe('Expansion Templating');
    });

    it('should have empty templating', async () => {
        await wrapper.setProps({ value: [] });

        expect(wrapper.find('tr.p-datatable-emptymessage').exists()).toBe(true);
        expect(wrapper.find('tr.p-datatable-emptymessage').text()).toBe('Empty Templating');
    });

    it('should have paginatorstart templating', async () => {
        await wrapper.setProps({ value: data, paginator: true, rows: 5 });

        expect(wrapper.find('.p-paginator-left-content').exists()).toBe(true);
        expect(wrapper.find('.p-paginator-left-content').text()).toBe('Paginator Start Templating');
    });

    it('should have paginatorend templating', async () => {
        await wrapper.setProps({ value: data, paginator: true, rows: 5 });

        expect(wrapper.find('.p-paginator-right-content').exists()).toBe(true);
        expect(wrapper.find('.p-paginator-right-content').text()).toBe('Paginator End Templating');
    });


    // column templating


    // column grouping
    it('should exist', () => {
        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"/>
                            <Column header="This Year"/>
                            <Column header="Last Year"/>
                            <Column header="This Year"/>
                        </Row>
                    </ColumnGroup>
                    <ColumnGroup type="footer">
                        <Row>
                            <Column footer="Totals:" :colspan="3"/>
                            <Column footer="Last Year Total" />
                            <Column footer="This Year Total" />
                        </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);
                }
            }
        });

        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header');
        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer');

        const headerRows = wrapper.findAll('.p-datatable-thead > tr');

        expect(headerRows.length).toEqual(3);

        expect(headerRows[0].findAll('th')[0].attributes().rowspan).toEqual('3');
        expect(headerRows[0].findAll('th')[1].attributes().colspan).toEqual('4');
        expect(headerRows[0].findAll('th')[0].text()).toEqual('Product');
        expect(headerRows[0].findAll('th')[1].text()).toEqual('Sale Rate');

        expect(headerRows[1].findAll('th')[0].attributes().colspan).toEqual('2');
        expect(headerRows[1].findAll('th')[1].attributes().colspan).toEqual('2');
        expect(headerRows[1].findAll('th')[0].text()).toEqual('Sales');
        expect(headerRows[1].findAll('th')[1].text()).toEqual('Profits');

        expect(headerRows[2].findAll('th')[0].text()).toEqual('Last Year');
        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');

        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')[1].text()).toEqual('Last Year Total');
        expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
    });


    // 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 () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                sortMode: 'multiple'
            },
            slots: {
                default: `
                    <Column field="code" header="Code" sortable></Column>
                    <Column field="name" header="Name" sortable></Column>
                `
            }
        });

        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');

        expect(headerClick).toHaveBeenCalled();
        expect(sortableTHs[1].classes()).toContain('p-highlight');
        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];

        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 () => {
        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>
                `
            }
        });

        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');
    });


    // filtering
    it('should filtered globally', async () => {
        await wrapper.setProps({ filters: { 'global': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} }});

        await wrapper.vm.filter(smallData);

        expect(wrapper.emitted().filter[0][0].filteredValue.length).not.toEqual(3);
    });

    it('should filtered with menu display', async () => {
        await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
            filterDisplay: 'menu',
            globalFilterFields: ['name']
        });

        await wrapper.vm.filter(smallData);

        expect(wrapper.emitted()['filter'][0][0].filteredValue.length).not.toEqual(3);
        expect(wrapper.emitted()['value-change'][0][0].length).not.toEqual(3);
    });

    it('should filtered with row display', async () => {
        await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
            filterDisplay: 'row',
            globalFilterFields: ['name']
        });

        await wrapper.vm.filter(smallData);

        expect(wrapper.emitted()['filter'][0][0].filteredValue.length).not.toEqual(3);
        expect(wrapper.emitted()['value-change'][0][0].length).not.toEqual(3);
    });

    // selection
    it('should single select', async () => {
        await wrapper.setProps({ selection: null, selectionMode: 'single'});

        await wrapper.vm.onRowClick({
            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[0]},
            data: smallData[0],
            index: 0
        });

        expect(wrapper.emitted()['row-click'][0][0].index).toEqual(0);
        expect(wrapper.emitted()['update:selection'][0][0]).toEqual(smallData[0]);
        expect(wrapper.emitted()['row-select'][0][0].index).toEqual(0);
    });

    it('should multiple selection with meta key', async () => {
        await wrapper.setProps({ selection: null, selectionMode: 'multiple'});

        await wrapper.vm.onRowClick({
            originalEvent: {shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0]},
            data: smallData[0],
            index: 0
        });

        await wrapper.vm.onRowClick({
            originalEvent: {shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1]},
            data: smallData[1],
            index: 1
        });

        expect(wrapper.emitted()['row-click'][0][0].index).toEqual(0);
        expect(wrapper.emitted()['row-click'][1][0].index).toEqual(1);
        expect(wrapper.emitted()['update:selection'][1][0]).toEqual([smallData[0], smallData[1]]);
    });

    it('should multiple selection without meta key', async () => {
        await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false});

        await wrapper.vm.onRowClick({
            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[0]},
            data: smallData[0],
            index: 0
        });

        await wrapper.vm.onRowClick({
            originalEvent: {target: wrapper.findAll('tr.p-selectable-row')[1]},
            data: smallData[1],
            index: 1
        });

        expect(wrapper.emitted()['row-click'][0][0].index).toEqual(0);
        expect(wrapper.emitted()['row-click'][1][0].index).toEqual(1);
        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([smallData[0]]);
        expect(wrapper.emitted()['update:selection'][1][0]).toEqual([smallData[1]]);
        expect(wrapper.emitted()['row-select'][0][0].index).toBe(0);
        expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
    });

    // radio selection
    it('should select when radiobutton selection is enabled', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                selection: null
            },
            slots: {
                default: `
                    <Column selectionMode="single" />
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });
        
        expect(wrapper.findAll('td.p-selection-column').length).toBe(3);
        expect(wrapper.findAll('.p-radiobutton').length).toBe(3);

        await wrapper.vm.toggleRowWithRadio({originalEvent: {}, data: smallData[0], index: 0});

        expect(wrapper.emitted()['update:selection'][0][0]).toEqual(smallData[0]);
        expect(wrapper.emitted()['row-select'][0][0].index).toBe(0);

        await wrapper.vm.toggleRowWithRadio({originalEvent: {}, data: smallData[1], index: 1});

        expect(wrapper.emitted()['update:selection'][1][0]).toEqual(smallData[1]);
        expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
    });

    // checkbox selection
    it('should select when checkbox selection is enabled', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                selection: null
            },
            slots: {
                default: `
                    <Column selectionMode="multiple" />
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        expect(wrapper.findAll('.p-checkbox').length).toBe(4);

        await wrapper.vm.toggleRowWithCheckbox({originalEvent: {}, data: smallData[0], index: 0});

        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([smallData[0]]);
        expect(wrapper.emitted()['row-select'][0][0].index).toBe(0);

        await wrapper.vm.toggleRowWithCheckbox({originalEvent: {}, data: smallData[1], index: 1});

        expect(wrapper.emitted()['update:selection'][1][0]).toEqual([smallData[1]]);
        expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
    });

    it('should select all rows', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                selection: null
            },
            slots: {
                default: `
                    <Column selectionMode="multiple" />
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        await wrapper.vm.toggleRowsWithCheckbox({originalEvent: {}, checked: true});

        expect(wrapper.emitted()['row-select-all'][0][0].data).toEqual(smallData);
        expect(wrapper.emitted()['update:selection'][0][0]).toEqual(smallData);
    });

    it('should unselect all rows', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                selection: smallData
            },
            slots: {
                default: `
                    <Column selectionMode="multiple" />
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        await wrapper.vm.toggleRowsWithCheckbox({originalEvent: {}, checked: false});

        expect(wrapper.emitted()['row-unselect-all'][0][0].data).toBe(undefined);
        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([]);
    });


    // scrolling
    it('should scrolling', async () => {
        await wrapper.setProps({scrollable: true});

        expect(wrapper.find('.p-datatable-scrollable').exists()).toBe(true);
    });

    it('should vertical scroll', async () => {
        await wrapper.setProps({scrollable: true, scrollHeight: '100px'});

        expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('max-height: 100px;');
    });

    it('should flex scrolling', async () => {
        await wrapper.setProps({scrollable: true, scrollHeight: 'flex'});

        expect(wrapper.find('.p-datatable-flex-scrollable').exists()).toBe(true);
    });

    it('should both scrolling', async () => {
        await wrapper.setProps({scrollable: true, scrollHeight: '100px', scrollDirection: 'both'});

        expect(wrapper.find('.p-datatable-scrollable-both').exists()).toBe(true);
    });

    it('should have frozen rows', async () => {
        await wrapper.setProps({frozenValue: [smallData[0]], scrollable: true, scrollHeight: '100px', scrollDirection: 'both'});

        expect(wrapper.findAll('.p-datatable-tbody')[0].classes()).toContain('p-datatable-frozen-tbody');
        expect(wrapper.findAll('.p-datatable-tbody')[0].attributes().style).toBe('top: 0px;');
    });

    // frozen columns
    it('should have frozen columns', () => {
        wrapper = null;
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                selection: null,
                scrollable: true,
                scrollDirection: 'both'
            },
            slots: {
                default: `
                    <Column field="code" header="Code" frozen></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        expect(wrapper.find('th.p-frozen-column').exists()).toBe(true);
        // expect(wrapper.find('th.p-frozen-column').attributes().style).toBe('left: 0px;');
        expect(wrapper.findAll('td.p-frozen-column').length).toBe(3);
        // expect(wrapper.findAll('td.p-frozen-column')[0].attributes().style).toBe('left: 0px;');
    });


    // lazy loading


    // row expansion
    it('should have row toggler', () => {
        expect(wrapper.findAll('.p-row-toggler').length).toBe(3);
    });

    it('should expand a row', async () => {
        await wrapper.setProps({ expandedRows: [] });

        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0]});

        expect(wrapper.emitted()['update:expandedRows'][0][0]).toEqual([smallData[0]]);
        expect(wrapper.emitted()['row-expand'][0][0].data).toEqual(smallData[0]);
    });

    it('should collapse a row', async () => {
        await wrapper.setProps({ expandedRows: [smallData[0]] });

        await wrapper.vm.toggleRow({ originalEvent: {}, data: smallData[0]});

        expect(wrapper.emitted()['update:expandedRows'][0][0]).toEqual([]);
        expect(wrapper.emitted()['row-collapse'][0][0].data).toEqual(smallData[0]);
    });


    // editing
    // cell editing

    // row editing
    it('should init row editing', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column,
                    InputText
                }
            },
            props: {
                value: smallData,
                editMode: 'row',
                editingRows: []
            },
            slots: {
                default: `
                    <Column field="code" header="Code">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column field="name" header="Name">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column :rowEditor="true" />
                `
            }
        });

        expect(wrapper.findAll('.p-editable-column').length).toBe(6);
        expect(wrapper.findAll('.p-row-editor-init').length).toBe(3);

        await wrapper.vm.onRowEditInit({ data: smallData[0] });

        expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([smallData[0]]);
        expect(wrapper.emitted()['row-edit-init'][0][0].data).toEqual(smallData[0]);
        expect(wrapper.findAll('.p-datatable-tbody > tr > td')[wrapper.findAll('.p-datatable-tbody > tr > td').length - 1].find('.p-row-editor-init').exists()).toBe(true);
    });

    it('should save row editing', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column,
                    InputText
                }
            },
            props: {
                value: smallData,
                editMode: 'row',
                editingRows: []
            },
            slots: {
                default: `
                    <Column field="code" header="Code">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column field="name" header="Name">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column :rowEditor="true" />
                `
            }
        });

        await wrapper.vm.onRowEditSave({data: { "id": "9999", "code": "vbb124btr", "name": "Game Controller"}});

        expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([]);
        expect(wrapper.emitted()['row-edit-save'][0][0].data).toEqual({ "id": "9999", "code": "vbb124btr", "name": "Game Controller"});
    });

    it('should cancel row editing', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column,
                    InputText
                }
            },
            props: {
                value: smallData,
                editMode: 'row',
                editingRows: []
            },
            slots: {
                default: `
                    <Column field="code" header="Code">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column field="name" header="Name">
                        <template #editor="{ data, field }">
                            <InputText v-model="data[field]" autofocus />
                        </template>
                    </Column>
                    <Column :rowEditor="true" />
                `
            }
        });
        
        await wrapper.vm.onRowEditCancel({ data: smallData[0] });

        expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([]);
        expect(wrapper.emitted()['row-edit-cancel'][0][0].data).toEqual(smallData[0]);
    });


    // column resize
    it('should fit mode expanding exists', () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'fit'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        expect(wrapper.find('.p-datatable.p-component').classes()).toContain('p-datatable-resizable');
        expect(wrapper.find('.p-datatable.p-component').classes()).toContain('p-datatable-resizable-fit');
        expect(wrapper.findAll('.p-column-resizer').length).toBe(2);
    });

    it('should fit mode resize start', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'fit'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        const resizer = wrapper.findAll('.p-column-resizer')[0];

        await wrapper.vm.onColumnResizeStart({target: resizer.element});

        expect(wrapper.componentVM.columnResizing).toBe(true);
        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
    });

    it('should fit mode resize', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'fit'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        await wrapper.vm.onColumnResize({});

        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: block;');
    });

    it('should fit mode column resize end', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'fit'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        const resizer = wrapper.findAll('.p-column-resizer')[0];

        await wrapper.vm.onColumnResizeStart({target: resizer.element});

        await wrapper.vm.onColumnResizeEnd();

        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
    });

    it('should expand mode resize start', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'expand'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        const resizer = wrapper.findAll('.p-column-resizer')[0];

        await wrapper.vm.onColumnResizeStart({target: resizer.element});

        expect(wrapper.componentVM.columnResizing).toBe(true);
        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
    });

    it('should fit mode resize', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'expand'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        await wrapper.vm.onColumnResize({});

        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: block;');
    });

    it('should fit mode column resize end', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                resizableColumns: true,
                columnResizeMode: 'expand'
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });

        const resizer = wrapper.findAll('.p-column-resizer')[0];

        await wrapper.vm.onColumnResizeStart({target: resizer.element});

        await wrapper.vm.onColumnResizeEnd();

        expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
    });


    // column reorder
    it('should reorder columns', async () => {
        await wrapper.setProps({ reorderableColumns: true });

        expect(wrapper.find('.p-datatable-reorder-indicator-up').exists()).toBe(true);
        expect(wrapper.find('.p-datatable-reorder-indicator-down').exists()).toBe(true);
    });


    // row reorder
    it('should exist', () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData
            },
            slots: {
                default: `
                    <Column :rowReorder="true" />
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `
            }
        });
        
        expect(wrapper.findAll('.p-datatable-reorderablerow-handle').length).toBe(3);
    });


    // row group
    // subheader grouping
    it('should exist', () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                rowGroupMode: 'subheader',
                groupRowsBy: 'name',
                sortMode: 'single',
                sortField: 'name',
                sortOrder: 1,
                scrollable: true
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `,
                groupheader: `GroupHeader Templating`,
                groupfooter: `GroupFooter Templating`
            }
        });

        expect(wrapper.find('.p-datatable-tbody').attributes().role).toBe('rowgroup');
        expect(wrapper.findAll('.p-column-header-content').length).toBe(1);
        expect(wrapper.find('.p-column-header-content').text()).toBe('Code');
    });

    it('should have groupheader templating', () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                rowGroupMode: 'subheader',
                groupRowsBy: 'name',
                sortMode: 'single',
                sortField: 'name',
                sortOrder: 1,
                scrollable: true
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `,
                groupheader: `GroupHeader Templating`,
                groupfooter: `GroupFooter Templating`
            }
        });

        expect(wrapper.findAll('.p-rowgroup-header').length).toBe(3);
        expect(wrapper.find('.p-rowgroup-header').text()).toBe('GroupHeader Templating');
    });

    it('should have groupfooter templating', () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                value: smallData,
                rowGroupMode: 'subheader',
                groupRowsBy: 'name',
                sortMode: 'single',
                sortField: 'name',
                sortOrder: 1,
                scrollable: true
            },
            slots: {
                default: `
                    <Column field="code" header="Code"></Column>
                    <Column field="name" header="Name"></Column>
                `,
                groupheader: `GroupHeader Templating`,
                groupfooter: `GroupFooter Templating`
            }
        });

        expect(wrapper.findAll('.p-rowgroup-header').length).toBe(3);
        expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating');
    });

    it('should have expandable row groups and expand rows', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                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: 'representative.name',
                sortMode: 'single',
                sortField: 'representative.name',
                sortOrder: 1,
                scrollable: true,
                expandableRowGroups: true,
                expandedRowGroups: null,
                responsiveLayout: 'scroll'
            },
            slots: {
                default: `
                    <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: `
                    <template #groupheader="slotProps">
                        <span class="image-text">{{slotProps.data.representative.name}}</span>
                    </template>
                `
            }
        });

        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');
    });

    it('should have rowspan grouping', async () => {
        wrapper = mount(DataTable, {
            global: {
                components: {
                    Column
                }
            },
            props: {
                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,
                responsiveLayout: 'scroll'
            },
            slots: {
                default: `
                    <Column header="#">
                        <template #body="slotProps">
                            {{slotProps.index}}
                        </template>
                    </Column>
                    <Column field="name" header="Name"></Column>
                    <Column field="code" header="Code"></Column>
                `
            }
        });

        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');
    });


    // export
    it('should export table', async () => {
        const exportCSV = jest.spyOn(wrapper.vm, 'exportCSV');

        await wrapper.vm.exportCSV();

        expect(exportCSV).toHaveBeenCalled();
    });


    // state
    it('should get storage', async () => {
        await wrapper.setProps({ stateStorage: 'session', stateKey: 'dt-state-demo-session', paginator: true });

        await wrapper.vm.getStorage();

        expect(wrapper.emitted()['state-save'][0]).not.toBeNull();
    });

    it('should save session storage', async () => {
        jest.spyOn(window.sessionStorage.__proto__, 'setItem');
        window.sessionStorage.__proto__.setItem = jest.fn();

        await wrapper.vm.saveState();

        expect(sessionStorage.setItem).toHaveBeenCalled();
        expect(wrapper.emitted()['state-save'][0]).not.toBeNull();
    });

    it('should save local storage', async () => {
        jest.spyOn(window.localStorage.__proto__, 'setItem');
        window.localStorage.__proto__.setItem = jest.fn();

        await wrapper.vm.saveState();

        expect(localStorage.setItem).toHaveBeenCalled();
        expect(wrapper.emitted()['state-save'][0]).not.toBeNull();
    });


    // contextmenu


    // responsive
    it('should have stack layout', () => {
        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-stack');
    });

    it('should have scroll layout', async () => {
        await wrapper.setProps({ responsiveLayout: 'scroll' });

        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-scroll');
    });


    // row styling
});