1 files changed, 39 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js
new file mode 100644
index 00000000000..f018eff58c9
--- /dev/null
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js
@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils';
+import HarborList from '~/packages_and_registries/harbor_registry/components/list/harbor_list.vue';
+import HarborListRow from '~/packages_and_registries/harbor_registry/components/list/harbor_list_row.vue';
+import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
+import { harborListResponse } from '../../mock_data';
+
+describe('Harbor List', () => {
+  let wrapper;
+
+  const findHarborListRow = () => wrapper.findAll(HarborListRow);
+
+  const mountComponent = (props) => {
+    wrapper = shallowMount(HarborList, {
+      stubs: { RegistryList },
+      propsData: {
+        images: harborListResponse.repositories,
+        pageInfo: harborListResponse.pageInfo,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('list', () => {
+    it('contains one list element for each image', () => {
+      mountComponent();
+
+      expect(findHarborListRow().length).toBe(harborListResponse.repositories.length);
+    });
+
+    it('passes down the metadataLoading prop', () => {
+      mountComponent({ metadataLoading: true });
+      expect(findHarborListRow().at(0).props('metadataLoading')).toBe(true);
+    });
+  });
+});