3 files changed, 66 insertions, 34 deletions

diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index 3e46a29f776..f69b849521d 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -1,11 +1,12 @@
 import VueRouter from 'vue-router';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlPagination, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
+import { GlPagination, GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/list.vue';
 import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
 import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
 import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
+import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue';
 import store from '~/registry/explorer/stores/';
 import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
 import {
@@ -35,6 +36,8 @@ describe('List Page', () => {
   const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown);
   const findProjectEmptyState = () => wrapper.find(ProjectEmptyState);
   const findGroupEmptyState = () => wrapper.find(GroupEmptyState);
+  const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert);
+  const findDeleteAlert = () => wrapper.find(GlAlert);
 
   beforeEach(() => {
     wrapper = shallowMount(component, {
@@ -57,6 +60,18 @@ describe('List Page', () => {
     wrapper.destroy();
   });
 
+  describe('Expiration policy notification', () => {
+    it('shows up on project page', () => {
+      expect(findProjectPolicyAlert().exists()).toBe(true);
+    });
+    it('does show up on group page', () => {
+      store.dispatch('setInitialState', { isGroupPage: true });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findProjectPolicyAlert().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('connection error', () => {
     const config = {
       characterError: true,
@@ -179,32 +194,38 @@ describe('List Page', () => {
 
         it('should call deleteItem when confirming deletion', () => {
           dispatchSpy.mockResolvedValue();
-          const itemToDelete = wrapper.vm.images[0];
-          wrapper.setData({ itemToDelete });
+          findDeleteBtn().vm.$emit('click');
+          expect(wrapper.vm.itemToDelete).not.toEqual({});
           findDeleteModal().vm.$emit('ok');
           expect(store.dispatch).toHaveBeenCalledWith(
             'requestDeleteImage',
-            itemToDelete.destroy_path,
+            wrapper.vm.itemToDelete,
           );
         });
 
-        it('should show a success toast when delete request is successful', () => {
+        it('should show a success alert when delete request is successful', () => {
           dispatchSpy.mockResolvedValue();
+          findDeleteBtn().vm.$emit('click');
+          expect(wrapper.vm.itemToDelete).not.toEqual({});
           return wrapper.vm.handleDeleteImage().then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_IMAGE_SUCCESS_MESSAGE, {
-              type: 'success',
-            });
-            expect(wrapper.vm.itemToDelete).toEqual({});
+            const alert = findDeleteAlert();
+            expect(alert.exists()).toBe(true);
+            expect(alert.text().replace(/\s\s+/gm, ' ')).toBe(
+              DELETE_IMAGE_SUCCESS_MESSAGE.replace('%{title}', wrapper.vm.itemToDelete.path),
+            );
           });
         });
 
-        it('should show a error toast when delete request fails', () => {
+        it('should show an error alert when delete request fails', () => {
           dispatchSpy.mockRejectedValue();
+          findDeleteBtn().vm.$emit('click');
+          expect(wrapper.vm.itemToDelete).not.toEqual({});
           return wrapper.vm.handleDeleteImage().then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_IMAGE_ERROR_MESSAGE, {
-              type: 'error',
-            });
-            expect(wrapper.vm.itemToDelete).toEqual({});
+            const alert = findDeleteAlert();
+            expect(alert.exists()).toBe(true);
+            expect(alert.text().replace(/\s\s+/gm, ' ')).toBe(
+              DELETE_IMAGE_ERROR_MESSAGE.replace('%{title}', wrapper.vm.itemToDelete.path),
+            );
           });
         });
       });
diff --git a/spec/frontend/registry/explorer/stores/actions_spec.js b/spec/frontend/registry/explorer/stores/actions_spec.js
index b39c79dd1ab..58f61a0e8c2 100644
--- a/spec/frontend/registry/explorer/stores/actions_spec.js
+++ b/spec/frontend/registry/explorer/stores/actions_spec.js
@@ -279,39 +279,32 @@ describe('Actions RegistryExplorer Store', () => {
   });
 
   describe('request delete single image', () => {
-    const deletePath = 'delete/path';
+    const image = {
+      destroy_path: 'delete/path',
+    };
+
     it('successfully performs the delete request', done => {
-      mock.onDelete(deletePath).replyOnce(200);
+      mock.onDelete(image.destroy_path).replyOnce(200);
 
       testAction(
         actions.requestDeleteImage,
-        deletePath,
-        {
-          pagination: {},
-        },
+        image,
+        {},
         [
           { type: types.SET_MAIN_LOADING, payload: true },
+          { type: types.UPDATE_IMAGE, payload: { ...image, deleting: true } },
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
-        [
-          {
-            type: 'setShowGarbageCollectionTip',
-            payload: true,
-          },
-          {
-            type: 'requestImagesList',
-            payload: { pagination: {} },
-          },
-        ],
+        [],
         done,
       );
     });
 
     it('should turn off loading on error', done => {
-      mock.onDelete(deletePath).replyOnce(400);
+      mock.onDelete(image.destroy_path).replyOnce(400);
       testAction(
         actions.requestDeleteImage,
-        deletePath,
+        image,
         {},
         [
           { type: types.SET_MAIN_LOADING, payload: true },
diff --git a/spec/frontend/registry/explorer/stores/mutations_spec.js b/spec/frontend/registry/explorer/stores/mutations_spec.js
index 029fd23f7ce..43b2ba84218 100644
--- a/spec/frontend/registry/explorer/stores/mutations_spec.js
+++ b/spec/frontend/registry/explorer/stores/mutations_spec.js
@@ -28,14 +28,32 @@ describe('Mutations Registry Explorer Store', () => {
 
   describe('SET_IMAGES_LIST_SUCCESS', () => {
     it('should set the images list', () => {
-      const images = [1, 2, 3];
-      const expectedState = { ...mockState, images };
+      const images = [{ name: 'foo' }, { name: 'bar' }];
+      const defaultStatus = { deleting: false, failedDelete: false };
+      const expectedState = {
+        ...mockState,
+        images: [{ name: 'foo', ...defaultStatus }, { name: 'bar', ...defaultStatus }],
+      };
       mutations[types.SET_IMAGES_LIST_SUCCESS](mockState, images);
 
       expect(mockState).toEqual(expectedState);
     });
   });
 
+  describe('UPDATE_IMAGE', () => {
+    it('should update an image', () => {
+      mockState.images = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }];
+      const payload = { id: 1, name: 'baz' };
+      const expectedState = {
+        ...mockState,
+        images: [payload, { id: 2, name: 'bar' }],
+      };
+      mutations[types.UPDATE_IMAGE](mockState, payload);
+
+      expect(mockState).toEqual(expectedState);
+    });
+  });
+
   describe('SET_TAGS_LIST_SUCCESS', () => {
     it('should set the tags list', () => {
       const tags = [1, 2, 3];