-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[unit-tests-only] Add unit tests for SharedViaLink view (#5778)
* add unit tests for SharedViaLink view add flush-promises package add unit tests for SharedViaLink view add unit tests for SharedViaLink view address reviews update tests after component changes * update tests * Fixed tests according to changed base component code Co-authored-by: Kiran Parajuli <kiranparajuli589@gmail.com>
- Loading branch information
1 parent
0407f3d
commit 7647b32
Showing
3 changed files
with
199 additions
and
16 deletions.
There are no files selected for viewing
193 changes: 179 additions & 14 deletions
193
packages/web-app-files/tests/unit/views/SharedViaLink.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,194 @@ | ||
import { shallowMount, mount } from '@vue/test-utils' | ||
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: {} | ||
} | ||
} | ||
|
||
const $route = { | ||
params: { | ||
fileId: '2147491323' | ||
}, | ||
meta: { | ||
title: 'Resolving private link' | ||
} | ||
} | ||
|
||
const listLoaderStub = 'list-loader-stub' | ||
const listInfoStub = 'list-info-stub' | ||
const contextActionsStub = 'context-actions-stub' | ||
|
||
const selectors = { | ||
noContentMessage: '#files-shared-via-link-empty', | ||
ocTableFiles: '#files-shared-via-link-table' | ||
} | ||
|
||
describe('SharedViaLink view', () => { | ||
describe('when the page has loaded successfully', () => { | ||
it.todo('should load the resources') | ||
it.todo('should adjust the table header position') | ||
const spyTriggerDefaultAction = jest | ||
.spyOn(FileActions.methods, '$_fileActions_triggerDefaultAction') | ||
.mockImplementation() | ||
const spyRowMounted = jest.spyOn(SharedViaLink.methods, 'rowMounted') | ||
|
||
afterEach(() => { | ||
jest.clearAllMocks() | ||
}) | ||
|
||
describe('when the view is still loading', () => { | ||
it.todo('should show list-loader component') | ||
it('should show list-loader component', () => { | ||
const wrapper = getShallowWrapper({ loading: true }) | ||
const listLoader = wrapper.find(listLoaderStub) | ||
|
||
expect(listLoader.exists()).toBeTruthy() | ||
}) | ||
}) | ||
|
||
describe('when the view is not loading anymore', () => { | ||
it.todo('should not show list-loader component') | ||
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', () => { | ||
it.todo('should show no-content-message component') | ||
it.todo('should not show resource-table component') | ||
let wrapper | ||
beforeEach(async () => { | ||
wrapper = getMountedWrapper({ stubs }) | ||
}) | ||
|
||
it('should show no-content-message component', () => { | ||
const noContentMessage = wrapper.find(selectors.noContentMessage) | ||
|
||
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', () => { | ||
it.todo('should not show no-content-message component') | ||
it.todo('should show resource-table component with props') | ||
it.todo('should set props on context-actions component') | ||
it.todo('should set props on list-info component') | ||
it.todo('should trigger showing the sidebar when a "showDetails" event gets emitted') | ||
it.todo('should trigger the default action when a "fileClick" event gets emitted') | ||
it.todo('should lazily load previews when a "rowMounted" event gets emitted') | ||
let wrapper | ||
beforeEach(() => { | ||
const store = createStore({ | ||
totalFilesCount: { files: resources.length, folders: 0 } | ||
}) | ||
wrapper = getMountedWrapper({ | ||
store, | ||
setup: { | ||
paginatedResources: resources | ||
} | ||
}) | ||
}) | ||
|
||
it('should not show no-content-message component', () => { | ||
expect(wrapper.find(selectors.noContentMessage).exists()).toBeFalsy() | ||
}) | ||
it('should show oc-table-files component with props', () => { | ||
const ocTableFiles = wrapper.find(selectors.ocTableFiles) | ||
|
||
expect(ocTableFiles.exists()).toBeTruthy() | ||
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(listInfoStub) | ||
|
||
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', () => { | ||
const ocTableFiles = wrapper.find(selectors.ocTableFiles) | ||
|
||
expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(0) | ||
|
||
ocTableFiles.vm.$emit('fileClick') | ||
|
||
expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(1) | ||
}) | ||
it('should lazily load previews when a "rowMounted" event gets emitted', () => { | ||
expect(spyRowMounted).toHaveBeenCalledTimes(resources.length) | ||
}) | ||
it('should not show context actions', () => { | ||
const contextActions = wrapper.find(contextActionsStub) | ||
|
||
expect(contextActions.exists()).toBeFalsy() | ||
}) | ||
|
||
describe('when a file is highlighted', () => { | ||
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().items).toMatchObject(selectedFiles) | ||
}) | ||
}) | ||
}) | ||
}) | ||
}) | ||
|
||
function mountOptions(store, loading, setup = {}) { | ||
return { | ||
localVue, | ||
store: store, | ||
stubs, | ||
mocks: { | ||
$route, | ||
$router | ||
}, | ||
setup: () => ({ | ||
loadResourcesTask: { | ||
isRunning: loading, | ||
perform: jest.fn() | ||
}, | ||
...setup | ||
}) | ||
} | ||
} | ||
|
||
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({ totalFilesCount, highlightedFile, selectedFiles } = {}) { | ||
return getStore({ | ||
highlightedFile, | ||
totalFilesCount, | ||
selectedFiles | ||
}) | ||
} |
14 changes: 14 additions & 0 deletions
14
packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
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-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> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters