diff --git a/js/components/__tests__/members_list.test.js b/js/components/__tests__/members_list.test.js new file mode 100644 index 00000000..c14caf2a --- /dev/null +++ b/js/components/__tests__/members_list.test.js @@ -0,0 +1,54 @@ +import { shallowMount } from '@vue/test-utils' + +import MembersList from '../members_list' + +describe('MembersList', () => { + const members = [{ + name: 'Luke Skywalker', + num_env: 2, + status: 'active', + role: 'developer' + }, { + name: 'Chewie', + num_env: 3, + status: 'pending', + role: 'admin' + }] + const role_choices = [ + { display_name: 'Developer', name: 'developer' }, + { display_name: 'Admin', name: 'admin' }, + ] + const status_choices = [ + { display_name: 'Active', name: 'active' }, + { display_name: 'Pending', name: 'pending' }, + ] + + const createWrapper = () => shallowMount(MembersList, { + propsData: { + members, role_choices, status_choices + } + }) + + it('should sort by name by default', () => { + const wrapper = createWrapper() + const listedMembers = wrapper.vm.searchedList + const memberNames = listedMembers.map(member => member.name) + expect(memberNames).toEqual(['Chewie', 'Luke Skywalker']) + }) + + it('should reverse sort by name when updated with Name', () => { + const wrapper = createWrapper() + wrapper.vm.updateSort('Name') + const listedMembers = wrapper.vm.searchedList + const memberNames = listedMembers.map(member => member.name) + expect(memberNames).toEqual(['Luke Skywalker', 'Chewie']) + }) + + it('should sort by number of environments when environments selected', () => { + const wrapper = createWrapper() + wrapper.vm.updateSort('Environments') + const listedMembers = wrapper.vm.searchedList + const memberNames = listedMembers.map(member => member.name) + expect(memberNames).toEqual(['Luke Skywalker', 'Chewie']) + }) +}) diff --git a/js/components/members_list.js b/js/components/members_list.js index 7de99020..925895c6 100644 --- a/js/components/members_list.js +++ b/js/components/members_list.js @@ -90,6 +90,8 @@ export default { }, ] + const defaultSortColumn = 'Name' + return { searchValue: '', status: '', @@ -97,7 +99,7 @@ export default { role: '', rolesByDisplayName: indexBy(prop('display_name'), this.role_choices), sortInfo: { - columnName: '', + columnName: defaultSortColumn, isAscending: true, columns: indexBy(prop('displayName'), columns) }, @@ -127,5 +129,7 @@ export default { getColumns: function() { return Object.values(this.sortInfo.columns) } - } + }, + + template: '
' }