1 files changed, 88 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js
new file mode 100644
index 00000000000..e0119954ed4
--- /dev/null
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js
@@ -0,0 +1,88 @@
+import { GlKeysetPagination } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue';
+import ImageListRow from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue';
+
+import { imagesListResponse, pageInfo as defaultPageInfo } from '../../mock_data';
+
+describe('Image List', () => {
+  let wrapper;
+
+  const findRow = () => wrapper.findAll(ImageListRow);
+  const findPagination = () => wrapper.find(GlKeysetPagination);
+
+  const mountComponent = (props) => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        images: imagesListResponse,
+        pageInfo: defaultPageInfo,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('list', () => {
+    it('contains one list element for each image', () => {
+      mountComponent();
+
+      expect(findRow().length).toBe(imagesListResponse.length);
+    });
+
+    it('when delete event is emitted on the row it emits up a delete event', () => {
+      mountComponent();
+
+      findRow().at(0).vm.$emit('delete', 'foo');
+      expect(wrapper.emitted('delete')).toEqual([['foo']]);
+    });
+
+    it('passes down the metadataLoading prop', () => {
+      mountComponent({ metadataLoading: true });
+      expect(findRow().at(0).props('metadataLoading')).toBe(true);
+    });
+  });
+
+  describe('pagination', () => {
+    it('exists', () => {
+      mountComponent();
+
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it.each`
+      hasNextPage | hasPreviousPage | isVisible
+      ${true}     | ${true}         | ${true}
+      ${true}     | ${false}        | ${true}
+      ${false}    | ${true}         | ${true}
+    `(
+      'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible',
+      ({ hasNextPage, hasPreviousPage, isVisible }) => {
+        mountComponent({ pageInfo: { ...defaultPageInfo, hasNextPage, hasPreviousPage } });
+
+        expect(findPagination().exists()).toBe(isVisible);
+        expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
+        expect(findPagination().props('hasNextPage')).toBe(hasNextPage);
+      },
+    );
+
+    it('emits "prev-page" when the user clicks the back page button', () => {
+      mountComponent();
+
+      findPagination().vm.$emit('prev');
+
+      expect(wrapper.emitted('prev-page')).toEqual([[]]);
+    });
+
+    it('emits "next-page" when the user clicks the forward page button', () => {
+      mountComponent();
+
+      findPagination().vm.$emit('next');
+
+      expect(wrapper.emitted('next-page')).toEqual([[]]);
+    });
+  });
+});