+ There are no packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+
+ {{ content }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ issue.title }}
+
+
+
+
+
+
+ #{{ issue.iid }}
+
+
+
+
+
+ {{ $options.i18n.emptyStateDescription }}
+ +
+
+ {{ modalAction }}
+ {{ modalAction }}
+
+
+ {{ deletePackageName }}
+
+
+
+
+
+
diff --git a/app/assets/javascripts/packages/list/components/packages_list_app.vue b/app/assets/javascripts/packages/list/components/packages_list_app.vue
new file mode 100644
index 00000000000..dabeb7f21f1
--- /dev/null
+++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/assets/javascripts/packages/shared/components/package_tags.vue b/app/assets/javascripts/packages/shared/components/package_tags.vue
new file mode 100644
index 00000000000..62fddef68b2
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/components/package_tags.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+ {{ packageEntity.name }}
+
+
+
+
+
+ {{ packageEntity.version }}
+
+
+
+
+ {{ packageEntity.pipeline.user.name }}
+
+
+
+
+ {{ packageEntity.projectPathName }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ timeFormatted(packageEntity.created_at) }}
+
+
+
+
+
+
+
+ {{ tag.name }}
+
+
+
+ {{ moreTagsDisplay }}
+
+ {{ tagsDisplay }}
+
+
diff --git a/app/assets/javascripts/packages/shared/components/packages_list_loader.vue b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue
new file mode 100644
index 00000000000..cd9ef74d467
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
diff --git a/app/assets/javascripts/packages/shared/components/publish_method.vue b/app/assets/javascripts/packages/shared/components/publish_method.vue
new file mode 100644
index 00000000000..51c3b41cdd8
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/components/publish_method.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ packageShaShort }}
+
+
+
diff --git a/app/assets/javascripts/packages/shared/constants.js b/app/assets/javascripts/packages/shared/constants.js
new file mode 100644
index 00000000000..c984cdfe25c
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/constants.js
@@ -0,0 +1,23 @@
+export const PackageType = {
+ CONAN: 'conan',
+ MAVEN: 'maven',
+ NPM: 'npm',
+ NUGET: 'nuget',
+ PYPI: 'pypi',
+};
+
+export const TrackingActions = {
+ DELETE_PACKAGE: 'delete_package',
+ REQUEST_DELETE_PACKAGE: 'request_delete_package',
+ CANCEL_DELETE_PACKAGE: 'cancel_delete_package',
+ PULL_PACKAGE: 'pull_package',
+ COMING_SOON_REQUESTED: 'activate_coming_soon_requested',
+ COMING_SOON_LIST: 'click_coming_soon_issue_link',
+ COMING_SOON_HELP: 'click_coming_soon_documentation_link',
+};
+
+export const TrackingCategories = {
+ [PackageType.MAVEN]: 'MavenPackages',
+ [PackageType.NPM]: 'NpmPackages',
+ [PackageType.CONAN]: 'ConanPackages',
+};
diff --git a/app/assets/javascripts/packages/shared/utils.js b/app/assets/javascripts/packages/shared/utils.js
new file mode 100644
index 00000000000..ed33fd688ae
--- /dev/null
+++ b/app/assets/javascripts/packages/shared/utils.js
@@ -0,0 +1,34 @@
+import { s__ } from '~/locale';
+import { PackageType, TrackingCategories } from './constants';
+
+export const packageTypeToTrackCategory = type =>
+ // eslint-disable-next-line @gitlab/require-i18n-strings
+ `UI::${TrackingCategories[type]}`;
+
+export const beautifyPath = path => (path ? path.split('/').join(' / ') : '');
+
+export const getPackageTypeLabel = packageType => {
+ switch (packageType) {
+ case PackageType.CONAN:
+ return s__('PackageType|Conan');
+ case PackageType.MAVEN:
+ return s__('PackageType|Maven');
+ case PackageType.NPM:
+ return s__('PackageType|NPM');
+ case PackageType.NUGET:
+ return s__('PackageType|NuGet');
+ case PackageType.PYPI:
+ return s__('PackageType|PyPi');
+
+ default:
+ return null;
+ }
+};
+
+export const getCommitLink = ({ project_path: projectPath, pipeline = {} }, isGroup = false) => {
+ if (isGroup) {
+ return `/${projectPath}/commit/${pipeline.sha}`;
+ }
+
+ return `../commit/${pipeline.sha}`;
+};
diff --git a/app/assets/javascripts/pages/groups/packages/index/index.js b/app/assets/javascripts/pages/groups/packages/index/index.js
new file mode 100644
index 00000000000..4836900aa28
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/packages/index/index.js
@@ -0,0 +1,7 @@
+import initPackageList from '~/packages/list/packages_list_app_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (document.getElementById('js-vue-packages-list')) {
+ initPackageList();
+ }
+});
diff --git a/app/assets/javascripts/pages/projects/packages/packages/index/index.js b/app/assets/javascripts/pages/projects/packages/packages/index/index.js
new file mode 100644
index 00000000000..4836900aa28
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/packages/packages/index/index.js
@@ -0,0 +1,7 @@
+import initPackageList from '~/packages/list/packages_list_app_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (document.getElementById('js-vue-packages-list')) {
+ initPackageList();
+ }
+});
diff --git a/app/assets/javascripts/pages/projects/packages/packages/show/index.js b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
new file mode 100644
index 00000000000..1fde4ddfc1d
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
@@ -0,0 +1,3 @@
+import initPackageDetail from '~/packages/details/';
+
+document.addEventListener('DOMContentLoaded', initPackageDetail);
diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss
new file mode 100644
index 00000000000..8f6eee524e5
--- /dev/null
+++ b/app/assets/stylesheets/pages/packages.scss
@@ -0,0 +1,11 @@
+.commit-row-description {
+ border: 0;
+ border-left: 3px solid $white-dark;
+}
+
+.package-list-table[aria-busy='true'] {
+ td {
+ padding-bottom: 0;
+ padding-top: 0;
+ }
+}
diff --git a/app/controllers/concerns/packages_access.rb b/app/controllers/concerns/packages_access.rb
new file mode 100644
index 00000000000..6df2e064bb2
--- /dev/null
+++ b/app/controllers/concerns/packages_access.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module PackagesAccess
+ extend ActiveSupport::Concern
+
+ included do
+ before_action :verify_packages_enabled!
+ before_action :verify_read_package!
+ end
+
+ private
+
+ def verify_packages_enabled!
+ render_404 unless Gitlab.config.packages.enabled
+ end
+
+ def verify_read_package!
+ authorize_read_package!(project)
+ end
+end
diff --git a/app/controllers/groups/packages_controller.rb b/app/controllers/groups/packages_controller.rb
new file mode 100644
index 00000000000..600acc72e67
--- /dev/null
+++ b/app/controllers/groups/packages_controller.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Groups
+ class PackagesController < Groups::ApplicationController
+ before_action :verify_packages_enabled!
+
+ private
+
+ def verify_packages_enabled!
+ render_404 unless group.packages_feature_enabled?
+ end
+ end
+end
diff --git a/app/controllers/projects/packages/package_files_controller.rb b/app/controllers/projects/packages/package_files_controller.rb
new file mode 100644
index 00000000000..dd6d875cd1e
--- /dev/null
+++ b/app/controllers/projects/packages/package_files_controller.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Projects
+ module Packages
+ class PackageFilesController < ApplicationController
+ include PackagesAccess
+ include SendFileUpload
+
+ def download
+ package_file = project.package_files.find(params[:id])
+
+ send_upload(package_file.file, attachment: package_file.file_name)
+ end
+ end
+ end
+end
diff --git a/app/controllers/projects/packages/packages_controller.rb b/app/controllers/projects/packages/packages_controller.rb
new file mode 100644
index 00000000000..fc4ef7a01dc
--- /dev/null
+++ b/app/controllers/projects/packages/packages_controller.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Projects
+ module Packages
+ class PackagesController < Projects::ApplicationController
+ include PackagesAccess
+
+ before_action :authorize_destroy_package!, only: [:destroy]
+
+ def show
+ @package = project.packages.find(params[:id])
+ @package_files = @package.package_files.recent
+ @maven_metadatum = @package.maven_metadatum
+ end
+
+ def destroy
+ @package = project.packages.find(params[:id])
+ @package.destroy
+
+ redirect_to project_packages_path(@project), status: :found, notice: _('Package was removed')
+ end
+ end
+ end
+end
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index a5666cb70ac..5146a44de83 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -392,6 +392,7 @@ class ProjectsController < Projects::ApplicationController
:initialize_with_readme,
:autoclose_referenced_issues,
:suggestion_commit_message,
+ :packages_enabled,
:service_desk_enabled,
project_feature_attributes: %i[
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index f4238e7711a..0532353b141 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -48,24 +48,40 @@ module BlobHelper
return unless blob = readable_blob(options, path, project, ref)
common_classes = "btn btn-primary js-edit-blob ml-2 #{options[:extra_class]}"
+ data = { track_event: 'click_edit', track_label: 'Edit' }
+
+ if Feature.enabled?(:web_ide_primary_edit, project.group)
+ common_classes += " btn-inverted"
+ data[:track_property] = 'secondary'
+ end
edit_button_tag(blob,
common_classes,
_('Edit'),
edit_blob_path(project, ref, path, options),
project,
- ref)
+ ref,
+ data)
end
def ide_edit_button(project = @project, ref = @ref, path = @path, blob:)
return unless blob
+ common_classes = 'btn btn-primary ide-edit-button ml-2'
+ data = { track_event: 'click_edit_ide', track_label: 'Web IDE' }
+
+ unless Feature.enabled?(:web_ide_primary_edit, project.group)
+ common_classes += " btn-inverted"
+ data[:track_property] = 'secondary'
+ end
+
edit_button_tag(blob,
- 'btn btn-inverted btn-primary ide-edit-button ml-2',
+ common_classes,
_('Web IDE'),
ide_edit_path(project, ref, path),
project,
- ref)
+ ref,
+ data)
end
def modify_file_button(project = @project, ref = @ref, path = @path, blob:, label:, action:, btn_class:, modal_type:)
@@ -325,16 +341,16 @@ module BlobHelper
button_tag(button_text, class: "#{common_classes} disabled has-tooltip", title: _('You can only edit files when you are on a branch'), data: { container: 'body' })
end
- def edit_link_tag(link_text, edit_path, common_classes)
- link_to link_text, edit_path, class: "#{common_classes} btn-sm"
+ def edit_link_tag(link_text, edit_path, common_classes, data)
+ link_to link_text, edit_path, class: "#{common_classes} btn-sm", data: data
end
- def edit_button_tag(blob, common_classes, text, edit_path, project, ref)
+ def edit_button_tag(blob, common_classes, text, edit_path, project, ref, data)
if !on_top_of_branch?(project, ref)
edit_disabled_button_tag(text, common_classes)
# This condition only applies to users who are logged in
elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
- edit_link_tag(text, edit_path, common_classes)
+ edit_link_tag(text, edit_path, common_classes, data)
elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)
edit_fork_button_tag(common_classes, project, text, edit_blob_fork_params(edit_path))
end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index 61c9bd74451..5255dd27852 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -28,6 +28,7 @@ module GroupsHelper
def group_packages_nav_link_paths
%w[
+ groups/packages#index
groups/container_registries#index
]
end
@@ -157,6 +158,15 @@ module GroupsHelper
groups.to_json
end
+ def group_packages_nav?
+ group_packages_list_nav? ||
+ group_container_registry_nav?
+ end
+
+ def group_packages_list_nav?
+ @group.packages_feature_enabled?
+ end
+
private
def get_group_sidebar_links
diff --git a/app/helpers/packages_helper.rb b/app/helpers/packages_helper.rb
new file mode 100644
index 00000000000..a0434284ce6
--- /dev/null
+++ b/app/helpers/packages_helper.rb
@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module PackagesHelper
+ def package_sort_path(options = {})
+ "#{request.path}?#{options.to_param}"
+ end
+
+ def nuget_package_registry_url(project_id)
+ expose_url(api_v4_projects_packages_nuget_index_path(id: project_id, format: '.json'))
+ end
+
+ def package_registry_instance_url(registry_type)
+ expose_url("api/#{::API::API.version}/packages/#{registry_type}")
+ end
+
+ def package_registry_project_url(project_id, registry_type = :maven)
+ project_api_path = expose_path(api_v4_projects_path(id: project_id))
+ package_registry_project_path = "#{project_api_path}/packages/#{registry_type}"
+ expose_url(package_registry_project_path)
+ end
+
+ def package_from_presenter(package)
+ presenter = ::Packages::Detail::PackagePresenter.new(package)
+
+ presenter.detail_view.to_json
+ end
+
+ def pypi_registry_url(project_id)
+ full_url = expose_url(api_v4_projects_packages_pypi_simple_package_name_path({ id: project_id, package_name: '' }, true))
+ full_url.sub!('://', '://__token__:
+
+`;
+
+exports[`PackageActivity render to match the default snapshot when there is a pipeline 1`] = `
++ Activity +
+ +
+
+
+
+
+
+
+
+
+
+`;
diff --git a/spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap
new file mode 100644
index 00000000000..7fe5fcc3236
--- /dev/null
+++ b/spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Package code instruction multiline to match the snapshot 1`] = `
++ Activity +
+ +
+
+
+
+
+
+
+ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Package code instruction single line to match the default snapshot 1`] = `
++ this is some +multiline text ++
+
+
+
+
+`;
diff --git a/spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap
new file mode 100644
index 00000000000..100daeb7194
--- /dev/null
+++ b/spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependencyRow renders full dependency 1`] = `
+
+
+`;
diff --git a/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap
new file mode 100644
index 00000000000..4b5538af9ff
--- /dev/null
+++ b/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PackageTitle renders with tags 1`] = `
+
+
+ Test.Dependency
+
+
+
+ (.NETStandard2.0)
+
+
+
+
+
+ 2.3.7
+
+
+
+
+`;
+
+exports[`PackageTitle renders without tags 1`] = `
+
+
+
+
+
+
+
+ + + Test package + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/spec/frontend/packages/details/components/activity_spec.js b/spec/frontend/packages/details/components/activity_spec.js
new file mode 100644
index 00000000000..6e15b2ef030
--- /dev/null
+++ b/spec/frontend/packages/details/components/activity_spec.js
@@ -0,0 +1,92 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import PackageActivity from '~/packages/details/components/activity.vue';
+import {
+ npmPackage,
+ mavenPackage as packageWithoutBuildInfo,
+ mockPipelineInfo,
+} from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('PackageActivity', () => {
+ let wrapper;
+ let store;
+
+ function createComponent(packageEntity = packageWithoutBuildInfo, pipelineInfo = null) {
+ store = new Vuex.Store({
+ state: {
+ packageEntity,
+ },
+ getters: {
+ packagePipeline: () => pipelineInfo,
+ },
+ });
+
+ wrapper = shallowMount(PackageActivity, {
+ localVue,
+ store,
+ });
+ }
+
+ const commitMessageToggle = () => wrapper.find({ ref: 'commit-message-toggle' });
+ const commitMessage = () => wrapper.find({ ref: 'commit-message' });
+ const commitInfo = () => wrapper.find({ ref: 'commit-info' });
+ const pipelineInfo = () => wrapper.find({ ref: 'pipeline-info' });
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ wrapper = null;
+ });
+
+ describe('render', () => {
+ it('to match the default snapshot when no pipeline', () => {
+ createComponent();
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it('to match the default snapshot when there is a pipeline', () => {
+ createComponent(npmPackage, mockPipelineInfo);
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+ });
+
+ describe('commit message toggle', () => {
+ it("does not display the commit message button when there isn't one", () => {
+ createComponent(npmPackage, mockPipelineInfo);
+
+ expect(commitMessageToggle().exists()).toBe(false);
+ expect(commitMessage().exists()).toBe(false);
+ });
+
+ it('displays the commit message on toggle', () => {
+ const commitMessageStr = 'a message';
+ createComponent(npmPackage, {
+ ...mockPipelineInfo,
+ git_commit_message: commitMessageStr,
+ });
+
+ commitMessageToggle().trigger('click');
+
+ return wrapper.vm.$nextTick(() => expect(commitMessage().text()).toBe(commitMessageStr));
+ });
+ });
+
+ describe('pipeline information', () => {
+ it('does not display pipeline information when no build info is available', () => {
+ createComponent();
+
+ expect(pipelineInfo().exists()).toBe(false);
+ });
+
+ it('displays the pipeline information if found', () => {
+ createComponent(npmPackage, mockPipelineInfo);
+
+ expect(commitInfo().exists()).toBe(true);
+ expect(pipelineInfo().exists()).toBe(true);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/app_spec.js b/spec/frontend/packages/details/components/app_spec.js
new file mode 100644
index 00000000000..9faea5d7e45
--- /dev/null
+++ b/spec/frontend/packages/details/components/app_spec.js
@@ -0,0 +1,289 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlEmptyState, GlModal } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import * as getters from '~/packages/details/store/getters';
+import PackagesApp from '~/packages/details/components/app.vue';
+import PackageTitle from '~/packages/details/components/package_title.vue';
+import PackageInformation from '~/packages/details/components/information.vue';
+import NpmInstallation from '~/packages/details/components/npm_installation.vue';
+import MavenInstallation from '~/packages/details/components/maven_installation.vue';
+import * as SharedUtils from '~/packages/shared/utils';
+import { TrackingActions } from '~/packages/shared/constants';
+import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
+import PackageListRow from '~/packages/shared/components/package_list_row.vue';
+import ConanInstallation from '~/packages/details/components/conan_installation.vue';
+import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
+import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
+import DependencyRow from '~/packages/details/components/dependency_row.vue';
+import {
+ conanPackage,
+ mavenPackage,
+ mavenFiles,
+ npmPackage,
+ npmFiles,
+ nugetPackage,
+ pypiPackage,
+} from '../../mock_data';
+import stubChildren from 'helpers/stub_children';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('PackagesApp', () => {
+ let wrapper;
+ let store;
+ const fetchPackageVersions = jest.fn();
+
+ function createComponent({
+ packageEntity = mavenPackage,
+ packageFiles = mavenFiles,
+ isLoading = false,
+ } = {}) {
+ store = new Vuex.Store({
+ state: {
+ isLoading,
+ packageEntity,
+ packageFiles,
+ canDelete: true,
+ destroyPath: 'destroy-package-path',
+ emptySvgPath: 'empty-illustration',
+ npmPath: 'foo',
+ npmHelpPath: 'foo',
+ },
+ actions: {
+ fetchPackageVersions,
+ },
+ getters,
+ });
+
+ wrapper = mount(PackagesApp, {
+ localVue,
+ store,
+ stubs: {
+ ...stubChildren(PackagesApp),
+ GlDeprecatedButton: false,
+ GlModal: false,
+ GlTab: false,
+ GlTabs: false,
+ GlTable: false,
+ },
+ });
+ }
+
+ const packageTitle = () => wrapper.find(PackageTitle);
+ const emptyState = () => wrapper.find(GlEmptyState);
+ const allPackageInformation = () => wrapper.findAll(PackageInformation);
+ const packageInformation = index => allPackageInformation().at(index);
+ const npmInstallation = () => wrapper.find(NpmInstallation);
+ const mavenInstallation = () => wrapper.find(MavenInstallation);
+ const conanInstallation = () => wrapper.find(ConanInstallation);
+ const nugetInstallation = () => wrapper.find(NugetInstallation);
+ const pypiInstallation = () => wrapper.find(PypiInstallation);
+ const allFileRows = () => wrapper.findAll('.js-file-row');
+ const firstFileDownloadLink = () => wrapper.find('.js-file-download');
+ const deleteButton = () => wrapper.find('.js-delete-button');
+ const deleteModal = () => wrapper.find(GlModal);
+ const modalDeleteButton = () => wrapper.find({ ref: 'modal-delete-button' });
+ const versionsTab = () => wrapper.find('.js-versions-tab > a');
+ const packagesLoader = () => wrapper.find(PackagesListLoader);
+ const packagesVersionRows = () => wrapper.findAll(PackageListRow);
+ const noVersionsMessage = () => wrapper.find('[data-testid="no-versions-message"]');
+ const dependenciesTab = () => wrapper.find('.js-dependencies-tab > a');
+ const dependenciesCountBadge = () => wrapper.find('[data-testid="dependencies-badge"]');
+ const noDependenciesMessage = () => wrapper.find('[data-testid="no-dependencies-message"]');
+ const dependencyRows = () => wrapper.findAll(DependencyRow);
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('renders the app and displays the package title', () => {
+ createComponent();
+
+ expect(packageTitle()).toExist();
+ });
+
+ it('renders an empty state component when no an invalid package is passed as a prop', () => {
+ createComponent({
+ packageEntity: {},
+ });
+
+ expect(emptyState()).toExist();
+ });
+
+ it('renders package information and metadata for packages containing both information and metadata', () => {
+ createComponent();
+
+ expect(packageInformation(0)).toExist();
+ expect(packageInformation(1)).toExist();
+ });
+
+ it('does not render package metadata for npm as npm packages do not contain metadata', () => {
+ createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
+
+ expect(packageInformation(0)).toExist();
+ expect(allPackageInformation()).toHaveLength(1);
+ });
+
+ describe('installation instructions', () => {
+ describe.each`
+ packageEntity | selector
+ ${conanPackage} | ${conanInstallation}
+ ${mavenPackage} | ${mavenInstallation}
+ ${npmPackage} | ${npmInstallation}
+ ${nugetPackage} | ${nugetInstallation}
+ ${pypiPackage} | ${pypiInstallation}
+ `('renders', ({ packageEntity, selector }) => {
+ it(`${packageEntity.package_type} instructions`, () => {
+ createComponent({ packageEntity });
+
+ expect(selector()).toExist();
+ });
+ });
+ });
+
+ it('renders a single file for an npm package as they only contain one file', () => {
+ createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
+
+ expect(allFileRows()).toExist();
+ expect(allFileRows()).toHaveLength(1);
+ });
+
+ it('renders multiple files for a package that contains more than one file', () => {
+ createComponent();
+
+ expect(allFileRows()).toExist();
+ expect(allFileRows()).toHaveLength(2);
+ });
+
+ it('allows the user to download a package file by rendering a download link', () => {
+ createComponent();
+
+ expect(allFileRows()).toExist();
+ expect(firstFileDownloadLink().vm.$attrs.href).toContain('download');
+ });
+
+ describe('deleting packages', () => {
+ beforeEach(() => {
+ createComponent();
+ deleteButton().trigger('click');
+ });
+
+ it('shows the delete confirmation modal when delete is clicked', () => {
+ expect(deleteModal()).toExist();
+ });
+ });
+
+ describe('versions', () => {
+ describe('api call', () => {
+ beforeEach(() => {
+ createComponent();
+ });
+
+ it('makes api request on first click of tab', () => {
+ versionsTab().trigger('click');
+
+ expect(fetchPackageVersions).toHaveBeenCalled();
+ });
+ });
+
+ it('displays the loader when state is loading', () => {
+ createComponent({ isLoading: true });
+
+ expect(packagesLoader().exists()).toBe(true);
+ });
+
+ it('displays the correct version count when the package has versions', () => {
+ createComponent({ packageEntity: npmPackage });
+
+ expect(packagesVersionRows()).toHaveLength(npmPackage.versions.length);
+ });
+
+ it('displays the no versions message when there are none', () => {
+ createComponent();
+
+ expect(noVersionsMessage().exists()).toBe(true);
+ });
+ });
+
+ describe('dependency links', () => {
+ it('does not show the dependency links for a non nuget package', () => {
+ createComponent();
+
+ expect(dependenciesTab().exists()).toBe(false);
+ });
+
+ it('shows the dependencies tab with 0 count when a nuget package with no dependencies', () => {
+ createComponent({
+ packageEntity: {
+ ...nugetPackage,
+ dependency_links: [],
+ },
+ });
+
+ return wrapper.vm.$nextTick(() => {
+ const dependenciesBadge = dependenciesCountBadge();
+
+ expect(dependenciesTab().exists()).toBe(true);
+ expect(dependenciesBadge.exists()).toBe(true);
+ expect(dependenciesBadge.text()).toBe('0');
+ expect(noDependenciesMessage().exists()).toBe(true);
+ });
+ });
+
+ it('renders the correct number of dependency rows for a nuget package', () => {
+ createComponent({ packageEntity: nugetPackage });
+
+ return wrapper.vm.$nextTick(() => {
+ const dependenciesBadge = dependenciesCountBadge();
+
+ expect(dependenciesTab().exists()).toBe(true);
+ expect(dependenciesBadge.exists()).toBe(true);
+ expect(dependenciesBadge.text()).toBe(nugetPackage.dependency_links.length.toString());
+ expect(dependencyRows()).toHaveLength(nugetPackage.dependency_links.length);
+ });
+ });
+ });
+
+ describe('tracking', () => {
+ let eventSpy;
+ let utilSpy;
+ const category = 'foo';
+
+ beforeEach(() => {
+ eventSpy = jest.spyOn(Tracking, 'event');
+ utilSpy = jest.spyOn(SharedUtils, 'packageTypeToTrackCategory').mockReturnValue(category);
+ });
+
+ it('tracking category calls packageTypeToTrackCategory', () => {
+ createComponent({ packageEntity: conanPackage });
+ expect(wrapper.vm.tracking.category).toBe(category);
+ expect(utilSpy).toHaveBeenCalledWith('conan');
+ });
+
+ it(`delete button on delete modal call event with ${TrackingActions.DELETE_PACKAGE}`, () => {
+ createComponent({ packageEntity: conanPackage });
+ deleteButton().trigger('click');
+ return wrapper.vm.$nextTick().then(() => {
+ modalDeleteButton().trigger('click');
+ expect(eventSpy).toHaveBeenCalledWith(
+ category,
+ TrackingActions.DELETE_PACKAGE,
+ expect.any(Object),
+ );
+ });
+ });
+
+ it(`file download link call event with ${TrackingActions.PULL_PACKAGE}`, () => {
+ createComponent({ packageEntity: conanPackage });
+
+ firstFileDownloadLink().vm.$emit('click');
+ expect(eventSpy).toHaveBeenCalledWith(
+ category,
+ TrackingActions.PULL_PACKAGE,
+ expect.any(Object),
+ );
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/code_instruction_spec.js b/spec/frontend/packages/details/components/code_instruction_spec.js
new file mode 100644
index 00000000000..724eddb9070
--- /dev/null
+++ b/spec/frontend/packages/details/components/code_instruction_spec.js
@@ -0,0 +1,110 @@
+import { mount } from '@vue/test-utils';
+import CodeInstruction from '~/packages/details/components/code_instruction.vue';
+import { TrackingLabels } from '~/packages/details/constants';
+import Tracking from '~/tracking';
+
+describe('Package code instruction', () => {
+ let wrapper;
+
+ const defaultProps = {
+ instruction: 'npm i @my-package',
+ copyText: 'Copy npm install command',
+ };
+
+ function createComponent(props = {}) {
+ wrapper = mount(CodeInstruction, {
+ propsData: {
+ ...defaultProps,
+ ...props,
+ },
+ });
+ }
+
+ const findInstructionInput = () => wrapper.find('.js-instruction-input');
+ const findInstructionPre = () => wrapper.find('.js-instruction-pre');
+ const findInstructionButton = () => wrapper.find('.js-instruction-button');
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('single line', () => {
+ beforeEach(() => createComponent());
+
+ it('to match the default snapshot', () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+ });
+
+ describe('multiline', () => {
+ beforeEach(() =>
+ createComponent({
+ instruction: 'this is some\nmultiline text',
+ copyText: 'Copy the command',
+ multiline: true,
+ }),
+ );
+
+ it('to match the snapshot', () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+ });
+
+ describe('tracking', () => {
+ let eventSpy;
+ const trackingAction = 'test_action';
+ const label = TrackingLabels.CODE_INSTRUCTION;
+
+ beforeEach(() => {
+ eventSpy = jest.spyOn(Tracking, 'event');
+ });
+
+ it('should not track when no trackingAction is provided', () => {
+ createComponent();
+ findInstructionButton().trigger('click');
+
+ expect(eventSpy).toHaveBeenCalledTimes(0);
+ });
+
+ describe('when trackingAction is provided for single line', () => {
+ beforeEach(() =>
+ createComponent({
+ trackingAction,
+ }),
+ );
+
+ it('should track when copying from the input', () => {
+ findInstructionInput().trigger('copy');
+
+ expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+ label,
+ });
+ });
+
+ it('should track when the copy button is pressed', () => {
+ findInstructionButton().trigger('click');
+
+ expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+ label,
+ });
+ });
+ });
+
+ describe('when trackingAction is provided for multiline', () => {
+ beforeEach(() =>
+ createComponent({
+ trackingAction,
+ multiline: true,
+ }),
+ );
+
+ it('should track when copying from the multiline pre element', () => {
+ findInstructionPre().trigger('copy');
+
+ expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
+ label,
+ });
+ });
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/conan_installation_spec.js b/spec/frontend/packages/details/components/conan_installation_spec.js
new file mode 100644
index 00000000000..ee0212dd14f
--- /dev/null
+++ b/spec/frontend/packages/details/components/conan_installation_spec.js
@@ -0,0 +1,64 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import ConanInstallation from '~/packages/details/components/conan_installation.vue';
+import { conanPackage as packageEntity } from '../../mock_data';
+import { registryUrl as conanPath } from '../mock_data';
+import { GlTabs } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ConanInstallation', () => {
+ let wrapper;
+
+ const conanInstallationCommandStr = 'foo/command';
+ const conanSetupCommandStr = 'foo/setup';
+
+ const store = new Vuex.Store({
+ state: {
+ packageEntity,
+ conanPath,
+ },
+ getters: {
+ conanInstallationCommand: () => conanInstallationCommandStr,
+ conanSetupCommand: () => conanSetupCommandStr,
+ },
+ });
+
+ const findTabs = () => wrapper.find(GlTabs);
+ const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
+ const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
+
+ function createComponent() {
+ wrapper = mount(ConanInstallation, {
+ localVue,
+ store,
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ describe('it renders', () => {
+ it('with GlTabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+ });
+
+ describe('installation commands', () => {
+ it('renders the correct command', () => {
+ expect(conanInstallationCommand().element.value).toBe(conanInstallationCommandStr);
+ });
+ });
+
+ describe('setup commands', () => {
+ it('renders the correct command', () => {
+ expect(conanSetupCommand().element.value).toBe(conanSetupCommandStr);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/dependency_row_spec.js b/spec/frontend/packages/details/components/dependency_row_spec.js
new file mode 100644
index 00000000000..7d3ee92908d
--- /dev/null
+++ b/spec/frontend/packages/details/components/dependency_row_spec.js
@@ -0,0 +1,62 @@
+import { shallowMount } from '@vue/test-utils';
+import DependencyRow from '~/packages/details/components/dependency_row.vue';
+import { dependencyLinks } from '../../mock_data';
+
+describe('DependencyRow', () => {
+ let wrapper;
+
+ const { withoutFramework, withoutVersion, fullLink } = dependencyLinks;
+
+ function createComponent({ dependencyLink = fullLink } = {}) {
+ wrapper = shallowMount(DependencyRow, {
+ propsData: {
+ dependency: dependencyLink,
+ },
+ });
+ }
+
+ const dependencyVersion = () => wrapper.find('[data-testid="version-pattern"]');
+ const dependencyFramework = () => wrapper.find('[data-testid="target-framework"]');
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('renders', () => {
+ it('full dependency', () => {
+ createComponent();
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+ });
+
+ describe('version', () => {
+ it('does not render any version information when not supplied', () => {
+ createComponent({ dependencyLink: withoutVersion });
+
+ expect(dependencyVersion().exists()).toBe(false);
+ });
+
+ it('does render version info when it exists', () => {
+ createComponent();
+
+ expect(dependencyVersion().exists()).toBe(true);
+ expect(dependencyVersion().text()).toBe(fullLink.version_pattern);
+ });
+ });
+
+ describe('target framework', () => {
+ it('does not render any framework information when not supplied', () => {
+ createComponent({ dependencyLink: withoutFramework });
+
+ expect(dependencyFramework().exists()).toBe(false);
+ });
+
+ it('does render framework info when it exists', () => {
+ createComponent();
+
+ expect(dependencyFramework().exists()).toBe(true);
+ expect(dependencyFramework().text()).toBe(`(${fullLink.target_framework})`);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/information_spec.js b/spec/frontend/packages/details/components/information_spec.js
new file mode 100644
index 00000000000..ba134fcc5a1
--- /dev/null
+++ b/spec/frontend/packages/details/components/information_spec.js
@@ -0,0 +1,110 @@
+import { shallowMount } from '@vue/test-utils';
+import PackageInformation from '~/packages/details/components/information.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { GlLink } from '@gitlab/ui';
+
+describe('PackageInformation', () => {
+ let wrapper;
+
+ const gitlabLink = 'https://gitlab.com';
+ const testInformation = [
+ {
+ label: 'Information one',
+ value: 'Information value one',
+ },
+ {
+ label: 'Information two',
+ value: 'Information value two',
+ },
+ {
+ label: 'Information three',
+ value: 'Information value three',
+ },
+ ];
+
+ function createComponent(props = {}) {
+ const propsData = {
+ information: testInformation,
+ ...props,
+ };
+
+ wrapper = shallowMount(PackageInformation, {
+ propsData,
+ });
+ }
+
+ const headingSelector = () => wrapper.find('.card-header > strong');
+ const copyButton = () => wrapper.findAll(ClipboardButton);
+ const informationSelector = () => wrapper.findAll('ul.content-list li');
+ const informationRowText = index =>
+ informationSelector()
+ .at(index)
+ .text();
+ const informationLink = () => wrapper.find(GlLink);
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ it('renders the information block with default heading', () => {
+ createComponent();
+
+ expect(headingSelector()).toExist();
+ expect(headingSelector().text()).toBe('Package information');
+ });
+
+ it('renders a custom supplied heading', () => {
+ const heading = 'A custom heading';
+
+ createComponent({
+ heading,
+ });
+
+ expect(headingSelector()).toExist();
+ expect(headingSelector().text()).toBe(heading);
+ });
+
+ it('renders the supplied information', () => {
+ createComponent();
+
+ expect(informationSelector()).toHaveLength(testInformation.length);
+ expect(informationRowText(0)).toContain(testInformation[0].value);
+ expect(informationRowText(1)).toContain(testInformation[1].value);
+ expect(informationRowText(2)).toContain(testInformation[2].value);
+ });
+
+ it('renders a link when the information is of type link', () => {
+ createComponent({
+ information: [
+ {
+ label: 'Information link',
+ value: gitlabLink,
+ type: 'link',
+ },
+ ],
+ });
+
+ const link = informationLink();
+
+ expect(link.exists()).toBe(true);
+ expect(link.text()).toBe(gitlabLink);
+ expect(link.attributes('href')).toBe(gitlabLink);
+ });
+
+ describe('copy button', () => {
+ it('does not render by default', () => {
+ createComponent();
+
+ expect(copyButton().exists()).toBe(false);
+ });
+
+ it('does render when the prop is set and has correct text set', () => {
+ createComponent({ showCopy: true });
+
+ expect(copyButton()).toHaveLength(testInformation.length);
+ expect(copyButton().at(0).vm.text).toBe(testInformation[0].value);
+ expect(copyButton().at(1).vm.text).toBe(testInformation[1].value);
+ expect(copyButton().at(2).vm.text).toBe(testInformation[2].value);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/installation_tabs_spec.js b/spec/frontend/packages/details/components/installation_tabs_spec.js
new file mode 100644
index 00000000000..e9218dd985a
--- /dev/null
+++ b/spec/frontend/packages/details/components/installation_tabs_spec.js
@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import InstallationTabs from '~/packages/details/components/installation_tabs.vue';
+import Tracking from '~/tracking';
+import { TrackingActions } from '~/packages/details/constants';
+
+describe('InstallationTabs', () => {
+ let wrapper;
+ let eventSpy;
+
+ const trackingLabel = 'foo';
+
+ function createComponent() {
+ wrapper = mount(InstallationTabs, {
+ propsData: {
+ trackingLabel,
+ },
+ });
+ }
+
+ const installationTab = () => wrapper.find('.js-installation-tab > a');
+ const setupTab = () => wrapper.find('.js-setup-tab > a');
+
+ beforeEach(() => {
+ eventSpy = jest.spyOn(Tracking, 'event');
+ createComponent();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ describe('tab change tracking', () => {
+ it('should track when the setup tab is clicked', () => {
+ setupTab().trigger('click');
+
+ return wrapper.vm.$nextTick().then(() => {
+ expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
+ label: trackingLabel,
+ });
+ });
+ });
+
+ it('should track when the installation tab is clicked', () => {
+ setupTab().trigger('click');
+
+ return wrapper.vm
+ .$nextTick()
+ .then(() => {
+ installationTab().trigger('click');
+ })
+ .then(() => {
+ expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
+ label: trackingLabel,
+ });
+ });
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/maven_installation_spec.js b/spec/frontend/packages/details/components/maven_installation_spec.js
new file mode 100644
index 00000000000..8dff24bd47b
--- /dev/null
+++ b/spec/frontend/packages/details/components/maven_installation_spec.js
@@ -0,0 +1,71 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import MavenInstallation from '~/packages/details/components/maven_installation.vue';
+import { registryUrl as mavenPath } from '../mock_data';
+import { mavenPackage as packageEntity } from '../../mock_data';
+import { GlTabs } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('MavenInstallation', () => {
+ let wrapper;
+
+ const xmlCodeBlock = 'foo/xml';
+ const mavenCommandStr = 'foo/command';
+ const mavenSetupXml = 'foo/setup';
+
+ const store = new Vuex.Store({
+ state: {
+ packageEntity,
+ mavenPath,
+ },
+ getters: {
+ mavenInstallationXml: () => xmlCodeBlock,
+ mavenInstallationCommand: () => mavenCommandStr,
+ mavenSetupXml: () => mavenSetupXml,
+ },
+ });
+
+ const findTabs = () => wrapper.find(GlTabs);
+ const xmlCode = () => wrapper.find('.js-maven-xml > pre');
+ const mavenCommand = () => wrapper.find('.js-maven-command > input');
+ const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
+
+ function createComponent() {
+ wrapper = mount(MavenInstallation, {
+ localVue,
+ store,
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ describe('it renders', () => {
+ it('with GlTabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+ });
+
+ describe('installation commands', () => {
+ it('renders the correct xml block', () => {
+ expect(xmlCode().text()).toBe(xmlCodeBlock);
+ });
+
+ it('renders the correct maven command', () => {
+ expect(mavenCommand().element.value).toBe(mavenCommandStr);
+ });
+ });
+
+ describe('setup commands', () => {
+ it('renders the correct xml block', () => {
+ expect(xmlSetup().text()).toBe(mavenSetupXml);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/npm_installation_spec.js b/spec/frontend/packages/details/components/npm_installation_spec.js
new file mode 100644
index 00000000000..38396330129
--- /dev/null
+++ b/spec/frontend/packages/details/components/npm_installation_spec.js
@@ -0,0 +1,80 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import NpmInstallation from '~/packages/details/components/npm_installation.vue';
+import { npmPackage as packageEntity } from '../../mock_data';
+import { registryUrl as nugetPath } from '../mock_data';
+import { GlTabs } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('NpmInstallation', () => {
+ let wrapper;
+
+ const npmCommandStr = 'npm install';
+ const npmSetupStr = 'npm setup';
+ const yarnCommandStr = 'npm install';
+ const yarnSetupStr = 'npm setup';
+
+ const findTabs = () => wrapper.find(GlTabs);
+ const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
+ const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
+ const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
+ const yarnSetupCommand = () => wrapper.find('.js-yarn-setup > input');
+
+ function createComponent(yarn = false) {
+ const store = new Vuex.Store({
+ state: {
+ packageEntity,
+ nugetPath,
+ },
+ getters: {
+ npmInstallationCommand: () => () => (yarn ? yarnCommandStr : npmCommandStr),
+ npmSetupCommand: () => () => (yarn ? yarnSetupStr : npmSetupStr),
+ },
+ });
+
+ wrapper = mount(NpmInstallation, {
+ localVue,
+ store,
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ describe('it renders', () => {
+ it('with GlTabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+ });
+
+ describe('npm commands', () => {
+ it('renders the correct install command', () => {
+ expect(npmInstallationCommand().element.value).toBe(npmCommandStr);
+ });
+
+ it('renders the correct setup command', () => {
+ expect(npmSetupCommand().element.value).toBe(npmSetupStr);
+ });
+ });
+
+ describe('yarn commands', () => {
+ beforeEach(() => {
+ createComponent(true);
+ });
+
+ it('renders the correct install command', () => {
+ expect(yarnInstallationCommand().element.value).toBe(yarnCommandStr);
+ });
+
+ it('renders the correct setup command', () => {
+ expect(yarnSetupCommand().element.value).toBe(yarnSetupStr);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/nuget_installation_spec.js b/spec/frontend/packages/details/components/nuget_installation_spec.js
new file mode 100644
index 00000000000..21e2aa0f99d
--- /dev/null
+++ b/spec/frontend/packages/details/components/nuget_installation_spec.js
@@ -0,0 +1,64 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
+import { nugetPackage as packageEntity } from '../../mock_data';
+import { registryUrl as nugetPath } from '../mock_data';
+import { GlTabs } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('NugetInstallation', () => {
+ let wrapper;
+
+ const nugetInstallationCommandStr = 'foo/command';
+ const nugetSetupCommandStr = 'foo/setup';
+
+ const store = new Vuex.Store({
+ state: {
+ packageEntity,
+ nugetPath,
+ },
+ getters: {
+ nugetInstallationCommand: () => nugetInstallationCommandStr,
+ nugetSetupCommand: () => nugetSetupCommandStr,
+ },
+ });
+
+ const findTabs = () => wrapper.find(GlTabs);
+ const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
+ const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
+
+ function createComponent() {
+ wrapper = mount(NugetInstallation, {
+ localVue,
+ store,
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ describe('it renders', () => {
+ it('with GlTabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+ });
+
+ describe('installation commands', () => {
+ it('renders the correct command', () => {
+ expect(nugetInstallationCommand().element.value).toBe(nugetInstallationCommandStr);
+ });
+ });
+
+ describe('setup commands', () => {
+ it('renders the correct command', () => {
+ expect(nugetSetupCommand().element.value).toBe(nugetSetupCommandStr);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/package_title_spec.js b/spec/frontend/packages/details/components/package_title_spec.js
new file mode 100644
index 00000000000..a30dc4b8aba
--- /dev/null
+++ b/spec/frontend/packages/details/components/package_title_spec.js
@@ -0,0 +1,168 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import PackageTitle from '~/packages/details/components/package_title.vue';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import {
+ conanPackage,
+ mavenFiles,
+ mavenPackage,
+ mockTags,
+ npmFiles,
+ npmPackage,
+ nugetPackage,
+} from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('PackageTitle', () => {
+ let wrapper;
+ let store;
+
+ function createComponent({
+ packageEntity = mavenPackage,
+ packageFiles = mavenFiles,
+ icon = null,
+ } = {}) {
+ store = new Vuex.Store({
+ state: {
+ packageEntity,
+ packageFiles,
+ },
+ getters: {
+ packageTypeDisplay: ({ packageEntity: { package_type: type } }) => type,
+ packagePipeline: ({ packageEntity: { pipeline = null } }) => pipeline,
+ packageIcon: () => icon,
+ },
+ });
+
+ wrapper = shallowMount(PackageTitle, {
+ localVue,
+ store,
+ });
+ }
+
+ const packageIcon = () => wrapper.find('[data-testid="package-icon"]');
+ const packageType = () => wrapper.find('[data-testid="package-type"]');
+ const packageSize = () => wrapper.find('[data-testid="package-size"]');
+ const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]');
+ const packageRef = () => wrapper.find('[data-testid="package-ref"]');
+ const packageTags = () => wrapper.find(PackageTags);
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('renders', () => {
+ it('without tags', () => {
+ createComponent();
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it('with tags', () => {
+ createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } });
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+ });
+
+ describe('package icon', () => {
+ const fakeSrc = 'a-fake-src';
+
+ it('shows an icon when provided one from vuex', () => {
+ createComponent({ icon: fakeSrc });
+
+ expect(packageIcon().exists()).toBe(true);
+ });
+
+ it('has the correct src attribute', () => {
+ createComponent({ icon: fakeSrc });
+
+ expect(packageIcon().props('src')).toBe(fakeSrc);
+ });
+
+ it('does not show an icon when not provided one', () => {
+ createComponent();
+
+ expect(packageIcon().exists()).toBe(false);
+ });
+ });
+
+ describe.each`
+ packageEntity | expectedResult
+ ${conanPackage} | ${'conan'}
+ ${mavenPackage} | ${'maven'}
+ ${npmPackage} | ${'npm'}
+ ${nugetPackage} | ${'nuget'}
+ `(`package type`, ({ packageEntity, expectedResult }) => {
+ beforeEach(() => createComponent({ packageEntity }));
+
+ it(`${packageEntity.package_type} should render from Vuex getters ${expectedResult}`, () => {
+ expect(packageType().text()).toBe(expectedResult);
+ });
+ });
+
+ describe('calculates the package size', () => {
+ it('correctly calulates when there is only 1 file', () => {
+ createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
+
+ expect(packageSize().text()).toBe('200 bytes');
+ });
+
+ it('correctly calulates when there are multiple files', () => {
+ createComponent();
+
+ expect(packageSize().text()).toBe('300 bytes');
+ });
+ });
+
+ describe('package tags', () => {
+ it('displays the package-tags component when the package has tags', () => {
+ createComponent({
+ packageEntity: {
+ ...npmPackage,
+ tags: mockTags,
+ },
+ });
+
+ expect(packageTags().exists()).toBe(true);
+ });
+
+ it('does not display the package-tags component when there are no tags', () => {
+ createComponent();
+
+ expect(packageTags().exists()).toBe(false);
+ });
+ });
+
+ describe('package ref', () => {
+ it('does not display the ref if missing', () => {
+ createComponent();
+
+ expect(packageRef().exists()).toBe(false);
+ });
+
+ it('correctly shows the package ref if there is one', () => {
+ createComponent({ packageEntity: npmPackage });
+
+ expect(packageRef().contains('gl-icon-stub')).toBe(true);
+ expect(packageRef().text()).toBe(npmPackage.pipeline.ref);
+ });
+ });
+
+ describe('pipeline project', () => {
+ it('does not display the project if missing', () => {
+ createComponent();
+
+ expect(pipelineProject().exists()).toBe(false);
+ });
+
+ it('correctly shows the pipeline project if there is one', () => {
+ createComponent({ packageEntity: npmPackage });
+
+ expect(pipelineProject().text()).toBe(npmPackage.pipeline.project.name);
+ expect(pipelineProject().attributes('href')).toBe(npmPackage.pipeline.project.web_url);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/components/pypi_installation_spec.js b/spec/frontend/packages/details/components/pypi_installation_spec.js
new file mode 100644
index 00000000000..c1c1114dc5b
--- /dev/null
+++ b/spec/frontend/packages/details/components/pypi_installation_spec.js
@@ -0,0 +1,68 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
+import InstallationTabs from '~/packages/details/components/installation_tabs.vue';
+import { pypiPackage as packageEntity } from '../../mock_data';
+import { GlTabs } from '@gitlab/ui';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('PypiInstallation', () => {
+ let wrapper;
+
+ const pipCommandStr = 'pip install';
+ const pypiSetupStr = 'python setup';
+
+ const store = new Vuex.Store({
+ state: {
+ packageEntity,
+ pypiHelpPath: 'foo',
+ },
+ getters: {
+ pypiPipCommand: () => pipCommandStr,
+ pypiSetupCommand: () => pypiSetupStr,
+ },
+ });
+
+ const findTabs = () => wrapper.find(GlTabs);
+ const pipCommand = () => wrapper.find('[data-testid="pip-command"]');
+ const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]');
+
+ function createComponent() {
+ wrapper = shallowMount(PypiInstallation, {
+ localVue,
+ store,
+ stubs: {
+ InstallationTabs,
+ },
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ describe('it renders', () => {
+ it('with GlTabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+ });
+
+ describe('installation commands', () => {
+ it('renders the correct pip command', () => {
+ expect(pipCommand().props('instruction')).toBe(pipCommandStr);
+ });
+ });
+
+ describe('setup commands', () => {
+ it('renders the correct setup block', () => {
+ expect(setupInstruction().props('instruction')).toBe(pypiSetupStr);
+ });
+ });
+});
diff --git a/spec/frontend/packages/details/mock_data.js b/spec/frontend/packages/details/mock_data.js
new file mode 100644
index 00000000000..0d56dbab3f8
--- /dev/null
+++ b/spec/frontend/packages/details/mock_data.js
@@ -0,0 +1,111 @@
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { orderBy } from 'lodash';
+
+export const registryUrl = 'foo/registry';
+
+export const mavenMetadata = {
+ app_group: 'com.test.package.app',
+ app_name: 'test-package-app',
+ app_version: '1.0.0',
+};
+
+export const generateMavenCommand = ({
+ app_group: appGroup = '',
+ app_name: appName = '',
+ app_version: appVersion = '',
+}) => `mvn dependency:get -Dartifact=${appGroup}:${appName}:${appVersion}`;
+
+export const generateXmlCodeBlock = ({
+ app_group: appGroup = '',
+ app_name: appName = '',
+ app_version: appVersion = '',
+}) => `
+
+
+
+
+
+
+ + + Test package + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no Conan packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no Maven packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no NPM packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no NuGet packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no PyPi packages yet +
+ +
+ Learn how to
+
+
+
+
+
+
+
+
+loading
' };
+
+ const emptyListHelpUrl = 'helpUrl';
+ const findEmptyState = () => wrapper.find(GlEmptyState);
+ const findListComponent = () => wrapper.find(PackageList);
+ const findTabComponent = (index = 0) => wrapper.findAll(GlTab).at(index);
+
+ const createStore = (filterQuery = '') => {
+ store = new Vuex.Store({
+ state: {
+ isLoading: false,
+ config: {
+ resourceId: 'project_id',
+ emptyListIllustration: 'helpSvg',
+ emptyListHelpUrl,
+ },
+ filterQuery,
+ },
+ });
+ store.dispatch = jest.fn();
+ };
+
+ const mountComponent = () => {
+ wrapper = shallowMount(PackageListApp, {
+ localVue,
+ store,
+ stubs: {
+ GlEmptyState,
+ GlLoadingIcon,
+ PackageList,
+ GlTab,
+ GlTabs,
+ GlSprintf,
+ GlLink,
+ },
+ });
+ };
+
+ beforeEach(() => {
+ createStore();
+ mountComponent();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('renders', () => {
+ mountComponent();
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ describe('empty state', () => {
+ it('generate the correct empty list link', () => {
+ const link = findListComponent().find(GlLink);
+
+ expect(link.attributes('href')).toBe(emptyListHelpUrl);
+ expect(link.text()).toBe('publish and share your packages');
+ });
+
+ it('includes the right content on the default tab', () => {
+ const heading = findEmptyState().find('h1');
+
+ expect(heading.text()).toBe('There are no packages yet');
+ });
+ });
+
+ it('call requestPackagesList on page:changed', () => {
+ const list = findListComponent();
+ list.vm.$emit('page:changed', 1);
+ expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 });
+ });
+
+ it('call requestDeletePackage on package:delete', () => {
+ const list = findListComponent();
+ list.vm.$emit('package:delete', 'foo');
+ expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
+ });
+
+ it('calls requestPackagesList on sort:changed', () => {
+ const list = findListComponent();
+ list.vm.$emit('sort:changed');
+ expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+ });
+
+ describe('tab change', () => {
+ it('calls requestPackagesList when all tab is clicked', () => {
+ findTabComponent().trigger('click');
+
+ expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+ });
+
+ it('calls requestPackagesList when a package type tab is clicked', () => {
+ findTabComponent(1).trigger('click');
+
+ expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+ });
+ });
+
+ describe('filter without results', () => {
+ beforeEach(() => {
+ createStore('foo');
+ mountComponent();
+ });
+
+ it('should show specific empty message', () => {
+ expect(findEmptyState().text()).toContain('Sorry, your filter produced no results');
+ expect(findEmptyState().text()).toContain(
+ 'To widen your search, change or remove the filters above',
+ );
+ });
+ });
+});
diff --git a/spec/frontend/packages/list/components/packages_list_spec.js b/spec/frontend/packages/list/components/packages_list_spec.js
new file mode 100644
index 00000000000..cca2fab3cfd
--- /dev/null
+++ b/spec/frontend/packages/list/components/packages_list_spec.js
@@ -0,0 +1,219 @@
+import Vuex from 'vuex';
+import { last } from 'lodash';
+import { GlTable, GlPagination, GlModal } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import { mount, createLocalVue } from '@vue/test-utils';
+import PackagesList from '~/packages/list/components/packages_list.vue';
+import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
+import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import * as SharedUtils from '~/packages/shared/utils';
+import { TrackingActions } from '~/packages/shared/constants';
+import stubChildren from 'helpers/stub_children';
+import { packageList } from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('packages_list', () => {
+ let wrapper;
+ let store;
+
+ const GlSortingItem = { name: 'sorting-item-stub', template: 'bar
' };
+
+ const findPackagesListLoader = () => wrapper.find(PackagesListLoader);
+ const findPackageListPagination = () => wrapper.find(GlPagination);
+ const findPackageListDeleteModal = () => wrapper.find(GlModal);
+ const findEmptySlot = () => wrapper.find({ name: 'empty-slot-stub' });
+ const findPackagesListRow = () => wrapper.find(PackagesListRow);
+
+ const createStore = (isGroupPage, packages, isLoading) => {
+ const state = {
+ isLoading,
+ packages,
+ pagination: {
+ perPage: 1,
+ total: 1,
+ page: 1,
+ },
+ config: {
+ isGroupPage,
+ },
+ sorting: {
+ orderBy: 'version',
+ sort: 'desc',
+ },
+ };
+ store = new Vuex.Store({
+ state,
+ getters: {
+ getList: () => packages,
+ },
+ });
+ store.dispatch = jest.fn();
+ };
+
+ const mountComponent = ({
+ isGroupPage = false,
+ packages = packageList,
+ isLoading = false,
+ ...options
+ } = {}) => {
+ createStore(isGroupPage, packages, isLoading);
+
+ wrapper = mount(PackagesList, {
+ localVue,
+ store,
+ stubs: {
+ ...stubChildren(PackagesList),
+ GlTable,
+ GlSortingItem,
+ GlModal,
+ },
+ ...options,
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ describe('when is loading', () => {
+ beforeEach(() => {
+ mountComponent({
+ packages: [],
+ isLoading: true,
+ });
+ });
+
+ it('shows skeleton loader when loading', () => {
+ expect(findPackagesListLoader().exists()).toBe(true);
+ });
+ });
+
+ describe('when is not loading', () => {
+ beforeEach(() => {
+ mountComponent();
+ });
+
+ it('does not show skeleton loader when not loading', () => {
+ expect(findPackagesListLoader().exists()).toBe(false);
+ });
+ });
+
+ describe('layout', () => {
+ beforeEach(() => {
+ mountComponent();
+ });
+
+ it('contains a pagination component', () => {
+ const sorting = findPackageListPagination();
+ expect(sorting.exists()).toBe(true);
+ });
+
+ it('contains a modal component', () => {
+ const sorting = findPackageListDeleteModal();
+ expect(sorting.exists()).toBe(true);
+ });
+ });
+
+ describe('when the user can destroy the package', () => {
+ beforeEach(() => {
+ mountComponent();
+ });
+
+ it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => {
+ const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show');
+ const item = last(wrapper.vm.list);
+
+ findPackagesListRow().vm.$emit('packageToDelete', item);
+
+ return wrapper.vm.$nextTick().then(() => {
+ expect(wrapper.vm.itemToBeDeleted).toEqual(item);
+ expect(mockModalShow).toHaveBeenCalled();
+ });
+ });
+
+ it('deleteItemConfirmation resets itemToBeDeleted', () => {
+ wrapper.setData({ itemToBeDeleted: 1 });
+ wrapper.vm.deleteItemConfirmation();
+ expect(wrapper.vm.itemToBeDeleted).toEqual(null);
+ });
+
+ it('deleteItemConfirmation emit package:delete', () => {
+ const itemToBeDeleted = { id: 2 };
+ wrapper.setData({ itemToBeDeleted });
+ wrapper.vm.deleteItemConfirmation();
+ return wrapper.vm.$nextTick(() => {
+ expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]);
+ });
+ });
+
+ it('deleteItemCanceled resets itemToBeDeleted', () => {
+ wrapper.setData({ itemToBeDeleted: 1 });
+ wrapper.vm.deleteItemCanceled();
+ expect(wrapper.vm.itemToBeDeleted).toEqual(null);
+ });
+ });
+
+ describe('when the list is empty', () => {
+ beforeEach(() => {
+ mountComponent({
+ packages: [],
+ slots: {
+ 'empty-state': EmptySlotStub,
+ },
+ });
+ });
+
+ it('show the empty slot', () => {
+ const emptySlot = findEmptySlot();
+ expect(emptySlot.exists()).toBe(true);
+ });
+ });
+
+ describe('pagination component', () => {
+ let pagination;
+ let modelEvent;
+
+ beforeEach(() => {
+ mountComponent();
+ pagination = findPackageListPagination();
+ // retrieve the event used by v-model, a more sturdy approach than hardcoding it
+ modelEvent = pagination.vm.$options.model.event;
+ });
+
+ it('emits page:changed events when the page changes', () => {
+ pagination.vm.$emit(modelEvent, 2);
+ expect(wrapper.emitted('page:changed')).toEqual([[2]]);
+ });
+ });
+
+ describe('tracking', () => {
+ let eventSpy;
+ let utilSpy;
+ const category = 'foo';
+
+ beforeEach(() => {
+ mountComponent();
+ eventSpy = jest.spyOn(Tracking, 'event');
+ utilSpy = jest.spyOn(SharedUtils, 'packageTypeToTrackCategory').mockReturnValue(category);
+ wrapper.setData({ itemToBeDeleted: { package_type: 'conan' } });
+ });
+
+ it('tracking category calls packageTypeToTrackCategory', () => {
+ expect(wrapper.vm.tracking.category).toBe(category);
+ expect(utilSpy).toHaveBeenCalledWith('conan');
+ });
+
+ it('deleteItemConfirmation calls event', () => {
+ wrapper.vm.deleteItemConfirmation();
+ expect(eventSpy).toHaveBeenCalledWith(
+ category,
+ TrackingActions.DELETE_PACKAGE,
+ expect.any(Object),
+ );
+ });
+ });
+});
diff --git a/spec/frontend/packages/list/components/packages_sort_spec.js b/spec/frontend/packages/list/components/packages_sort_spec.js
new file mode 100644
index 00000000000..47fe0164255
--- /dev/null
+++ b/spec/frontend/packages/list/components/packages_sort_spec.js
@@ -0,0 +1,92 @@
+import Vuex from 'vuex';
+import { GlSorting } from '@gitlab/ui';
+import { mount, createLocalVue } from '@vue/test-utils';
+import PackagesSort from '~/packages/list/components/packages_sort.vue';
+import stubChildren from 'helpers/stub_children';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('packages_sort', () => {
+ let wrapper;
+ let store;
+ let sorting;
+ let sortingItems;
+
+ const GlSortingItem = { name: 'sorting-item-stub', template: '
+
+`;
diff --git a/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
new file mode 100644
index 00000000000..01a2e80173a
--- /dev/null
+++ b/spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`publish_method renders 1`] = `
+
+
+
+
+
+
+ Test package
+
+
+
+
+
+
+
+
+ 1.0.0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ xxxxxxxx
+
+
+
+`;
diff --git a/spec/frontend/packages/shared/components/package_list_row_spec.js b/spec/frontend/packages/shared/components/package_list_row_spec.js
new file mode 100644
index 00000000000..61a5bb16edb
--- /dev/null
+++ b/spec/frontend/packages/shared/components/package_list_row_spec.js
@@ -0,0 +1,112 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import { packageList } from '../../mock_data';
+
+describe('packages_list_row', () => {
+ let wrapper;
+ let store;
+
+ const [packageWithoutTags, packageWithTags] = packageList;
+
+ const findPackageTags = () => wrapper.find(PackageTags);
+ const findProjectLink = () => wrapper.find('[data-testid="packages-row-project"]');
+ const findDeleteButton = () => wrapper.find('[data-testid="action-delete"]');
+ const findPackageType = () => wrapper.find('[data-testid="package-type"]');
+
+ const mountComponent = ({
+ isGroup = false,
+ packageEntity = packageWithoutTags,
+ shallow = true,
+ showPackageType = true,
+ disableDelete = false,
+ } = {}) => {
+ const mountFunc = shallow ? shallowMount : mount;
+
+ wrapper = mountFunc(PackagesListRow, {
+ store,
+ propsData: {
+ packageLink: 'foo',
+ packageEntity,
+ isGroup,
+ showPackageType,
+ disableDelete,
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ it('renders', () => {
+ mountComponent();
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ describe('tags', () => {
+ it('renders package tags when a package has tags', () => {
+ mountComponent({ isGroup: false, packageEntity: packageWithTags });
+
+ expect(findPackageTags().exists()).toBe(true);
+ });
+
+ it('does not render when there are no tags', () => {
+ mountComponent();
+
+ expect(findPackageTags().exists()).toBe(false);
+ });
+ });
+
+ describe('when is is group', () => {
+ beforeEach(() => {
+ mountComponent({ isGroup: true });
+ });
+
+ it('has project field', () => {
+ expect(findProjectLink().exists()).toBe(true);
+ });
+
+ it('does not show the delete button', () => {
+ expect(findDeleteButton().exists()).toBe(false);
+ });
+ });
+
+ describe('showPackageType', () => {
+ it('shows the type when set', () => {
+ mountComponent();
+
+ expect(findPackageType().exists()).toBe(true);
+ });
+
+ it('does not show the type when not set', () => {
+ mountComponent({ showPackageType: false });
+
+ expect(findPackageType().exists()).toBe(false);
+ });
+ });
+
+ describe('deleteAvailable', () => {
+ it('does not show when not set', () => {
+ mountComponent({ disableDelete: true });
+
+ expect(findDeleteButton().exists()).toBe(false);
+ });
+ });
+
+ describe('delete event', () => {
+ beforeEach(() =>
+ mountComponent({ isGroup: false, packageEntity: packageWithoutTags, shallow: false }),
+ );
+
+ it('emits the packageToDelete event when the delete button is clicked', () => {
+ findDeleteButton().trigger('click');
+
+ return wrapper.vm.$nextTick().then(() => {
+ expect(wrapper.emitted('packageToDelete')).toBeTruthy();
+ expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
+ });
+ });
+ });
+});
diff --git a/spec/frontend/packages/shared/components/package_tags_spec.js b/spec/frontend/packages/shared/components/package_tags_spec.js
new file mode 100644
index 00000000000..cc49a9a9244
--- /dev/null
+++ b/spec/frontend/packages/shared/components/package_tags_spec.js
@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import { mockTags } from '../../mock_data';
+
+describe('PackageTags', () => {
+ let wrapper;
+
+ function createComponent(tags = [], props = {}) {
+ const propsData = {
+ tags,
+ ...props,
+ };
+
+ wrapper = mount(PackageTags, {
+ propsData,
+ });
+ }
+
+ const tagLabel = () => wrapper.find('[data-testid="tagLabel"]');
+ const tagBadges = () => wrapper.findAll('[data-testid="tagBadge"]');
+ const moreBadge = () => wrapper.find('[data-testid="moreBadge"]');
+
+ afterEach(() => {
+ if (wrapper) wrapper.destroy();
+ });
+
+ describe('tag label', () => {
+ it('shows the tag label by default', () => {
+ createComponent();
+
+ expect(tagLabel().exists()).toBe(true);
+ });
+
+ it('hides when hideLabel prop is set to true', () => {
+ createComponent(mockTags, { hideLabel: true });
+
+ expect(tagLabel().exists()).toBe(false);
+ });
+ });
+
+ it('renders the correct number of tags', () => {
+ createComponent(mockTags.slice(0, 2));
+
+ expect(tagBadges()).toHaveLength(2);
+ expect(moreBadge().exists()).toBe(false);
+ });
+
+ it('does not render more than the configured tagDisplayLimit', () => {
+ createComponent(mockTags);
+
+ expect(tagBadges()).toHaveLength(2);
+ });
+
+ it('renders the more tags badge if there are more than the configured limit', () => {
+ createComponent(mockTags);
+
+ expect(tagBadges()).toHaveLength(2);
+ expect(moreBadge().exists()).toBe(true);
+ expect(moreBadge().text()).toContain('2');
+ });
+
+ it('renders the configured tagDisplayLimit when set in props', () => {
+ createComponent(mockTags, { tagDisplayLimit: 1 });
+
+ expect(tagBadges()).toHaveLength(1);
+ expect(moreBadge().exists()).toBe(true);
+ expect(moreBadge().text()).toContain('3');
+ });
+
+ describe('tagBadgeStyle', () => {
+ const defaultStyle = ['badge', 'badge-info', 'gl-display-none'];
+
+ it('shows tag badge when there is only one', () => {
+ createComponent([mockTags[0]]);
+
+ const expectedStyle = [...defaultStyle, 'gl-display-flex', 'gl-ml-3'];
+
+ expect(
+ tagBadges()
+ .at(0)
+ .classes(),
+ ).toEqual(expect.arrayContaining(expectedStyle));
+ });
+
+ it('shows tag badge for medium or heigher resolutions', () => {
+ createComponent(mockTags);
+
+ const expectedStyle = [...defaultStyle, 'd-md-flex'];
+
+ expect(
+ tagBadges()
+ .at(1)
+ .classes(),
+ ).toEqual(expect.arrayContaining(expectedStyle));
+ });
+
+ it('correctly prepends left and appends right when there is more than one tag', () => {
+ createComponent(mockTags, {
+ tagDisplayLimit: 4,
+ });
+
+ const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
+ const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'gl-mr-2'];
+
+ const allBadges = tagBadges();
+
+ expect(allBadges.at(0).classes()).toEqual(
+ expect.arrayContaining([...expectedStyleWithAppend, 'gl-ml-3']),
+ );
+ expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+ expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+ expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend));
+ });
+ });
+});
diff --git a/spec/frontend/packages/shared/components/packages_list_loader_spec.js b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
new file mode 100644
index 00000000000..c8c2e2a4ba4
--- /dev/null
+++ b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils';
+import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
+
+describe('PackagesListLoader', () => {
+ let wrapper;
+
+ const createComponent = (props = {}) => {
+ wrapper = mount(PackagesListLoader, {
+ propsData: {
+ ...props,
+ },
+ });
+ };
+
+ const getShapes = () => wrapper.vm.desktopShapes;
+ const findSquareButton = () => wrapper.find({ ref: 'button-loader' });
+
+ beforeEach(createComponent);
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ describe('when used for projects', () => {
+ it('should return 5 rects with last one being a square', () => {
+ expect(getShapes()).toHaveLength(5);
+ expect(findSquareButton().exists()).toBe(true);
+ });
+ });
+
+ describe('when used for groups', () => {
+ beforeEach(() => {
+ createComponent({ isGroup: true });
+ });
+
+ it('should return 5 rects with no square', () => {
+ expect(getShapes()).toHaveLength(5);
+ expect(findSquareButton().exists()).toBe(false);
+ });
+ });
+});
diff --git a/spec/frontend/packages/shared/components/publish_method_spec.js b/spec/frontend/packages/shared/components/publish_method_spec.js
new file mode 100644
index 00000000000..bb9287c1204
--- /dev/null
+++ b/spec/frontend/packages/shared/components/publish_method_spec.js
@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils';
+import PublishMethod from '~/packages/shared/components/publish_method.vue';
+import { packageList } from '../../mock_data';
+
+describe('publish_method', () => {
+ let wrapper;
+
+ const [packageWithoutPipeline, packageWithPipeline] = packageList;
+
+ const findPipelineRef = () => wrapper.find({ ref: 'pipeline-ref' });
+ const findPipelineSha = () => wrapper.find({ ref: 'pipeline-sha' });
+ const findManualPublish = () => wrapper.find({ ref: 'manual-ref' });
+
+ const mountComponent = (packageEntity = {}, isGroup = false) => {
+ wrapper = shallowMount(PublishMethod, {
+ propsData: {
+ packageEntity,
+ isGroup,
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+ });
+
+ it('renders', () => {
+ mountComponent(packageWithPipeline);
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ describe('pipeline information', () => {
+ it('displays branch and commit when pipeline info exists', () => {
+ mountComponent(packageWithPipeline);
+
+ expect(findPipelineRef().exists()).toBe(true);
+ expect(findPipelineSha().exists()).toBe(true);
+ });
+
+ it('does not show any pipeline details when no information exists', () => {
+ mountComponent(packageWithoutPipeline);
+
+ expect(findPipelineRef().exists()).toBe(false);
+ expect(findPipelineSha().exists()).toBe(false);
+ expect(findManualPublish().exists()).toBe(true);
+ expect(findManualPublish().text()).toBe('Manually Published');
+ });
+ });
+});
diff --git a/spec/frontend/packages/shared/utils_spec.js b/spec/frontend/packages/shared/utils_spec.js
new file mode 100644
index 00000000000..abc873efae0
--- /dev/null
+++ b/spec/frontend/packages/shared/utils_spec.js
@@ -0,0 +1,65 @@
+import {
+ packageTypeToTrackCategory,
+ beautifyPath,
+ getPackageTypeLabel,
+ getCommitLink,
+} from '~/packages/shared/utils';
+import { PackageType, TrackingCategories } from '~/packages/shared/constants';
+import { packageList } from '../mock_data';
+
+describe('Packages shared utils', () => {
+ describe('packageTypeToTrackCategory', () => {
+ it('prepend UI to package category', () => {
+ expect(packageTypeToTrackCategory()).toMatchInlineSnapshot(`"UI::undefined"`);
+ });
+
+ it.each(Object.keys(PackageType))('returns a correct category string for %s', packageKey => {
+ const packageName = PackageType[packageKey];
+ expect(packageTypeToTrackCategory(packageName)).toBe(
+ `UI::${TrackingCategories[packageName]}`,
+ );
+ });
+ });
+
+ describe('beautifyPath', () => {
+ it('returns a string with spaces around /', () => {
+ expect(beautifyPath('foo/bar')).toBe('foo / bar');
+ });
+ it('does not fail for empty string', () => {
+ expect(beautifyPath()).toBe('');
+ });
+ });
+
+ describe('getPackageTypeLabel', () => {
+ describe.each`
+ packageType | expectedResult
+ ${'conan'} | ${'Conan'}
+ ${'maven'} | ${'Maven'}
+ ${'npm'} | ${'NPM'}
+ ${'nuget'} | ${'NuGet'}
+ ${'pypi'} | ${'PyPi'}
+ ${'foo'} | ${null}
+ `(`package type`, ({ packageType, expectedResult }) => {
+ it(`${packageType} should show as ${expectedResult}`, () => {
+ expect(getPackageTypeLabel(packageType)).toBe(expectedResult);
+ });
+ });
+ });
+
+ describe('getCommitLink', () => {
+ it('returns a relative link when isGroup is false', () => {
+ const link = getCommitLink(packageList[0], false);
+
+ expect(link).toContain('../commit');
+ });
+
+ describe('when isGroup is true', () => {
+ it('returns an absolute link matching project path', () => {
+ const mavenPackage = packageList[0];
+ const link = getCommitLink(mavenPackage, true);
+
+ expect(link).toContain(`/${mavenPackage.project_path}/commit`);
+ });
+ });
+ });
+});
diff --git a/spec/graphql/resolvers/alert_management/alert_resolver_spec.rb b/spec/graphql/resolvers/alert_management/alert_resolver_spec.rb
index 0c1ba5aab2c..42830f0024d 100644
--- a/spec/graphql/resolvers/alert_management/alert_resolver_spec.rb
+++ b/spec/graphql/resolvers/alert_management/alert_resolver_spec.rb
@@ -7,8 +7,8 @@ RSpec.describe Resolvers::AlertManagement::AlertResolver do
let_it_be(:current_user) { create(:user) }
let_it_be(:project) { create(:project) }
- let_it_be(:alert_1) { create(:alert_management_alert, :resolved, project: project, ended_at: 1.year.ago, events: 2, severity: :high) }
- let_it_be(:alert_2) { create(:alert_management_alert, :ignored, project: project, events: 1, severity: :critical) }
+ let_it_be(:resolved_alert) { create(:alert_management_alert, :resolved, project: project, ended_at: 1.year.ago, events: 2, severity: :high) }
+ let_it_be(:ignored_alert) { create(:alert_management_alert, :ignored, project: project, events: 1, severity: :critical) }
let_it_be(:alert_other_proj) { create(:alert_management_alert) }
let(:args) { {} }
@@ -24,18 +24,18 @@ RSpec.describe Resolvers::AlertManagement::AlertResolver do
project.add_developer(current_user)
end
- it { is_expected.to contain_exactly(alert_1, alert_2) }
+ it { is_expected.to contain_exactly(resolved_alert, ignored_alert) }
context 'finding by iid' do
- let(:args) { { iid: alert_1.iid } }
+ let(:args) { { iid: resolved_alert.iid } }
- it { is_expected.to contain_exactly(alert_1) }
+ it { is_expected.to contain_exactly(resolved_alert) }
end
context 'finding by status' do
let(:args) { { status: [Types::AlertManagement::StatusEnum.values['IGNORED'].value] } }
- it { is_expected.to contain_exactly(alert_2) }
+ it { is_expected.to contain_exactly(ignored_alert) }
end
describe 'sorting' do
@@ -45,11 +45,11 @@ RSpec.describe Resolvers::AlertManagement::AlertResolver do
let_it_be(:alert_count_3) { create(:alert_management_alert, project: project, events: 3) }
it 'sorts alerts ascending' do
- expect(resolve_alerts(sort: :event_count_asc)).to eq [alert_2, alert_1, alert_count_3, alert_count_6]
+ expect(resolve_alerts(sort: :event_count_asc)).to eq [ignored_alert, resolved_alert, alert_count_3, alert_count_6]
end
it 'sorts alerts descending' do
- expect(resolve_alerts(sort: :event_count_desc)).to eq [alert_count_6, alert_count_3, alert_1, alert_2]
+ expect(resolve_alerts(sort: :event_count_desc)).to eq [alert_count_6, alert_count_3, resolved_alert, ignored_alert]
end
end
end
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index fe975aa7723..74ee7a152b3 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -30,6 +30,8 @@ RSpec.describe BlobHelper do
let(:namespace) { create(:namespace, name: 'gitlab') }
let(:project) { create(:project, :repository, namespace: namespace) }
+ subject(:link) { helper.edit_blob_button(project, 'master', 'README.md') }
+
before do
allow(helper).to receive(:current_user).and_return(nil)
allow(helper).to receive(:can?).and_return(true)
@@ -53,15 +55,49 @@ RSpec.describe BlobHelper do
end
it 'returns a link with the proper route' do
- link = helper.edit_blob_button(project, 'master', 'README.md')
-
expect(Capybara.string(link).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md")
end
it 'returns a link with the passed link_opts on the expected route' do
- link = helper.edit_blob_button(project, 'master', 'README.md', link_opts: { mr_id: 10 })
+ link_with_mr = helper.edit_blob_button(project, 'master', 'README.md', link_opts: { mr_id: 10 })
- expect(Capybara.string(link).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md?mr_id=10")
+ expect(Capybara.string(link_with_mr).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md?mr_id=10")
+ end
+
+ context 'when edit is the primary button' do
+ before do
+ stub_feature_flags(web_ide_primary_edit: false)
+ end
+
+ it 'is rendered as primary' do
+ expect(link).not_to match(/btn-inverted/)
+ end
+
+ it 'passes on primary tracking attributes' do
+ parsed_link = Capybara.string(link).find_link('Edit')
+
+ expect(parsed_link[:'data-track-event']).to eq("click_edit")
+ expect(parsed_link[:'data-track-label']).to eq("Edit")
+ expect(parsed_link[:'data-track-property']).to eq(nil)
+ end
+ end
+
+ context 'when Web IDE is the primary button' do
+ before do
+ stub_feature_flags(web_ide_primary_edit: true)
+ end
+
+ it 'is rendered as inverted' do
+ expect(link).to match(/btn-inverted/)
+ end
+
+ it 'passes on secondary tracking attributes' do
+ parsed_link = Capybara.string(link).find_link('Edit')
+
+ expect(parsed_link[:'data-track-event']).to eq("click_edit")
+ expect(parsed_link[:'data-track-label']).to eq("Edit")
+ expect(parsed_link[:'data-track-property']).to eq("secondary")
+ end
end
end
@@ -285,6 +321,62 @@ RSpec.describe BlobHelper do
end
end
+ describe `#ide_edit_button` do
+ let_it_be(:namespace) { create(:namespace, name: 'gitlab') }
+ let_it_be(:project) { create(:project, :repository, namespace: namespace) }
+ let_it_be(:current_user) { create(:user) }
+ let(:can_push_code) { true }
+ let(:blob) { project.repository.blob_at('refs/heads/master', 'README.md') }
+
+ subject(:link) { helper.ide_edit_button(project, 'master', 'README.md', blob: blob) }
+
+ before do
+ allow(helper).to receive(:current_user).and_return(current_user)
+ allow(helper).to receive(:can?).with(current_user, :push_code, project).and_return(can_push_code)
+ allow(helper).to receive(:can_collaborate_with_project?).and_return(true)
+ end
+
+ it 'returns a link with a Web IDE route' do
+ expect(Capybara.string(link).find_link('Web IDE')[:href]).to eq("/-/ide/project/#{project.full_path}/edit/master/-/README.md")
+ end
+
+ context 'when edit is the primary button' do
+ before do
+ stub_feature_flags(web_ide_primary_edit: false)
+ end
+
+ it 'is rendered as inverted' do
+ expect(link).to match(/btn-inverted/)
+ end
+
+ it 'passes on secondary tracking attributes' do
+ parsed_link = Capybara.string(link).find_link('Web IDE')
+
+ expect(parsed_link[:'data-track-event']).to eq("click_edit_ide")
+ expect(parsed_link[:'data-track-label']).to eq("Web IDE")
+ expect(parsed_link[:'data-track-property']).to eq("secondary")
+ end
+ end
+
+ context 'when Web IDE is the primary button' do
+ before do
+ stub_feature_flags(web_ide_primary_edit: true)
+ end
+
+ it 'is rendered as primary' do
+ expect(link).not_to match(/btn-inverted/)
+ end
+
+ it 'passes on primary tracking attributes' do
+ parsed_link = Capybara.string(link).find_link('Web IDE')
+
+ expect(parsed_link[:'data-track-event']).to eq("click_edit_ide")
+ expect(parsed_link[:'data-track-label']).to eq("Web IDE")
+ expect(parsed_link[:'data-track-property']).to eq(nil)
+ end
+ end
+ end
+
describe '#ide_edit_path' do
let(:project) { create(:project) }
let(:current_user) { create(:user) }
diff --git a/spec/helpers/packages_helper_spec.rb b/spec/helpers/packages_helper_spec.rb
new file mode 100644
index 00000000000..6dc6f8b2299
--- /dev/null
+++ b/spec/helpers/packages_helper_spec.rb
@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe PackagesHelper do
+ let_it_be(:base_url) { "#{Gitlab.config.gitlab.url}/api/v4/" }
+ let_it_be(:project) { create(:project) }
+
+ describe 'package_registry_instance_url' do
+ it 'returns conant instance url when registry_type is conant' do
+ url = helper.package_registry_instance_url(:conan)
+
+ expect(url).to eq("#{base_url}packages/conan")
+ end
+
+ it 'returns npm instance url when registry_type is npm' do
+ url = helper.package_registry_instance_url(:npm)
+
+ expect(url).to eq("#{base_url}packages/npm")
+ end
+ end
+
+ describe 'package_registry_project_url' do
+ it 'returns maven registry url when registry_type is not provided' do
+ url = helper.package_registry_project_url(1)
+
+ expect(url).to eq("#{base_url}projects/1/packages/maven")
+ end
+
+ it 'returns specified registry url when registry_type is provided' do
+ url = helper.package_registry_project_url(1, :npm)
+
+ expect(url).to eq("#{base_url}projects/1/packages/npm")
+ end
+ end
+
+ describe 'pypi_registry_url' do
+ let_it_be(:base_url_with_token) { base_url.sub('://', '://__token__: