Merge branch 'ph/207253/handleHash' into 'master'

Correctly handle hash for README's in Vue file listing

Closes #207253

See merge request gitlab-org/gitlab!25594

app/assets/javascripts/repository/components/preview/index.vue

@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { handleLocationHash } from '~/lib/utils/common_utils';
 import getReadmeQuery from '../../queries/getReadme.query.graphql';
 
 export default {
@@ -36,6 +37,7 @@ export default {
     readme(newVal) {
       if (newVal) {
         this.$nextTick(() => {
+          handleLocationHash();
           $(this.$refs.readme).renderGFM();
         });
       }

spec/frontend/repository/components/preview/index_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { handleLocationHash } from '~/lib/utils/common_utils';
 import Preview from '~/repository/components/preview/index.vue';
 
+jest.mock('~/lib/utils/common_utils');
+
 let vm;
 let $apollo;
 
@@ -38,6 +41,22 @@ describe('Repository file preview component', () => {
     });
   });
 
+  it('handles hash after render', () => {
+    factory({
+      webUrl: 'http://test.com',
+      name: 'README.md',
+    });
+
+    vm.setData({ readme: { html: '<div class="blob">test</div>' } });
+
+    return vm.vm
+      .$nextTick()
+      .then(vm.vm.$nextTick())
+      .then(() => {
+        expect(handleLocationHash).toHaveBeenCalled();
+      });
+  });
+
   it('renders loading icon', () => {
     factory({
       webUrl: 'http://test.com',