Merge branch '48951-clean-up' into 'master'

Resolve "MR refactor: All actions under diff module are being exported twice"

Closes #48951

See merge request gitlab-org/gitlab-ce!20499

1 files changed, 48 insertions, 43 deletions

diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js
index 2d57af6137c..f737e8fa38e 100644
--- a/spec/javascripts/diffs/components/changed_files_spec.js
+++ b/spec/javascripts/diffs/components/changed_files_spec.js
@@ -1,12 +1,17 @@
 import Vue from 'vue';
-import $ from 'jquery';
+import Vuex from 'vuex';
 import { mountComponentWithStore } from 'spec/helpers';
-import store from '~/diffs/store';
-import ChangedFiles from '~/diffs/components/changed_files.vue';
+import diffsModule from '~/diffs/store/modules';
+import changedFiles from '~/diffs/components/changed_files.vue';
 
 describe('ChangedFiles', () => {
-  const Component = Vue.extend(ChangedFiles);
-  const createComponent = props => mountComponentWithStore(Component, { props, store });
+  const Component = Vue.extend(changedFiles);
+  const store = new Vuex.Store({
+    modules: {
+      diffs: diffsModule,
+    },
+  });
+
   let vm;
 
   beforeEach(() => {
@@ -14,6 +19,7 @@ describe('ChangedFiles', () => {
       <div id="dummy-element"></div>
       <div class="js-tabs-affix"></div>
     `);
+
     const props = {
       diffFiles: [
         {
@@ -26,7 +32,8 @@ describe('ChangedFiles', () => {
         },
       ],
     };
-    vm = createComponent(props);
+
+    vm = mountComponentWithStore(Component, { props, store });
   });
 
   describe('with single file added', () => {
@@ -40,58 +47,56 @@ describe('ChangedFiles', () => {
     });
   });
 
-  describe('template', () => {
-    describe('diff view mode buttons', () => {
-      let inlineButton;
-      let parallelButton;
+  describe('diff view mode buttons', () => {
+    let inlineButton;
+    let parallelButton;
 
-      beforeEach(() => {
-        inlineButton = vm.$el.querySelector('.js-inline-diff-button');
-        parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
-      });
+    beforeEach(() => {
+      inlineButton = vm.$el.querySelector('.js-inline-diff-button');
+      parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
+    });
+
+    it('should have Inline and Side-by-side buttons', () => {
+      expect(inlineButton).toBeDefined();
+      expect(parallelButton).toBeDefined();
+    });
+
+    it('should add active class to Inline button', done => {
+      vm.$store.state.diffs.diffViewType = 'inline';
+
+      vm.$nextTick(() => {
+        expect(inlineButton.classList.contains('active')).toEqual(true);
+        expect(parallelButton.classList.contains('active')).toEqual(false);
 
-      it('should have Inline and Side-by-side buttons', () => {
-        expect(inlineButton).toBeDefined();
-        expect(parallelButton).toBeDefined();
+        done();
       });
+    });
 
-      it('should add active class to Inline button', done => {
-        vm.$store.state.diffs.diffViewType = 'inline';
+    it('should toggle active state of buttons when diff view type changed', done => {
+      vm.$store.state.diffs.diffViewType = 'parallel';
 
-        vm.$nextTick(() => {
-          expect(inlineButton.classList.contains('active')).toEqual(true);
-          expect(parallelButton.classList.contains('active')).toEqual(false);
+      vm.$nextTick(() => {
+        expect(inlineButton.classList.contains('active')).toEqual(false);
+        expect(parallelButton.classList.contains('active')).toEqual(true);
 
-          done();
-        });
+        done();
       });
+    });
 
-      it('should toggle active state of buttons when diff view type changed', done => {
-        vm.$store.state.diffs.diffViewType = 'parallel';
+    describe('clicking them', () => {
+      it('should toggle the diff view type', done => {
+        parallelButton.click();
 
         vm.$nextTick(() => {
           expect(inlineButton.classList.contains('active')).toEqual(false);
           expect(parallelButton.classList.contains('active')).toEqual(true);
 
-          done();
-        });
-      });
-
-      describe('clicking them', () => {
-        it('should toggle the diff view type', done => {
-          $(parallelButton).click();
+          inlineButton.click();
 
           vm.$nextTick(() => {
-            expect(inlineButton.classList.contains('active')).toEqual(false);
-            expect(parallelButton.classList.contains('active')).toEqual(true);
-
-            $(inlineButton).click();
-
-            vm.$nextTick(() => {
-              expect(inlineButton.classList.contains('active')).toEqual(true);
-              expect(parallelButton.classList.contains('active')).toEqual(false);
-              done();
-            });
+            expect(inlineButton.classList.contains('active')).toEqual(true);
+            expect(parallelButton.classList.contains('active')).toEqual(false);
+            done();
           });
         });
       });