Add default sort by submission time to request listing

js/components/__tests__/requests_list.test.js

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils'
+
+import RequestsList from '../requests_list'
+
+describe('RequestsList', () => {
+
+  describe('isExtended', () => {
+    it('should disallow sorting if not extended', () => {
+      const wrapper = shallowMount(RequestsList, { propsData: { isExtended: false } })
+      expect(wrapper.vm.sort.columnName).toEqual('')
+      wrapper.vm.updateSortValue('full_name')
+      expect(wrapper.vm.sort.columnName).toEqual('')
+    })
+
+    it('should allow sorting when in extended mode', () => {
+      const wrapper = shallowMount(RequestsList, { propsData: { isExtended: true } })
+      expect(wrapper.vm.sort.columnName).toEqual('last_submission_timestamp')
+      wrapper.vm.updateSortValue('full_name')
+      expect(wrapper.vm.sort.columnName).toEqual('full_name')
+    })
+  })
+
+  describe('sorting', () => {
+    const requests = [{
+      name: 'X Wing',
+      last_edited_timestamp: 'Mon, 2 Jan 2017 12:34:56 GMT',
+      last_submission_timestamp: 'Mon, 2 Jan 2017 12:34:56 GMT',
+      full_name: 'Luke Skywalker',
+      annual_usage: '80000',
+      status: 'Approved',
+      dod_component: 'Rebels'
+    }, {
+      name: 'TIE Fighter',
+      last_edited_timestamp: 'Mon, 12 Nov 2018 12:34:56 GMT',
+      last_submission_timestamp: 'Mon, 12 Nov 2018 12:34:56 GMT',
+      full_name: 'Darth Vader',
+      annual_usage: '999999',
+      status: 'Approved',
+      dod_component: 'Empire'
+    }]
+
+    const mountWrapper = () => shallowMount(RequestsList, { propsData: { requests, isExtended: true } })
+
+    it('should default to sorting by submission recency', () => {
+      const wrapper = mountWrapper()
+      const displayedRequests = wrapper.vm.filteredRequests
+      const requestNames = displayedRequests.map(req => req.name)
+      expect(requestNames).toEqual(['TIE Fighter', 'X Wing'])
+    })
+
+    it('should reverse sort by submission time when selected', () => {
+      const wrapper = mountWrapper()
+      wrapper.vm.updateSortValue('last_submission_timestamp')
+      const displayedRequests = wrapper.vm.filteredRequests
+      const requestNames = displayedRequests.map(req => req.name)
+      expect(requestNames).toEqual(['X Wing', 'TIE Fighter'])
+    })
+  })
+})

js/components/requests_list.js

@@ -77,13 +77,14 @@ export default {
       },
     ]
 
+    const defaultSortColumn = this.isExtended ? 'last_submission_timestamp' : ''
     return {
       searchValue: '',
       statusValue: '',
       dodComponentValue: '',
       sort: {
-        columnName: '',
+        columnName: defaultSortColumn,
-        isAscending: true
+        isAscending: false
       },
       columns: indexBy(prop('attr'), columnList),
     }
@@ -145,4 +146,6 @@ export default {
       this.sort.columnName = columnName;
     },
   },
+
+  template: '<div></div>'
 }