[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>

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

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

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

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

packages/web-app-files/tests/unit/views/views.setup.js

@@ -81,7 +81,9 @@ export const getStore = function ({
     modules: {
       Files: {
         state: {
-          resource: null
+          resource: null,
+          filesPageLimit: 100,
+          files: []
         },
         getters: {
           totalFilesCount: () => totalFilesCount,
@@ -99,7 +101,9 @@ export const getStore = function ({
           UPDATE_RESOURCE: (state, resource) => {
             state.resource = resource
           },
-          CLEAR_FILES_SEARCHED: () => {}
+          CLEAR_FILES_SEARCHED: () => {},
+          CLEAR_CURRENT_FILES_LIST: () => {},
+          LOAD_FILES: () => {}
         },
         namespaced: true,
         modules: {