1 files changed, 70 insertions, 0 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 79894e25889..dbe9793fb8c 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -1,19 +1,26 @@
 import {
+  GlAlert,
+  GlDropdown,
+  GlDropdownItem,
   GlFormInputGroup,
   GlFormGroup,
+  GlModal,
   GlSkeletonLoader,
   GlSprintf,
   GlEmptyState,
 } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import MockAdapter from 'axios-mock-adapter';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { stripTypenames } from 'helpers/graphql_helpers';
 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 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';
 
@@ -21,13 +28,25 @@ import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency
 
 import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data';
 
+const dummyApiVersion = 'v3000';
+const dummyGrouptId = 1;
+const dummyUrlRoot = '/gitlab';
+const dummyGon = {
+  api_version: dummyApiVersion,
+  relative_url_root: dummyUrlRoot,
+};
+let originalGon;
+const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${dummyGrouptId}/dependency_proxy/cache`;
+
 describe('DependencyProxyApp', () => {
   let wrapper;
   let apolloProvider;
   let resolver;
+  let mock;
 
   const provideDefaults = {
     groupPath: 'gitlab-org',
+    groupId: dummyGrouptId,
     dependencyProxyAvailable: true,
     noManifestsIllustration: 'noManifestsIllustration',
   };
@@ -43,9 +62,14 @@ describe('DependencyProxyApp', () => {
       apolloProvider,
       provide,
       stubs: {
+        GlAlert,
+        GlDropdown,
+        GlDropdownItem,
         GlFormInputGroup,
         GlFormGroup,
+        GlModal,
         GlSprintf,
+        TitleArea,
       },
     });
   }
@@ -59,13 +83,24 @@ describe('DependencyProxyApp', () => {
   const findProxyCountText = () => wrapper.findByTestId('proxy-count');
   const findManifestList = () => wrapper.findComponent(ManifestsList);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findClearCacheDropdownList = () => wrapper.findComponent(GlDropdown);
+  const findClearCacheModal = () => wrapper.findComponent(GlModal);
+  const findClearCacheAlert = () => wrapper.findComponent(GlAlert);
 
   beforeEach(() => {
     resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
+
+    originalGon = window.gon;
+    window.gon = { ...dummyGon };
+
+    mock = new MockAdapter(axios);
+    mock.onDelete(expectedUrl).reply(202, {});
   });
 
   afterEach(() => {
     wrapper.destroy();
+    window.gon = originalGon;
+    mock.restore();
   });
 
   describe('when the dependency proxy is not available', () => {
@@ -95,6 +130,12 @@ describe('DependencyProxyApp', () => {
 
       expect(resolver).not.toHaveBeenCalled();
     });
+
+    it('hides the clear cache dropdown list', () => {
+      createComponent(createComponentArguments);
+
+      expect(findClearCacheDropdownList().exists()).toBe(false);
+    });
   });
 
   describe('when the dependency proxy is available', () => {
@@ -165,6 +206,7 @@ describe('DependencyProxyApp', () => {
                 }),
               );
               createComponent();
+
               return waitForPromises();
             });
 
@@ -214,6 +256,34 @@ describe('DependencyProxyApp', () => {
                 fullPath: provideDefaults.groupPath,
               });
             });
+
+            it('shows the clear cache dropdown list', () => {
+              expect(findClearCacheDropdownList().exists()).toBe(true);
+
+              const clearCacheDropdownItem = findClearCacheDropdownList().findComponent(
+                GlDropdownItem,
+              );
+
+              expect(clearCacheDropdownItem.text()).toBe('Clear cache');
+            });
+
+            it('shows the clear cache confirmation modal', () => {
+              const modal = findClearCacheModal();
+
+              expect(modal.find('.modal-title').text()).toContain('Clear 2 images from cache?');
+              expect(modal.props('actionPrimary').text).toBe('Clear cache');
+            });
+
+            it('submits the clear cache request', async () => {
+              findClearCacheModal().vm.$emit('primary', { preventDefault: jest.fn() });
+
+              await waitForPromises();
+
+              expect(findClearCacheAlert().exists()).toBe(true);
+              expect(findClearCacheAlert().text()).toBe(
+                'All items in the cache are scheduled for removal.',
+              );
+            });
           });
         });
       });