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

Introduced snippet_title component

See merge request gitlab-org/gitlab!21941

app/assets/javascripts/snippets/components/app.vue

 <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>

app/assets/javascripts/snippets/components/snippet_title.vue

+<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>

spec/frontend/snippets/components/snippet_title_spec.js

+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);
+  });
+});