Added unit tests for shared with others view

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

@@ -0,0 +1,225 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import { getStore, localVue, createFile } from './views.setup.js'
+import FileActions from '@files/src/mixins/fileActions.js'
+import SharedWithOthers from '@files/src/views/SharedWithOthers.vue'
+
+const $route = { params: { page: 1 } }
+const $router = {
+  afterEach: jest.fn(),
+  currentRoute: {
+    query: {}
+  }
+}
+
+const stubs = {
+  'list-loader': true,
+  'no-content-message': true,
+  'resource-table': true,
+  'context-actions': true,
+  pagination: true,
+  'list-info': true,
+  'router-link': RouterLinkStub
+}
+
+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 resourcesList = [
+        createFile({ id: '1234' }),
+        createFile({ id: '5896' }),
+        createFile({ id: '6789' })
+      ]
+
+      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: 3,
+          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 mountOptions({ store, loading, paginatedResources, paginationPages, paginationPage }) {
+    return {
+      localVue,
+      store: store,
+      stubs,
+      mocks: {
+        $route,
+        $router
+      },
+      setup: () => ({
+        loadResourcesTask: {
+          isRunning: loading,
+          perform: jest.fn()
+        },
+        paginatedResources: paginatedResources,
+        paginationPages: paginationPages,
+        paginationPage: paginationPage
+      })
+    }
+  }
+
+  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() }
+    return mount(
+      component,
+      mountOptions({
+        store,
+        loading,
+        paginatedResources,
+        paginationPages,
+        paginationPage
+      })
+    )
+  }
+})

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

@@ -0,0 +1,96 @@
+// 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"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-checkbox-m" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></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> <button aria-label="Sort by name" class="oc-button-sort oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" variant="passive"></button></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-status" style="top: 0px;"><span class="oc-table-thead-content">Status</span>
+        <!---->
+      </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="file-id-1234" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-1234">
+      <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 "><span><input id="resource-table-select-file-id-1234" type="checkbox" name="checkbox" class="oc-checkbox oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-1234" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></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">
+        <div class="oc-resource oc-text-overflow"><span class="oc-icon oc-icon-l oc-icon-passive"><!----></span>
+          <div class="oc-resource-details oc-text-overflow"><a class="oc-text-overflow">
+              <!----> <span data-test-resource-path="/file-path/1234" data-test-resource-name="file-path/file-name-1234" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-1234</span></span>
+              <!---->
+              </span>
+            </a>
+            <div class="oc-resource-indicators"><a class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></a>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </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-status"></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"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-1234" class="oc-drop oc-box-shadow-medium"></div>
+        </div>
+      </td>
+    </tr>
+    <tr tabindex="-1" data-item-id="file-id-5896" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-5896">
+      <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 "><span><input id="resource-table-select-file-id-5896" type="checkbox" name="checkbox" class="oc-checkbox oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-5896" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></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">
+        <div class="oc-resource oc-text-overflow"><span class="oc-icon oc-icon-l oc-icon-passive"><!----></span>
+          <div class="oc-resource-details oc-text-overflow"><a class="oc-text-overflow">
+              <!----> <span data-test-resource-path="/file-path/5896" data-test-resource-name="file-path/file-name-5896" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-5896</span></span>
+              <!---->
+              </span>
+            </a>
+            <div class="oc-resource-indicators"><a class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></a>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </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-status"></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"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-5896" class="oc-drop oc-box-shadow-medium"></div>
+        </div>
+      </td>
+    </tr>
+    <tr tabindex="-1" data-item-id="file-id-6789" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-6789">
+      <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 "><span><input id="resource-table-select-file-id-6789" type="checkbox" name="checkbox" class="oc-checkbox oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-6789" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></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">
+        <div class="oc-resource oc-text-overflow"><span class="oc-icon oc-icon-l oc-icon-passive"><!----></span>
+          <div class="oc-resource-details oc-text-overflow"><a class="oc-text-overflow">
+              <!----> <span data-test-resource-path="/file-path/6789" data-test-resource-name="file-path/file-name-6789" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-6789</span></span>
+              <!---->
+              </span>
+            </a>
+            <div class="oc-resource-indicators"><a class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></a>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </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-status"></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"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-6789"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-6789" class="oc-drop oc-box-shadow-medium"></div>
+        </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="3" folders="0" class="oc-width-1-1 oc-my-s"></list-info-stub>
+      </td>
+    </tr>
+  </tfoot>
+</table>
+`;