Commit 0431f9d9 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '34820-snippets-title-vue' into 'master'

Introduced snippet_title component

See merge request gitlab-org/gitlab!21941
parents 6411fd6b bcaf4b98
<script>
import GetSnippetQuery from '../queries/snippet.query.graphql';
import SnippetHeader from './snippet_header.vue';
import SnippetTitle from './snippet_title.vue';
import { GlLoadingIcon } from '@gitlab/ui';
export default {
components: {
SnippetHeader,
SnippetTitle,
GlLoadingIcon,
},
apollo: {
......@@ -45,6 +47,9 @@ export default {
:size="2"
class="loading-animation prepend-top-20 append-bottom-20"
/>
<snippet-header v-else :snippet="snippet" />
<template v-else>
<snippet-header :snippet="snippet" />
<snippet-title :snippet="snippet" />
</template>
</div>
</template>
<script>
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { GlSprintf } from '@gitlab/ui';
export default {
components: {
TimeAgoTooltip,
GlSprintf,
},
props: {
snippet: {
type: Object,
required: true,
},
},
};
</script>
<template>
<div class="snippet-header limited-header-width">
<h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title">
{{ snippet.title }}
</h2>
<div v-if="snippet.description" class="description" data-qa-selector="snippet_description">
<div class="md">{{ snippet.description }}</div>
</div>
<small v-if="snippet.updatedAt !== snippet.createdAt" class="edited-text">
<gl-sprintf message="Edited %{timeago}">
<template #timeago>
<time-ago-tooltip :time="snippet.updatedAt" tooltip-placement="bottom" />
</template>
</gl-sprintf>
</small>
</div>
</template>
import SnippetTitle from '~/snippets/components/snippet_title.vue';
import { GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
describe('Snippet header component', () => {
let wrapper;
const title = 'The property of Thor';
const description = 'Do not touch this hammer';
const snippet = {
snippet: {
title,
description,
},
};
function createComponent({ props = snippet } = {}) {
const defaultProps = Object.assign({}, props);
wrapper = shallowMount(SnippetTitle, {
sync: false,
propsData: {
...defaultProps,
},
});
}
afterEach(() => {
wrapper.destroy();
});
it('renders itself', () => {
createComponent();
expect(wrapper.find('.snippet-header').exists()).toBe(true);
});
it('renders snippets title and description', () => {
createComponent();
expect(wrapper.text().trim()).toContain(title);
expect(wrapper.text().trim()).toContain(description);
});
it('does not render recent changes time stamp if there were no updates', () => {
createComponent();
expect(wrapper.find(GlSprintf).exists()).toBe(false);
});
it('does not render recent changes time stamp if the time for creation and updates match', () => {
const props = Object.assign(snippet, {
snippet: {
...snippet.snippet,
createdAt: '2019-12-16T21:45:36Z',
updatedAt: '2019-12-16T21:45:36Z',
},
});
createComponent({ props });
expect(wrapper.find(GlSprintf).exists()).toBe(false);
});
it('renders translated string with most recent changes timestamp if changes were made', () => {
const props = Object.assign(snippet, {
snippet: {
...snippet.snippet,
createdAt: '2019-12-16T21:45:36Z',
updatedAt: '2019-15-16T21:45:36Z',
},
});
createComponent({ props });
expect(wrapper.find(GlSprintf).exists()).toBe(true);
});
});
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