Added a query to fetch blob content for a snippet

Return correct content based on passed param

Now, that we have different fields for rich and simple content, we can
fetch one or another based on the passed parameter

app/assets/javascripts/blob/components/blob_content.vue

+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
+import BlobContentError from './blob_content_error.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    BlobContentError,
+  },
+  props: {
+    content: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    activeViewer: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    viewer() {
+      switch (this.activeViewer.type) {
+        case 'rich':
+          return RichViewer;
+        default:
+          return SimpleViewer;
+      }
+    },
+    viewerError() {
+      return this.activeViewer.renderError;
+    },
+  },
+};
+</script>
+<template>
+  <div class="blob-viewer" :data-type="activeViewer.type">
+    <gl-loading-icon v-if="loading" size="md" color="dark" class="my-4 mx-auto" />
+
+    <template v-else>
+      <blob-content-error v-if="viewerError" :viewer-error="viewerError" />
+      <component :is="viewer" v-else ref="contentViewer" :content="content" />
+    </template>
+  </div>
+</template>

app/assets/javascripts/blob/components/blob_content_error.vue

+<script>
+export default {
+  props: {
+    viewerError: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="file-content code">
+    <div class="text-center py-4" v-html="viewerError"></div>
+  </div>
+</template>

app/assets/javascripts/blob/components/blob_header_default_actions.vue

@@ -36,11 +36,6 @@ export default {
       return this.activeViewer === RICH_BLOB_VIEWER;
     },
   },
-  methods: {
-    requestCopyContents() {
-      this.$emit('copy');
-    },
-  },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
   BTN_RAW_TITLE,
@@ -53,7 +48,7 @@ export default {
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
       :disabled="copyDisabled"
-      @click="requestCopyContents"
+      data-clipboard-target="#blob-code-content"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
     </gl-button>

app/assets/javascripts/graphql_shared/fragments/blobviewer.fragment.graphql

 fragment BlobViewer on SnippetBlobViewer {
   collapsed
-  loadingPartialName
   renderError
   tooLarge
+  type
+  fileType
 }

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

@@ -2,13 +2,19 @@
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import { SNIPPET_VISIBILITY_PUBLIC } from '../constants';
 import BlobHeader from '~/blob/components/blob_header.vue';
-import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
+import BlobContent from '~/blob/components/blob_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
+import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
+import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
+
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
+
 export default {
   components: {
     BlobEmbeddable,
     BlobHeader,
+    BlobContent,
     GlLoadingIcon,
   },
   apollo: {
@@ -20,6 +26,23 @@ export default {
         };
       },
       update: data => data.snippets.edges[0].node.blob,
+      result(res) {
+        const viewer = res.data.snippets.edges[0].node.blob.richViewer
+          ? RICH_BLOB_VIEWER
+          : SIMPLE_BLOB_VIEWER;
+        this.switchViewer(viewer, true);
+      },
+    },
+    blobContent: {
+      query: GetBlobContent,
+      variables() {
+        return {
+          ids: this.snippet.id,
+          rich: this.activeViewerType === RICH_BLOB_VIEWER,
+        };
+      },
+      update: data =>
+        data.snippets.edges[0].node.blob.richData || data.snippets.edges[0].node.blob.plainData,
     },
   },
   props: {
@@ -31,6 +54,8 @@ export default {
   data() {
     return {
       blob: {},
+      blobContent: '',
+      activeViewerType: window.location.hash ? SIMPLE_BLOB_VIEWER : '',
     };
   },
   computed: {
@@ -40,6 +65,18 @@ export default {
     isBlobLoading() {
       return this.$apollo.queries.blob.loading;
     },
+    isContentLoading() {
+      return this.$apollo.queries.blobContent.loading;
+    },
+    viewer() {
+      const { richViewer, simpleViewer } = this.blob;
+      return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
+    },
+  },
+  methods: {
+    switchViewer(newViewer, respectHash = false) {
+      this.activeViewerType = respectHash && window.location.hash ? SIMPLE_BLOB_VIEWER : newViewer;
+    },
   },
 };
 </script>
@@ -49,11 +86,12 @@ export default {
     <gl-loading-icon
       v-if="isBlobLoading"
       :label="__('Loading blob')"
-      :size="2"
+      size="lg"
       class="prepend-top-20 append-bottom-20"
     />
     <article v-else class="file-holder snippet-file-content">
-      <blob-header :blob="blob" />
+      <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer" />
+      <blob-content :loading="isContentLoading" :content="blobContent" :active-viewer="viewer" />
     </article>
   </div>
 </template>

app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql

+query SnippetBlobContent($ids: [ID!], $rich: Boolean!) {
+  snippets(ids: $ids) {
+    edges {
+      node {
+        id
+        blob {
+          richData @include(if: $rich)
+          plainData @skip(if: $rich)
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/vue_shared/components/blob_viewers/constants.js

+export const HIGHLIGHT_CLASS_NAME = 'hll';
+
+export default {};

app/assets/javascripts/vue_shared/components/blob_viewers/index.js

+import RichViewer from './rich_viewer.vue';
+import SimpleViewer from './simple_viewer.vue';
+
+export { RichViewer, SimpleViewer };

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+};

app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue

+<script>
+import ViewerMixin from './mixins';
+
+export default {
+  mixins: [ViewerMixin],
+};
+</script>
+<template>
+  <div v-html="content"></div>
+</template>

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

+<script>
+import ViewerMixin from './mixins';
+import { GlIcon } from '@gitlab/ui';
+import { HIGHLIGHT_CLASS_NAME } from './constants';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  mixins: [ViewerMixin],
+  data() {
+    return {
+      highlightedLine: null,
+    };
+  },
+  computed: {
+    lineNumbers() {
+      return this.content.split('\n').length;
+    },
+  },
+  mounted() {
+    const { hash } = window.location;
+    if (hash) this.scrollToLine(hash, true);
+  },
+  methods: {
+    scrollToLine(hash, scroll = false) {
+      const lineToHighlight = hash && this.$el.querySelector(hash);
+      const currentlyHighlighted = this.highlightedLine;
+      if (lineToHighlight) {
+        if (currentlyHighlighted) {
+          currentlyHighlighted.classList.remove(HIGHLIGHT_CLASS_NAME);
+        }
+
+        lineToHighlight.classList.add(HIGHLIGHT_CLASS_NAME);
+        this.highlightedLine = lineToHighlight;
+        if (scroll) {
+          lineToHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+    },
+  },
+  userColorScheme: window.gon.user_color_scheme,
+};
+</script>
+<template>
+  <div
+    class="file-content code js-syntax-highlight qa-file-content"
+    :class="$options.userColorScheme"
+  >
+    <div class="line-numbers">
+      <a
+        v-for="line in lineNumbers"
+        :id="`L${line}`"
+        :key="line"
+        class="diff-line-num js-line-number"
+        :href="`#LC${line}`"
+        :data-line-number="line"
+        @click="scrollToLine(`#LC${line}`)"
+      >
+        <gl-icon :size="12" name="link" />
+        {{ line }}
+      </a>
+    </div>
+    <div class="blob-content">
+      <pre class="code highlight"><code id="blob-code-content" v-html="content"></code></pre>
+    </div>
+  </div>
+</template>

app/assets/stylesheets/framework/highlight.scss

@@ -51,7 +51,8 @@
       min-height: 1.5em;
       white-space: nowrap;
 
-      i {
+      i,
+      svg {
         float: left;
         margin-top: 3px;
         margin-right: 5px;
@@ -62,7 +63,8 @@
       &:focus {
         outline: none;
 
-        i {
+        i,
+        svg {
           visibility: visible;
         }
       }

app/views/projects/snippets/show.html.haml

@@ -12,7 +12,7 @@
     %article.file-holder.snippet-file-content
       = render 'shared/snippets/blob'
 
-    .row-content-block.top-block.content-component-block
-      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+.row-content-block.top-block.content-component-block
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
+#notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true

app/views/snippets/show.html.haml

@@ -13,7 +13,7 @@
     %article.file-holder.snippet-file-content
       = render 'shared/snippets/blob'
 
-    .row-content-block.top-block.content-component-block
-      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+.row-content-block.top-block.content-component-block
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false
+#notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false

changelogs/unreleased/196797-blob-content.yml

+---
+title: Refactored snippets view to Vue
+merge_request: 25188
+author:
+type: other

spec/frontend/blob/components/blob_content_error_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BlobContentError from '~/blob/components/blob_content_error.vue';
+
+describe('Blob Content Error component', () => {
+  let wrapper;
+  const viewerError = '<h1 id="error">Foo Error</h1>';
+
+  function createComponent() {
+    wrapper = shallowMount(BlobContentError, {
+      propsData: {
+        viewerError,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the passed error without transformations', () => {
+    expect(wrapper.html()).toContain(viewerError);
+  });
+});

spec/frontend/blob/components/blob_content_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BlobContent from '~/blob/components/blob_content.vue';
+import BlobContentError from '~/blob/components/blob_content_error.vue';
+import {
+  RichViewerMock,
+  SimpleViewerMock,
+  RichBlobContentMock,
+  SimpleBlobContentMock,
+} from './mock_data';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
+
+describe('Blob Content component', () => {
+  let wrapper;
+
+  function createComponent(propsData = {}, activeViewer = SimpleViewerMock) {
+    wrapper = shallowMount(BlobContent, {
+      propsData: {
+        loading: false,
+        activeViewer,
+        ...propsData,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('renders loader if `loading: true`', () => {
+      createComponent({ loading: true });
+      expect(wrapper.contains(GlLoadingIcon)).toBe(true);
+      expect(wrapper.contains(BlobContentError)).toBe(false);
+      expect(wrapper.contains(RichViewer)).toBe(false);
+      expect(wrapper.contains(SimpleViewer)).toBe(false);
+    });
+
+    it('renders error if there is any in the viewer', () => {
+      const renderError = 'Oops';
+      const viewer = Object.assign({}, SimpleViewerMock, { renderError });
+      createComponent({}, viewer);
+      expect(wrapper.contains(GlLoadingIcon)).toBe(false);
+      expect(wrapper.contains(BlobContentError)).toBe(true);
+      expect(wrapper.contains(RichViewer)).toBe(false);
+      expect(wrapper.contains(SimpleViewer)).toBe(false);
+    });
+
+    it.each`
+      type        | mock                | viewer
+      ${'simple'} | ${SimpleViewerMock} | ${SimpleViewer}
+      ${'rich'}   | ${RichViewerMock}   | ${RichViewer}
+    `(
+      'renders $type viewer when activeViewer is $type and no loading or error detected',
+      ({ mock, viewer }) => {
+        createComponent({}, mock);
+        expect(wrapper.contains(viewer)).toBe(true);
+      },
+    );
+
+    it.each`
+      content                            | mock                | viewer
+      ${SimpleBlobContentMock.plainData} | ${SimpleViewerMock} | ${SimpleViewer}
+      ${RichBlobContentMock.richData}    | ${RichViewerMock}   | ${RichViewer}
+    `('renders correct content that is passed to the component', ({ content, mock, viewer }) => {
+      createComponent({ content }, mock);
+      expect(wrapper.find(viewer).html()).toContain(content);
+    });
+  });
+});

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -67,13 +67,4 @@ describe('Blob Header Default Actions', () => {
       expect(buttons.at(0).attributes('disabled')).toBeTruthy();
     });
   });
-
-  describe('functionally', () => {
-    it('emits an event when a Copy Contents button is clicked', () => {
-      jest.spyOn(wrapper.vm, '$emit');
-      buttons.at(0).vm.$emit('click');
-
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('copy');
-    });
-  });
 });

spec/frontend/blob/components/mock_data.js

+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
+
+export const SimpleViewerMock = {
+  collapsed: false,
+  loadingPartialName: 'loading',
+  renderError: null,
+  tooLarge: false,
+  type: SIMPLE_BLOB_VIEWER,
+  fileType: 'text',
+};
+
+export const RichViewerMock = {
+  collapsed: false,
+  loadingPartialName: 'loading',
+  renderError: null,
+  tooLarge: false,
+  type: RICH_BLOB_VIEWER,
+  fileType: 'markdown',
+};
+
 export const Blob = {
   binary: false,
-  highlightedData:
-    '<h1 data-sourcepos="1:1-1:19" dir="auto">\n<a id="user-content-this-one-is-dummy" class="anchor" href="#this-one-is-dummy" aria-hidden="true"></a>This one is dummy</h1>\n<h2 data-sourcepos="3:1-3:21" dir="auto">\n<a id="user-content-and-has-sub-header" class="anchor" href="#and-has-sub-header" aria-hidden="true"></a>And has sub-header</h2>\n<p data-sourcepos="5:1-5:27" dir="auto">Even some  stupid text here</p>',
   name: 'dummy.md',
   path: 'dummy.md',
   rawPath: '/flightjs/flight/snippets/51/raw',
   size: 75,
   simpleViewer: {
-    collapsed: false,
-    fileType: 'text',
-    loadAsync: true,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'simple',
+    ...SimpleViewerMock,
   },
   richViewer: {
-    collapsed: false,
-    fileType: 'markup',
-    loadAsync: true,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'rich',
+    ...RichViewerMock,
   },
 };
 
+export const RichBlobContentMock = {
+  richData: '<h1>Rich</h1>',
+};
+
+export const SimpleBlobContentMock = {
+  plainData: 'Plain',
+};
+
 export default {};

spec/frontend/snippets/components/snippet_blob_view_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
 import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import BlobContent from '~/blob/components/blob_content.vue';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
 import {
   SNIPPET_VISIBILITY_PRIVATE,
   SNIPPET_VISIBILITY_INTERNAL,
   SNIPPET_VISIBILITY_PUBLIC,
 } from '~/snippets/constants';
 
+import { Blob as BlobMock, SimpleViewerMock, RichViewerMock } from 'jest/blob/components/mock_data';
+
 describe('Blob Embeddable', () => {
   let wrapper;
   const snippet = {
@@ -16,27 +20,42 @@ describe('Blob Embeddable', () => {
     webUrl: 'https://foo.bar',
     visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
   };
+  const dataMock = {
+    blob: BlobMock,
+    activeViewerType: SimpleViewerMock.type,
+  };
 
-  function createComponent(props = {}, loading = false) {
+  function createComponent(
+    props = {},
+    data = dataMock,
+    blobLoading = false,
+    contentLoading = false,
+  ) {
     const $apollo = {
       queries: {
         blob: {
-          loading,
+          loading: blobLoading,
+        },
+        blobContent: {
+          loading: contentLoading,
         },
       },
     };
 
-    wrapper = shallowMount(SnippetBlobView, {
+    wrapper = mount(SnippetBlobView, {
       propsData: {
         snippet: {
           ...snippet,
           ...props,
         },
       },
+      data() {
+        return {
+          ...data,
+        };
+      },
       mocks: { $apollo },
     });
-
-    wrapper.vm.$apollo.queries.blob.loading = false;
   }
 
   afterEach(() => {
@@ -48,6 +67,7 @@ describe('Blob Embeddable', () => {
       createComponent();
       expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
       expect(wrapper.find(BlobHeader).exists()).toBe(true);
+      expect(wrapper.find(BlobContent).exists()).toBe(true);
     });
 
     it.each([SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PRIVATE, 'foo'])(
@@ -68,9 +88,92 @@ describe('Blob Embeddable', () => {
     });
 
     it('shows loading icon while blob data is in flight', () => {
-      createComponent({}, true);
+      createComponent({}, dataMock, true);
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.find('.snippet-file-content').exists()).toBe(false);
     });
+
+    it('sets simple viewer correctly', () => {
+      createComponent();
+      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+    });
+
+    it('sets rich viewer correctly', () => {
+      const data = Object.assign({}, dataMock, {
+        activeViewerType: RichViewerMock.type,
+      });
+      createComponent({}, data);
+      expect(wrapper.find(RichViewer).exists()).toBe(true);
+    });
+
+    it('correctly switches viewer type', () => {
+      createComponent();
+      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+
+      wrapper.vm.switchViewer(RichViewerMock.type);
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.find(RichViewer).exists()).toBe(true);
+          wrapper.vm.switchViewer(SimpleViewerMock.type);
+        })
+        .then(() => {
+          expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+        });
+    });
+
+    describe('URLS with hash', () => {
+      beforeEach(() => {
+        window.location.hash = '#LC2';
+      });
+
+      afterEach(() => {
+        window.location.hash = '';
+      });
+
+      it('renders simple viewer by default if URL contains hash', () => {
+        createComponent();
+
+        expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+        expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+      });
+
+      describe('switchViewer()', () => {
+        it('by default switches to the passed viewer', () => {
+          createComponent();
+
+          wrapper.vm.switchViewer(RichViewerMock.type);
+          return wrapper.vm
+            .$nextTick()
+            .then(() => {
+              expect(wrapper.vm.activeViewerType).toBe(RichViewerMock.type);
+              expect(wrapper.find(RichViewer).exists()).toBe(true);
+
+              wrapper.vm.switchViewer(SimpleViewerMock.type);
+            })
+            .then(() => {
+              expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+              expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+            });
+        });
+
+        it('respects hash over richViewer in the blob when corresponding parameter is passed', () => {
+          createComponent(
+            {},
+            {
+              blob: BlobMock,
+            },
+          );
+          expect(wrapper.vm.blob.richViewer).toEqual(expect.any(Object));
+
+          wrapper.vm.switchViewer(RichViewerMock.type, true);
+          return wrapper.vm.$nextTick().then(() => {
+            expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+            expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+          });
+        });
+      });
+    });
   });
 });

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
+<div
+  class="file-content code js-syntax-highlight qa-file-content"
+>
+  <div
+    class="line-numbers"
+  >
+    <a
+      class="diff-line-num js-line-number"
+      data-line-number="1"
+      href="#LC1"
+      id="L1"
+    >
+      <gl-icon-stub
+        name="link"
+        size="12"
+      />
+      
+      1
+    
+    </a>
+    <a
+      class="diff-line-num js-line-number"
+      data-line-number="2"
+      href="#LC2"
+      id="L2"
+    >
+      <gl-icon-stub
+        name="link"
+        size="12"
+      />
+      
+      2
+    
+    </a>
+    <a
+      class="diff-line-num js-line-number"
+      data-line-number="3"
+      href="#LC3"
+      id="L3"
+    >
+      <gl-icon-stub
+        name="link"
+        size="12"
+      />
+      
+      3
+    
+    </a>
+  </div>
+   
+  <div
+    class="blob-content"
+  >
+    <pre
+      class="code highlight"
+    >
+      <code
+        id="blob-code-content"
+      >
+        <span
+          id="LC1"
+        >
+          First
+        </span>
+        
+
+        <span
+          id="LC2"
+        >
+          Second
+        </span>
+        
+
+        <span
+          id="LC3"
+        >
+          Third
+        </span>
+      </code>
+    </pre>
+  </div>
+</div>
+`;

spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
+
+describe('Blob Rich Viewer component', () => {
+  let wrapper;
+  const content = '<h1 id="markdown">Foo Bar</h1>';
+
+  function createComponent() {
+    wrapper = shallowMount(RichViewer, {
+      propsData: {
+        content,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the passed content without transformations', () => {
+    expect(wrapper.html()).toContain(content);
+  });
+});

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
+import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
+
+describe('Blob Simple Viewer component', () => {
+  let wrapper;
+  const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
+
+  function createComponent(content = contentMock) {
+    wrapper = shallowMount(SimpleViewer, {
+      propsData: {
+        content,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('does not fail if content is empty', () => {
+    const spy = jest.spyOn(window.console, 'error');
+    createComponent('');
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders exactly three lines', () => {
+      expect(wrapper.findAll('.js-line-number')).toHaveLength(3);
+    });
+
+    it('renders the content without transformations', () => {
+      expect(wrapper.html()).toContain(contentMock);
+    });
+  });
+
+  describe('functionality', () => {
+    const scrollIntoViewMock = jest.fn();
+    HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
+    beforeEach(() => {
+      window.location.hash = '#LC2';
+      createComponent();
+    });
+
+    afterEach(() => {
+      window.location.hash = '';
+    });
+
+    it('scrolls to requested line when rendered', () => {
+      const linetoBeHighlighted = wrapper.find('#LC2');
+      expect(scrollIntoViewMock).toHaveBeenCalled();
+      expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element);
+      expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
+    });
+
+    it('switches highlighting when another line is selected', () => {
+      const currentlyHighlighted = wrapper.find('#LC2');
+      const hash = '#LC3';
+      const linetoBeHighlighted = wrapper.find(hash);
+
+      expect(wrapper.vm.highlightedLine).toBe(currentlyHighlighted.element);
+
+      wrapper.vm.scrollToLine(hash);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element);
+        expect(currentlyHighlighted.classes()).not.toContain(HIGHLIGHT_CLASS_NAME);
+        expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
+      });
+    });
+  });
+});