1 files changed, 86 insertions, 13 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 1f0252965b0..625f00a8666 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -1,32 +1,40 @@
-import { GlFormInputGroup, GlFormGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
+import {
+  GlFormInputGroup,
+  GlFormGroup,
+  GlSkeletonLoader,
+  GlSprintf,
+  GlEmptyState,
+} from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 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 DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ManifestsList from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue';
 
 import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
 
-import { proxyDetailsQuery, proxyData } from './mock_data';
+import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data';
 
 const localVue = createLocalVue();
 
 describe('DependencyProxyApp', () => {
   let wrapper;
   let apolloProvider;
+  let resolver;
 
   const provideDefaults = {
     groupPath: 'gitlab-org',
     dependencyProxyAvailable: true,
+    noManifestsIllustration: 'noManifestsIllustration',
   };
 
-  function createComponent({
-    provide = provideDefaults,
-    resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()),
-  } = {}) {
+  function createComponent({ provide = provideDefaults } = {}) {
     localVue.use(VueApollo);
 
     const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]];
@@ -53,6 +61,12 @@ describe('DependencyProxyApp', () => {
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findMainArea = () => wrapper.findByTestId('main-area');
   const findProxyCountText = () => wrapper.findByTestId('proxy-count');
+  const findManifestList = () => wrapper.findComponent(ManifestsList);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
+  beforeEach(() => {
+    resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
+  });
 
   afterEach(() => {
     wrapper.destroy();
@@ -78,8 +92,8 @@ describe('DependencyProxyApp', () => {
     });
 
     it('does not call the graphql endpoint', async () => {
-      const resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
-      createComponent({ ...createComponentArguments, resolver });
+      resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
+      createComponent({ ...createComponentArguments });
 
       await waitForPromises();
 
@@ -145,14 +159,73 @@ describe('DependencyProxyApp', () => {
         it('from group has a description with proxy count', () => {
           expect(findProxyCountText().text()).toBe('Contains 2 blobs of images (1024 Bytes)');
         });
+
+        describe('manifest lists', () => {
+          describe('when there are no manifests', () => {
+            beforeEach(() => {
+              resolver = jest.fn().mockResolvedValue(
+                proxyDetailsQuery({
+                  extend: { dependencyProxyManifests: { nodes: [], pageInfo: pagination() } },
+                }),
+              );
+              createComponent();
+              return waitForPromises();
+            });
+
+            it('shows the empty state message', () => {
+              expect(findEmptyState().props()).toMatchObject({
+                svgPath: provideDefaults.noManifestsIllustration,
+                title: DependencyProxyApp.i18n.noManifestTitle,
+              });
+            });
+
+            it('hides the list', () => {
+              expect(findManifestList().exists()).toBe(false);
+            });
+          });
+
+          describe('when there are manifests', () => {
+            it('hides the empty state message', () => {
+              expect(findEmptyState().exists()).toBe(false);
+            });
+
+            it('shows list', () => {
+              expect(findManifestList().props()).toMatchObject({
+                manifests: proxyManifests(),
+                pagination: stripTypenames(pagination()),
+              });
+            });
+
+            it('prev-page event on list fetches the previous page', () => {
+              findManifestList().vm.$emit('prev-page');
+
+              expect(resolver).toHaveBeenCalledWith({
+                before: pagination().startCursor,
+                first: null,
+                fullPath: provideDefaults.groupPath,
+                last: GRAPHQL_PAGE_SIZE,
+              });
+            });
+
+            it('next-page event on list fetches the next page', () => {
+              findManifestList().vm.$emit('next-page');
+
+              expect(resolver).toHaveBeenCalledWith({
+                after: pagination().endCursor,
+                first: GRAPHQL_PAGE_SIZE,
+                fullPath: provideDefaults.groupPath,
+              });
+            });
+          });
+        });
       });
+
       describe('when the dependency proxy is disabled', () => {
         beforeEach(() => {
-          createComponent({
-            resolver: jest
-              .fn()
-              .mockResolvedValue(proxyDetailsQuery({ extendSettings: { enabled: false } })),
-          });
+          resolver = jest
+            .fn()
+            .mockResolvedValue(proxyDetailsQuery({ extendSettings: { enabled: false } }));
+          createComponent();
           return waitForPromises();
         });