Resolve "Add missing karma tests to the the MR Diff components"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -236,11 +236,15 @@ export default {
       <a
         v-if="diffFile.replaced_view_path"
         :href="diffFile.replaced_view_path"
-        class="btn view-file js-view-file"
+        class="btn view-file js-view-replaced-file"
         v-html="viewReplacedFileButtonText"
       >
       </a>
-      <a :href="diffFile.view_path" class="btn view-file js-view-file" v-html="viewFileButtonText">
+      <a
+        :href="diffFile.view_path"
+        class="btn view-file js-view-file-button"
+        v-html="viewFileButtonText"
+      >
       </a>
 
       <a
@@ -250,7 +254,7 @@ export default {
         :title="`View on ${diffFile.formatted_external_url}`"
         target="_blank"
         rel="noopener noreferrer"
-        class="btn btn-file-option"
+        class="btn btn-file-option js-external-url"
       >
         <icon name="external-link" />
       </a>

app/assets/javascripts/diffs/components/edit_button.vue

@@ -17,12 +17,7 @@ export default {
   },
   methods: {
     handleEditClick(evt) {
-      if (!this.canCurrentUserFork || this.canModifyBlob) {
-        // if we can Edit, do default Edit button behavior
-        return;
-      }
-
-      if (this.canCurrentUserFork) {
+      if (this.canCurrentUserFork && !this.canModifyBlob) {
         evt.preventDefault();
         this.$emit('showForkMessage');
       }

spec/javascripts/diffs/components/app_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import App from '~/diffs/components/app.vue';
 import NoChanges from '~/diffs/components/no_changes.vue';
 import DiffFile from '~/diffs/components/diff_file.vue';
 import Mousetrap from 'mousetrap';
+import CompareVersions from '~/diffs/components/compare_versions.vue';
+import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
+import CommitWidget from '~/diffs/components/commit_widget.vue';
+import TreeList from '~/diffs/components/tree_list.vue';
 import createDiffsStore from '../create_diffs_store';
+import diffsMockData from '../mock_data/merge_request_diffs';
+
+const mergeRequestDiff = { version_index: 1 };
 
 describe('diffs/components/app', () => {
   const oldMrTabs = window.mrTabs;
@@ -49,6 +57,21 @@ describe('diffs/components/app', () => {
     wrapper.destroy();
   });
 
+  it('displays loading icon on loading', () => {
+    createComponent({}, ({ state }) => {
+      state.diffs.isLoading = true;
+    });
+
+    expect(wrapper.contains(GlLoadingIcon)).toBe(true);
+  });
+
+  it('displays diffs container when not loading', () => {
+    createComponent();
+
+    expect(wrapper.contains(GlLoadingIcon)).toBe(false);
+    expect(wrapper.contains('#diffs')).toBe(true);
+  });
+
   it('does not show commit info', () => {
     createComponent();
 
@@ -134,8 +157,8 @@ describe('diffs/components/app', () => {
     });
 
     it('does not render empty state when diff files exist', () => {
-      createComponent({}, () => {
-        store.state.diffs.diffFiles.push({
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles.push({
           id: 1,
         });
       });
@@ -145,9 +168,9 @@ describe('diffs/components/app', () => {
     });
 
     it('does not render empty state when versions match', () => {
-      createComponent({}, () => {
-        store.state.diffs.startVersion = { version_index: 1 };
-        store.state.diffs.mergeRequestDiff = { version_index: 1 };
+      createComponent({}, ({ state }) => {
+        state.diffs.startVersion = mergeRequestDiff;
+        state.diffs.mergeRequestDiff = mergeRequestDiff;
       });
 
       expect(wrapper.contains(NoChanges)).toBe(false);
@@ -307,4 +330,71 @@ describe('diffs/components/app', () => {
         .catch(done.fail);
     });
   });
+
+  describe('diffs', () => {
+    it('should render compare versions component', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.mergeRequestDiffs = diffsMockData;
+        state.diffs.targetBranchName = 'target-branch';
+        state.diffs.mergeRequestDiff = mergeRequestDiff;
+      });
+
+      expect(wrapper.contains(CompareVersions)).toBe(true);
+      expect(wrapper.find(CompareVersions).props()).toEqual(
+        jasmine.objectContaining({
+          targetBranch: {
+            branchName: 'target-branch',
+            versionIndex: -1,
+            path: '',
+          },
+          mergeRequestDiffs: diffsMockData,
+          mergeRequestDiff,
+        }),
+      );
+    });
+
+    it('should render hidden files warning if render overflow warning is present', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.renderOverflowWarning = true;
+        state.diffs.realSize = '5';
+        state.diffs.plainDiffPath = 'plain diff path';
+        state.diffs.emailPatchPath = 'email patch path';
+        state.diffs.size = 1;
+      });
+
+      expect(wrapper.contains(HiddenFilesWarning)).toBe(true);
+      expect(wrapper.find(HiddenFilesWarning).props()).toEqual(
+        jasmine.objectContaining({
+          total: '5',
+          plainDiffPath: 'plain diff path',
+          emailPatchPath: 'email patch path',
+          visible: 1,
+        }),
+      );
+    });
+
+    it('should display commit widget if store has a commit', () => {
+      createComponent({}, () => {
+        store.state.diffs.commit = {
+          author: 'John Doe',
+        };
+      });
+
+      expect(wrapper.contains(CommitWidget)).toBe(true);
+    });
+
+    it('should display diff file if there are diff files', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles.push({ sha: '123' });
+      });
+
+      expect(wrapper.contains(DiffFile)).toBe(true);
+    });
+
+    it('should render tree list', () => {
+      createComponent();
+
+      expect(wrapper.find(TreeList).exists()).toBe(true);
+    });
+  });
 });

spec/javascripts/diffs/components/changed_files_dropdown_spec.js

-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034

spec/javascripts/diffs/components/compare_versions_dropdown_spec.js

-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import CompareVersionsDropdown from '~/diffs/components/compare_versions_dropdown.vue';
 import diffsMockData from '../mock_data/merge_request_diffs';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+const localVue = createLocalVue();
+const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
+const startVersion = { version_index: 4 };
+const mergeRequestVersion = {
+  version_path: '123',
+};
+const baseVersionPath = '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37';
 
 describe('CompareVersionsDropdown', () => {
   let wrapper;
-  const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
 
-  const factory = (options = {}) => {
-    const localVue = createLocalVue();
+  const findSelectedVersion = () => wrapper.find('.dropdown-menu-toggle');
+  const findVersionsListElements = () => wrapper.findAll('li');
+  const findLinkElement = index =>
+    findVersionsListElements()
+      .at(index)
+      .find('a');
+  const findLastLink = () => findLinkElement(findVersionsListElements().length - 1);
 
-    wrapper = shallowMount(CompareVersionsDropdown, { localVue, ...options });
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(CompareVersionsDropdown), {
+      localVue,
+      sync: false,
+      propsData: { ...props },
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
+  describe('selected version name', () => {
+    it('shows latest version when latest is selected', () => {
+      createComponent({
+        mergeRequestVersion,
+        startVersion,
+        otherVersions: diffsMockData,
+      });
+
+      expect(findSelectedVersion().text()).toBe('latest version');
+    });
+
+    it('shows target branch name for base branch', () => {
+      createComponent({
+        targetBranch,
+      });
+
+      expect(findSelectedVersion().text()).toBe('tmp-wine-dev');
+    });
+
+    it('shows correct version for non-base and non-latest branches', () => {
+      createComponent({
+        startVersion,
+        targetBranch,
+      });
+
+      expect(findSelectedVersion().text()).toBe(`version ${startVersion.version_index}`);
+    });
+  });
+
+  describe('target versions list', () => {
+    it('should have the same length as otherVersions if merge request version is present', () => {
+      createComponent({
+        mergeRequestVersion,
+        otherVersions: diffsMockData,
+      });
+
+      expect(findVersionsListElements().length).toEqual(diffsMockData.length);
+    });
+
+    it('should have an otherVersions length plus 1 if no merge request version is present', () => {
+      createComponent({
+        targetBranch,
+        otherVersions: diffsMockData,
+      });
+
+      expect(findVersionsListElements().length).toEqual(diffsMockData.length + 1);
+    });
+
+    it('should have base branch link as active on base branch', () => {
+      createComponent({
+        targetBranch,
+        otherVersions: diffsMockData,
+      });
+
+      expect(findLastLink().classes()).toContain('is-active');
+    });
+
+    it('should have correct branch link as active if start version present', () => {
+      createComponent({
+        targetBranch,
+        startVersion,
+        otherVersions: diffsMockData,
+      });
+
+      expect(findLinkElement(0).classes()).toContain('is-active');
+    });
+
     it('should render a correct base version link', () => {
-    factory({
-      propsData: {
-        baseVersionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+      createComponent({
+        baseVersionPath,
         otherVersions: diffsMockData.slice(1),
         targetBranch,
-      },
       });
 
-    const links = wrapper.findAll('a');
-    const lastLink = links.wrappers[links.length - 1];
+      expect(findLastLink().attributes('href')).toEqual(baseVersionPath);
+      expect(findLastLink().text()).toContain('(base)');
+    });
+
+    it('should not render commits count if no showCommitsCount is passed', () => {
+      createComponent({
+        otherVersions: diffsMockData,
+        targetBranch,
+      });
+
+      const commitsCount = diffsMockData[0].commits_count;
+
+      expect(findLinkElement(0).text()).not.toContain(`${commitsCount} commit`);
+    });
+
+    it('should render correct commits count if showCommitsCount is passed', () => {
+      createComponent({
+        otherVersions: diffsMockData,
+        targetBranch,
+        showCommitCount: true,
+      });
+
+      const commitsCount = diffsMockData[0].commits_count;
+
+      expect(findLinkElement(0).text()).toContain(`${commitsCount} commit`);
+    });
+
+    it('should render correct commit sha', () => {
+      createComponent({
+        otherVersions: diffsMockData,
+        targetBranch,
+      });
+
+      const commitShaElement = findLinkElement(0).find('.commit-sha');
 
-    expect(lastLink.attributes('href')).toEqual(wrapper.props('baseVersionPath'));
+      expect(commitShaElement.text()).toBe(diffsMockData[0].short_commit_sha);
+    });
+
+    it('should render correct time-ago ', () => {
+      createComponent({
+        otherVersions: diffsMockData,
+        targetBranch,
+      });
+
+      const timeAgoElement = findLinkElement(0).find(TimeAgo);
+
+      expect(timeAgoElement.exists()).toBe(true);
+      expect(timeAgoElement.props('time')).toBe(diffsMockData[0].created_at);
+    });
   });
 });

spec/javascripts/diffs/components/diff_file_header_spec.js

@@ -491,5 +491,89 @@ describe('diff_file_header', () => {
         });
       });
     });
+
+    describe('file actions', () => {
+      it('should not render if diff file has a submodule', () => {
+        props.diffFile.submodule = 'submodule';
+        vm = mountComponentWithStore(Component, { props, store });
+
+        expect(vm.$el.querySelector('.file-actions')).toEqual(null);
+      });
+
+      it('should not render if add merge request buttons is false', () => {
+        props.addMergeRequestButtons = false;
+        vm = mountComponentWithStore(Component, { props, store });
+
+        expect(vm.$el.querySelector('.file-actions')).toEqual(null);
+      });
+
+      describe('with add merge request buttons enabled', () => {
+        beforeEach(() => {
+          props.addMergeRequestButtons = true;
+          props.diffFile.edit_path = 'edit-path';
+        });
+
+        const viewReplacedFileButton = () => vm.$el.querySelector('.js-view-replaced-file');
+        const viewFileButton = () => vm.$el.querySelector('.js-view-file-button');
+        const externalUrl = () => vm.$el.querySelector('.js-external-url');
+
+        it('should render if add merge request buttons is true and diff file does not have a submodule', () => {
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(vm.$el.querySelector('.file-actions')).not.toEqual(null);
+        });
+
+        it('should not render view replaced file button if no replaced view path is present', () => {
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(viewReplacedFileButton()).toEqual(null);
+        });
+
+        it('should render view replaced file button if replaced view path is present', () => {
+          props.diffFile.replaced_view_path = 'replaced-view-path';
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(viewReplacedFileButton()).not.toEqual(null);
+          expect(viewReplacedFileButton().getAttribute('href')).toBe('replaced-view-path');
+        });
+
+        it('should render correct file view button path', () => {
+          props.diffFile.view_path = 'view-path';
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(viewFileButton().getAttribute('href')).toBe('view-path');
+        });
+
+        it('should not render external url view link if diff file has no external url', () => {
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(externalUrl()).toEqual(null);
+        });
+
+        it('should render external url view link if diff file has external url', () => {
+          props.diffFile.external_url = 'external_url';
+          vm = mountComponentWithStore(Component, { props, store });
+
+          expect(externalUrl()).not.toEqual(null);
+          expect(externalUrl().getAttribute('href')).toBe('external_url');
+        });
+      });
+
+      describe('without file blob', () => {
+        beforeEach(() => {
+          props.diffFile.blob = null;
+          props.addMergeRequestButtons = true;
+          vm = mountComponentWithStore(Component, { props, store });
+        });
+
+        it('should not render toggle discussions button', () => {
+          expect(vm.$el.querySelector('.js-btn-vue-toggle-comments')).toEqual(null);
+        });
+
+        it('should not render edit button', () => {
+          expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null);
+        });
+      });
+    });
   });
 });

spec/javascripts/diffs/components/edit_button_spec.js

-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import EditButton from '~/diffs/components/edit_button.vue';
+
+const localVue = createLocalVue();
+const editPath = 'test-path';
+
+describe('EditButton', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(EditButton, {
+      localVue,
+      sync: false,
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has correct href attribute', () => {
+    createComponent({
+      editPath,
+      canCurrentUserFork: false,
+    });
+
+    expect(wrapper.attributes('href')).toBe(editPath);
+  });
+
+  it('emits a show fork message event if current user can fork', () => {
+    createComponent({
+      editPath,
+      canCurrentUserFork: true,
+    });
+    wrapper.trigger('click');
+
+    expect(wrapper.emitted('showForkMessage')).toBeTruthy();
+  });
+
+  it('doesnt emit a show fork message event if current user cannot fork', () => {
+    createComponent({
+      editPath,
+      canCurrentUserFork: false,
+    });
+    wrapper.trigger('click');
+
+    expect(wrapper.emitted('showForkMessage')).toBeFalsy();
+  });
+
+  it('doesnt emit a show fork message event if current user can modify blob', () => {
+    createComponent({
+      editPath,
+      canCurrentUserFork: true,
+      canModifyBlob: true,
+    });
+    wrapper.trigger('click');
+
+    expect(wrapper.emitted('showForkMessage')).toBeFalsy();
+  });
+});

spec/javascripts/diffs/components/hidden_files_warning_spec.js

-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
+
+const localVue = createLocalVue();
+const propsData = {
+  total: '10',
+  visible: 5,
+  plainDiffPath: 'plain-diff-path',
+  emailPatchPath: 'email-patch-path',
+};
+
+describe('HiddenFilesWarning', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(HiddenFilesWarning, {
+      localVue,
+      sync: false,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a correct plain diff URL', () => {
+    const plainDiffLink = wrapper.findAll('a').wrappers.filter(x => x.text() === 'Plain diff')[0];
+
+    expect(plainDiffLink.attributes('href')).toBe(propsData.plainDiffPath);
+  });
+
+  it('has a correct email patch URL', () => {
+    const emailPatchLink = wrapper.findAll('a').wrappers.filter(x => x.text() === 'Email patch')[0];
+
+    expect(emailPatchLink.attributes('href')).toBe(propsData.emailPatchPath);
+  });
+
+  it('has a correct visible/total files text', () => {
+    const filesText = wrapper.find('strong');
+
+    expect(filesText.text()).toBe('5 of 10');
+  });
+});