From b39d0c841eeb591447d29c43cd8cba8ade39da34 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 3 Jan 2022 12:10:21 +0100
Subject: [PATCH] Add unit tests, use task for loading spaces

---
 .../web-app-files/src/spaces/sdk/drives.ts    | 10 ---
 .../web-app-files/src/spaces/sdk/index.ts     | 13 ++--
 .../web-app-files/src/spaces/views/Spaces.vue | 77 +++++++++++--------
 .../tests/unit/spaces/Spaces.spec.js          | 75 ++++++++++++++++++
 sonar-project.properties                      |  2 +-
 5 files changed, 126 insertions(+), 51 deletions(-)
 delete mode 100644 packages/web-app-files/src/spaces/sdk/drives.ts
 create mode 100644 packages/web-app-files/tests/unit/spaces/Spaces.spec.js

diff --git a/packages/web-app-files/src/spaces/sdk/drives.ts b/packages/web-app-files/src/spaces/sdk/drives.ts
deleted file mode 100644
index a2fdd2e2bc3..00000000000
--- a/packages/web-app-files/src/spaces/sdk/drives.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Configuration, MeDrivesApi, CollectionOfDrives } from './generated'
-import { AxiosInstance, AxiosPromise } from 'axios'
-
-export const listMyDrives = async (
-  axiosClient: AxiosInstance,
-  config: Configuration
-): Promise<AxiosPromise<CollectionOfDrives>> => {
-  const meDrivesApi = new MeDrivesApi(config, config.basePath, axiosClient)
-  return await meDrivesApi.listMyDrives()
-}
diff --git a/packages/web-app-files/src/spaces/sdk/index.ts b/packages/web-app-files/src/spaces/sdk/index.ts
index 25cf47a6a6f..8544f7f6d3b 100644
--- a/packages/web-app-files/src/spaces/sdk/index.ts
+++ b/packages/web-app-files/src/spaces/sdk/index.ts
@@ -1,8 +1,7 @@
-import { listMyDrives } from './drives'
-import axios from 'axios'
-import { Configuration } from './generated'
+import axios, { AxiosPromise } from 'axios'
+import { CollectionOfDrives, Configuration, MeDrivesApi } from './generated'
 
-export const spacesSDK = (baseURI, token) => {
+export const spacesSDK = (baseURI: string, token: string): any => {
   const basePath = new URL('/graph/v1.0', baseURI).href
 
   const config = new Configuration({
@@ -21,10 +20,12 @@ export const spacesSDK = (baseURI, token) => {
     return config
   })
 
+  const meDrivesApi = new MeDrivesApi(config, config.basePath, axiosClient)
+
   return {
     drives: {
-      listMyDrives: () => {
-        return listMyDrives(axiosClient, config)
+      listMyDrives: (): AxiosPromise<CollectionOfDrives> => {
+        return meDrivesApi.listMyDrives()
       }
     }
   }
diff --git a/packages/web-app-files/src/spaces/views/Spaces.vue b/packages/web-app-files/src/spaces/views/Spaces.vue
index 3aa15ff206f..54cb1ba362b 100644
--- a/packages/web-app-files/src/spaces/views/Spaces.vue
+++ b/packages/web-app-files/src/spaces/views/Spaces.vue
@@ -8,57 +8,63 @@
       <hr class="uk-margin-bottom" />
     </div>
     <div class="spaces-list uk-container uk-container-expand uk-padding-remove">
-      <div
-        v-if="!!spaces.length"
-        class="
-          uk-grid-match uk-grid-column-small uk-grid-row-large uk-text-center uk-child-width-1-3@s
-        "
-        uk-grid
-      >
-        <a v-for="space in spaces" :key="space.id" href="#">
-          <span class="spaces-list-card oc-border uk-card uk-card-default">
-            <span class="uk-card-media-top oc-border-b">
-              <img
-                :src="space.image ? space.image : defaultImg"
-                :class="{ 'spaces-list-default-img': !space.image }"
-                :alt="$gettext('Space image')"
-              />
+      <list-loader v-if="loadSpacesTask.isRunning" />
+      <template v-else>
+        <div
+          v-if="!!spaces.length"
+          class="
+            uk-grid-match uk-grid-column-small uk-grid-row-large uk-text-center uk-child-width-1-3@s
+          "
+          uk-grid
+        >
+          <a v-for="space in spaces" :key="space.id" href="#">
+            <span class="spaces-list-card oc-border uk-card uk-card-default">
+              <span class="uk-card-media-top oc-border-b">
+                <img
+                  :src="space.image ? space.image : defaultImg"
+                  :class="{ 'spaces-list-default-img': !space.image }"
+                  :alt="$gettext('Space image')"
+                />
+              </span>
+              <span class="uk-card-body">
+                <h3 class="uk-card-title">{{ space.name }}</h3>
+              </span>
             </span>
-            <span class="uk-card-body">
-              <h3 class="uk-card-title">{{ space.name }}</h3>
-            </span>
-          </span>
-        </a>
-      </div>
-      <div v-else>
-        <no-content-message id="files-spaces-empty" class="files-empty" icon="space">
-          <template #message>
-            <span v-translate>You don't have any spaces currently</span>
-          </template>
-        </no-content-message>
-      </div>
+          </a>
+        </div>
+        <div v-else>
+          <no-content-message id="files-spaces-empty" class="files-empty" icon="space">
+            <template #message>
+              <span v-translate>You don't have any spaces currently</span>
+            </template>
+          </no-content-message>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
-import { ref, onMounted } from '@vue/composition-api'
+import ListLoader from '../../components/FilesList/ListLoader.vue'
+import { ref } from '@vue/composition-api'
 import { useStore } from '../../composables'
 import { spacesSDK } from '../sdk'
+import { useTask } from 'vue-concurrency'
 
 export default {
   components: {
-    NoContentMessage
+    NoContentMessage,
+    ListLoader
   },
   setup() {
     const store = useStore()
     const spaces = ref([])
     const defaultImg = store.getters.configuration.theme.spaces?.defaultImg
-    const localSDK = spacesSDK(store.getters.configuration.server, store.getters.getToken)
 
-    onMounted(async () => {
-      const myDrives = (await localSDK.drives.listMyDrives()).data?.value
+    const loadSpacesTask = useTask(function* (signal) {
+      const localSDK = spacesSDK(store.getters.configuration.server, store.getters.getToken)
+      const myDrives = (yield localSDK.drives.listMyDrives()).data?.value
 
       if (!myDrives) {
         return
@@ -67,9 +73,12 @@ export default {
       spaces.value = myDrives.filter((drive) => drive.driveType === 'project')
     })
 
+    loadSpacesTask.perform()
+
     return {
       spaces,
-      defaultImg
+      defaultImg,
+      loadSpacesTask
     }
   }
 }
diff --git a/packages/web-app-files/tests/unit/spaces/Spaces.spec.js b/packages/web-app-files/tests/unit/spaces/Spaces.spec.js
new file mode 100644
index 00000000000..5a32f08bc2c
--- /dev/null
+++ b/packages/web-app-files/tests/unit/spaces/Spaces.spec.js
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { localVue } from '../views/views.setup'
+import { createStore } from 'vuex-extensions'
+
+import Spaces from '../../../src/spaces/views/Spaces.vue'
+
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+import mockAxios from 'jest-mock-axios'
+
+localVue.use(VueRouter)
+
+const selectors = {
+  sharesNoContentMessage: '#files-spaces-empty',
+  spacesList: '.spaces-list'
+}
+
+const spacesDefaultImg = 'spaces.svg'
+
+beforeEach(mockAxios.reset)
+
+describe('Spaces component', () => {
+  it('sets a default image for spaces', () => {
+    const wrapper = getMountedWrapper()
+    expect(wrapper.vm.defaultImg).toEqual(spacesDefaultImg)
+  })
+  it('should show a "no content" message', async () => {
+    mockAxios.request.mockImplementationOnce(() => {
+      return Promise.resolve({
+        data: {
+          value: []
+        }
+      })
+    })
+
+    const wrapper = getMountedWrapper()
+    await wrapper.vm.loadSpacesTask.last
+
+    expect(wrapper.find(selectors.sharesNoContentMessage).exists()).toBeTruthy()
+  })
+
+  it('should only list drives of type "project"', async () => {
+    mockAxios.request.mockImplementationOnce(() => {
+      return Promise.resolve({
+        data: {
+          value: [{ driveType: 'project' }, { driveType: 'personal' }]
+        }
+      })
+    })
+
+    const wrapper = getMountedWrapper()
+    await wrapper.vm.loadSpacesTask.last
+
+    expect(wrapper.vm.spaces.length).toEqual(1)
+  })
+})
+
+function getMountedWrapper() {
+  return mount(Spaces, {
+    localVue,
+    router: new VueRouter(),
+    store: createStore(Vuex.Store, {
+      getters: {
+        configuration: jest.fn(() => ({
+          server: 'https://example.com/',
+          theme: {
+            spaces: {
+              defaultImg: spacesDefaultImg
+            }
+          }
+        }))
+      }
+    })
+  })
+}
diff --git a/sonar-project.properties b/sonar-project.properties
index 07ea4042595..fd01459bf70 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -32,4 +32,4 @@ sonar.pullrequest.key=${env.SONAR_PULL_REQUEST_KEY}
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
 
 # Exclude files
-sonar.exclusions=docs/**,node_modules/**,deployments/**,**/tests/**,__mocks__/**,__fixtures__/**,dist/**,changelog/**,config/**,docker/**,release/**,**/package.json,package.json,rollup.config.js,nightwatch.conf.js,Makefile,Makefile.release,CHANGELOG.md,README.md
+sonar.exclusions=docs/**,node_modules/**,deployments/**,**/tests/**,__mocks__/**,__fixtures__/**,dist/**,changelog/**,config/**,docker/**,release/**,**/package.json,package.json,rollup.config.js,nightwatch.conf.js,Makefile,Makefile.release,CHANGELOG.md,README.md,packages/web-app-files/src/spaces/sdk/generated/**