Skip to content

Commit

Permalink
Fixed tests according to changed base component code
Browse files Browse the repository at this point in the history
  • Loading branch information
@kiranparajuli589
kiranparajuli589 committed Dec 9, 2021
1 parent 3a54934 commit 68280f7
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 85 deletions.
161 changes: 78 additions & 83 deletions packages/web-app-files/tests/unit/views/SharedViaLink.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
import { shallowMount, mount } from '@vue/test-utils'
import { useTask } from 'vue-concurrency'
import { getStore, localVue, createFile } from './views.setup.js'
import FileActions from '@files/src/mixins/fileActions'
import SharedViaLink from '@files/src/views/SharedViaLink.vue'

const component = { ...SharedViaLink, mounted: jest.fn() }

const resources = [
createFile({ id: 2147491323, type: 'file' }),
createFile({ id: 2147491324, type: 'file' })
]

const stubs = {
'resource-table': false,
'context-actions': true,
pagination: true,
'list-info': true
}

const $router = {
afterEach: jest.fn(),
currentRoute: {
query: {
name: null
}
query: {}
}
}

Expand All @@ -22,36 +33,13 @@ const $route = {
}
}

const activeFilesCurrentPage = [createFile({ id: 2147491323, type: 'file' })]
localVue.use(useTask)
localVue.prototype.$client.requests = {
ocs: jest.fn(() => ({
status: 200,
json: jest.fn(() =>
Promise.resolve({
ocs: {
data: activeFilesCurrentPage
}
})
)
}))
}

const stubs = {
'router-link': true,
'no-content-message': true,
pagination: true,
'oc-table-files': false,
'context-actions': true,
'list-info': true
}
const listLoaderStub = 'list-loader-stub'
const listInfoStub = 'list-info-stub'
const contextActionsStub = 'context-actions-stub'

const selectors = {
listLoader: '#files-list-progress',
noContentMessage: '#files-shared-via-link-empty',
ocTableFiles: '#files-shared-via-link-table',
contextActions: 'context-actions-stub',
listInfo: 'list-info-stub'
ocTableFiles: '#files-shared-via-link-table'
}

describe('SharedViaLink view', () => {
Expand All @@ -64,38 +52,25 @@ describe('SharedViaLink view', () => {
jest.clearAllMocks()
})

describe.only('when the view is still loading', () => {
describe('when the view is still loading', () => {
it('should show list-loader component', () => {
const store = createStore()
const wrapper = getWrapper(store)
const listLoader = wrapper.find(selectors.listLoader)
const wrapper = getShallowWrapper({ loading: true })
const listLoader = wrapper.find(listLoaderStub)

expect(listLoader.exists()).toBeTruthy()
expect(wrapper).toMatchSnapshot()
})
})

describe('when the view is not loading anymore', () => {
it.only('should not show list-loader component', async () => {
const store = createStore()
const wrapper = getWrapper(store)
// these are required to wait for all async tasks to resolve
// and loadResourcesTask.isRunning to be false
// or we can use fulsh-promises
await wrapper.vm.$nextTick()
await wrapper.vm.$nextTick()
await wrapper.vm.$nextTick()
await wrapper.vm.$nextTick()
await wrapper.vm.$nextTick()
expect(wrapper.find(selectors.listLoader).exists()).toBeFalsy()
it('should not show list-loader component', () => {
const wrapper = getShallowWrapper()
expect(wrapper.find(listLoaderStub).exists()).toBeFalsy()
})

describe('when there are no files to be displayed', () => {
let wrapper
beforeEach(async () => {
stubs['no-content-message'] = false
const store = createStore()
wrapper = getWrapper(store)
wrapper = getMountedWrapper({ stubs })
})

it('should show no-content-message component', () => {
Expand All @@ -104,16 +79,24 @@ describe('SharedViaLink view', () => {
expect(noContentMessage.exists()).toBeTruthy()
expect(wrapper).toMatchSnapshot()
})

it('should not show oc-table-files component', () => {
expect(wrapper.find(selectors.ocTableFiles).exists()).toBeFalsy()
})
})

describe('when there are one or more files to be displayed', () => {
let wrapper
beforeEach(async () => {
const store = createStore(activeFilesCurrentPage)
wrapper = getWrapper(store)
beforeEach(() => {
const store = createStore({
totalFilesCount: { files: resources.length, folders: 0 }
})
wrapper = getMountedWrapper({
store,
setup: {
paginatedResources: resources
}
})
})

it('should not show no-content-message component', () => {
Expand All @@ -123,15 +106,15 @@ describe('SharedViaLink view', () => {
const ocTableFiles = wrapper.find(selectors.ocTableFiles)

expect(ocTableFiles.exists()).toBeTruthy()
expect(ocTableFiles.props().resources).toMatchObject(activeFilesCurrentPage)
expect(ocTableFiles.props().resources).toMatchObject(resources)
expect(ocTableFiles.props().areThumbnailsDisplayed).toBe(false)
expect(ocTableFiles.props().headerPosition).toBe(0)
expect(ocTableFiles.props().targetRoute).toMatchObject({ name: 'files-personal' })
})
it('should set props on list-info component', () => {
const listInfo = wrapper.find(selectors.listInfo)
const listInfo = wrapper.find(listInfoStub)

expect(listInfo.props().files).toEqual(activeFilesCurrentPage.length)
expect(listInfo.props().files).toEqual(resources.length)
expect(listInfo.props().folders).toEqual(0)
})
it('should trigger the default action when a "fileClick" event gets emitted', () => {
Expand All @@ -144,56 +127,68 @@ describe('SharedViaLink view', () => {
expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(1)
})
it('should lazily load previews when a "rowMounted" event gets emitted', () => {
expect(spyRowMounted).toHaveBeenCalledTimes(activeFilesCurrentPage.length)
expect(spyRowMounted).toHaveBeenCalledTimes(resources.length)
})
it('should not show context actions', () => {
const contextActions = wrapper.find(selectors.contextActions)
const contextActions = wrapper.find(contextActionsStub)

expect(contextActions.exists()).toBeFalsy()
})

describe('when a file is highlighted', () => {
it('should set props on context-actions component', async () => {
const store = createStore(activeFilesCurrentPage, activeFilesCurrentPage[0])
const wrapper = getWrapper(store)

const contextActions = wrapper.find(selectors.contextActions)
it('should set props on context-actions component', () => {
const selectedFiles = [resources[0]]
const store = createStore({
totalFilesCount: { files: resources.length, folders: 0 },
selectedFiles: selectedFiles
})
const wrapper = getMountedWrapper({
store: store,
setup: {
paginatedResources: resources
}
})
const contextActions = wrapper.find(contextActionsStub)

expect(contextActions.exists()).toBeTruthy()
expect(contextActions.props().item).toMatchObject(activeFilesCurrentPage[0])
expect(contextActions.props().items).toMatchObject(selectedFiles)
})
})
})
})
})

function getWrapper(store) {
return mount(SharedViaLink, {
function mountOptions(store, loading, setup = {}) {
return {
localVue,
store,
store: store,
stubs,
mocks: {
$route,
$router
}
})
},
setup: () => ({
loadResourcesTask: {
isRunning: loading,
perform: jest.fn()
},
...setup
})
}
}

function getShallowWrapper(store) {
return shallowMount(SharedViaLink, {
localVue,
store,
mocks: {
$route,
$router
}
})
function getMountedWrapper({ store = createStore(), loading = false, setup, stubs } = {}) {
return mount(component, mountOptions(store, loading, setup))
}

function getShallowWrapper({ store = createStore(), loading = false, setup, stubs } = {}) {
return shallowMount(component, mountOptions(store, loading, setup))
}

function createStore(activeFilesCurrentPage = [], highlightedFile = null) {
function createStore({ totalFilesCount, highlightedFile, selectedFiles } = {}) {
return getStore({
highlightedFile: highlightedFile,
activeFilesCurrentPage,
totalFilesCount: { files: activeFilesCurrentPage.length, folders: 0 }
highlightedFile,
totalFilesCount,
selectedFiles
})
}
11 changes: 9 additions & 2 deletions packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SharedViaLink view when the view is still loading should show list-loader component 1`] = `
exports[`SharedViaLink view when the view is not loading anymore when there are no files to be displayed should show no-content-message component 1`] = `
<div>
<div class="uk-flex uk-flex-middle uk-flex-center uk-height-1-1"><span aria-label="" tabindex="-1" role="img" class="oc-spinner oc-spinner-l" id="files-list-progress" aria-hidden="true"></span></div>
<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty" id="files-shared-via-link-empty">
<div class="oc-icon oc-icon-xxl oc-icon-passive"><svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path xmlns="http://www.w3.org/2000/svg" d="M0 0h24v24H0z" fill="none"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
</svg></div>
<div class="oc-text-muted uk-text-large"><span data-msgid="There are no resources with a public link at the moment" data-current-language="en_US">There are no resources with a public link at the moment</span></div>
<div class="oc-text-muted"></div>
</div>
</div>
`;

0 comments on commit 68280f7

Please sign in to comment.