Add headers to files in the tree list on merge requests

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54807

2 files changed, 73 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
new file mode 100644
index 00000000000..26eae2d5e61
--- /dev/null
+++ b/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`File row header component adds multiple ellipsises after 40 characters 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets/javascripts/…/…/diffs/notes
+  </span>
+</div>
+`;
+
+exports[`File row header component renders file path 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets
+  </span>
+</div>
+`;
+
+exports[`File row header component trucates path after 40 characters 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets/javascripts/merge_requests
+  </span>
+</div>
+`;
diff --git a/spec/frontend/vue_shared/components/file_row_header_spec.js b/spec/frontend/vue_shared/components/file_row_header_spec.js
new file mode 100644
index 00000000000..80f4c275dcc
--- /dev/null
+++ b/spec/frontend/vue_shared/components/file_row_header_spec.js
@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import FileRowHeader from '~/vue_shared/components/file_row_header.vue';
+
+describe('File row header component', () => {
+  let vm;
+
+  function createComponent(path) {
+    vm = shallowMount(FileRowHeader, {
+      propsData: {
+        path,
+      },
+    });
+  }
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('renders file path', () => {
+    createComponent('app/assets');
+
+    expect(vm.element).toMatchSnapshot();
+  });
+
+  it('trucates path after 40 characters', () => {
+    createComponent('app/assets/javascripts/merge_requests');
+
+    expect(vm.element).toMatchSnapshot();
+  });
+
+  it('adds multiple ellipsises after 40 characters', () => {
+    createComponent('app/assets/javascripts/merge_requests/widget/diffs/notes');
+
+    expect(vm.element).toMatchSnapshot();
+  });
+});