Resolve "Commit details are not displayed when reviewing an MR commit by commit"

4 files changed, 171 insertions, 1 deletions

diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index 7be44a26ded..cf7d8df5405 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -3,6 +3,7 @@ import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper
 import { TEST_HOST } from 'spec/test_constants';
 import App from '~/diffs/components/app.vue';
 import createDiffsStore from '../create_diffs_store';
+import getDiffWithCommit from '../mock_data/diff_with_commit';
 
 describe('diffs/components/app', () => {
   const oldMrTabs = window.mrTabs;
@@ -36,12 +37,17 @@ describe('diffs/components/app', () => {
     vm.$destroy();
   });
 
+  it('does not show commit info', () => {
+    expect(vm.$el).not.toContainElement('.blob-commit-info');
+  });
+
   it('shows comments message, with commit', done => {
-    vm.$store.state.diffs.commit = {};
+    vm.$store.state.diffs.commit = getDiffWithCommit().commit;
 
     vm.$nextTick()
       .then(() => {
         expect(vm.$el).toContainText('Only comments from the following commit are shown below');
+        expect(vm.$el).toContainElement('.blob-commit-info');
       })
       .then(done)
       .catch(done.fail);
diff --git a/spec/javascripts/diffs/components/commit_item_spec.js b/spec/javascripts/diffs/components/commit_item_spec.js
new file mode 100644
index 00000000000..627fb8c490a
--- /dev/null
+++ b/spec/javascripts/diffs/components/commit_item_spec.js
@@ -0,0 +1,128 @@
+import Vue from 'vue';
+import { TEST_HOST } from 'spec/test_constants';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { trimText } from 'spec/helpers/vue_component_helper';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import CommitItem from '~/diffs/components/commit_item.vue';
+import getDiffWithCommit from '../mock_data/diff_with_commit';
+
+const TEST_AUTHOR_NAME = 'test';
+const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
+const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=36`;
+
+const getTitleElement = vm => vm.$el.querySelector('.commit-row-message.item-title');
+const getDescElement = vm => vm.$el.querySelector('pre.commit-row-description');
+const getDescExpandElement = vm => vm.$el.querySelector('.commit-content .text-expander.js-toggle-button');
+const getShaElement = vm => vm.$el.querySelector('.commit-sha-group');
+const getAvatarElement = vm => vm.$el.querySelector('.user-avatar-link');
+const getCommitterElement = vm => vm.$el.querySelector('.commiter');
+
+describe('diffs/components/commit_widget', () => {
+  const Component = Vue.extend(CommitItem);
+  const timeago = getTimeago();
+  const { commit } = getDiffWithCommit();
+
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      commit: getDiffWithCommit().commit,
+    });
+  });
+
+  it('renders commit title', () => {
+    const titleElement = getTitleElement(vm);
+
+    expect(titleElement).toHaveAttr('href', commit.commitUrl);
+    expect(titleElement).toHaveText(commit.titleHtml);
+  });
+
+  it('renders commit description', () => {
+    const descElement = getDescElement(vm);
+    const descExpandElement = getDescExpandElement(vm);
+
+    const expected = commit.descriptionHtml.replace(/
/g, '');
+
+    expect(trimText(descElement.innerHTML)).toEqual(trimText(expected));
+    expect(descExpandElement).not.toBeNull();
+  });
+
+  it('renders commit sha', () => {
+    const shaElement = getShaElement(vm);
+    const labelElement = shaElement.querySelector('.label');
+    const buttonElement = shaElement.querySelector('button');
+
+    expect(labelElement.textContent).toEqual(commit.shortId);
+    expect(buttonElement).toHaveData('clipboard-text', commit.id);
+  });
+
+  it('renders author avatar', () => {
+    const avatarElement = getAvatarElement(vm);
+    const imgElement = avatarElement.querySelector('img');
+
+    expect(avatarElement).toHaveAttr('href', commit.author.webUrl);
+    expect(imgElement).toHaveClass('s36');
+    expect(imgElement).toHaveAttr('alt', commit.author.name);
+    expect(imgElement).toHaveAttr('src', commit.author.avatarUrl);
+  });
+
+  it('renders committer text', () => {
+    const committerElement = getCommitterElement(vm);
+    const nameElement = committerElement.querySelector('a');
+
+    const expectTimeText = timeago.format(commit.authoredDate);
+    const expectedText = `${commit.author.name} authored ${expectTimeText}`;
+
+    expect(trimText(committerElement.textContent)).toEqual(expectedText);
+    expect(nameElement).toHaveAttr('href', commit.author.webUrl);
+    expect(nameElement).toHaveText(commit.author.name);
+  });
+
+  describe('without commit description', () => {
+    beforeEach(done => {
+      vm.commit.descriptionHtml = '';
+
+      vm.$nextTick()
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('hides description', () => {
+      const descElement = getDescElement(vm);
+      const descExpandElement = getDescExpandElement(vm);
+
+      expect(descElement).toBeNull();
+      expect(descExpandElement).toBeNull();
+    });
+  });
+
+  describe('with no matching user', () => {
+    beforeEach(done => {
+      vm.commit.author = null;
+      vm.commit.authorEmail = TEST_AUTHOR_EMAIL;
+      vm.commit.authorName = TEST_AUTHOR_NAME;
+      vm.commit.authorGravatarUrl = TEST_AUTHOR_GRAVATAR;
+
+      vm.$nextTick()
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('renders author avatar', () => {
+      const avatarElement = getAvatarElement(vm);
+      const imgElement = avatarElement.querySelector('img');
+
+      expect(avatarElement).toHaveAttr('href', `mailto:${TEST_AUTHOR_EMAIL}`);
+      expect(imgElement).toHaveAttr('alt', TEST_AUTHOR_NAME);
+      expect(imgElement).toHaveAttr('src', TEST_AUTHOR_GRAVATAR);
+    });
+
+    it('renders committer text', () => {
+      const committerElement = getCommitterElement(vm);
+      const nameElement = committerElement.querySelector('a');
+
+      expect(nameElement).toHaveAttr('href', `mailto:${TEST_AUTHOR_EMAIL}`);
+      expect(nameElement).toHaveText(TEST_AUTHOR_NAME);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/commit_widget_spec.js b/spec/javascripts/diffs/components/commit_widget_spec.js
new file mode 100644
index 00000000000..951eb57255d
--- /dev/null
+++ b/spec/javascripts/diffs/components/commit_widget_spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import CommitWidget from '~/diffs/components/commit_widget.vue';
+import getDiffWithCommit from '../mock_data/diff_with_commit';
+
+describe('diffs/components/commit_widget', () => {
+  const Component = Vue.extend(CommitWidget);
+  const { commit } = getDiffWithCommit();
+
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      commit: getDiffWithCommit().commit,
+    });
+  });
+
+  it('renders commit item', () => {
+    const commitElement = vm.$el.querySelector('li.commit');
+
+    expect(commitElement).not.toBeNull();
+    expect(commitElement).toContainText(commit.shortId);
+  });
+});
diff --git a/spec/javascripts/diffs/mock_data/diff_with_commit.js b/spec/javascripts/diffs/mock_data/diff_with_commit.js
new file mode 100644
index 00000000000..98393a20583
--- /dev/null
+++ b/spec/javascripts/diffs/mock_data/diff_with_commit.js
@@ -0,0 +1,12 @@
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+const FIXTURE = 'merge_request_diffs/with_commit.json';
+
+preloadFixtures(FIXTURE);
+
+export default function getDiffWithCommit() {
+  return convertObjectPropsToCamelCase(
+    getJSONFixture(FIXTURE),
+    { deep: true },
+  );
+}