1 files changed, 62 insertions, 9 deletions

diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
index f590cff0312..dd70fca9dd2 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -1,12 +1,12 @@
 import {
   GlAlert,
-  GlDropdown,
-  GlDropdownItem,
   GlFormInputGroup,
   GlFormGroup,
   GlModal,
   GlSprintf,
   GlSkeletonLoader,
+  GlDisclosureDropdown,
+  GlDisclosureDropdownItem,
 } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -18,12 +18,13 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/dependency_proxy/constants';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_ACCEPTED } from '~/lib/utils/http_status';
-
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ManifestsList from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue';
-
+import createRouter from '~/packages_and_registries/dependency_proxy/router';
 import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
 
 import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data';
@@ -37,6 +38,7 @@ Vue.use(VueApollo);
 
 describe('DependencyProxyApp', () => {
   let wrapper;
+  let router;
   let apolloProvider;
   let resolver;
   let mock;
@@ -53,15 +55,14 @@ describe('DependencyProxyApp', () => {
     const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
+    router = createRouter('/');
 
     wrapper = shallowMountExtended(DependencyProxyApp, {
       apolloProvider,
       provide,
+      router,
       stubs: {
         GlAlert,
-        GlDropdown,
-        GlDropdownItem,
-        GlFormInputGroup,
         GlFormGroup,
         GlModal,
         GlSprintf,
@@ -79,7 +80,7 @@ describe('DependencyProxyApp', () => {
   const findProxyCountText = () => wrapper.findByTestId('proxy-count');
   const findManifestList = () => wrapper.findComponent(ManifestsList);
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
-  const findClearCacheDropdownList = () => wrapper.findComponent(GlDropdown);
+  const findClearCacheDropdownList = () => wrapper.findComponent(GlDisclosureDropdown);
   const findClearCacheModal = () => wrapper.findComponent(GlModal);
   const findClearCacheAlert = () => wrapper.findComponent(GlAlert);
   const findSettingsLink = () => wrapper.findByTestId('settings-link');
@@ -94,6 +95,7 @@ describe('DependencyProxyApp', () => {
 
     mock = new MockAdapter(axios);
     mock.onDelete(expectedUrl).reply(HTTP_STATUS_ACCEPTED, {});
+    setWindowLocation(TEST_HOST);
   });
 
   afterEach(() => {
@@ -123,6 +125,13 @@ describe('DependencyProxyApp', () => {
           return waitForPromises();
         });
 
+        it('resolver is called with right arguments', () => {
+          expect(resolver).toHaveBeenCalledWith({
+            first: GRAPHQL_PAGE_SIZE,
+            fullPath: provideDefaults.groupPath,
+          });
+        });
+
         it('renders a form group with a label', () => {
           expect(findFormGroup().attributes('label')).toBe(
             DependencyProxyApp.i18n.proxyImagePrefix,
@@ -225,6 +234,7 @@ describe('DependencyProxyApp', () => {
                   fullPath: provideDefaults.groupPath,
                   last: GRAPHQL_PAGE_SIZE,
                 });
+                expect(window.location.search).toBe(`?before=${pagination().startCursor}`);
               });
             });
 
@@ -252,6 +262,7 @@ describe('DependencyProxyApp', () => {
                   first: GRAPHQL_PAGE_SIZE,
                   fullPath: provideDefaults.groupPath,
                 });
+                expect(window.location.search).toBe(`?after=${pagination().endCursor}`);
               });
             });
 
@@ -270,7 +281,7 @@ describe('DependencyProxyApp', () => {
               expect(findClearCacheDropdownList().exists()).toBe(true);
 
               const clearCacheDropdownItem = findClearCacheDropdownList().findComponent(
-                GlDropdownItem,
+                GlDisclosureDropdownItem,
               );
 
               expect(clearCacheDropdownItem.text()).toBe('Clear cache');
@@ -315,6 +326,48 @@ describe('DependencyProxyApp', () => {
           });
         });
       });
+
+      describe('pagination params', () => {
+        it('after is set from the url params', async () => {
+          setWindowLocation('?after=1234');
+          createComponent();
+          await waitForPromises();
+
+          expect(resolver).toHaveBeenCalledWith({
+            first: GRAPHQL_PAGE_SIZE,
+            after: '1234',
+            fullPath: provideDefaults.groupPath,
+          });
+        });
+
+        it('before is set from the url params', async () => {
+          setWindowLocation('?before=1234');
+          createComponent();
+          await waitForPromises();
+
+          expect(resolver).toHaveBeenCalledWith({
+            first: null,
+            last: GRAPHQL_PAGE_SIZE,
+            before: '1234',
+            fullPath: provideDefaults.groupPath,
+          });
+        });
+
+        describe('when url params are changed', () => {
+          it('after is set from the url params', async () => {
+            createComponent();
+            await waitForPromises();
+            router.push('?after=1234');
+            await waitForPromises();
+
+            expect(resolver).toHaveBeenCalledWith({
+              first: GRAPHQL_PAGE_SIZE,
+              after: '1234',
+              fullPath: provideDefaults.groupPath,
+            });
+          });
+        });
+      });
     });
   });
 });