Commit f71bb648 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Olena Horal-Koretska

Add test for pacage_path component

- add testid to source
- test
parent e71e90b9
<script>
import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
import PackageTags from './package_tags.vue';
import PackagePath from './package_path.vue';
import PublishMethod from './publish_method.vue';
import { getPackageTypeLabel } from '../utils';
import timeagoMixin from '~/vue_shared/mixins/timeago';
......@@ -15,6 +16,7 @@ export default {
GlSprintf,
GlTruncate,
PackageTags,
PackagePath,
PublishMethod,
ListItem,
},
......@@ -92,22 +94,12 @@ export default {
</gl-sprintf>
</div>
<div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center">
<gl-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" />
<gl-link
class="gl-text-body gl-min-w-0"
data-testid="packages-row-project"
:href="`/${packageEntity.project_path}`"
>
<gl-truncate :text="packageEntity.projectPathName" />
</gl-link>
</div>
<div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type">
<gl-icon name="package" class="gl-ml-3 gl-mr-2" />
<span>{{ packageType }}</span>
</div>
<package-path v-if="hasProjectLink" :path="packageEntity.project_path" />
</div>
</template>
......
<script>
import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
import { joinPaths } from '~/lib/utils/url_utility';
export default {
name: 'PackagePath',
components: {
GlIcon,
GlLink,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
path: {
type: String,
required: true,
},
},
computed: {
pathPieces() {
return this.path.split('/');
},
root() {
// we skip the first part of the path since is the 'base' group
return this.pathPieces[1];
},
rootLink() {
return joinPaths(this.pathPieces[0], this.root);
},
leaf() {
return this.pathPieces[this.pathPieces.length - 1];
},
deeplyNested() {
return this.pathPieces.length > 3;
},
hasGroup() {
return this.root !== this.leaf;
},
},
};
</script>
<template>
<div class="gl-display-flex gl-align-items-center">
<gl-icon data-testid="base-icon" name="project" class="gl-mx-3 gl-min-w-0" />
<gl-link data-testid="root-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${rootLink}`">
{{ root }}
</gl-link>
<template v-if="hasGroup">
<gl-icon data-testid="root-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />
<template v-if="deeplyNested">
<span
v-gl-tooltip="{ title: path }"
data-testid="ellipsis-icon"
class="gl-inset-border-1-gray-200 gl-rounded-base gl-px-2 gl-min-w-0"
>
<gl-icon name="ellipsis_h" />
</span>
<gl-icon data-testid="ellipsis-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />
</template>
<gl-link data-testid="leaf-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${path}`">
{{ leaf }}
</gl-link>
</template>
</div>
</template>
---
title: Breadcrumb like UI for project path in packages list
merge_request: 42684
author:
type: changed
......@@ -51,27 +51,6 @@ exports[`packages_list_row renders 1`] = `
<!---->
<div
class="gl-display-flex gl-align-items-center"
>
<gl-icon-stub
class="gl-ml-3 gl-mr-2 gl-min-w-0"
name="review-list"
size="16"
/>
<gl-link-stub
class="gl-text-body gl-min-w-0"
data-testid="packages-row-project"
href="/foo/bar/baz"
>
<gl-truncate-stub
position="end"
text="foo/bar/baz"
/>
</gl-link-stub>
</div>
<div
class="d-flex align-items-center"
data-testid="package-type"
......@@ -86,6 +65,10 @@ exports[`packages_list_row renders 1`] = `
Maven
</span>
</div>
<package-path-stub
path="foo/bar/baz"
/>
</div>
</div>
</div>
......
import { 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 PackagePath from '~/packages/shared/components/package_path.vue';
import ListItem from '~/vue_shared/components/registry/list_item.vue';
import { packageList } from '../../mock_data';
......@@ -11,7 +12,7 @@ describe('packages_list_row', () => {
const [packageWithoutTags, packageWithTags] = packageList;
const findPackageTags = () => wrapper.find(PackageTags);
const findProjectLink = () => wrapper.find('[data-testid="packages-row-project"]');
const findPackagePath = () => wrapper.find(PackagePath);
const findDeleteButton = () => wrapper.find('[data-testid="action-delete"]');
const findPackageType = () => wrapper.find('[data-testid="package-type"]');
......@@ -63,8 +64,9 @@ describe('packages_list_row', () => {
mountComponent({ isGroup: true });
});
it('has project field', () => {
expect(findProjectLink().exists()).toBe(true);
it('has a package path component', () => {
expect(findPackagePath().exists()).toBe(true);
expect(findPackagePath().props()).toMatchObject({ path: 'foo/bar/baz' });
});
});
......
import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import PackagePath from '~/packages/shared/components/package_path.vue';
describe('PackagePath', () => {
let wrapper;
const mountComponent = (propsData = { path: 'foo' }) => {
wrapper = shallowMount(PackagePath, {
propsData,
directives: {
GlTooltip: createMockDirective(),
},
});
};
const BASE_ICON = 'base-icon';
const ROOT_LINK = 'root-link';
const ROOT_CHEVRON = 'root-chevron';
const ELLIPSIS_ICON = 'ellipsis-icon';
const ELLIPSIS_CHEVRON = 'ellipsis-chevron';
const LEAF_LINK = 'leaf-link';
const findItem = name => wrapper.find(`[data-testid="${name}"]`);
const findTooltip = w => getBinding(w.element, 'gl-tooltip');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe.each`
path | rootUrl | shouldExist | shouldNotExist
${'foo/bar'} | ${'/foo/bar'} | ${[]} | ${[ROOT_CHEVRON, ELLIPSIS_ICON, ELLIPSIS_CHEVRON, LEAF_LINK]}
${'foo/bar/baz'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK]} | ${[ELLIPSIS_ICON, ELLIPSIS_CHEVRON]}
${'foo/bar/baz/baz2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
${'foo/bar/baz/baz2/bar2'} | ${'/foo/bar'} | ${[ROOT_CHEVRON, LEAF_LINK, ELLIPSIS_ICON, ELLIPSIS_CHEVRON]} | ${[]}
`('given path $path', ({ path, shouldExist, shouldNotExist, rootUrl }) => {
const pathPieces = path.split('/').slice(1);
const hasTooltip = shouldExist.includes(ELLIPSIS_ICON);
beforeEach(() => {
mountComponent({ path });
});
it('should have a base icon', () => {
expect(findItem(BASE_ICON).exists()).toBe(true);
});
it('should have a root link', () => {
const root = findItem(ROOT_LINK);
expect(root.exists()).toBe(true);
expect(root.attributes('href')).toBe(rootUrl);
});
if (hasTooltip) {
it('should have a tooltip', () => {
const tooltip = findTooltip(findItem(ELLIPSIS_ICON));
expect(tooltip).toBeDefined();
expect(tooltip.value).toMatchObject({
title: path,
});
});
}
if (shouldExist.length) {
it.each(shouldExist)(`should have %s`, element => {
expect(findItem(element).exists()).toBe(true);
});
}
if (shouldNotExist.length) {
it.each(shouldNotExist)(`should not have %s`, element => {
expect(findItem(element).exists()).toBe(false);
});
}
if (shouldExist.includes(LEAF_LINK)) {
it('the last link should be the last piece of the path', () => {
const leaf = findItem(LEAF_LINK);
expect(leaf.attributes('href')).toBe(`/${path}`);
expect(leaf.text()).toBe(pathPieces[pathPieces.length - 1]);
});
}
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment