Skip to content

Commit

Permalink
Add unit tests, use task for loading spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
JammingBen committed Jan 13, 2022
1 parent 418c360 commit 087f5f8
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 50 deletions.
10 changes: 0 additions & 10 deletions packages/web-app-files/src/spaces/sdk/drives.ts

This file was deleted.

13 changes: 7 additions & 6 deletions packages/web-app-files/src/spaces/sdk/index.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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()
}
}
}
Expand Down
77 changes: 43 additions & 34 deletions packages/web-app-files/src/spaces/views/Spaces.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -67,9 +73,12 @@ export default {
spaces.value = myDrives.filter((drive) => drive.driveType === 'project')
})
loadSpacesTask.perform()
return {
spaces,
defaultImg
defaultImg,
loadSpacesTask
}
}
}
Expand Down
75 changes: 75 additions & 0 deletions packages/web-app-files/tests/unit/spaces/Spaces.spec.js
Original file line number Diff line number Diff line change
@@ -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
}
}
}))
}
})
})
}

0 comments on commit 087f5f8

Please sign in to comment.