Render tree last commit widget with Vue

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

2 files changed, 201 insertions, 0 deletions

diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
new file mode 100644
index 00000000000..3ad6bfa9e5f
--- /dev/null
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Repository last commit component renders commit widget 1`] = `
+<div
+  class="info-well d-none d-sm-flex project-last-commit commit p-3"
+>
+  <useravatarlink-stub
+    class="avatar-cell"
+    imgalt=""
+    imgcssclasses=""
+    imgsize="40"
+    imgsrc="https://test.com"
+    linkhref="https://test.com/test"
+    tooltipplacement="top"
+    tooltiptext=""
+    username=""
+  />
+   
+  <div
+    class="commit-detail flex-list"
+  >
+    <div
+      class="commit-content qa-commit-content"
+    >
+      <gllink-stub
+        class="commit-row-message item-title"
+        href="https://test.com/commit/123"
+      >
+        
+        Commit title
+      
+      </gllink-stub>
+       
+      <!---->
+       
+      <div
+        class="committer"
+      >
+        <gllink-stub
+          class="commit-author-link js-user-link"
+          href="https://test.com/test"
+        >
+          
+          Test
+        
+        </gllink-stub>
+        
+        authored
+        
+        <timeagotooltip-stub
+          cssclass=""
+          time="2019-01-01"
+          tooltipplacement="bottom"
+        />
+      </div>
+       
+      <!---->
+    </div>
+     
+    <div
+      class="commit-actions flex-row"
+    >
+      <gllink-stub
+        class="js-commit-pipeline"
+        data-original-title="Commit: failed"
+        href="https://test.com/pipeline"
+        title=""
+      >
+        <ciicon-stub
+          aria-label="Commit: failed"
+          cssclasses=""
+          size="24"
+          status="[object Object]"
+        />
+      </gllink-stub>
+       
+      <div
+        class="commit-sha-group d-flex"
+      >
+        <div
+          class="label label-monospace monospace"
+        >
+          
+          12345678
+        
+        </div>
+         
+        <clipboardbutton-stub
+          cssclass="btn-default"
+          text="123456789"
+          title="Copy commit SHA to clipboard"
+          tooltipplacement="bottom"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
new file mode 100644
index 00000000000..972690a60f6
--- /dev/null
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -0,0 +1,103 @@
+import { shallowMount } from '@vue/test-utils';
+import LastCommit from '~/repository/components/last_commit.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+let vm;
+
+function createCommitData(data = {}) {
+  return {
+    id: '123456789',
+    title: 'Commit title',
+    message: 'Commit message',
+    webUrl: 'https://test.com/commit/123',
+    authoredDate: '2019-01-01',
+    author: {
+      name: 'Test',
+      avatarUrl: 'https://test.com',
+      webUrl: 'https://test.com/test',
+    },
+    pipeline: {
+      detailedStatus: {
+        detailsPath: 'https://test.com/pipeline',
+        icon: 'failed',
+        tooltip: 'failed',
+        text: 'failed',
+        group: {},
+      },
+    },
+    ...data,
+  };
+}
+
+function factory(commit = createCommitData(), loading = false) {
+  vm = shallowMount(LastCommit, {
+    mocks: {
+      $apollo: {
+        queries: {
+          commit: {
+            loading: true,
+          },
+        },
+      },
+    },
+  });
+  vm.setData({ commit });
+  vm.vm.$apollo.queries.commit.loading = loading;
+}
+
+describe('Repository last commit component', () => {
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it.each`
+    loading  | label
+    ${true}  | ${'hides'}
+    ${false} | ${'shows'}
+  `('$label when $loading is true', ({ loading }) => {
+    factory(createCommitData(), loading);
+
+    expect(vm.isEmpty()).toBe(loading);
+  });
+
+  it('renders commit widget', () => {
+    factory();
+
+    expect(vm.element).toMatchSnapshot();
+  });
+
+  it('renders short commit ID', () => {
+    factory();
+
+    expect(vm.find('.label-monospace').text()).toEqual('12345678');
+  });
+
+  it('hides pipeline components when pipeline does not exist', () => {
+    factory(createCommitData({ pipeline: null }));
+
+    expect(vm.find('.js-commit-pipeline').exists()).toBe(false);
+  });
+
+  it('hides author component when author does not exist', () => {
+    factory(createCommitData({ author: null }));
+
+    expect(vm.find('.js-user-link').exists()).toBe(false);
+    expect(vm.find(UserAvatarLink).exists()).toBe(false);
+  });
+
+  it('does not render description expander when description is null', () => {
+    factory(createCommitData({ description: null }));
+
+    expect(vm.find('.text-expander').exists()).toBe(false);
+    expect(vm.find('.commit-row-description').exists()).toBe(false);
+  });
+
+  it('expands commit description when clicking expander', () => {
+    factory(createCommitData({ description: 'Test description' }));
+
+    vm.find('.text-expander').vm.$emit('click');
+
+    expect(vm.find('.commit-row-description').isVisible()).toBe(true);
+    expect(vm.find('.text-expander').classes('open')).toBe(true);
+  });
+});