change user roles is working, test fails

webapp/graphql/admin/Roles.js

@@ -1,15 +1,17 @@
 import gql from 'graphql-tag'
 
-export const FetchAllRoles = gql`
-  query {
-    __type(name: "UserGroup") {
-      name
-      enumValues {
+export const FetchAllRoles = () => {
+  return gql`
+    query {
+      __type(name: "UserGroup") {
         name
+        enumValues {
+          name
+        }
       }
     }
-  }
-`
+  `
+}
 
 export const updateUserRole = (role, id) => {
   return gql`

webapp/pages/admin/users.spec.js

@@ -1,27 +1,57 @@
-import { mount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
+import Vuex from 'vuex'
 import Users from './users.vue'
 
 const localVue = global.localVue
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('Users', () => {
   let wrapper
   let Wrapper
   let mocks
+  let getters
 
   beforeEach(() => {
     mocks = {
       $t: jest.fn(),
       $apollo: {
         loading: false,
+        mutate: jest
+          .fn()
+          .mockRejectedValue({ message: 'Ouch!' })
+          .mockResolvedValue({
+            data: {
+              switchUserRole: {
+                id: 'user',
+                email: 'user@example.org',
+                name: 'User',
+                role: 'moderator',
+                slug: 'user',
+              },
+            },
+          }),
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
       },
     }
   })
 
   describe('mount', () => {
+    getters = {
+      'auth/isAdmin': () => true,
+      'auth/user': () => {
+        return { id: 'admin' }
+      },
+    }
+
     Wrapper = () => {
+      const store = new Vuex.Store({ getters })
       return mount(Users, {
         mocks,
         localVue,
+        store,
       })
     }
 
@@ -69,5 +99,55 @@ describe('Users', () => {
         })
       })
     })
+
+    describe('change roles', () => {
+      beforeAll(() => {
+        wrapper = Wrapper()
+        wrapper.setData({
+          User: [
+            {
+              id: 'admin',
+              email: 'admin@example.org',
+              name: 'Admin',
+              role: 'admin',
+              slug: 'admin',
+            },
+            {
+              id: 'user',
+              email: 'user@example.org',
+              name: 'User',
+              role: 'user',
+              slug: 'user',
+            },
+          ],
+          userRoles: ['user', 'moderator', 'admin'],
+        })
+      })
+
+      it('cannot change own role', () => {
+        const adminRow = wrapper.findAll('tr').at(1)
+        expect(adminRow.find('select').exists()).toBe(false)
+      })
+
+      it('changes the role of another user', async () => {
+        jest.useFakeTimers()
+
+        // console.log(wrapper.html())
+
+        const userRow = wrapper.findAll('tr').at(2)
+        await userRow.findAll('option').at(2).setSelected()
+
+        jest.runAllTimers()
+
+        await wrapper.vm.$nextTick()
+        await wrapper.vm.$nextTick()
+        await wrapper.vm.$nextTick()
+        await wrapper.vm.$nextTick()
+
+        await mocks.$apollo.mutate
+        // await expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        await expect(mocks.$toast.success).toHaveBeenCalled()
+      })
+    })
   })
 })

webapp/pages/admin/users.vue

@@ -50,22 +50,18 @@
         </template>
 
         <template slot="role" slot-scope="scope">
-          <ApolloQuery :query="FetchAllRoles">
-            <template v-slot="{ result: { data } }">
-              <template v-if="data">
-                <select
-                  v-if="scope.row.id !== currentUser.id"
-                  :value="`${scope.row.role}`"
-                  v-on:change="changeUserRole(scope.row.id, $event)"
-                >
-                  <option v-for="value in data.__type.enumValues" :key="value.name">
-                    {{ value.name }}
-                  </option>
-                </select>
-                <ds-text v-else>{{ scope.row.role }}</ds-text>
-              </template>
-            </template>
-          </ApolloQuery>
+          <template v-if="userRoles">
+            <select
+              v-if="scope.row.id !== currentUser.id"
+              :value="`${scope.row.role}`"
+              v-on:change="changeUserRole(scope.row.id, $event)"
+            >
+              <option v-for="value in userRoles" :key="value">
+                {{ value }}
+              </option>
+            </select>
+            <ds-text v-else>{{ scope.row.role }}</ds-text>
+          </template>
         </template>
       </ds-table>
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
@@ -98,7 +94,7 @@ export default {
       hasNext: false,
       email: null,
       filter: null,
-      FetchAllRoles,
+      userRoles: [],
       form: {
         formData: {
           query: '',
@@ -178,6 +174,14 @@ export default {
         return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
       },
     },
+    userRoles: {
+      query() {
+        return FetchAllRoles()
+      },
+      update({ __type }) {
+        return __type.enumValues.map((item) => item.name)
+      },
+    },
   },
   methods: {
     back() {
@@ -203,7 +207,7 @@ export default {
       const newRole = event.target.value
       this.$apollo
         .mutate({
-          mutation: updateUserRole(newRole, id),
+          mutation: updateUserRole(),
           variables: { role: newRole, id },
         })
         .then(({ data }) => {