1 files changed, 140 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js
new file mode 100644
index 00000000000..61ee36a2794
--- /dev/null
+++ b/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js
@@ -0,0 +1,140 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { GlSkeletonLoader } from '@gitlab/ui';
+import HarborListHeader from '~/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue';
+import HarborRegistryList from '~/packages_and_registries/harbor_registry/pages/list.vue';
+import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+// import { harborListResponse } from '~/packages_and_registries/harbor_registry/mock_api.js';
+import HarborList from '~/packages_and_registries/harbor_registry/components/list/harbor_list.vue';
+import CliCommands from '~/packages_and_registries/shared/components/cli_commands.vue';
+import { SORT_FIELDS } from '~/packages_and_registries/harbor_registry/constants/index';
+import { harborListResponse, dockerCommands } from '../mock_data';
+
+let mockHarborListResponse;
+jest.mock('~/packages_and_registries/harbor_registry/mock_api.js', () => ({
+  harborListResponse: () => mockHarborListResponse,
+}));
+
+describe('Harbor List Page', () => {
+  let wrapper;
+
+  const waitForHarborPageRequest = async () => {
+    await waitForPromises();
+    await nextTick();
+  };
+
+  beforeEach(() => {
+    mockHarborListResponse = Promise.resolve(harborListResponse);
+  });
+
+  const findHarborListHeader = () => wrapper.findComponent(HarborListHeader);
+  const findPersistedSearch = () => wrapper.findComponent(PersistedSearch);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findHarborList = () => wrapper.findComponent(HarborList);
+  const findCliCommands = () => wrapper.findComponent(CliCommands);
+
+  const fireFirstSortUpdate = () => {
+    findPersistedSearch().vm.$emit('update', { sort: 'UPDATED_DESC', filters: [] });
+  };
+
+  const mountComponent = ({ config = { isGroupPage: false } } = {}) => {
+    wrapper = shallowMount(HarborRegistryList, {
+      stubs: {
+        HarborListHeader,
+      },
+      provide() {
+        return {
+          config,
+          ...dockerCommands,
+        };
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains harbor registry header', async () => {
+    mountComponent();
+    fireFirstSortUpdate();
+    await waitForHarborPageRequest();
+    await nextTick();
+
+    expect(findHarborListHeader().exists()).toBe(true);
+    expect(findHarborListHeader().props()).toMatchObject({
+      imagesCount: 3,
+      metadataLoading: false,
+    });
+  });
+
+  describe('isLoading is true', () => {
+    it('shows the skeleton loader', async () => {
+      mountComponent();
+      fireFirstSortUpdate();
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+
+    it('harborList is not visible', () => {
+      mountComponent();
+
+      expect(findHarborList().exists()).toBe(false);
+    });
+
+    it('cli commands is not visible', () => {
+      mountComponent();
+
+      expect(findCliCommands().exists()).toBe(false);
+    });
+
+    it('title has the metadataLoading props set to true', async () => {
+      mountComponent();
+      fireFirstSortUpdate();
+
+      expect(findHarborListHeader().props('metadataLoading')).toBe(true);
+    });
+  });
+
+  describe('list is not empty', () => {
+    describe('unfiltered state', () => {
+      it('quick start is visible', async () => {
+        mountComponent();
+        fireFirstSortUpdate();
+
+        await waitForHarborPageRequest();
+        await nextTick();
+
+        expect(findCliCommands().exists()).toBe(true);
+      });
+
+      it('list component is visible', async () => {
+        mountComponent();
+        fireFirstSortUpdate();
+
+        await waitForHarborPageRequest();
+        await nextTick();
+
+        expect(findHarborList().exists()).toBe(true);
+      });
+    });
+
+    describe('search and sorting', () => {
+      it('has a persisted search box element', async () => {
+        mountComponent();
+        fireFirstSortUpdate();
+        await waitForHarborPageRequest();
+        await nextTick();
+
+        const harborRegistrySearch = findPersistedSearch();
+        expect(harborRegistrySearch.exists()).toBe(true);
+        expect(harborRegistrySearch.props()).toMatchObject({
+          defaultOrder: 'UPDATED',
+          defaultSort: 'desc',
+          sortableFields: SORT_FIELDS,
+        });
+      });
+    });
+  });
+});