Icon in test setup, test for Creation

admin/src/components/UserTable.spec.js

@@ -10,7 +10,7 @@ describe('UserTable', () => {
     type: 'Type',
     itemsUser: [],
     fieldsTable: [],
-    creation: {},
+    creation: [],
   }
 
   const Wrapper = () => {

admin/src/components/UserTable.vue

@@ -140,7 +140,7 @@ export default {
       default: '',
     },
     creation: {
-      type: Object,
+      type: Array,
       required: false,
     },
   },

admin/src/views/Creation.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import Creation from './Creation.vue'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    searchUsers: [
+      {
+        firstName: 'Bibi',
+        lastName: 'Bloxberg',
+        email: 'bibi@bloxberg.de',
+        creation: [200, 400, 600],
+      },
+    ],
+  },
+})
+
+const toastErrorMock = jest.fn()
+
+const mocks = {
+  $apollo: {
+    query: apolloQueryMock,
+  },
+  $toasted: {
+    error: toastErrorMock,
+  },
+}
+
+describe('Creation', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(Creation, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.creation', () => {
+      expect(wrapper.find('div.creation').exists()).toBeTruthy()
+    })
+
+    describe('apollo returns error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Ouch',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Ouch')
+      })
+    })
+  })
+})

admin/src/views/Creation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="creation">
     <b-row>
       <b-col cols="12" lg="5">
         <label>Usersuche</label>
@@ -10,6 +10,7 @@
           placeholder="User suche"
         ></b-input>
         <user-table
+          v-if="itemsList.length > 0"
           type="UserListSearch"
           :itemsUser="itemsList"
           :fieldsTable="Searchfields"
@@ -20,7 +21,7 @@
       </b-col>
       <b-col cols="12" lg="7" class="shadow p-3 mb-5 rounded bg-info">
         <user-table
-          v-show="Object.keys(this.massCreation).length > 0"
+          v-if="massCreation.length > 0"
           class="shadow p-3 mb-5 bg-white rounded"
           type="UserListMassCreation"
           :itemsUser="massCreation"
@@ -31,6 +32,7 @@
         />
 
         <creation-formular
+          v-if="massCreation.length > 0"
           type="massCreation"
           :creation="creation"
           :itemsMassCreation="massCreation"
@@ -57,7 +59,6 @@ export default {
       showArrays: false,
       Searchfields: [
         { key: 'bookmark', label: 'merken' },
-
         { key: 'firstName', label: 'Firstname' },
         { key: 'lastName', label: 'Lastname' },
         { key: 'creation', label: 'Creation' },
@@ -77,11 +78,11 @@ export default {
       creation: [null, null, null],
     }
   },
-  created() {
-    this.getUsers()
+  async created() {
+    await this.getUsers()
   },
   methods: {
-    getUsers() {
+    async getUsers() {
       this.$apollo
         .query({
           query: searchUsers,
@@ -93,7 +94,7 @@ export default {
           this.itemsList = result.data.searchUsers.map((user) => {
             return {
               ...user,
-              // showDetails: true,
+              showDetails: false,
             }
           })
         })

admin/test/testSetup.js

@@ -1,6 +1,6 @@
 import { createLocalVue } from '@vue/test-utils'
 import Vue from 'vue'
-import { BootstrapVue } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 // without this async calls are not working
 import 'regenerator-runtime'
@@ -8,6 +8,7 @@ import 'regenerator-runtime'
 global.localVue = createLocalVue()
 
 global.localVue.use(BootstrapVue)
+global.localVue.use(IconsPlugin)
 
 // throw errors for vue warnings to force the programmers to take care about warnings
 Vue.config.warnHandler = (w) => {