1 files changed, 74 insertions, 10 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
index 7a71a1cea0f..4f3d780b149 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
@@ -1,4 +1,9 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import {
   conanMetadata,
   mavenMetadata,
@@ -6,9 +11,11 @@ import {
   packageData,
   composerMetadata,
   pypiMetadata,
+  packageMetadataQuery,
 } from 'jest/packages_and_registries/package_registry/mock_data';
 import component from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import {
+  FETCH_PACKAGE_METADATA_ERROR_MESSAGE,
   PACKAGE_TYPE_NUGET,
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
@@ -16,6 +23,9 @@ import {
   PACKAGE_TYPE_COMPOSER,
   PACKAGE_TYPE_PYPI,
 } from '~/packages_and_registries/package_registry/constants';
+import AdditionalMetadataLoader from '~/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import getPackageMetadata from '~/packages_and_registries/package_registry/graphql/queries/get_package_metadata.query.graphql';
 
 const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() };
 const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() };
@@ -24,16 +34,26 @@ const composerPackage = { packageType: PACKAGE_TYPE_COMPOSER, metadata: composer
 const pypiPackage = { packageType: PACKAGE_TYPE_PYPI, metadata: pypiMetadata() };
 const npmPackage = { packageType: PACKAGE_TYPE_NPM, metadata: {} };
 
-describe('Package Additional Metadata', () => {
+Vue.use(VueApollo);
+
+describe('Package Additional metadata', () => {
   let wrapper;
+  let apolloProvider;
+
   const defaultProps = {
-    packageEntity: {
-      ...packageData(mavenPackage),
-    },
+    packageId: packageData().id,
+    packageType: PACKAGE_TYPE_MAVEN,
   };
 
-  const mountComponent = (props) => {
+  const mountComponent = ({
+    props = {},
+    resolver = jest.fn().mockResolvedValue(packageMetadataQuery(mavenPackage)),
+  } = {}) => {
+    const requestHandlers = [[getPackageMetadata, resolver]];
+    apolloProvider = createMockApollo(requestHandlers);
+
     wrapper = shallowMountExtended(component, {
+      apolloProvider,
       propsData: { ...defaultProps, ...props },
       stubs: {
         component: { template: '<div data-testid="component-is"></div>' },
@@ -41,6 +61,10 @@ describe('Package Additional Metadata', () => {
     });
   };
 
+  beforeEach(() => {
+    jest.spyOn(Sentry, 'captureException').mockImplementation();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -49,6 +73,22 @@ describe('Package Additional Metadata', () => {
   const findTitle = () => wrapper.findByTestId('title');
   const findMainArea = () => wrapper.findByTestId('main');
   const findComponentIs = () => wrapper.findByTestId('component-is');
+  const findAdditionalMetadataLoader = () => wrapper.findComponent(AdditionalMetadataLoader);
+  const findPackageMetadataAlert = () => wrapper.findComponent(GlAlert);
+
+  it('renders the loading container when loading', () => {
+    mountComponent();
+
+    expect(findAdditionalMetadataLoader().exists()).toBe(true);
+  });
+
+  it('does not render the loading container once resolved', async () => {
+    mountComponent();
+    await waitForPromises();
+
+    expect(findAdditionalMetadataLoader().exists()).toBe(false);
+    expect(Sentry.captureException).not.toHaveBeenCalled();
+  });
 
   it('has the correct title', () => {
     mountComponent();
@@ -56,7 +96,25 @@ describe('Package Additional Metadata', () => {
     const title = findTitle();
 
     expect(title.exists()).toBe(true);
-    expect(title.text()).toBe('Additional Metadata');
+    expect(title.text()).toMatchInterpolatedText(component.i18n.componentTitle);
+  });
+
+  it('does not render gl-alert', () => {
+    mountComponent();
+
+    expect(findPackageMetadataAlert().exists()).toBe(false);
+  });
+
+  it('renders gl-alert if load fails', async () => {
+    mountComponent({ resolver: jest.fn().mockRejectedValue() });
+
+    await waitForPromises();
+
+    expect(findPackageMetadataAlert().exists()).toBe(true);
+    expect(findPackageMetadataAlert().text()).toMatchInterpolatedText(
+      FETCH_PACKAGE_METADATA_ERROR_MESSAGE,
+    );
+    expect(Sentry.captureException).toHaveBeenCalled();
   });
 
   it.each`
@@ -68,16 +126,22 @@ describe('Package Additional Metadata', () => {
     ${pypiPackage}     | ${true}  | ${PACKAGE_TYPE_PYPI}
     ${npmPackage}      | ${false} | ${PACKAGE_TYPE_NPM}
   `(
-    `It is $visible that the component is visible when the package is $packageType`,
-    ({ packageEntity, visible }) => {
-      mountComponent({ packageEntity });
+    `component visibility is $visible when the package is $packageType`,
+    async ({ packageEntity, visible, packageType }) => {
+      const resolved = packageMetadataQuery(packageType);
+      const resolver = jest.fn().mockResolvedValue(resolved);
+
+      mountComponent({ props: { packageType }, resolver });
+
+      await waitForPromises();
+      await nextTick();
 
       expect(findTitle().exists()).toBe(visible);
       expect(findMainArea().exists()).toBe(visible);
       expect(findComponentIs().exists()).toBe(visible);
 
       if (visible) {
-        expect(findComponentIs().props('packageEntity')).toEqual(packageEntity);
+        expect(findComponentIs().props('packageMetadata')).toEqual(packageEntity.metadata);
       }
     },
   );