diff --git a/src/components/datatable/DataTable.spec.js b/src/components/datatable/DataTable.spec.js
index 4d0d3af31..94bea83f5 100644
--- a/src/components/datatable/DataTable.spec.js
+++ b/src/components/datatable/DataTable.spec.js
@@ -198,38 +198,17 @@ describe('DataTable.vue', () => {
-
-
-
-
+
+
+
+
-
-
-
- {{slotProps.data.lastYearSale}}%
-
-
-
-
- {{slotProps.data.thisYearSale}}%
-
-
-
-
- {{formatCurrency(slotProps.data.lastYearProfit)}}
-
-
-
-
- {{formatCurrency(slotProps.data.thisYearProfit)}}
-
-
-
-
-
+
+
+
@@ -270,102 +249,10 @@ describe('DataTable.vue', () => {
}
}
});
+
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header');
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer');
- });
- it('should column group and row templating', () => {
- wrapper = mount({
- components: {
- DataTable,
- ColumnGroup,
- Row,
- Column
- },
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{slotProps.data.lastYearSale}}%
-
-
-
-
- {{slotProps.data.thisYearSale}}%
-
-
-
-
- {{formatCurrency(slotProps.data.lastYearProfit)}}
-
-
-
-
- {{formatCurrency(slotProps.data.thisYearProfit)}}
-
-
-
-
-
-
-
-
-
-
- `,
- data() {
- return {
- sales: null
- }
- },
- created() {
- this.sales = [
- {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
- {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
- {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
- ];
- },
- methods: {
- formatCurrency(value) {
- return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
- }
- },
- computed: {
- lastYearTotal() {
- let total = 0;
- for(let sale of this.sales) {
- total += sale.lastYearProfit;
- }
-
- return this.formatCurrency(total);
- },
- thisYearTotal() {
- let total = 0;
- for(let sale of this.sales) {
- total += sale.thisYearProfit;
- }
-
- return this.formatCurrency(total);
- }
- }
- });
const headerRows = wrapper.findAll('.p-datatable-thead > tr');
expect(headerRows.length).toEqual(3);
@@ -384,150 +271,78 @@ describe('DataTable.vue', () => {
expect(headerRows[2].findAll('th')[1].text()).toEqual('This Year');
expect(headerRows[2].findAll('th')[2].text()).toEqual('Last Year');
expect(headerRows[2].findAll('th')[3].text()).toEqual('This Year');
- });
- it('should column group templating', () => {
- wrapper = mount({
- components: {
- DataTable,
- ColumnGroup,
- Row,
- Column
- },
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{slotProps.data.lastYearSale}}%
-
-
-
-
- {{slotProps.data.thisYearSale}}%
-
-
-
-
- {{formatCurrency(slotProps.data.lastYearProfit)}}
-
-
-
-
- {{formatCurrency(slotProps.data.thisYearProfit)}}
-
-
-
-
-
-
-
-
-
-
- `,
- data() {
- return {
- sales: null
- }
- },
- created() {
- this.sales = [
- {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
- {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
- {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
- ];
- },
- methods: {
- formatCurrency(value) {
- return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
- }
- },
- computed: {
- lastYearTotal() {
- let total = 0;
- for(let sale of this.sales) {
- total += sale.lastYearProfit;
- }
-
- return this.formatCurrency(total);
- },
- thisYearTotal() {
- let total = 0;
- for(let sale of this.sales) {
- total += sale.thisYearProfit;
- }
-
- return this.formatCurrency(total);
- }
- }
- });
const footerRows = wrapper.findAll('.p-datatable-tfoot > tr');
expect(footerRows.length).toEqual(1);
expect(footerRows[0].findAll('td')[0].attributes().colspan).toEqual('3');
- expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
- expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
- });
-
-
- // pagination
- it('should have a paginator', async () => {
- await wrapper.setProps({ value: data, paginator: true, rows: 5 });
-
- expect(wrapper.find('.p-paginator').exists()).toBe(true);
- expect(wrapper.findAll('.p-paginator-page').length).toEqual(2);
- expect(wrapper.find('.p-paginator-next').exists()).toBe(true);
- expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled');
- expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-highlight');
- expect(wrapper.find('.p-paginator-current').text()).toBe('Showing 1 to 5 of 10');
-
- await wrapper.vm.onPage({page: 1, first: 5, rows: 5, pageCount: 2});
-
- expect(wrapper.findAll('.p-paginator-page')[0].classes()).not.toContain('p-highlight');
- expect(wrapper.findAll('.p-paginator-page')[1].classes()).toContain('p-highlight');
+ 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: `
+
+
+ `
+ }
+ });
+
const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+ const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
await sortableTH.trigger('click');
expect(headerClick).toHaveBeenCalled();
expect(sortableTH.classes()).toContain('p-highlight');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
expect(wrapper.emitted()['update:sortField'][0]).toEqual(['code']);
expect(wrapper.emitted()['value-change'][0]).not.toBeNull();
});
it('should multiple sort', async () => {
- const sortableTHs = wrapper.findAll('.p-sortable-column');
- const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
+ wrapper = mount(DataTable, {
+ global: {
+ components: {
+ Column
+ }
+ },
+ props: {
+ value: smallData,
+ sortMode: 'multiple'
+ },
+ slots: {
+ default: `
+
+
+ `
+ }
+ });
- await wrapper.setProps({ sortMode: 'multiple' });
+ const sortableTHs = wrapper.findAll('.p-sortable-column');
+ const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+ const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
await sortableTHs[0].trigger('click');
expect(headerClick).toHaveBeenCalled();
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
+
+ const seconCellText = wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text();
await sortableTHs[1].trigger('click');
@@ -536,31 +351,74 @@ describe('DataTable.vue', () => {
expect(wrapper.emitted()['update:multiSortMeta'][0]).toEqual([[{ field: 'code', order: 1 }]]);
expect(wrapper.emitted()['update:multiSortMeta'][1]).toEqual([[{ field: 'name', order: 1 }]]);
expect(wrapper.emitted()['value-change'][0]).not.toEqual(wrapper.emitted()['value-change'][1]);
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text()).not.toEqual(seconCellText);
});
it('should have presort', async () => {
+ wrapper = mount(DataTable, {
+ global: {
+ components: {
+ Column
+ }
+ },
+ props: {
+ value: smallData,
+ sortOrder: -1,
+ sortField: 'code'
+ },
+ slots: {
+ default: `
+
+
+ `
+ }
+ });
+
const presortedTH = wrapper.findAll('.p-sortable-column')[0];
- await wrapper.setProps({ sortOrder: -1, sortField: 'code' });
-
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual('Game Controller');
expect(presortedTH.classes()).toContain('p-highlight');
});
it('should remove sort', async () => {
- const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+ wrapper = mount(DataTable, {
+ global: {
+ components: {
+ Column
+ }
+ },
+ props: {
+ value: smallData,
+ removableSort: true
+ },
+ slots: {
+ default: `
+
+
+ `
+ }
+ });
- await wrapper.setProps({ removableSort: true });
+ const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+ const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
await sortableTH.trigger('click');
-
+
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
expect(sortableTH.attributes()['aria-sort']).toBe('ascending');
+ const updatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
await sortableTH.trigger('click');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(updatedFirstCellText);
expect(sortableTH.attributes()['aria-sort']).toBe('descending');
+ const latestUpdatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
await sortableTH.trigger('click');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(latestUpdatedFirstCellText);
expect(sortableTH.attributes()['aria-sort']).toBe('none');
});
@@ -1301,8 +1159,7 @@ describe('DataTable.vue', () => {
expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating');
});
- // expandable row groups
- it('should expand', () => {
+ it('should have expandable row groups and expand rows', async () => {
wrapper = mount(DataTable, {
global: {
components: {
@@ -1310,31 +1167,124 @@ describe('DataTable.vue', () => {
}
},
props: {
- value: smallData,
+ value: [
+ {
+ "id":1000,
+ "name":"James Butt",
+ "country":{
+ "name":"Algeria",
+ "code":"dz"
+ },
+ "company":"Benton, John B Jr",
+ "representative":{
+ "name":"Ioni Bowcher",
+ "image":"ionibowcher.png"
+ }
+ },
+ {
+ "id":1001,
+ "name":"Josephine Darakjy",
+ "country":{
+ "name":"Egypt",
+ "code":"eg"
+ },
+ "company":"Chanay, Jeffrey A Esq",
+ "representative":{
+ "name":"Amy Elsner",
+ "image":"amyelsner.png"
+ }
+ },
+ {
+ "id":1013,
+ "name":"Graciela Ruta",
+ "country":{
+ "name":"Chile",
+ "code":"cl"
+ },
+ "company":"Buckley Miller & Wright",
+ "representative":{
+ "name":"Amy Elsner",
+ "image":"amyelsner.png"
+ }
+ },
+ {
+ "id":1021,
+ "name":"Veronika Inouye",
+ "country":{
+ "name":"Ecuador",
+ "code":"ec"
+ },
+ "company":"C 4 Network Inc",
+ "representative":{
+ "name":"Ioni Bowcher",
+ "image":"ionibowcher.png"
+ }
+ },
+ {
+ "id":1026,
+ "name":"Chanel Caudy",
+ "country":{
+ "name":"Argentina",
+ "code":"ar"
+ },
+ "company":"Professional Image Inc",
+ "representative":{
+ "name":"Ioni Bowcher",
+ "image":"ionibowcher.png"
+ }
+ },
+ {
+ "id":1027,
+ "name":"Ezekiel Chui",
+ "country":{
+ "name":"Ireland",
+ "code":"ie"
+ },
+ "company":"Sider, Donald C Esq",
+ "representative":{
+ "name":"Amy Elsner",
+ "image":"amyelsner.png"
+ }
+ }
+ ],
rowGroupMode: 'subheader',
- groupRowsBy: 'name',
+ groupRowsBy: 'representative.name',
sortMode: 'single',
- sortField: 'name',
+ sortField: 'representative.name',
sortOrder: 1,
scrollable: true,
expandableRowGroups: true,
- expandedRowGroups: ['Blue Band']
+ expandedRowGroups: null,
+ responsiveLayout: 'scroll'
},
slots: {
default: `
-
+
+
+
`,
- groupheader: `GroupHeader Templating`,
- groupfooter: `GroupFooter Templating`
+ groupheader: `
+
+ {{slotProps.data.representative.name}}
+
+ `
}
});
- expect(wrapper.find('.p-column-title').text()).toBe('Code');
+ expect(wrapper.findAll('.p-datatable-thead > tr > th').length).toBe(3);
+ expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header').length).toBe(2);
+ expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header')[0].text()).toBe('Amy Elsner');
+
+ const firstToggler = wrapper.findAll('.p-row-toggler')[0];
+
+ await firstToggler.trigger('click');
+
+ expect(wrapper.emitted()['update:expandedRowGroups'][0]).toEqual([['Amy Elsner']]);
+ expect(wrapper.emitted()['rowgroup-expand'][0][0].data).toBe('Amy Elsner');
});
- // rowspan grouping
- it('should rowspan', async () => {
+ it('should have rowspan grouping', async () => {
wrapper = mount(DataTable, {
global: {
components: {
@@ -1342,25 +1292,65 @@ describe('DataTable.vue', () => {
}
},
props: {
- value: smallData,
+ value: [
+ {
+ "id": "1000",
+ "code": "vbb124btr",
+ "name": "Game Controller"
+ },
+ {
+ "id": "1001",
+ "code": "nvklal433",
+ "name": "Black Watch"
+ },
+ {
+ "id": "1002",
+ "code": "zz21cz3c1",
+ "name": "Blue Band"
+ },
+ {
+ "id": "1003",
+ "code": "vbb124btrvbb124btr",
+ "name": "Game Controller"
+ },
+ {
+ "id": "1004",
+ "code": "nvklal433nvklal433",
+ "name": "Black Watch"
+ },
+ {
+ "id": "1006",
+ "code": "zz21cz3c1zz21cz3c1",
+ "name": "Blue Band"
+ }
+ ],
rowGroupMode: 'rowspan',
groupRowsBy: 'name',
sortMode: 'single',
sortField: 'name',
sortOrder: 1,
- scrollable: true
+ scrollable: true,
+ responsiveLayout: 'scroll'
},
slots: {
default: `
-
+
+
+ {{slotProps.index}}
+
+
- `,
- groupheader: `GroupHeader Templating`,
- groupfooter: `GroupFooter Templating`
+
+ `
}
});
- expect(wrapper.find('td > span').text()).toBe('Code');
+ expect(wrapper.find('.p-datatable-thead > tr').findAll('th')[0].text()).toBe('#');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[0].text()).toBe('0');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).toBe('Black Watch');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].attributes().rowspan).toBe('2');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[2].findAll('td')[1].attributes().rowspan).toBe('2');
+ expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
});
diff --git a/untitled b/untitled
deleted file mode 100644
index bb52b7356..000000000
--- a/untitled
+++ /dev/null
@@ -1,185 +0,0 @@
-// window.HTMLElement.prototype.getBoundingClientRect = function () {};
-
-it('should filtercallback work', async () => {
- wrapper = mount({
- components: {
- DataTable,
- Column,
- Button,
- InputText
- },
- template: `
-
-
-
-
-
-
-
-
-
-
-
- {{data.code}}
-
-
-
-
-
-
-
- {{data.name}}
-
-
-
-
-
-
- `,
- data() {
- return {
- value: smallData,
- filters: null
- }
- },
- created() {
- this.initFilters1();
- },
- methods: {
- clearFilter1() {
- this.initFilters1();
- },
- initFilters1() {
- this.filters = {
- 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
- 'code': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
- 'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
- }
- }
- }
- });
-
-
-
- const inputs = wrapper.findAll('input.p-column-filter');
- // const onFilterApply = jest.spyOn(wrapper.vm, 'onFilterApply');
-console.log(inputs[0].html())
- // inputs[0].element.value = 'z';
- // await inputs[0].setValue('z');
- // await inputs[0].trigger('keydown.enter');
- await inputs[0].trigger('input', { key: 'z' });
-
- await wrapper.vm.$nextTick();
-
- // expect(onFilterApply).toHaveBeenCalled();
- console.log(wrapper.vm.filters.code)
- });
-
-
-
-
-it('should start drag over the column', async () => {
- const firstTH = wrapper.findAll('th')[0];
- const headerContent = wrapper.findAll('.p-column-header-content')[0];
- console.log(firstTH)
-
- await wrapper.setProps({ reorderableColumns: true });
-
- await wrapper.vm.onColumnHeaderDragStart({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, dataTransfer: { setData: () => {}} });
-
- await wrapper.vm.onColumnHeaderDragOver({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
- await wrapper.vm.onColumnHeaderDragLeave({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
- await wrapper.vm.onColumnHeaderDrop({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
-
-
- console.log(wrapper.componentVM.draggedColumn)
-
-});
-
-it('should have row styling', async () => {
- await wrapper.setProps({ rowClass: (data) => {console.log(data)}});
-
- console.log()
-});
-
-
-// describe('DataTable and ContextMenu', () => {
-// it('should exist', async () => {
-// const wrapper = mount({
-// global: {
-// mocks: {
-// $primevue: {
-// config: {
-// 'ripple': true,
-// 'inputStyle': 'outlined'
-// }
-// }
-// },
-// stubs: ['router-link'],
-// },
-// components: {
-// DataTable,
-// Column,
-// ContextMenu
-// },
-// template: `
-//
-//
-//
-//
-
-//
-// `,
-// data() {
-// return {
-// smallData: [
-// {
-// "id": "1000",
-// "code": "vbb124btr",
-// "name": "Game Controller"
-// },
-// {
-// "id": "1001",
-// "code": "nvklal433",
-// "name": "Black Watch"
-// },
-// {
-// "id": "1002",
-// "code": "zz21cz3c1",
-// "name": "Blue Band"
-// }
-// ],
-// selectedProduct: null,
-// menuModel: [
-// {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
-// {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
-// ]
-// }
-// },
-// methods: {
-// onRowContextMenu(event) {
-// this.$refs.cm.show(event.originalEvent);
-// },
-// viewProduct(product) {
-// console.log(product);
-// },
-// deleteProduct(product) {
-// this.products = this.products.filter((p) => p.id !== product.id);
-// this.selectedProduct = null;
-// },
-// }
-// });
-
-// const firstTD = wrapper.findAll('td')[0];
-
-// const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}};
-
-// wrapper.componentVM.onRowContextMenu({ originalEvent: { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}} });
-
-// // console.log(wrapper.html())
-
-// });
-// });