Skip to content

Commit

Permalink
Separate unit tests for AppBar and CreateAndUpload
Browse files Browse the repository at this point in the history
  • Loading branch information
@kulmann @pascalwengerter
kulmann authored and pascalwengerter committed Feb 24, 2022
1 parent 67fd62d commit 33100c3
Show file tree
Hide file tree
Showing 3 changed files with 283 additions and 210 deletions.
29 changes: 6 additions & 23 deletions packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,7 @@
<translate>Folder</translate>
</oc-button>
</li>
<li
v-for="(newFileHandler, key) in newFileHandlersForRoute"
:key="key"
class="create-list-file"
>
<li v-for="(newFileHandler, key) in newFileHandlers" :key="key" class="create-list-file">
<oc-button
appearance="raw"
:class="['new-file-btn-' + newFileHandler.ext]"
Expand Down Expand Up @@ -125,7 +121,7 @@ import pathUtil from 'path'
import Mixins from '../../mixins'
import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
import { isLocationActive, isLocationPublicActive, isLocationSpacesActive } from '../../router'
import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
import { useActiveLocation } from '../../composables'
import { DavProperties, DavProperty } from 'web-pkg/src/constants'
Expand All @@ -141,7 +137,7 @@ export default {
mixins: [Mixins, MixinFileActions],
props: {
canUpload: { type: Boolean, default: false },
currentPath: { type: String, default: null },
currentPath: { type: String, required: true },
hasFreeSpace: { type: Boolean, default: false },
headers: { type: Object, default: null }
},
Expand All @@ -154,15 +150,8 @@ export default {
}
},
computed: {
...mapGetters([
'getToken',
'capabilities',
'configuration',
'newFileHandlers',
'quota',
'user'
]),
...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'publicLinkPassword']),
...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
...mapGetters('Files', ['files', 'currentFolder', 'publicLinkPassword']),
...mapState('Files', ['areHiddenFilesShown']),
mimetypesAllowedForCreation() {
Expand All @@ -174,7 +163,7 @@ export default {
return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
},
createFileActionsAvailable() {
return this.newFileHandlersForRoute.length > 0 || this.mimetypesAllowedForCreation.length > 0
return this.newFileHandlers.length > 0 || this.mimetypesAllowedForCreation.length > 0
},
newButtonTooltip() {
if (!this.canUpload) {
Expand Down Expand Up @@ -214,12 +203,6 @@ export default {
uploadOrFileCreationBlocked() {
return !this.canUpload || !this.hasFreeSpace
},
newFileHandlersForRoute() {
return this.newFileHandlers.filter(({ routes = [] }) =>
isLocationActive(this.$router, ...routes.map((name) => ({ name })))
)
}
},
methods: {
Expand Down
211 changes: 24 additions & 187 deletions packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import DesignSystem from 'owncloud-design-system'
import GetTextPlugin from 'vue-gettext'

import stubs from '@/tests/unit/stubs'
import AppBar from '@files/src/components/AppBar/AppBar'
import {
createLocationCommon,
Expand All @@ -23,68 +22,15 @@ localVue.use(GetTextPlugin, {
const elSelector = {
batchActions: 'batch-actions-stub',
sizeInfo: 'size-info-stub',
newFileButton: '#new-file-menu-btn',
newFileDrop: 'oc-drop-stub #new-file-menu-drop',
newFileMenuList: '#create-list > li',
uploadButton: '#upload-menu-btn',
uploadDrop: 'oc-drop-stub #upload-menu-drop',
uploadMenuList: '#upload-list > li',
fileUpload: 'file-upload-stub',
folderUpload: 'folder-upload-stub',
newFolderBtn: '#new-folder-btn',
newTextFileBtn: '.new-file-btn-txt',
newMdFileBtn: '.new-file-btn-md',
newDrawioFileBtn: '.new-file-btn-drawio'
createAndUpload: 'create-and-upload-stub'
}

const spacesDefaultLocation = createLocationSpaces('files-spaces-personal-home')
const personalHomeLocation = createLocationSpaces('files-spaces-personal-home')
const sharesWithMeLocation = createLocationShares('files-shares-with-me')
const sharesWithOthersLocation = createLocationShares('files-shares-with-others')
const publicFilesLocation = createLocationPublic('files-public-files')
const favoritesLocation = createLocationCommon('files-common-favorites')

const routes = [
spacesDefaultLocation.name,
favoritesLocation.name,
sharesWithOthersLocation.name,
sharesWithMeLocation.name,
publicFilesLocation.name
]

const newFileHandlers = [
{
ext: 'txt',
action: {
app: 'markdown-editor',
newTab: false,
extension: 'txt'
},
routes,
menuTitle: () => 'Plain text file'
},
{
ext: 'md',
action: {
app: 'markdown-editor',
newTab: false,
extension: 'md'
},
routes,
menuTitle: () => 'Mark-down file'
},
{
ext: 'drawio',
action: {
app: 'draw-io',
newTab: true,
routeName: 'draw-io-edit',
extension: 'drawio'
},
routes,
menuTitle: () => 'Draw.io document'
}
]

const selectedFiles = [
{
path: '/lorem.txt',
Expand All @@ -104,7 +50,7 @@ describe('AppBar component', () => {
jest.clearAllMocks()
})

describe.each([spacesDefaultLocation.name, publicFilesLocation.name])('%s route', (page) => {
describe.each([personalHomeLocation.name, publicFilesLocation.name])('%s route', (page) => {
const route = {
name: page,
params: {
Expand All @@ -118,89 +64,25 @@ describe('AppBar component', () => {
}

describe('when no items are selected', () => {
let wrapper

const spyShowCreateResourceModal = jest
.spyOn(AppBar.methods, 'showCreateResourceModal')
.mockImplementation()

beforeEach(() => {
it('should only show create and upload component', () => {
const store = createStore({ selected: [], currentFolder })
wrapper = getShallowWrapper(route, store)
})

it('should only show "New" and "Upload" button', () => {
const newFolderBtn = wrapper.find(elSelector.newFolderBtn)
const wrapper = getShallowWrapper(route, store)
const createAndUpload = wrapper.find(elSelector.createAndUpload)
const sizeInfo = wrapper.find(elSelector.sizeInfo)
const newFileButton = wrapper.find(elSelector.newFileButton)
const uploadButton = wrapper.find(elSelector.uploadButton)

expect(createAndUpload.exists()).toBeTruthy()
expect(sizeInfo.exists()).toBeFalsy()
expect(newFileButton.exists()).toBeFalsy()
expect(uploadButton.exists()).toBeTruthy()
expect(newFolderBtn.isVisible()).toBeTruthy()
expect(newFolderBtn.props('ariaLabel')).toEqual('Create a new folder')
})
it('should show default file menu items', () => {
const fileUpload = wrapper.find(elSelector.fileUpload)
const folderUpload = wrapper.find(elSelector.folderUpload)
const newFolderBtn = wrapper.find(elSelector.newFolderBtn)

expect(fileUpload.isVisible()).toBeTruthy()
expect(folderUpload.isVisible()).toBeTruthy()
expect(newFolderBtn.isVisible()).toBeTruthy()
})
it('should trigger "showCreateResourceModal" if new-folder button is clicked', async () => {
const store = createStore({ currentFolder, selected: [] })
wrapper = getWrapper(route, store)

const newFolderBtn = wrapper.find(elSelector.newFolderBtn)
await newFolderBtn.trigger('click')

expect(spyShowCreateResourceModal).toHaveBeenCalled()
})
it('should show extra file menu items', () => {
const store = createStore({ currentFolder, selected: [] }, newFileHandlers)
wrapper = getShallowWrapper(route, store)
const newTextFileBtn = wrapper.find(elSelector.newTextFileBtn)
const newMdFileBtn = wrapper.find(elSelector.newMdFileBtn)
const newDrawioFileBtn = wrapper.find(elSelector.newDrawioFileBtn)
const newFileMenuList = wrapper.findAll(elSelector.newFileMenuList)

expect(newTextFileBtn.isVisible()).toBeTruthy()
expect(newMdFileBtn.isVisible()).toBeTruthy()
expect(newDrawioFileBtn.isVisible()).toBeTruthy()
expect(newFileMenuList.length).toBe(4)
})
it.each(newFileHandlers)(
'should trigger "showCreateResourceModal" if new file button is clicked',
async (fileHandler) => {
const store = createStore({ currentFolder, selected: [] }, newFileHandlers)
wrapper = getWrapper(route, store)

const button = wrapper.find(getFileHandlerSelector(fileHandler.ext))
await button.trigger('click')

expect(spyShowCreateResourceModal).toHaveBeenCalled()
expect(spyShowCreateResourceModal).toHaveBeenCalledWith(
false,
fileHandler.ext,
fileHandler.action
)
}
)
})

describe('when an item is selected', () => {
it('should hide "New" button but show size info', () => {
it('should hide create and upload component but show size info', () => {
const store = createStore({ currentFolder, selected: selectedFiles })
const wrapper = getShallowWrapper(route, store)
const newButton = wrapper.find(elSelector.newFileButton)
const ocDrop = wrapper.find(elSelector.newFileDrop)
const createAndUpload = wrapper.find(elSelector.createAndUpload)
const sizeInfo = wrapper.find(elSelector.sizeInfo)

expect(newButton.exists()).toBeFalsy()
expect(ocDrop.exists()).toBeFalsy()
expect(createAndUpload.exists()).toBeFalsy()
expect(sizeInfo.isVisible()).toBeTruthy()
})
})
Expand All @@ -222,21 +104,19 @@ describe('AppBar component', () => {
wrapper = getShallowWrapper(route, store)
})

it('should not show "New" button and file menu list', () => {
const newButton = wrapper.find(elSelector.newFileButton)
const ocDrop = wrapper.find(elSelector.newFileDrop)

expect(newButton.exists()).toBeFalsy()
expect(ocDrop.exists()).toBeFalsy()
it('should never show create and upload component', () => {
const createAndUpload = wrapper.find(elSelector.createAndUpload)
expect(createAndUpload.exists()).toBeFalsy()
})

describe('when no items are selected', () => {
it('should show batch actions but not size-info', () => {
const batchActions = wrapper.find(elSelector.batchActions)
it('should not show size-info', () => {
const sizeInfo = wrapper.find(elSelector.sizeInfo)

expect(sizeInfo.exists()).toBeFalsy()
expect(batchActions.isVisible()).toBeTruthy()
})
it('should show batch actions', () => {
const batchActions = wrapper.find(elSelector.batchActions)
expect(batchActions.exists()).toBeTruthy()
})
})

Expand Down Expand Up @@ -272,14 +152,12 @@ describe('AppBar component', () => {
wrapper = getShallowWrapper(route, store)
})

describe('when no items are selected', () => {
it('should not show "New" button and file menu list', () => {
const newButton = wrapper.find(elSelector.newFileButton)
const ocDrop = wrapper.find(elSelector.newFileDrop)
it('should never show create and upload component', () => {
const createAndUpload = wrapper.find(elSelector.createAndUpload)
expect(createAndUpload.exists()).toBeFalsy()
})

expect(newButton.exists()).toBeFalsy()
expect(ocDrop.exists()).toBeFalsy()
})
describe('when no items are selected', () => {
it('should not show size-info', () => {
const sizeInfo = wrapper.find(elSelector.sizeInfo)
expect(sizeInfo.exists()).toBeFalsy()
Expand All @@ -306,46 +184,6 @@ describe('AppBar component', () => {
)
})

function getFileHandlerSelector(extension) {
const ext = extension.toLowerCase()
if (ext === 'txt') {
return elSelector.newTextFileBtn
} else if (ext === 'md') {
return elSelector.newMdFileBtn
} else if (ext === 'drawio') {
return elSelector.newDrawioFileBtn
}
return null
}

function getWrapper(route = {}, store = {}) {
return mount(AppBar, {
localVue,
mocks: {
$route: route,
$router: {
currentRoute: route,
resolve: (r) => {
return { href: r.name }
}
},
publicPage: jest.fn(() => false),
isIE11: jest.fn(() => false)
},
stubs: {
...stubs,
'oc-button': false,
'size-info': true,
'batch-actions': true,
'view-options': true,
'file-drop': true,
'file-upload': true,
'folder-upload': true
},
store
})
}

function getShallowWrapper(route = {}, store = {}) {
return shallowMount(AppBar, {
localVue,
Expand All @@ -368,7 +206,6 @@ function createStore(state = { selected: [], currentFolder: {} }, fileHandlers =
return new Vuex.Store({
getters: {
getToken: jest.fn(),
newFileHandlers: jest.fn(() => fileHandlers),
quota: jest.fn()
},
modules: {
Expand Down
Loading

0 comments on commit 33100c3

Please sign in to comment.