1413 lines
48 KiB
JavaScript
1413 lines
48 KiB
JavaScript
|
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
|
||
|
|
});
|