Fixes bug with parent row component triggering multiple Vue router pushes

app/assets/javascripts/repository/components/table/parent_row.vue

@@ -27,8 +27,8 @@ export default {
 </script>
 
 <template>
-  <tr v-once @click="clickRow">
-    <td colspan="3" class="tree-item-file-name">
+  <tr class="tree-item">
+    <td colspan="3" class="tree-item-file-name" @click.self="clickRow">
       <router-link :to="parentRoute" :aria-label="__('Go to parent')">
         ..
       </router-link>

spec/frontend/repository/components/table/parent_row_spec.js

+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import ParentRow from '~/repository/components/table/parent_row.vue';
+
+let vm;
+let $router;
+
+function factory(path) {
+  $router = {
+    push: jest.fn(),
+  };
+
+  vm = shallowMount(ParentRow, {
+    propsData: {
+      commitRef: 'master',
+      path,
+    },
+    stubs: {
+      RouterLink: RouterLinkStub,
+    },
+    mocks: {
+      $router,
+    },
+  });
+}
+
+describe('Repository parent row component', () => {
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it.each`
+    path            | to
+    ${'app'}        | ${'/tree/master/'}
+    ${'app/assets'} | ${'/tree/master/app'}
+  `('renders link in $path to $to', ({ path, to }) => {
+    factory(path);
+
+    expect(vm.find(RouterLinkStub).props().to).toEqual({
+      path: to,
+    });
+  });
+
+  it('pushes new router when clicking row', () => {
+    factory('app/assets');
+
+    vm.find('td').trigger('click');
+
+    expect($router.push).toHaveBeenCalledWith({
+      path: '/tree/master/app',
+    });
+  });
+
+  // We test that it does not get called when clicking any internal
+  // links as this was causing multipe routes to get pushed
+  it('does not trigger router.push when clicking link', () => {
+    factory('app/assets');
+
+    vm.find('a').trigger('click');
+
+    expect($router.push).not.toHaveBeenCalledWith({
+      path: '/tree/master/app',
+    });
+  });
+});