Use member.role_name in template and JS

change name of data from roles to rolesCategory to make less confusing

js/components/__tests__/edit_environment_role.test.js

@@ -2,20 +2,20 @@ import { shallowMount } from '@vue/test-utils'
 import EditEnvironmentRole from '../forms/edit_environment_role'
 
 describe('EditEnvironmentRole', () => {
-  var initialRoles, wrapper
+  var initialRoleCategories, wrapper
 
   beforeEach(() => {
-    initialRoles = [
+    initialRoleCategories = [
       {
         role: 'no_access',
         members: [
-          { role: null, user_id: '123' },
-          { role: null, user_id: '456' },
+          { role_name: null, user_id: '123' },
+          { role_name: null, user_id: '456' },
         ],
       },
       {
         role: 'Basic Access',
-        members: [{ role: 'Basic Access', user_id: '789' }],
+        members: [{ role_name: 'Basic Access', user_id: '789' }],
       },
       {
         role: 'Network Admin',
@@ -24,36 +24,41 @@ describe('EditEnvironmentRole', () => {
       {
         role: 'Business Read-only',
         members: [
-          { role: 'Business Read-only', user_id: '012' },
-          { role: 'Business Read-only', user_id: '345' },
+          { role_name: 'Business Read-only', user_id: '012' },
+          { role_name: 'Business Read-only', user_id: '345' },
         ],
       },
       {
         role: 'Technical Read-only',
-        members: [{ role: 'Technical Read-only', user_id: '678' }],
+        members: [{ role_name: 'Technical Read-only', user_id: '678' }],
       },
     ]
 
-    wrapper = shallowMount(EditEnvironmentRole, { propsData: { initialRoles } })
+    wrapper = shallowMount(EditEnvironmentRole, {
+      propsData: { initialRoleCategories },
+    })
   })
 
   it('removes null roles to no_access', () => {
     let roles = wrapper.vm.sanitizeValues([
-      { role: 'no_access', members: [{ role: null }] },
+      { role: 'no_access', members: [{ role_name: null }] },
     ])
     expect(roles).toEqual([
-      { role: 'no_access', members: [{ role: 'no_access' }] },
+      { role: 'no_access', members: [{ role_name: 'no_access' }] },
     ])
   })
 
   it('gets the data for a user', () => {
     let member_data = wrapper.vm.getUserInfo('678')
 
-    expect(member_data).toEqual({ role: 'Technical Read-only', user_id: '678' })
+    expect(member_data).toEqual({
+      role_name: 'Technical Read-only',
+      user_id: '678',
+    })
   })
 
   it('removes a user from role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -63,7 +68,7 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('adds user to a role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -73,10 +78,10 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('updates users role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
-    let businessRole = wrapper.vm.roles.find(role => {
+    let businessRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Business Read-only'
     })