Add latest changes from gitlab-org/gitlab@master

4 files changed, 148 insertions, 90 deletions

diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 56cc0c8b8cf..d50f5133e04 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -147,31 +147,21 @@ describe('diffs/components/app', () => {
     });
   });
 
-  it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
-    createComponent({}, ({ state }) => {
-      state.diffs.showTreeList = false;
-      state.diffs.isParallelView = false;
-    });
-
-    expect(wrapper.find('.container-limited.limit-container-width').exists()).toBe(true);
-  });
-
-  it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
-    createComponent({}, ({ state }) => {
-      state.diffs.showTreeList = true;
-      state.diffs.isParallelView = false;
-    });
-
-    expect(wrapper.find('.container-limited.limit-container-width').exists()).toBe(false);
-  });
-
-  it('does not add container-limiting classes when isFluidLayout', () => {
-    createComponent({ isFluidLayout: true }, ({ state }) => {
-      state.diffs.isParallelView = false;
-    });
-
-    expect(wrapper.find('.container-limited.limit-container-width').exists()).toBe(false);
-  });
+  it.each`
+    props                      | state                                                              | expected
+    ${{ isFluidLayout: true }} | ${{ isParallelView: false }}                                       | ${false}
+    ${{}}                      | ${{ isParallelView: false }}                                       | ${true}
+    ${{}}                      | ${{ showTreeList: true, diffFiles: [{}], isParallelView: false }}  | ${false}
+    ${{}}                      | ${{ showTreeList: false, diffFiles: [{}], isParallelView: false }} | ${true}
+    ${{}}                      | ${{ showTreeList: false, diffFiles: [], isParallelView: false }}   | ${true}
+  `(
+    'uses container-limiting classes ($expected) with state ($state) and props ($props)',
+    ({ props, state, expected }) => {
+      createComponent(props, ({ state: origState }) => Object.assign(origState.diffs, state));
+
+      expect(wrapper.find('.container-limited.limit-container-width').exists()).toBe(expected);
+    },
+  );
 
   it('displays loading icon on loading', () => {
     createComponent({}, ({ state }) => {
@@ -249,7 +239,9 @@ describe('diffs/components/app', () => {
     });
 
     it('sets width of tree list', () => {
-      createComponent();
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+      });
 
       expect(wrapper.find('.js-diff-tree-list').element.style.width).toEqual('320px');
     });
@@ -283,15 +275,6 @@ describe('diffs/components/app', () => {
       expect(wrapper.find(NoChanges).exists()).toBe(false);
       expect(wrapper.findAll(DiffFile).length).toBe(1);
     });
-
-    it('does not render empty state when versions match', () => {
-      createComponent({}, ({ state }) => {
-        state.diffs.startVersion = mergeRequestDiff;
-        state.diffs.mergeRequestDiff = mergeRequestDiff;
-      });
-
-      expect(wrapper.find(NoChanges).exists()).toBe(false);
-    });
   });
 
   describe('keyboard shortcut navigation', () => {
@@ -517,6 +500,7 @@ describe('diffs/components/app', () => {
   describe('diffs', () => {
     it('should render compare versions component', () => {
       createComponent({}, ({ state }) => {
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
         state.diffs.mergeRequestDiffs = diffsMockData;
         state.diffs.targetBranchName = 'target-branch';
         state.diffs.mergeRequestDiff = mergeRequestDiff;
@@ -525,7 +509,8 @@ describe('diffs/components/app', () => {
       expect(wrapper.find(CompareVersions).exists()).toBe(true);
       expect(wrapper.find(CompareVersions).props()).toEqual(
         expect.objectContaining({
-          mergeRequestDiffs: diffsMockData,
+          isLimitedContainer: false,
+          diffFilesCountText: null,
         }),
       );
     });
@@ -593,9 +578,17 @@ describe('diffs/components/app', () => {
       expect(wrapper.find(DiffFile).exists()).toBe(true);
     });
 
-    it('should render tree list', () => {
+    it("doesn't render tree list when no changes exist", () => {
       createComponent();
 
+      expect(wrapper.find(TreeList).exists()).toBe(false);
+    });
+
+    it('should render tree list', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+      });
+
       expect(wrapper.find(TreeList).exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index cd7697676c4..949cc855200 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -11,32 +11,34 @@ localVue.use(Vuex);
 
 describe('CompareVersions', () => {
   let wrapper;
+  let store;
   const targetBranchName = 'tmp-wine-dev';
 
   const createWrapper = (props) => {
-    const store = createStore();
-    const mergeRequestDiff = diffsMockData[0];
-
-    store.state.diffs.addedLines = 10;
-    store.state.diffs.removedLines = 20;
-    store.state.diffs.diffFiles.push('test');
-    store.state.diffs.targetBranchName = targetBranchName;
-    store.state.diffs.mergeRequestDiff = mergeRequestDiff;
-    store.state.diffs.mergeRequestDiffs = diffsMockData;
-
     wrapper = mount(CompareVersionsComponent, {
       localVue,
       store,
       propsData: {
         mergeRequestDiffs: diffsMockData,
-        diffFilesCountText: null,
+        diffFilesCountText: '1',
         ...props,
       },
     });
   };
+  const findLimitedContainer = () => wrapper.find('.container-limited.limit-container-width');
+  const findCompareSourceDropdown = () => wrapper.find('.mr-version-dropdown');
+  const findCompareTargetDropdown = () => wrapper.find('.mr-version-compare-dropdown');
 
   beforeEach(() => {
-    createWrapper();
+    store = createStore();
+    const mergeRequestDiff = diffsMockData[0];
+
+    store.state.diffs.addedLines = 10;
+    store.state.diffs.removedLines = 20;
+    store.state.diffs.diffFiles.push('test');
+    store.state.diffs.targetBranchName = targetBranchName;
+    store.state.diffs.mergeRequestDiff = mergeRequestDiff;
+    store.state.diffs.mergeRequestDiffs = diffsMockData;
   });
 
   afterEach(() => {
@@ -45,6 +47,10 @@ describe('CompareVersions', () => {
   });
 
   describe('template', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
     it('should render Tree List toggle button with correct attribute values', () => {
       const treeListBtn = wrapper.find('.js-toggle-tree-list');
 
@@ -54,8 +60,8 @@ describe('CompareVersions', () => {
     });
 
     it('should render comparison dropdowns with correct values', () => {
-      const sourceDropdown = wrapper.find('.mr-version-dropdown');
-      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
+      const sourceDropdown = findCompareSourceDropdown();
+      const targetDropdown = findCompareTargetDropdown();
 
       expect(sourceDropdown.exists()).toBe(true);
       expect(targetDropdown.exists()).toBe(true);
@@ -63,16 +69,6 @@ describe('CompareVersions', () => {
       expect(targetDropdown.find('button').html()).toContain(targetBranchName);
     });
 
-    it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
-      createWrapper({ mergeRequestDiffs: [] });
-
-      const sourceDropdown = wrapper.find('.mr-version-dropdown');
-      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
-
-      expect(sourceDropdown.exists()).toBe(false);
-      expect(targetDropdown.exists()).toBe(false);
-    });
-
     it('should render view types buttons with correct values', () => {
       const inlineBtn = wrapper.find('#inline-diff-btn');
       const parallelBtn = wrapper.find('#parallel-diff-btn');
@@ -88,22 +84,34 @@ describe('CompareVersions', () => {
     it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
       createWrapper({ isLimitedContainer: true });
 
-      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
-
-      expect(limitedContainer.exists()).toBe(true);
+      expect(findLimitedContainer().exists()).toBe(true);
     });
 
     it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
       createWrapper({ isLimitedContainer: false });
 
-      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
+      expect(findLimitedContainer().exists()).toBe(false);
+    });
+  });
 
-      expect(limitedContainer.exists()).toBe(false);
+  describe('noChangedFiles', () => {
+    beforeEach(() => {
+      store.state.diffs.diffFiles = [];
+    });
+
+    it('should not render Tree List toggle button when there are no changes', () => {
+      createWrapper();
+
+      const treeListBtn = wrapper.find('.js-toggle-tree-list');
+
+      expect(treeListBtn.exists()).toBe(false);
     });
   });
 
   describe('setInlineDiffViewType', () => {
     it('should persist the view type in the url', () => {
+      createWrapper();
+
       const viewTypeBtn = wrapper.find('#inline-diff-btn');
       viewTypeBtn.trigger('click');
 
@@ -113,6 +121,7 @@ describe('CompareVersions', () => {
 
   describe('setParallelDiffViewType', () => {
     it('should persist the view type in the url', () => {
+      createWrapper();
       const viewTypeBtn = wrapper.find('#parallel-diff-btn');
       viewTypeBtn.trigger('click');
 
@@ -121,11 +130,14 @@ describe('CompareVersions', () => {
   });
 
   describe('commit', () => {
-    beforeEach((done) => {
-      wrapper.vm.$store.state.diffs.commit = getDiffWithCommit().commit;
-      wrapper.mergeRequestDiffs = [];
+    beforeEach(() => {
+      store.state.diffs.commit = getDiffWithCommit().commit;
+      createWrapper();
+    });
 
-      wrapper.vm.$nextTick(done);
+    it('does not render compare dropdowns', () => {
+      expect(findCompareSourceDropdown().exists()).toBe(false);
+      expect(findCompareTargetDropdown().exists()).toBe(false);
     });
 
     it('renders latest version button', () => {
@@ -137,4 +149,16 @@ describe('CompareVersions', () => {
       expect(wrapper.text()).toContain(wrapper.vm.commit.short_id);
     });
   });
+
+  describe('with no versions', () => {
+    beforeEach(() => {
+      store.state.diffs.mergeRequestDiffs = [];
+      createWrapper();
+    });
+
+    it('does not render compare dropdowns', () => {
+      expect(findCompareSourceDropdown().exists()).toBe(false);
+      expect(findCompareTargetDropdown().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index 5d00a04d415..df9af51f9cf 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -1,20 +1,22 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import { createStore } from '~/mr_notes/stores';
 import NoChanges from '~/diffs/components/no_changes.vue';
+import diffsMockData from '../mock_data/merge_request_diffs';
 
-describe('Diff no changes empty state', () => {
-  let vm;
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
-  function createComponent(extendStore = () => {}) {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+const TEST_TARGET_BRANCH = 'foo';
+const TEST_SOURCE_BRANCH = 'dev/update';
 
-    const store = createStore();
-    extendStore(store);
+describe('Diff no changes empty state', () => {
+  let wrapper;
+  let store;
 
-    vm = shallowMount(NoChanges, {
+  function createComponent(mountFn = shallowMount) {
+    wrapper = mountFn(NoChanges, {
       localVue,
       store,
       propsData: {
@@ -23,26 +25,61 @@ describe('Diff no changes empty state', () => {
     });
   }
 
+  beforeEach(() => {
+    store = createStore();
+    store.state.diffs.mergeRequestDiff = {};
+    store.state.notes.noteableData = {
+      target_branch: TEST_TARGET_BRANCH,
+      source_branch: TEST_SOURCE_BRANCH,
+    };
+    store.state.diffs.mergeRequestDiffs = diffsMockData;
+  });
+
   afterEach(() => {
-    vm.destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
+  const findMessage = () => wrapper.find('[data-testid="no-changes-message"]');
+
   it('prevents XSS', () => {
-    createComponent((store) => {
-      // eslint-disable-next-line no-param-reassign
-      store.state.notes.noteableData = {
-        source_branch: '<script>alert("test");</script>',
-        target_branch: '<script>alert("test");</script>',
-      };
-    });
+    store.state.notes.noteableData = {
+      source_branch: '<script>alert("test");</script>',
+      target_branch: '<script>alert("test");</script>',
+    };
 
-    expect(vm.find('script').exists()).toBe(false);
+    createComponent();
+
+    expect(wrapper.find('script').exists()).toBe(false);
   });
 
   describe('Renders', () => {
     it('Show create commit button', () => {
       createComponent();
-      expect(vm.find(GlButton).exists()).toBe(true);
+
+      expect(wrapper.find(GlButton).exists()).toBe(true);
     });
+
+    it.each`
+      expectedText                                                            | sourceIndex                       | targetIndex
+      ${`No changes between ${TEST_SOURCE_BRANCH} and ${TEST_TARGET_BRANCH}`} | ${null}                           | ${null}
+      ${`No changes between ${TEST_SOURCE_BRANCH} and version 1`}             | ${diffsMockData[0].version_index} | ${1}
+      ${`No changes between version 3 and version 2`}                         | ${3}                              | ${2}
+      ${`No changes between version 3 and ${TEST_TARGET_BRANCH}`}             | ${3}                              | ${-1}
+    `(
+      'renders text "$expectedText" (sourceIndex=$sourceIndex and targetIndex=$targetIndex)',
+      ({ expectedText, targetIndex, sourceIndex }) => {
+        if (targetIndex !== null) {
+          store.state.diffs.startVersion = { version_index: targetIndex };
+        }
+        if (sourceIndex !== null) {
+          store.state.diffs.mergeRequestDiff.version_index = sourceIndex;
+        }
+
+        createComponent(mount);
+
+        expect(findMessage().text()).toBe(expectedText);
+      },
+    );
   });
 });
diff --git a/spec/frontend/diffs/store/getters_versions_dropdowns_spec.js b/spec/frontend/diffs/store/getters_versions_dropdowns_spec.js
index 19f3d28e45e..f7954515422 100644
--- a/spec/frontend/diffs/store/getters_versions_dropdowns_spec.js
+++ b/spec/frontend/diffs/store/getters_versions_dropdowns_spec.js
@@ -136,6 +136,7 @@ describe('Compare diff version dropdowns', () => {
       ...firstDiff,
       href: firstDiff.version_path,
       commitsText: `${firstDiff.commits_count} commits,`,
+      isLatestVersion: true,
       versionName: 'latest version',
       selected: true,
     };
@@ -144,6 +145,9 @@ describe('Compare diff version dropdowns', () => {
       selectedSourceIndex: expectedShape.version_index,
     });
     expect(sourceVersions[0]).toEqual(expectedShape);
-    expect(sourceVersions[1].selected).toBe(false);
+    expect(sourceVersions[1]).toMatchObject({
+      selected: false,
+      isLatestVersion: false,
+    });
   });
 });