diff --git a/js/components/__tests__/requests_list.test.js b/js/components/__tests__/requests_list.test.js new file mode 100644 index 00000000..e7d681bc --- /dev/null +++ b/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']) + }) + }) +}) diff --git a/js/components/requests_list.js b/js/components/requests_list.js index 4b7b4540..ec9f9282 100644 --- a/js/components/requests_list.js +++ b/js/components/requests_list.js @@ -77,13 +77,14 @@ export default { }, ] + const defaultSortColumn = this.isExtended ? 'last_submission_timestamp' : '' return { searchValue: '', statusValue: '', dodComponentValue: '', sort: { - columnName: '', - isAscending: true + columnName: defaultSortColumn, + isAscending: false }, columns: indexBy(prop('attr'), columnList), } @@ -145,4 +146,6 @@ export default { this.sort.columnName = columnName; }, }, + + template: '
' }