1 files changed, 56 insertions, 19 deletions

diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index 78805a1cddc..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);
+      },
+    );
   });
 });