1 files changed, 62 insertions, 0 deletions
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
new file mode 100644
index 00000000000..03ba6ad7f80
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
@@ -0,0 +1,62 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
+import Component from '~/registry/explorer/components/list_page/image_list.vue';
+import ImageListRow from '~/registry/explorer/components/list_page/image_list_row.vue';
+
+import { imagesListResponse, imagePagination } from '../../mock_data';
+
+describe('Image List', () => {
+  let wrapper;
+
+  const findRow = () => wrapper.findAll(ImageListRow);
+  const findPagination = () => wrapper.find(GlPagination);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        images: imagesListResponse.data,
+        pagination: imagePagination,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('list', () => {
+    it('contains one list element for each image', () => {
+      expect(findRow().length).toBe(imagesListResponse.data.length);
+    });
+
+    it('when delete event is emitted on the row it emits up a delete event', () => {
+      findRow()
+        .at(0)
+        .vm.$emit('delete', 'foo');
+      expect(wrapper.emitted('delete')).toEqual([['foo']]);
+    });
+  });
+
+  describe('pagination', () => {
+    it('exists', () => {
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('is wired to the correct pagination props', () => {
+      const pagination = findPagination();
+      expect(pagination.props('perPage')).toBe(imagePagination.perPage);
+      expect(pagination.props('totalItems')).toBe(imagePagination.total);
+      expect(pagination.props('value')).toBe(imagePagination.page);
+    });
+
+    it('emits a pageChange event when the page change', () => {
+      findPagination().vm.$emit(GlPagination.model.event, 2);
+      expect(wrapper.emitted('pageChange')).toEqual([[2]]);
+    });
+  });
+});