Add test

Author: MetRonnie

src/components/cylc/table/Table.vue

@@ -253,7 +253,13 @@ const headers = ref([
 ])
 
 /**
- * Ensure that empty/nullish values are always sorted last regardless of sort order.
+ * A comparator that ensures empty/nullish values are always sorted last regardless of sort order.
+ *
+ * @param {string} key - The key for the column being sorted.
+ * @param {function} sortFunc - The comparator function to use if both values are truthy or zero.
+ * @param {any} a - The first value to compare.
+ * @param {any} b - The second value to compare.
+ * @returns {number} A number > 0 if a > b, or < 0 if a < b, or 0 if a === b
  */
 function nullSorter (key, sortFunc, a, b) {
   const x = isTruthyOrZero(a)

tests/e2e/specs/table.cy.js

@@ -17,6 +17,15 @@
 
 import TaskState from '@/model/TaskState.model'
 
+// Get cell text for a column by header name, as an array
+Cypress.Commands.add('getColumnValues', (header) => {
+  return cy.get('.c-table th')
+    .contains(header)
+    .parents('th')
+    .then(($th) => cy.get(`.c-table tr > td:nth-child(${$th.index() + 1})`))
+    .then(($cells) => Array.from($cells, (cell) => cell.innerText.trim()))
+})
+
 const initialNumRows = 7
 
 describe('Table view', () => {
@@ -30,7 +39,7 @@ describe('Table view', () => {
       .should('be.visible')
   })
 
-  describe('Filters', () => {
+  describe('Filters & sorting', () => {
     it('Should filter by ID', () => {
       cy.get('.c-table table > tbody > tr')
         .should('have.length', initialNumRows)
@@ -51,6 +60,7 @@ describe('Table view', () => {
           .should('be.visible')
       }
     })
+
     it('Should filter by task state', () => {
       cy
         .get('.c-table table > tbody > tr')
@@ -73,6 +83,7 @@ describe('Table view', () => {
         .should('have.length', 1)
         .should('be.visible')
     })
+
     it('Should filter by ID and states', () => {
       cy
         .get('.c-table table > tbody > tr')
@@ -95,6 +106,7 @@ describe('Table view', () => {
         .get('td [data-cy-task-name=eventually_succeeded]')
         .should('be.visible')
     })
+
     it('displays and sorts latest job run time', () => {
       const nonzeroValues = [
         '00:00:01',
@@ -107,27 +119,48 @@ describe('Table view', () => {
       cy.get('.c-table')
         .contains('th', 'Run Time').as('dTHeader')
         .click()
-        .get('tbody tr td:nth-child(10)') // 10th column
-        .then(($cells) => {
-          expect(Array.from($cells, (cell) => cell.innerText.trim())).to.deep.equal([
-            ...nonzeroValues,
-            '', // no value sorted after numbers
-            '',
-          ])
-        })
+      cy.getColumnValues('Run Time').should('deep.equal', [
+        ...nonzeroValues,
+        '', // no value sorted after numbers
+        '',
+      ])
       // sort dt-mean descending
       cy.get('@dTHeader')
         .click()
-        .get('tbody tr td:nth-child(10)')
-        .then(($cells) => {
-          expect(Array.from($cells, (cell) => cell.innerText.trim())).to.deep.equal([
-            ...nonzeroValues.slice().reverse(),
-            '', // no value still sorted after numbers
-            '',
-          ])
-        })
+      cy.getColumnValues('Run Time').should('deep.equal', [
+        ...nonzeroValues.slice().reverse(),
+        '', // no value still sorted after numbers
+        '',
+      ])
     })
   })
+
+  it('sorts finish time including estimates', () => {
+    const nonzeroValues = [
+      '2020-11-08T22:57:16Z',
+      '2020-11-08T22:57:19Z',
+      '2020-11-08T22:57:33Z',
+      '2020-11-08T22:57:41Z',
+      '2020-11-08T23:00:36Z',
+    ]
+    // sort finish time ascending
+    cy.get('.c-table')
+      .contains('th', 'Finish').as('header')
+      .click()
+    cy.getColumnValues('Finish').should('deep.equal', [
+      ...nonzeroValues,
+      '', // no value sorted after numbers
+      '',
+    ])
+    // sort finish time descending
+    cy.get('@header')
+      .click()
+    cy.getColumnValues('Finish').should('deep.equal', [
+      ...nonzeroValues.slice().reverse(),
+      '', // no value still sorted after numbers
+      '',
+    ])
+  })
 })
 
 function addView (view) {

tests/unit/components/cylc/table/table.vue.spec.js

@@ -83,5 +83,40 @@ describe('Table component', () => {
         { order: expected }
       ])
     })
+
+    describe('nullSorter', () => {
+      it.each([
+        ['a', 'b', 'asc', -1],
+        ['a', 'b', 'desc', 1],
+        ['a', '', 'asc', -1],
+        ['a', '', 'desc', 1],
+        ['a', null, 'asc', -1],
+        ['a', null, 'desc', 1],
+        [null, 'a', 'asc', 1],
+        [null, 'a', 'desc', -1],
+        ['a', undefined, 'asc', -1],
+        ['a', undefined, 'desc', 1],
+        [0, null, 'asc', -1],
+        [0, null, 'desc', 1],
+        [null, null, 'asc', 0],
+        [null, null, 'desc', 0],
+        ['', null, 'asc', 0],
+        ['', null, 'desc', 0],
+      ])('$2: $0, $1 -> $3', (a, b, order, expected) => {
+        const key = 'key'
+        const wrapper = mountFunction({
+          props: {
+            tasks: [],
+            initialOptions: {
+              sortBy: [{ key, order }]
+            }
+          }
+        })
+        const comparator = (x, y) => {
+          return order === 'asc' ? x.localeCompare(y) : y.localeCompare(x)
+        }
+        expect(wrapper.vm.nullSorter(key, comparator, a, b)).toEqual(expected)
+      })
+    })
   })
 })