1 files changed, 151 insertions, 7 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
index 0e74fbbc6d9..abdb875e839 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
@@ -1,30 +1,39 @@
-import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlBanner, GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 
 import VueApollo from 'vue-apollo';
-
+import * as utils from '~/lib/utils/common_utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubComponent } from 'helpers/stub_component';
 import ListPage from '~/packages_and_registries/package_registry/pages/list.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue';
 import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue';
 import OriginalPackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue';
 import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
-
+import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
 import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
+  HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE,
   EMPTY_LIST_HELP_URL,
   PACKAGE_HELP_URL,
+  DELETE_PACKAGES_ERROR_MESSAGE,
+  DELETE_PACKAGES_SUCCESS_MESSAGE,
 } from '~/packages_and_registries/package_registry/constants';
 
 import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql';
+import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql';
+import {
+  packagesListQuery,
+  packageData,
+  pagination,
+  packagesDestroyMutation,
+  packagesDestroyMutationError,
+} from '../mock_data';
 
-import { packagesListQuery, packageData, pagination } from '../mock_data';
-
-jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
 
 describe('PackagesListApp', () => {
@@ -49,31 +58,44 @@ describe('PackagesListApp', () => {
     filters: { packageName: 'foo', packageType: 'CONAN' },
   };
 
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findBanner = () => wrapper.findComponent(GlBanner);
   const findPackageTitle = () => wrapper.findComponent(PackageTitle);
   const findSearch = () => wrapper.findComponent(PackageSearch);
   const findListComponent = () => wrapper.findComponent(PackageList);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findDeletePackage = () => wrapper.findComponent(DeletePackage);
+  const findDeletePackagesModal = () => wrapper.findComponent(DeleteModal);
 
   const mountComponent = ({
     resolver = jest.fn().mockResolvedValue(packagesListQuery()),
+    mutationResolver,
     provide = defaultProvide,
   } = {}) => {
     Vue.use(VueApollo);
 
-    const requestHandlers = [[getPackagesQuery, resolver]];
+    const requestHandlers = [
+      [getPackagesQuery, resolver],
+      [destroyPackagesMutation, mutationResolver],
+    ];
     apolloProvider = createMockApollo(requestHandlers);
 
     wrapper = shallowMountExtended(ListPage, {
       apolloProvider,
       provide,
       stubs: {
+        GlBanner,
         GlEmptyState,
         GlLoadingIcon,
         GlSprintf,
         GlLink,
         PackageList,
         DeletePackage,
+        DeleteModal: stubComponent(DeleteModal, {
+          methods: {
+            show: jest.fn(),
+          },
+        }),
       },
     });
   };
@@ -116,6 +138,70 @@ describe('PackagesListApp', () => {
     });
   });
 
+  describe('package migration survey banner', () => {
+    describe('with no cookie set', () => {
+      beforeEach(() => {
+        utils.setCookie = jest.fn();
+
+        mountComponent();
+      });
+
+      it('displays the banner', () => {
+        expect(findBanner().exists()).toBe(true);
+      });
+
+      it('does not call setCookie', () => {
+        expect(utils.setCookie).not.toHaveBeenCalled();
+      });
+
+      describe('when the close button is clicked', () => {
+        beforeEach(() => {
+          findBanner().vm.$emit('close');
+        });
+
+        it('sets the dismissed cookie', () => {
+          expect(utils.setCookie).toHaveBeenCalledWith(
+            HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE,
+            'true',
+          );
+        });
+
+        it('does not display the banner', () => {
+          expect(findBanner().exists()).toBe(false);
+        });
+      });
+
+      describe('when the primary button is clicked', () => {
+        beforeEach(() => {
+          findBanner().vm.$emit('primary');
+        });
+
+        it('sets the dismissed cookie', () => {
+          expect(utils.setCookie).toHaveBeenCalledWith(
+            HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE,
+            'true',
+          );
+        });
+
+        it('does not display the banner', () => {
+          expect(findBanner().exists()).toBe(false);
+        });
+      });
+    });
+
+    describe('with the dismissed cookie set', () => {
+      beforeEach(() => {
+        jest.spyOn(utils, 'getCookie').mockReturnValue('true');
+
+        mountComponent();
+      });
+
+      it('does not display the banner', () => {
+        expect(findBanner().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('search component', () => {
     it('exists', () => {
       mountComponent();
@@ -282,4 +368,62 @@ describe('PackagesListApp', () => {
       expect(findListComponent().props('isLoading')).toBe(false);
     });
   });
+
+  describe('bulk delete package', () => {
+    const items = [{ id: '1' }, { id: '2' }];
+
+    it('deletePackage is bound to package-list package:delete event', async () => {
+      mountComponent();
+
+      await waitForFirstRequest();
+
+      findListComponent().vm.$emit('delete', [{ id: '1' }, { id: '2' }]);
+
+      await waitForPromises();
+
+      expect(findDeletePackagesModal().props('itemsToBeDeleted')).toEqual(items);
+    });
+
+    it('calls mutation with the right values and shows success alert', async () => {
+      const mutationResolver = jest.fn().mockResolvedValue(packagesDestroyMutation());
+      mountComponent({
+        mutationResolver,
+      });
+
+      await waitForFirstRequest();
+
+      findListComponent().vm.$emit('delete', items);
+
+      findDeletePackagesModal().vm.$emit('confirm');
+
+      expect(mutationResolver).toHaveBeenCalledWith({
+        ids: items.map((item) => item.id),
+      });
+
+      await waitForPromises();
+
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().props('variant')).toEqual('success');
+      expect(findAlert().text()).toMatchInterpolatedText(DELETE_PACKAGES_SUCCESS_MESSAGE);
+    });
+
+    it('on error shows danger alert', async () => {
+      const mutationResolver = jest.fn().mockResolvedValue(packagesDestroyMutationError());
+      mountComponent({
+        mutationResolver,
+      });
+
+      await waitForFirstRequest();
+
+      findListComponent().vm.$emit('delete', items);
+
+      findDeletePackagesModal().vm.$emit('confirm');
+
+      await waitForPromises();
+
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().props('variant')).toEqual('danger');
+      expect(findAlert().text()).toMatchInterpolatedText(DELETE_PACKAGES_ERROR_MESSAGE);
+    });
+  });
 });