1 files changed, 162 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js
new file mode 100644
index 00000000000..8fd50bea280
--- /dev/null
+++ b/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js
@@ -0,0 +1,162 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { GlFilteredSearchToken } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import HarborDetailsPage from '~/packages_and_registries/harbor_registry/pages/details.vue';
+import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
+import ArtifactsList from '~/packages_and_registries/harbor_registry/components/details/artifacts_list.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import DetailsHeader from '~/packages_and_registries/harbor_registry/components/details/details_header.vue';
+import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import {
+  NAME_SORT_FIELD,
+  TOKEN_TYPE_TAG_NAME,
+} from '~/packages_and_registries/harbor_registry/constants/index';
+import { harborArtifactsResponse, harborArtifactsList, defaultConfig } from '../mock_data';
+
+let mockHarborArtifactsResponse;
+
+jest.mock('~/rest_api', () => ({
+  getHarborArtifacts: () => mockHarborArtifactsResponse,
+}));
+
+describe('Harbor Details Page', () => {
+  let wrapper;
+
+  const findTagsLoader = () => wrapper.findComponent(TagsLoader);
+  const findArtifactsList = () => wrapper.findComponent(ArtifactsList);
+  const findDetailsHeader = () => wrapper.findComponent(DetailsHeader);
+  const findPersistedSearch = () => wrapper.findComponent(PersistedSearch);
+
+  const waitForHarborDetailRequest = async () => {
+    await waitForPromises();
+    await nextTick();
+  };
+
+  const $route = {
+    params: {
+      project: 'test-project',
+      image: 'test-repository',
+    },
+  };
+
+  const breadCrumbState = {
+    updateName: jest.fn(),
+    updateHref: jest.fn(),
+  };
+
+  const defaultHeaders = {
+    'x-page': '1',
+    'X-Per-Page': '20',
+    'X-TOTAL': '1',
+    'X-Total-Pages': '1',
+  };
+
+  const mountComponent = ({ config = defaultConfig } = {}) => {
+    wrapper = shallowMount(HarborDetailsPage, {
+      mocks: {
+        $route,
+      },
+      provide() {
+        return {
+          breadCrumbState,
+          ...config,
+        };
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mockHarborArtifactsResponse = Promise.resolve({
+      data: harborArtifactsResponse,
+      headers: defaultHeaders,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when isLoading is true', () => {
+    it('shows the loader', () => {
+      mountComponent();
+
+      expect(findTagsLoader().exists()).toBe(true);
+    });
+
+    it('does not show the list', () => {
+      mountComponent();
+
+      expect(findArtifactsList().exists()).toBe(false);
+    });
+  });
+
+  describe('artifacts list', () => {
+    it('exists', async () => {
+      mountComponent();
+
+      findPersistedSearch().vm.$emit('update', { sort: 'NAME_ASC', filters: [] });
+      await waitForHarborDetailRequest();
+
+      expect(findArtifactsList().exists()).toBe(true);
+    });
+
+    it('has the correct props bound', async () => {
+      mountComponent();
+
+      findPersistedSearch().vm.$emit('update', { sort: 'NAME_ASC', filters: [] });
+      await waitForHarborDetailRequest();
+
+      expect(findArtifactsList().props()).toMatchObject({
+        isLoading: false,
+        filter: '',
+        artifacts: harborArtifactsList,
+        pageInfo: {
+          page: 1,
+          perPage: 20,
+          total: 1,
+          totalPages: 1,
+        },
+      });
+    });
+  });
+
+  describe('persisted search', () => {
+    it('has the correct props', () => {
+      mountComponent();
+
+      expect(findPersistedSearch().props()).toMatchObject({
+        sortableFields: [NAME_SORT_FIELD],
+        defaultOrder: NAME_SORT_FIELD.orderBy,
+        defaultSort: 'asc',
+        tokens: [
+          {
+            type: TOKEN_TYPE_TAG_NAME,
+            icon: 'tag',
+            title: s__('HarborRegistry|Tag'),
+            unique: true,
+            token: GlFilteredSearchToken,
+            operators: OPERATOR_IS_ONLY,
+          },
+        ],
+      });
+    });
+  });
+
+  describe('header', () => {
+    it('has the correct props', async () => {
+      mountComponent();
+
+      findPersistedSearch().vm.$emit('update', { sort: 'NAME_ASC', filters: [] });
+      await waitForHarborDetailRequest();
+
+      expect(findDetailsHeader().props()).toMatchObject({
+        imagesDetail: {
+          name: 'test-project/test-repository',
+          artifactCount: 1,
+        },
+      });
+    });
+  });
+});