[unit-tests-only] Added unit tests for shared with others view

packages/web-app-files/tests/unit/views/SharedWithOthers.spec.js

@@ -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'
+        }
+      }
+    })
+  }
+})

packages/web-app-files/tests/unit/views/__snapshots__/SharedWithOthers.spec.js.snap

@@ -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>
+`;