Add default column sort on members list table

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'])
+  })
+})

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: '<div></div>'
 }