diff --git a/src/components/KTableView/KTableView.cy.ts b/src/components/KTableView/KTableView.cy.ts index 62501aea3c..40e548f4f8 100644 --- a/src/components/KTableView/KTableView.cy.ts +++ b/src/components/KTableView/KTableView.cy.ts @@ -68,7 +68,7 @@ const largeDataSet = [ const options = { headers: [ { label: 'Name', key: 'name', sortable: true }, - { label: 'ID', key: 'id', sortable: false }, + { label: 'ID', key: 'id', sortable: true }, { label: 'Enabled', key: 'enabled', sortable: false }, { label: '', key: 'actions', sortable: false }, ] as TableHeader[], @@ -445,7 +445,7 @@ describe('KTableView', () => { }) cy.get('th').each(($el, index) => { - if (index === 0) { + if (index <= 1) { cy.wrap($el).should('have.class', 'sortable') } }) @@ -464,6 +464,23 @@ describe('KTableView', () => { cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'sort').and('have.length', 1) }) }) + + it('should have correct sort order class when changing sort column', () => { + cy.mount(KTableView, { + props: { + headers: options.headers, + data: options.data, + }, + }) + cy.get('th').eq(0).click().then(() => { + cy.wrap(Cypress.vueWrapper.emitted('sort')).should('have.length', 1) + cy.wrap(Cypress.vueWrapper.emitted('sort')?.[0]?.[0]).should('have.property', 'sortColumnOrder', 'asc') + cy.get('th').eq(1).click().then(() => { + cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'sort').and('have.length', 2) + cy.wrap(Cypress.vueWrapper.emitted('sort')?.[1]?.[0]).should('have.property', 'sortColumnOrder', 'asc') + }) + }) + }) }) describe('pagination', () => { diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue index 93a80d4791..00070013b6 100644 --- a/src/components/KTableView/KTableView.vue +++ b/src/components/KTableView/KTableView.vue @@ -701,10 +701,14 @@ const getHeaderClasses = (column: TableViewHeader, index: number): Record { if (column.sortable && column.key !== TableViewHeaderKeys.BULK_ACTIONS && column.key !== TableViewHeaderKeys.ACTIONS) { + let newSortColumnOrder = 'asc' + if (column.key === sortColumnKey.value && sortColumnOrder.value === 'asc') { + newSortColumnOrder = 'desc' + } emit('sort', { prevKey: sortColumnKey.value, sortColumnKey: column.key, - sortColumnOrder: sortColumnOrder.value === 'asc' ? 'desc' : 'asc', // display opposite because sortColumnOrder outdated + sortColumnOrder: newSortColumnOrder, }) sortClickHandler(column) }