tests: replace integration page size test with unit tests

packages/web-app-files/src/components/AppBar/ViewOptions.vue

@@ -29,7 +29,7 @@
         </li>
         <li class="files-view-options-list-item">
           <oc-page-size
-            v-model="$_filesListPagination_pageItemsLimit"
+            v-model="pageItemsLimit"
             data-testid="files-pagination-size"
             :label="$gettext('Items per page')"
             :options="[100, 500, 1000, $gettext('All')]"
@@ -44,13 +44,9 @@
 <script>
 import { mapMutations, mapState } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
-    ...mapState('Files', ['areHiddenFilesShown']),
+    ...mapState('Files', ['areHiddenFilesShown', 'filesPageLimit']),
 
     viewButtonAriaLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -64,11 +60,43 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
+    },
+
+    pageItemsLimit: {
+      get() {
+        return this.filesPageLimit
+      },
+
+      set(value) {
+        this.updateQuery(value)
+      }
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(route) {
+        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
+          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
+
+          return
+        }
+
+        this.updateQuery()
+      },
+      immediate: true
     }
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILES_PAGE_LIMIT']),
+
+    updateQuery(limit = this.pageItemsLimit) {
+      const query = { ...this.$route.query, 'items-limit': limit }
+
+      this.SET_FILES_PAGE_LIMIT(limit)
+      this.$router.replace({ query }).catch(() => {})
+    }
   }
 }
 </script>

packages/web-app-files/src/components/FilesList/Pagination.vue

@@ -4,28 +4,21 @@
     :pages="pages"
     :current-page="currentPage"
     :max-displayed="3"
-    :current-route="$_filesListPagination_targetRoute"
+    :current-route="targetRoute"
     class="files-pagination uk-flex uk-flex-center oc-my-s"
   />
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
     ...mapState('Files', ['currentPage']),
-    ...mapGetters('Files', ['pages'])
-  },
+    ...mapGetters('Files', ['pages']),
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
+    targetRoute() {
+      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
     }
   }
 }

packages/web-app-files/src/mixins/filesListPagination.js

@@ -1,54 +1,13 @@
-import { mapMutations, mapState } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
-  computed: {
-    ...mapState('Files', ['filesPageLimit']),
-
-    $_filesListPagination_targetRoute() {
-      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
-    },
-
-    $_filesListPagination_pageItemsLimit: {
-      get() {
-        return this.filesPageLimit
-      },
-
-      set(value) {
-        this.SET_FILES_PAGE_LIMIT(value)
-        this.$_filesListPagination_updateQuery(value)
-      }
-    }
-  },
-
-  watch: {
-    $route: {
-      handler(route) {
-        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
-          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
-
-          return
-        }
-
-        this.$_filesListPagination_updateQuery()
-      },
-      immediate: true
-    }
-  },
-
   methods: {
-    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE', 'SET_FILES_PAGE_LIMIT']),
+    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE']),
 
     $_filesListPagination_updateCurrentPage() {
       const page = this.$route.params.page || 1
 
       this.UPDATE_CURRENT_PAGE(page)
-    },
-
-    $_filesListPagination_updateQuery(limit = this.$_filesListPagination_pageItemsLimit) {
-      const query = { ...this.$route.query, 'items-limit': limit }
-
-      this.SET_FILES_PAGE_LIMIT(limit)
-      this.$router.replace({ query }).catch(() => {})
     }
   }
 }

packages/web-app-files/src/views/Favorites.vue

@@ -117,6 +117,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

packages/web-app-files/src/views/LocationPicker.vue

@@ -246,6 +246,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTarget(this.$route)
         }
+
+        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }

packages/web-app-files/src/views/Personal.vue

@@ -157,6 +157,8 @@ export default {
           return
         }
 
+        this.$_filesListPagination_updateCurrentPage()
+
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
         if (!sameRoute || !sameItem) {

packages/web-app-files/src/views/PublicFiles.vue

@@ -145,6 +145,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResources(sameRoute)
         }
+
+        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     },

packages/web-app-files/src/views/SharedViaLink.vue

@@ -122,6 +122,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

packages/web-app-files/src/views/SharedWithMe.vue

@@ -161,6 +161,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

packages/web-app-files/src/views/SharedWithOthers.vue

@@ -124,6 +124,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

packages/web-app-files/src/views/Trashbin.vue

@@ -99,6 +99,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

packages/web-app-files/tests/integration/specs/pagination.spec.js

@@ -181,26 +181,4 @@ describe('User can navigate in files list using pagination', () => {
       expect(document.querySelector('.oc-pagination-list-item-current').textContent).toMatch('2')
     }
   )
-
-  test.each(cases)(
-    'Items per page limit can be updated via route query in %s',
-    async (name, route, component) => {
-      const { getByText, queryByText } = render(
-        component,
-        { routes, store },
-        (vue, store, router) => {
-          const _route = { path: route, query: { 'items-limit': 1 } }
-
-          router.push(_route)
-        }
-      )
-
-      await waitFor(() =>
-        expect(document.querySelector(`#files-${toKebabCase(name)}-table`)).toBeVisible()
-      )
-
-      expect(getByText('.hidden-folder')).toBeVisible()
-      expect(queryByText('Documents')).toBe(null)
-    }
-  )
 })