1 files changed, 110 insertions, 23 deletions

diff --git a/spec/frontend/packages/list/components/packages_list_app_spec.js b/spec/frontend/packages/list/components/packages_list_app_spec.js
index 6862d23c4ff..4de2dd0789e 100644
--- a/spec/frontend/packages/list/components/packages_list_app_spec.js
+++ b/spec/frontend/packages/list/components/packages_list_app_spec.js
@@ -3,10 +3,11 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import createFlash from '~/flash';
 import * as commonUtils from '~/lib/utils/common_utils';
-import PackageSearch from '~/packages/list/components/package_search.vue';
 import PackageListApp from '~/packages/list/components/packages_list_app.vue';
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import * as packageUtils from '~/packages_and_registries/shared/utils';
 
 jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
@@ -24,10 +25,19 @@ describe('packages_list_app', () => {
   };
   const GlLoadingIcon = { name: 'gl-loading-icon', template: '<div>loading</div>' };
 
+  // we need to manually stub dynamic imported components because shallowMount is not able to stub them automatically. See: https://github.com/vuejs/vue-test-utils/issues/1279
+  const PackageSearch = { name: 'PackageSearch', template: '<div></div>' };
+  const PackageTitle = { name: 'PackageTitle', template: '<div></div>' };
+  const InfrastructureTitle = { name: 'InfrastructureTitle', template: '<div></div>' };
+  const InfrastructureSearch = { name: 'InfrastructureSearch', template: '<div></div>' };
+
   const emptyListHelpUrl = 'helpUrl';
   const findEmptyState = () => wrapper.find(GlEmptyState);
   const findListComponent = () => wrapper.find(PackageList);
   const findPackageSearch = () => wrapper.find(PackageSearch);
+  const findPackageTitle = () => wrapper.find(PackageTitle);
+  const findInfrastructureTitle = () => wrapper.find(InfrastructureTitle);
+  const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch);
 
   const createStore = (filter = []) => {
     store = new Vuex.Store({
@@ -45,7 +55,7 @@ describe('packages_list_app', () => {
     store.dispatch = jest.fn();
   };
 
-  const mountComponent = () => {
+  const mountComponent = (provide) => {
     wrapper = shallowMount(PackageListApp, {
       localVue,
       store,
@@ -55,12 +65,18 @@ describe('packages_list_app', () => {
         PackageList,
         GlSprintf,
         GlLink,
+        PackageSearch,
+        PackageTitle,
+        InfrastructureTitle,
+        InfrastructureSearch,
       },
+      provide,
     });
   };
 
   beforeEach(() => {
     createStore();
+    jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({});
   });
 
   afterEach(() => {
@@ -72,25 +88,6 @@ describe('packages_list_app', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('empty state', () => {
-    it('generate the correct empty list link', () => {
-      mountComponent();
-
-      const link = findListComponent().find(GlLink);
-
-      expect(link.attributes('href')).toBe(emptyListHelpUrl);
-      expect(link.text()).toBe('publish and share your packages');
-    });
-
-    it('includes the right content on the default tab', () => {
-      mountComponent();
-
-      const heading = findEmptyState().find('h1');
-
-      expect(heading.text()).toBe('There are no packages yet');
-    });
-  });
-
   it('call requestPackagesList on page:changed', () => {
     mountComponent();
     store.dispatch.mockClear();
@@ -108,10 +105,75 @@ describe('packages_list_app', () => {
     expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
   });
 
-  it('does not call requestPackagesList two times on render', () => {
+  it('does call requestPackagesList only one time on render', () => {
     mountComponent();
 
-    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledTimes(3);
+    expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object));
+    expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array));
+    expect(store.dispatch).toHaveBeenNthCalledWith(3, 'requestPackagesList');
+  });
+
+  describe('url query string handling', () => {
+    const defaultQueryParamsMock = {
+      search: [1, 2],
+      type: 'npm',
+      sort: 'asc',
+      orderBy: 'created',
+    };
+
+    it('calls setSorting with the query string based sorting', () => {
+      jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
+
+      mountComponent();
+
+      expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', {
+        orderBy: defaultQueryParamsMock.orderBy,
+        sort: defaultQueryParamsMock.sort,
+      });
+    });
+
+    it('calls setFilter with the query string based filters', () => {
+      jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
+
+      mountComponent();
+
+      expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [
+        { type: 'type', value: { data: defaultQueryParamsMock.type } },
+        { type: FILTERED_SEARCH_TERM, value: { data: defaultQueryParamsMock.search[0] } },
+        { type: FILTERED_SEARCH_TERM, value: { data: defaultQueryParamsMock.search[1] } },
+      ]);
+    });
+
+    it('calls setSorting and setFilters with the results of extractFilterAndSorting', () => {
+      jest
+        .spyOn(packageUtils, 'extractFilterAndSorting')
+        .mockReturnValue({ filters: ['foo'], sorting: { sort: 'desc' } });
+
+      mountComponent();
+
+      expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', { sort: 'desc' });
+      expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', ['foo']);
+    });
+  });
+
+  describe('empty state', () => {
+    it('generate the correct empty list link', () => {
+      mountComponent();
+
+      const link = findListComponent().find(GlLink);
+
+      expect(link.attributes('href')).toBe(emptyListHelpUrl);
+      expect(link.text()).toBe('publish and share your packages');
+    });
+
+    it('includes the right content on the default tab', () => {
+      mountComponent();
+
+      const heading = findEmptyState().find('h1');
+
+      expect(heading.text()).toBe('There are no packages yet');
+    });
   });
 
   describe('filter without results', () => {
@@ -145,6 +207,31 @@ describe('packages_list_app', () => {
     });
   });
 
+  describe('Infrastructure config', () => {
+    it('defaults to package registry components', () => {
+      mountComponent();
+
+      expect(findPackageSearch().exists()).toBe(true);
+      expect(findPackageTitle().exists()).toBe(true);
+
+      expect(findInfrastructureTitle().exists()).toBe(false);
+      expect(findInfrastructureSearch().exists()).toBe(false);
+    });
+
+    it('mount different component based on the provided values', () => {
+      mountComponent({
+        titleComponent: 'InfrastructureTitle',
+        searchComponent: 'InfrastructureSearch',
+      });
+
+      expect(findPackageSearch().exists()).toBe(false);
+      expect(findPackageTitle().exists()).toBe(false);
+
+      expect(findInfrastructureTitle().exists()).toBe(true);
+      expect(findInfrastructureSearch().exists()).toBe(true);
+    });
+  });
+
   describe('delete alert handling', () => {
     const { location } = window.location;
     const search = `?${SHOW_DELETE_SUCCESS_ALERT}=true`;