-
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.
Added unit tests for shared with others view
- Loading branch information
1 parent
fab3c7c
commit 1375055
Showing
2 changed files
with
312 additions
and
0 deletions.
There are no files selected for viewing
212 changes: 212 additions & 0 deletions
212
packages/web-app-files/tests/unit/views/SharedWithOthers.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 |
---|---|---|
@@ -0,0 +1,212 @@ | ||
import { mount } from '@vue/test-utils' | ||
import { getStore, localVue } from './views.setup.js' | ||
import FileActions from '@files/src/mixins/fileActions.js' | ||
import SharedWithOthers from '@files/src/views/SharedWithOthers.vue' | ||
import SharedData from '@/__fixtures__/sharedFiles.js' | ||
|
||
const resourcesList = SharedData.json().ocs.data | ||
|
||
const stubs = { | ||
'list-loader': true, | ||
'no-content-message': true, | ||
'resource-table': true, | ||
'context-actions': true, | ||
pagination: true, | ||
'list-info': true, | ||
'oc-resource': true, | ||
'oc-checkbox': true, | ||
'oc-avatars': true, | ||
'oc-resource-size': true, | ||
'oc-button': true, | ||
'oc-drop': true | ||
} | ||
|
||
const listLoaderStub = 'list-loader-stub' | ||
const noContentStub = 'no-content-message-stub' | ||
const filesTableStub = 'resource-table-stub' | ||
const filesTableSelector = '#files-shared-with-others-table' | ||
const contextActionsStub = 'context-actions-stub' | ||
const listInfoStub = 'list-info-stub' | ||
const paginationStub = 'pagination-stub' | ||
|
||
describe('SharedWithOthers', () => { | ||
it('should show the list loader when the wrapper is still loading', () => { | ||
const wrapper = getMountedWrapper({ loading: true }) | ||
|
||
expect(wrapper.find(listLoaderStub).exists()).toBeTruthy() | ||
expect(wrapper.find(noContentStub).exists()).toBeFalsy() | ||
expect(wrapper.find(filesTableStub).exists()).toBeFalsy() | ||
}) | ||
describe('when the wrapper is not loading anymore', () => { | ||
it('should show the no content message component if the paginated resources is empty', () => { | ||
const wrapper = getMountedWrapper() | ||
|
||
expect(wrapper.find(listLoaderStub).exists()).toBeFalsy() | ||
expect(wrapper.find(filesTableStub).exists()).toBeFalsy() | ||
expect(wrapper.find(noContentStub).exists()).toBeTruthy() | ||
}) | ||
describe('when length of paginated resources is greater than zero', () => { | ||
const wrapper = getMountedWrapper({ paginatedResources: resourcesList }) | ||
|
||
it('should not show the no content message component', () => { | ||
expect(wrapper.find(noContentStub).exists()).toBeFalsy() | ||
}) | ||
|
||
it('should load the resource table with correct props', () => { | ||
stubs['resource-table'] = false | ||
const wrapper = getMountedWrapper({ paginatedResources: resourcesList }) | ||
const filesTable = wrapper.find(filesTableSelector) | ||
|
||
expect(filesTable.exists()).toBeTruthy() | ||
expect(filesTable).toMatchSnapshot() | ||
|
||
stubs['resource-table'] = true | ||
}) | ||
|
||
describe('context menu', () => { | ||
let wrapper | ||
const selectedResources = [resourcesList[0], resourcesList[1]] | ||
const notSelectedResources = [resourcesList[2]] | ||
beforeEach(() => { | ||
stubs['resource-table'] = false | ||
|
||
wrapper = getMountedWrapper({ | ||
selectedFiles: selectedResources, | ||
paginatedResources: resourcesList, | ||
paginationPage: 1, | ||
paginationPages: 2 | ||
}) | ||
}) | ||
afterEach(() => { | ||
stubs['resource-table'] = true | ||
}) | ||
it('should show the context actions for every selected resource', () => { | ||
selectedResources.forEach((selectedResource) => { | ||
const fileRow = wrapper.find(`[data-item-id="${selectedResource.id}"]`) | ||
const contextMenu = fileRow.find(contextActionsStub) | ||
expect(contextMenu.exists()).toBeTruthy() | ||
expect(contextMenu.props().items).toMatchObject(selectedResources) | ||
}) | ||
}) | ||
it('should not show the context actions for a resource that is not selected', () => { | ||
notSelectedResources.forEach((notSelectedResource) => { | ||
const fileRow = wrapper.find(`[data-item-id="${notSelectedResource.id}"]`) | ||
const contextMenu = fileRow.find(contextActionsStub) | ||
expect(contextMenu.exists()).toBeFalsy() | ||
}) | ||
}) | ||
}) | ||
|
||
it('should show the list info component for the resource table', () => { | ||
stubs['resource-table'] = false | ||
|
||
const wrapper = getMountedWrapper({ | ||
paginationPage: 1, | ||
paginationPages: 1, | ||
paginatedResources: resourcesList | ||
}) | ||
const listInfo = wrapper.find(listInfoStub) | ||
|
||
expect(listInfo.exists()).toBeTruthy() | ||
expect(listInfo.props()).toMatchObject({ | ||
files: resourcesList.length, | ||
folders: 0, | ||
size: null | ||
}) | ||
stubs['resource-table'] = true | ||
}) | ||
|
||
describe('pagination component', () => { | ||
it('should be visible if the "paginationPages" is greater than one', () => { | ||
stubs['resource-table'] = false | ||
const wrapper = getMountedWrapper({ | ||
paginationPage: 1, | ||
paginationPages: 2, | ||
paginatedResources: resourcesList | ||
}) | ||
|
||
const pagination = wrapper.find(paginationStub) | ||
|
||
expect(pagination.exists()).toBeTruthy() | ||
expect(pagination.props()).toMatchObject({ | ||
pages: 2, | ||
currentPage: 1 | ||
}) | ||
stubs['resource-table'] = true | ||
}) | ||
}) | ||
|
||
it('should call "$_fileActions_triggerDefaultAction" method if "fileClick" event is emitted from the resource table component', () => { | ||
const spyFileActionsTriggerDefaultAction = jest | ||
.spyOn(FileActions.methods, '$_fileActions_triggerDefaultAction') | ||
.mockImplementation() | ||
const wrapper = getMountedWrapper({ | ||
paginatedResources: resourcesList, | ||
paginationPage: 1, | ||
paginationPages: 2 | ||
}) | ||
const filesTable = wrapper.find(filesTableStub) | ||
expect(spyFileActionsTriggerDefaultAction).toHaveBeenCalledTimes(0) | ||
|
||
filesTable.vm.$emit('fileClick') | ||
|
||
expect(spyFileActionsTriggerDefaultAction).toHaveBeenCalledTimes(1) | ||
}) | ||
|
||
it('should call "rowMounted" method if "rowMounted" event is emitted from the resource table component', () => { | ||
const spyRowMounted = jest | ||
.spyOn(SharedWithOthers.methods, 'rowMounted') | ||
.mockImplementation() | ||
const wrapper = getMountedWrapper({ | ||
paginatedResources: resourcesList, | ||
paginationPage: 1, | ||
paginationPages: 2 | ||
}) | ||
const filesTable = wrapper.find(filesTableStub) | ||
expect(spyRowMounted).toHaveBeenCalledTimes(0) | ||
|
||
filesTable.vm.$emit('rowMounted') | ||
|
||
expect(spyRowMounted).toHaveBeenCalledTimes(1) | ||
}) | ||
}) | ||
}) | ||
|
||
function getMountedWrapper({ | ||
selectedFiles = [], | ||
loading = false, | ||
paginatedResources = [], | ||
paginationPages = 12, | ||
paginationPage = 21 | ||
} = {}) { | ||
const store = getStore({ | ||
selectedFiles, | ||
totalFilesCount: { files: paginatedResources.length, folders: 0 } | ||
}) | ||
const component = { | ||
...SharedWithOthers, | ||
created: jest.fn(), | ||
mounted: jest.fn(), | ||
setup: () => ({ | ||
loadResourcesTask: { | ||
isRunning: loading, | ||
perform: jest.fn() | ||
}, | ||
paginatedResources: paginatedResources, | ||
paginationPages: paginationPages, | ||
paginationPage: paginationPage, | ||
handleSort: jest.fn() | ||
}) | ||
} | ||
return mount(component, { | ||
localVue, | ||
store: store, | ||
stubs, | ||
mocks: { | ||
$route: { | ||
name: 'some-route' | ||
} | ||
} | ||
}) | ||
} | ||
}) |
100 changes: 100 additions & 0 deletions
100
packages/web-app-files/tests/unit/views/__snapshots__/SharedWithOthers.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,100 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`SharedWithOthers when the wrapper is not loading anymore when length of paginated resources is greater than zero should load the resource table with correct props 1`] = ` | ||
<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-shared-with-others-table"> | ||
<thead class="oc-thead"> | ||
<tr tabindex="-1" class="oc-table-header-row"> | ||
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-s " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><oc-checkbox-stub id="resource-table-select-all" label="Select all resources" hidelabel="true" size="medium"></oc-checkbox-stub></div></span> | ||
<!----> | ||
</th> | ||
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content">Name</span> | ||
<oc-button-stub type="button" size="medium" arialabel="Sort by name" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" variant="passive" class="oc-button-sort"></oc-button-stub> | ||
</th> | ||
<th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-sharedWith" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content">Shared with</span> | ||
<oc-button-stub type="button" size="medium" arialabel="Sort by sharedWith" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" variant="passive" class="oc-button-sort"></oc-button-stub> | ||
</th> | ||
<th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-actions oc-pr-s" style="top: 0px;"><span class="oc-table-thead-content">Actions</span> | ||
<!----> | ||
</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr tabindex="-1" data-item-id="38" draggable="false" class="oc-tbody-tr oc-tbody-tr-38"> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-s "> | ||
<oc-checkbox-stub id="resource-table-select-38" value="" option="[object Object]" label="Select file" hidelabel="true" size="large"></oc-checkbox-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name"> | ||
<oc-resource-stub resource="[object Object]" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith"> | ||
<oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This file is shared via 1 link" class="resource-table-people"></oc-avatars-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-s"> | ||
<div class="resource-table-actions"> | ||
<oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-38" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub> | ||
<oc-drop-stub dropid="context-menu-drop-38" popperoptions="[object Object]" toggle="#context-menu-trigger-38" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove"></oc-drop-stub> | ||
</div> | ||
</td> | ||
</tr> | ||
<tr tabindex="-1" data-item-id="64" draggable="false" class="oc-tbody-tr oc-tbody-tr-64"> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-s "> | ||
<oc-checkbox-stub id="resource-table-select-64" value="" option="[object Object]" label="Select file" hidelabel="true" size="large"></oc-checkbox-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name"> | ||
<oc-resource-stub resource="[object Object]" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith"> | ||
<oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This file is shared via 1 link" class="resource-table-people"></oc-avatars-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-s"> | ||
<div class="resource-table-actions"> | ||
<oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-64" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub> | ||
<oc-drop-stub dropid="context-menu-drop-64" popperoptions="[object Object]" toggle="#context-menu-trigger-64" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove"></oc-drop-stub> | ||
</div> | ||
</td> | ||
</tr> | ||
<tr tabindex="-1" data-item-id="39" draggable="false" class="oc-tbody-tr oc-tbody-tr-39"> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-s "> | ||
<oc-checkbox-stub id="resource-table-select-39" value="" option="[object Object]" label="Select file" hidelabel="true" size="large"></oc-checkbox-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name"> | ||
<oc-resource-stub resource="[object Object]" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith"> | ||
<oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This file is shared via 1 link" class="resource-table-people"></oc-avatars-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-s"> | ||
<div class="resource-table-actions"> | ||
<oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-39" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub> | ||
<oc-drop-stub dropid="context-menu-drop-39" popperoptions="[object Object]" toggle="#context-menu-trigger-39" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove"></oc-drop-stub> | ||
</div> | ||
</td> | ||
</tr> | ||
<tr tabindex="-1" data-item-id="30" draggable="false" class="oc-tbody-tr oc-tbody-tr-30"> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-s "> | ||
<oc-checkbox-stub id="resource-table-select-30" value="" option="[object Object]" label="Select file" hidelabel="true" size="large"></oc-checkbox-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name"> | ||
<oc-resource-stub resource="[object Object]" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sharedWith"> | ||
<oc-avatars-stub items="[object Object],[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription="This file is shared via 1 invite This file is shared via 1 link" class="resource-table-people"></oc-avatars-stub> | ||
</td> | ||
<td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-s"> | ||
<div class="resource-table-actions"> | ||
<oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-30" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub> | ||
<oc-drop-stub dropid="context-menu-drop-30" popperoptions="[object Object]" toggle="#context-menu-trigger-30" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove"></oc-drop-stub> | ||
</div> | ||
</td> | ||
</tr> | ||
</tbody> | ||
<tfoot class="oc-table-footer"> | ||
<tr class="oc-table-footer-row"> | ||
<td colspan="4" class="oc-table-footer-cell"> | ||
<pagination-stub pages="12" currentpage="21"></pagination-stub> | ||
<list-info-stub files="4" folders="0" class="oc-width-1-1 oc-my-s"></list-info-stub> | ||
</td> | ||
</tr> | ||
</tfoot> | ||
</table> | ||
`; |