From 320eab9a3722cf50d25fb8a9dc536eff54745478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 18 Apr 2022 17:16:10 +0300 Subject: [PATCH] datatable tests fixed --- src/components/datatable/DataTable.spec.js | 512 ++++++++++----------- untitled | 185 -------- 2 files changed, 251 insertions(+), 446 deletions(-) delete mode 100644 untitled 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', () => { - - - - + + + + - - - - - - - - - - - - - - - - + + + @@ -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: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - 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: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - 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: ` + + ` } }); - 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: ` - + + + - `, - 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() { - 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()) - -// }); -// });