Commit 1716bf84 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch...

Merge branch '336388-convert-usage-of-timeago-mixin-to-time-ago-tooltip-in-package-registry' into 'master'

Use time-ago-tooltip in package details title

See merge request gitlab-org/gitlab!67494
parents 574ce362 4110463d
<script>
import { GlIcon, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import { __ } from '~/locale';
......@@ -8,7 +8,7 @@ import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/c
import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
export default {
name: 'PackageTitle',
......@@ -19,11 +19,8 @@ export default {
PackageTags,
MetadataItem,
GlBadge,
TimeAgoTooltip,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
i18n: {
packageInfo: __('v%{version} published %{timeAgo}'),
},
......@@ -77,17 +74,21 @@ export default {
<title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
<template #sub-header>
<gl-icon name="eye" class="gl-mr-3" />
<span data-testid="sub-header">
<gl-sprintf :message="$options.i18n.packageInfo">
<template #version>
{{ packageEntity.version }}
</template>
<template #timeAgo>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
&nbsp;{{ timeFormatted(packageEntity.created_at) }}
</span>
<time-ago-tooltip
v-if="packageEntity.createdAt"
class="gl-ml-2"
:time="packageEntity.createdAt"
/>
</template>
</gl-sprintf>
</span>
</template>
<template v-if="packageTypeDisplay" #metadata-type>
......
......@@ -35,9 +35,19 @@ exports[`PackageTitle renders with tags 1`] = `
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
<span
data-testid="sub-header"
>
v
1.0.0
published
<time-ago-tooltip-stub
class="gl-ml-2"
cssclass=""
time="2020-08-17T14:23:32Z"
tooltipplacement="top"
/>
</span>
</div>
</div>
</div>
......@@ -123,9 +133,19 @@ exports[`PackageTitle renders without tags 1`] = `
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
<span
data-testid="sub-header"
>
v
1.0.0
published
<time-ago-tooltip-stub
class="gl-ml-2"
cssclass=""
time="2020-08-17T14:23:32Z"
tooltipplacement="top"
/>
</span>
</div>
</div>
</div>
......
import { GlIcon, GlSprintf } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import PackageTags from '~/packages/shared/components/package_tags.vue';
......@@ -9,6 +10,7 @@ import {
PACKAGE_TYPE_NUGET,
} from '~/packages_and_registries/package_registry/constants';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { packageData, packageFiles, packageTags, packagePipelines } from '../../mock_data';
......@@ -26,6 +28,7 @@ describe('PackageTitle', () => {
propsData: { packageEntity },
stubs: {
TitleArea,
GlSprintf,
},
});
return wrapper.vm.$nextTick();
......@@ -38,6 +41,9 @@ describe('PackageTitle', () => {
const findPackageRef = () => wrapper.findByTestId('package-ref');
const findPackageTags = () => wrapper.findComponent(PackageTags);
const findPackageBadges = () => wrapper.findAllByTestId('tag-badge');
const findSubHeaderIcon = () => wrapper.findComponent(GlIcon);
const findSubHeaderText = () => wrapper.findByTestId('sub-header');
const findSubHeaderTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
afterEach(() => {
wrapper.destroy();
......@@ -59,6 +65,7 @@ describe('PackageTitle', () => {
it('with tags on mobile', async () => {
jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
await createComponent();
await wrapper.vm.$nextTick();
expect(findPackageBadges()).toHaveLength(packageTags().length);
......@@ -93,6 +100,25 @@ describe('PackageTitle', () => {
});
});
describe('sub-header', () => {
it('has the eye icon', async () => {
await createComponent();
expect(findSubHeaderIcon().props('name')).toBe('eye');
});
it('has a text showing version', async () => {
await createComponent();
expect(findSubHeaderText().text()).toMatchInterpolatedText('v 1.0.0 published');
});
it('has a time ago tooltip component', async () => {
await createComponent();
expect(findSubHeaderTimeAgo().props('time')).toBe(packageWithTags.createdAt);
});
});
describe.each`
packageType | text
${PACKAGE_TYPE_CONAN} | ${'Conan'}
......
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