Fix diff changes empty state

The empty state now only gets shown when no files exist in the branch.
If the user is reviewing 2 versions with no files, we don't show the state.

Refactors the diff app spec to use Vue test utils.

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

2 files changed, 107 insertions, 25 deletions

diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index 1e2f7ff4fd8..a2cbc0f3c72 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -1,33 +1,44 @@
-import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 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 createDiffsStore from '../create_diffs_store';
 
 describe('diffs/components/app', () => {
   const oldMrTabs = window.mrTabs;
-  const Component = Vue.extend(App);
-
+  let store;
   let vm;
 
-  beforeEach(() => {
-    // setup globals (needed for component to mount :/)
-    window.mrTabs = jasmine.createSpyObj('mrTabs', ['resetViewContainer']);
-    window.mrTabs.expandViewContainer = jasmine.createSpy();
-    window.location.hash = 'ABC_123';
+  function createComponent(props = {}, extendStore = () => {}) {
+    const localVue = createLocalVue();
 
-    // setup component
-    const store = createDiffsStore();
+    localVue.use(Vuex);
+
+    store = createDiffsStore();
     store.state.diffs.isLoading = false;
 
-    vm = mountComponentWithStore(Component, {
-      store,
-      props: {
+    extendStore(store);
+
+    vm = shallowMount(localVue.extend(App), {
+      localVue,
+      propsData: {
         endpoint: `${TEST_HOST}/diff/endpoint`,
         projectPath: 'namespace/project',
         currentUser: {},
+        changesEmptyStateIllustration: '',
+        ...props,
       },
+      store,
     });
+  }
+
+  beforeEach(() => {
+    // setup globals (needed for component to mount :/)
+    window.mrTabs = jasmine.createSpyObj('mrTabs', ['resetViewContainer']);
+    window.mrTabs.expandViewContainer = jasmine.createSpy();
+    window.location.hash = 'ABC_123';
   });
 
   afterEach(() => {
@@ -35,21 +46,53 @@ describe('diffs/components/app', () => {
     window.mrTabs = oldMrTabs;
 
     // reset component
-    vm.$destroy();
+    vm.destroy();
   });
 
   it('does not show commit info', () => {
-    expect(vm.$el).not.toContainElement('.blob-commit-info');
+    createComponent();
+
+    expect(vm.contains('.blob-commit-info')).toBe(false);
   });
 
   it('sets highlighted row if hash exists in location object', done => {
-    vm.$props.shouldShow = true;
-
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$store.state.diffs.highlightedRow).toBe('ABC_123');
-      })
-      .then(done)
-      .catch(done.fail);
+    createComponent({
+      shouldShow: true,
+    });
+
+    // Component uses $nextTick so we wait until that has finished
+    setTimeout(() => {
+      expect(store.state.diffs.highlightedRow).toBe('ABC_123');
+
+      done();
+    });
+  });
+
+  describe('empty state', () => {
+    it('renders empty state when no diff files exist', () => {
+      createComponent();
+
+      expect(vm.contains(NoChanges)).toBe(true);
+    });
+
+    it('does not render empty state when diff files exist', () => {
+      createComponent({}, () => {
+        store.state.diffs.diffFiles.push({
+          id: 1,
+        });
+      });
+
+      expect(vm.contains(NoChanges)).toBe(false);
+      expect(vm.findAll(DiffFile).length).toBe(1);
+    });
+
+    it('does not render empty state when versions match', () => {
+      createComponent({}, () => {
+        store.state.diffs.startVersion = { version_index: 1 };
+        store.state.diffs.mergeRequestDiff = { version_index: 1 };
+      });
+
+      expect(vm.contains(NoChanges)).toBe(false);
+    });
   });
 });
diff --git a/spec/javascripts/diffs/components/no_changes_spec.js b/spec/javascripts/diffs/components/no_changes_spec.js
index 7237274eb43..e45d34bf9d5 100644
--- a/spec/javascripts/diffs/components/no_changes_spec.js
+++ b/spec/javascripts/diffs/components/no_changes_spec.js
@@ -1 +1,40 @@
-// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createStore } from '~/mr_notes/stores';
+import NoChanges from '~/diffs/components/no_changes.vue';
+
+describe('Diff no changes empty state', () => {
+  let vm;
+
+  function createComponent(extendStore = () => {}) {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const store = createStore();
+    extendStore(store);
+
+    vm = shallowMount(localVue.extend(NoChanges), {
+      localVue,
+      store,
+      propsData: {
+        changesEmptyStateIllustration: '',
+      },
+    });
+  }
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  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>',
+      };
+    });
+
+    expect(vm.contains('script')).toBe(false);
+  });
+});