Add latest changes from gitlab-org/gitlab@master

5 files changed, 496 insertions, 5 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
new file mode 100644
index 00000000000..848fe90cf5c
--- /dev/null
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PackageTitle renders with tags 1`] = `
+<div
+  class="gl-display-flex gl-flex-direction-column"
+  data-qa-selector="package_title"
+>
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-py-3"
+  >
+    <div
+      class="gl-flex-direction-column gl-flex-grow-1"
+    >
+      <div
+        class="gl-display-flex"
+      >
+        <!---->
+         
+        <div
+          class="gl-display-flex gl-flex-direction-column"
+        >
+          <h1
+            class="gl-font-size-h1 gl-mt-3 gl-mb-2"
+            data-testid="title"
+          >
+            @gitlab-org/package-15
+          </h1>
+           
+          <div
+            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
+          >
+            <gl-icon-stub
+              class="gl-mr-3"
+              name="eye"
+              size="16"
+            />
+             
+            <gl-sprintf-stub
+              message="v%{version} published %{timeAgo}"
+            />
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"
+      >
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-type"
+            icon="package"
+            link=""
+            size="s"
+            text="npm"
+            texttooltip=""
+          />
+        </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-size"
+            icon="disk"
+            link=""
+            size="s"
+            text="800.00 KiB"
+            texttooltip=""
+          />
+        </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <package-tags-stub
+            hidelabel="true"
+            tagdisplaylimit="2"
+            tags="[object Object],[object Object],[object Object]"
+          />
+        </div>
+      </div>
+    </div>
+     
+    <!---->
+  </div>
+   
+  <p />
+</div>
+`;
+
+exports[`PackageTitle renders without tags 1`] = `
+<div
+  class="gl-display-flex gl-flex-direction-column"
+  data-qa-selector="package_title"
+>
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-py-3"
+  >
+    <div
+      class="gl-flex-direction-column gl-flex-grow-1"
+    >
+      <div
+        class="gl-display-flex"
+      >
+        <!---->
+         
+        <div
+          class="gl-display-flex gl-flex-direction-column"
+        >
+          <h1
+            class="gl-font-size-h1 gl-mt-3 gl-mb-2"
+            data-testid="title"
+          >
+            @gitlab-org/package-15
+          </h1>
+           
+          <div
+            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
+          >
+            <gl-icon-stub
+              class="gl-mr-3"
+              name="eye"
+              size="16"
+            />
+             
+            <gl-sprintf-stub
+              message="v%{version} published %{timeAgo}"
+            />
+          </div>
+        </div>
+      </div>
+       
+      <div
+        class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"
+      >
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-type"
+            icon="package"
+            link=""
+            size="s"
+            text="npm"
+            texttooltip=""
+          />
+        </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-size"
+            icon="disk"
+            link=""
+            size="s"
+            text="800.00 KiB"
+            texttooltip=""
+          />
+        </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <package-tags-stub
+            hidelabel="true"
+            tagdisplaylimit="2"
+            tags="[object Object],[object Object],[object Object]"
+          />
+        </div>
+      </div>
+    </div>
+     
+    <!---->
+  </div>
+   
+  <p />
+</div>
+`;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js
index 97444ec108f..65048d63be5 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js
@@ -1,15 +1,36 @@
 import { GlEmptyState } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
 
 import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue';
+import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
+import { FETCH_PACKAGE_DETAILS_ERROR_MESSAGE } from '~/packages_and_registries/package_registry/constants';
+import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql';
+import { packageDetailsQuery, packageData } from '../../mock_data';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
 
 describe('PackagesApp', () => {
   let wrapper;
+  let apolloProvider;
+
+  function createComponent({ resolver = jest.fn().mockResolvedValue(packageDetailsQuery()) } = {}) {
+    localVue.use(VueApollo);
+
+    const requestHandlers = [[getPackageDetails, resolver]];
+    apolloProvider = createMockApollo(requestHandlers);
 
-  function createComponent() {
     wrapper = shallowMount(PackagesApp, {
+      localVue,
+      apolloProvider,
       provide: {
-        titleComponent: 'titleComponent',
+        packageId: '111',
+        titleComponent: 'PackageTitle',
         projectName: 'projectName',
         canDelete: 'canDelete',
         svgPath: 'svgPath',
@@ -21,7 +42,8 @@ describe('PackagesApp', () => {
     });
   }
 
-  const emptyState = () => wrapper.findComponent(GlEmptyState);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findPackageTitle = () => wrapper.findComponent(PackageTitle);
 
   afterEach(() => {
     wrapper.destroy();
@@ -30,6 +52,29 @@ describe('PackagesApp', () => {
   it('renders an empty state component', () => {
     createComponent();
 
-    expect(emptyState().exists()).toBe(true);
+    expect(findEmptyState().exists()).toBe(true);
+  });
+
+  it('renders the app and displays the package title', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findPackageTitle().exists()).toBe(true);
+    expect(findPackageTitle().props()).toMatchObject({
+      packageEntity: expect.objectContaining(packageData()),
+    });
+  });
+
+  it('emits an error message if the load fails', async () => {
+    createComponent({ resolver: jest.fn().mockRejectedValue() });
+
+    await waitForPromises();
+
+    expect(createFlash).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
+      }),
+    );
   });
 });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
new file mode 100644
index 00000000000..511d5987e39
--- /dev/null
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
@@ -0,0 +1,176 @@
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
+import {
+  PACKAGE_TYPE_CONAN,
+  PACKAGE_TYPE_MAVEN,
+  PACKAGE_TYPE_NPM,
+  PACKAGE_TYPE_NUGET,
+} from '~/packages_and_registries/package_registry/constants';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+
+import { packageData, packageFiles, packageTags, packagePipelines } from '../../mock_data';
+
+const packageWithTags = {
+  ...packageData(),
+  tags: { nodes: packageTags() },
+  packageFiles: { nodes: packageFiles() },
+};
+
+describe('PackageTitle', () => {
+  let wrapper;
+
+  function createComponent(packageEntity = packageWithTags) {
+    wrapper = shallowMountExtended(PackageTitle, {
+      propsData: { packageEntity },
+      stubs: {
+        TitleArea,
+      },
+    });
+    return wrapper.vm.$nextTick();
+  }
+
+  const findTitleArea = () => wrapper.findComponent(TitleArea);
+  const findPackageType = () => wrapper.findByTestId('package-type');
+  const findPackageSize = () => wrapper.findByTestId('package-size');
+  const findPipelineProject = () => wrapper.findByTestId('pipeline-project');
+  const findPackageRef = () => wrapper.findByTestId('package-ref');
+  const findPackageTags = () => wrapper.findComponent(PackageTags);
+  const findPackageBadges = () => wrapper.findAllByTestId('tag-badge');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('renders', () => {
+    it('without tags', async () => {
+      await createComponent();
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('with tags', async () => {
+      await createComponent();
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('with tags on mobile', async () => {
+      jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
+      await createComponent();
+      await wrapper.vm.$nextTick();
+
+      expect(findPackageBadges()).toHaveLength(packageTags().length);
+    });
+  });
+
+  describe('package title', () => {
+    it('is correctly bound', async () => {
+      await createComponent();
+
+      expect(findTitleArea().props('title')).toBe(packageData().name);
+    });
+  });
+
+  describe('package icon', () => {
+    const iconUrl = 'a-fake-src';
+
+    it('shows an icon when present and package type is NUGET', async () => {
+      await createComponent({
+        ...packageData(),
+        packageType: PACKAGE_TYPE_NUGET,
+        metadata: { iconUrl },
+      });
+
+      expect(findTitleArea().props('avatar')).toBe(iconUrl);
+    });
+
+    it('hides the icon when not present', async () => {
+      await createComponent();
+
+      expect(findTitleArea().props('avatar')).toBe(null);
+    });
+  });
+
+  describe.each`
+    packageType           | text
+    ${PACKAGE_TYPE_CONAN} | ${'Conan'}
+    ${PACKAGE_TYPE_MAVEN} | ${'Maven'}
+    ${PACKAGE_TYPE_NPM}   | ${'npm'}
+    ${PACKAGE_TYPE_NUGET} | ${'NuGet'}
+  `(`package type`, ({ packageType, text }) => {
+    beforeEach(() => createComponent({ ...packageData, packageType }));
+
+    it(`${packageType} should render ${text}`, () => {
+      expect(findPackageType().props()).toEqual(expect.objectContaining({ text, icon: 'package' }));
+    });
+  });
+
+  describe('calculates the package size', () => {
+    it('correctly calculates when there is only 1 file', async () => {
+      await createComponent({ ...packageData(), packageFiles: { nodes: [packageFiles()[0]] } });
+
+      expect(findPackageSize().props()).toMatchObject({ text: '400.00 KiB', icon: 'disk' });
+    });
+
+    it('correctly calculates when there are multiple files', async () => {
+      await createComponent();
+
+      expect(findPackageSize().props('text')).toBe('800.00 KiB');
+    });
+  });
+
+  describe('package tags', () => {
+    it('displays the package-tags component when the package has tags', async () => {
+      await createComponent();
+
+      expect(findPackageTags().exists()).toBe(true);
+    });
+
+    it('does not display the package-tags component when there are no tags', async () => {
+      await createComponent({ ...packageData(), tags: { nodes: [] } });
+
+      expect(findPackageTags().exists()).toBe(false);
+    });
+  });
+
+  describe('package ref', () => {
+    it('does not display the ref if missing', async () => {
+      await createComponent();
+
+      expect(findPackageRef().exists()).toBe(false);
+    });
+
+    it('correctly shows the package ref if there is one', async () => {
+      await createComponent({
+        ...packageData(),
+        pipelines: { nodes: packagePipelines({ ref: 'test' }) },
+      });
+      expect(findPackageRef().props()).toMatchObject({
+        text: 'test',
+        icon: 'branch',
+      });
+    });
+  });
+
+  describe('pipeline project', () => {
+    it('does not display the project if missing', async () => {
+      await createComponent();
+
+      expect(findPipelineProject().exists()).toBe(false);
+    });
+
+    it('correctly shows the pipeline project if there is one', async () => {
+      await createComponent({
+        ...packageData(),
+        pipelines: { nodes: packagePipelines() },
+      });
+      expect(findPipelineProject().props()).toMatchObject({
+        text: packagePipelines()[0].project.name,
+        icon: 'review-list',
+        link: packagePipelines()[0].project.webUrl,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js
new file mode 100644
index 00000000000..2fb03cd9559
--- /dev/null
+++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js
@@ -0,0 +1,70 @@
+export const packageTags = () => [
+  { id: 'gid://gitlab/Packages::Tag/87', name: 'bananas_9', __typename: 'PackageTag' },
+  { id: 'gid://gitlab/Packages::Tag/86', name: 'bananas_8', __typename: 'PackageTag' },
+  { id: 'gid://gitlab/Packages::Tag/85', name: 'bananas_7', __typename: 'PackageTag' },
+];
+
+export const packagePipelines = (extend) => [
+  {
+    project: {
+      name: 'project14',
+      webUrl: 'http://gdk.test:3000/namespace14/project14',
+      __typename: 'Project',
+    },
+    ...extend,
+    __typename: 'Pipeline',
+  },
+];
+
+export const packageFiles = () => [
+  {
+    id: 'gid://gitlab/Packages::PackageFile/118',
+    fileMd5: null,
+    fileName: 'foo-1.0.1.tgz',
+    fileSha1: 'be93151dc23ac34a82752444556fe79b32c7a1ad',
+    fileSha256: null,
+    size: '409600',
+    __typename: 'PackageFile',
+  },
+  {
+    id: 'gid://gitlab/Packages::PackageFile/119',
+    fileMd5: null,
+    fileName: 'foo-1.0.2.tgz',
+    fileSha1: 'be93151dc23ac34a82752444556fe79b32c7a1ss',
+    fileSha256: null,
+    size: '409600',
+    __typename: 'PackageFile',
+  },
+];
+
+export const packageData = (extend) => ({
+  id: 'gid://gitlab/Packages::Package/111',
+  name: '@gitlab-org/package-15',
+  packageType: 'NPM',
+  version: '1.0.0',
+  createdAt: '2020-08-17T14:23:32Z',
+  updatedAt: '2020-08-17T14:23:32Z',
+  status: 'DEFAULT',
+  ...extend,
+});
+
+export const packageDetailsQuery = () => ({
+  data: {
+    package: {
+      ...packageData(),
+      tags: {
+        nodes: packageTags(),
+        __typename: 'PackageTagConnection',
+      },
+      pipelines: {
+        nodes: packagePipelines(),
+        __typename: 'PipelineConnection',
+      },
+      packageFiles: {
+        nodes: packageFiles(),
+        __typename: 'PackageFileConnection',
+      },
+      __typename: 'PackageDetailsType',
+    },
+  },
+});
diff --git a/spec/frontend/packages_and_registries/package_registry/utils_spec.js b/spec/frontend/packages_and_registries/package_registry/utils_spec.js
new file mode 100644
index 00000000000..019f94aaec2
--- /dev/null
+++ b/spec/frontend/packages_and_registries/package_registry/utils_spec.js
@@ -0,0 +1,23 @@
+import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
+
+describe('Packages shared utils', () => {
+  describe('getPackageTypeLabel', () => {
+    describe.each`
+      packageType   | expectedResult
+      ${'CONAN'}    | ${'Conan'}
+      ${'MAVEN'}    | ${'Maven'}
+      ${'NPM'}      | ${'npm'}
+      ${'NUGET'}    | ${'NuGet'}
+      ${'PYPI'}     | ${'PyPI'}
+      ${'RUBYGEMS'} | ${'RubyGems'}
+      ${'COMPOSER'} | ${'Composer'}
+      ${'DEBIAN'}   | ${'Debian'}
+      ${'HELM'}     | ${'Helm'}
+      ${'FOO'}      | ${null}
+    `(`package type`, ({ packageType, expectedResult }) => {
+      it(`${packageType} should show as ${expectedResult}`, () => {
+        expect(getPackageTypeLabel(packageType)).toBe(expectedResult);
+      });
+    });
+  });
+});