DRY up constants and rename to viewTypes

3 files changed, 21 insertions, 29 deletions

diff --git a/app/assets/javascripts/image_diff/components/image_replaced.vue b/app/assets/javascripts/image_diff/components/image_replaced.vue
index 5b767999586..30eb8089a4a 100644
--- a/app/assets/javascripts/image_diff/components/image_replaced.vue
+++ b/app/assets/javascripts/image_diff/components/image_replaced.vue
@@ -5,7 +5,7 @@
   import twoUpView from './two_up_view.vue';
   import swipeView from './swipe_view.vue';
   import onionSkinView from './onion_skin_view.vue';
-  import * as constants from '../constants';
+  import viewTypes from '../constants';
 
   Vue.use(Translate);
 
@@ -14,7 +14,8 @@
     mixins: [imageDiffProps],
     data() {
       return {
-        currentView: constants.TWO_UP,
+        currentView: viewTypes.TWO_UP,
+        viewTypes,
       };
     },
     components: {
@@ -24,30 +25,19 @@
     },
     computed: {
       isCurrentViewTwoUp() {
-        return this.currentView === constants.TWO_UP;
+        return this.currentView === viewTypes.TWO_UP;
       },
       isCurrentViewSwipe() {
-        return this.currentView === constants.SWIPE;
+        return this.currentView === viewTypes.SWIPE;
       },
       isCurrentViewOnionSkin() {
-        return this.currentView === constants.ONION_SKIN;
+        return this.currentView === viewTypes.ONION_SKIN;
       },
     },
     methods: {
-      changeView(viewType) {
-        this.currentView = viewType;
-      },
-      goToTwoUpView(event) {
-        event.target.blur();
-        this.changeView(constants.TWO_UP);
-      },
-      goToSwipeView(event) {
+      goToView(viewType, event) {
         event.target.blur();
-        this.changeView(constants.SWIPE);
-      },
-      goToOnionSkinView(event) {
-        event.target.blur();
-        this.changeView(constants.ONION_SKIN);
+        this.currentView = viewType;
       },
     },
   };
@@ -75,7 +65,7 @@
         type="button"
         class="btn btn-link"
         :class="{ active: isCurrentViewTwoUp }"
-        @click="goToTwoUpView"
+        @click="goToView(viewTypes.TWO_UP, $event)"
       >
         {{ __('2-up') }}
       </button>
@@ -83,7 +73,7 @@
         type="button"
         class="btn btn-link"
         :class="{ active: isCurrentViewSwipe }"
-        @click="goToSwipeView"
+        @click="goToView(viewTypes.SWIPE, $event)"
       >
         {{ __('Swipe') }}
       </button>
@@ -91,7 +81,7 @@
         type="button"
         class="btn btn-link"
         :class="{ active: isCurrentViewOnionSkin }"
-        @click="goToOnionSkinView"
+        @click="goToView(viewTypes.ONION_SKIN, $event)"
       >
         {{ __('Onion skin') }}
       </button>
diff --git a/app/assets/javascripts/image_diff/constants.js b/app/assets/javascripts/image_diff/constants.js
index 3a059841fca..fc5e049aeb6 100644
--- a/app/assets/javascripts/image_diff/constants.js
+++ b/app/assets/javascripts/image_diff/constants.js
@@ -1,3 +1,5 @@
-export const TWO_UP = '2-up';
-export const SWIPE = 'swipe';
-export const ONION_SKIN = 'onion-skin';
+export default {
+  TWO_UP: '2-up',
+  SWIPE: 'swipe',
+  ONION_SKIN: 'onion-skin',
+};
diff --git a/spec/javascripts/image_diff/components/image_replaced_spec.js b/spec/javascripts/image_diff/components/image_replaced_spec.js
index cb6775e2c74..03334e9ec64 100644
--- a/spec/javascripts/image_diff/components/image_replaced_spec.js
+++ b/spec/javascripts/image_diff/components/image_replaced_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import imageReplaced from '~/image_diff/components/image_replaced.vue';
-import * as constants from '~/image_diff/constants';
+import viewTypes from '~/image_diff/constants';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 import * as mockData from '../mock_data';
 
@@ -30,20 +30,20 @@ describe('imageReplaced component', () => {
   });
 
   it('should only render swipe-view if currentView is swipe', () => {
-    vm.currentView = constants.SWIPE;
+    vm.currentView = viewTypes.SWIPE;
     expect(vm.$el.querySelector('.swipe.view')).toBeDefined();
   });
 
   it('should only render onion-skin-view if currentView is onion-skin', () => {
-    vm.currentView = constants.ONION_SKIN;
+    vm.currentView = viewTypes.ONION_SKIN;
     expect(vm.$el.querySelector('.onion-skin.view')).toBeDefined();
   });
 
   it('should change currentView when btn-group is toggled', () => {
     vm.$el.querySelector('.btn-group .btn:last-child').click();
-    expect(vm.currentView).toEqual(constants.ONION_SKIN);
+    expect(vm.currentView).toEqual(viewTypes.ONION_SKIN);
 
     vm.$el.querySelector('.btn-group .btn:first-child').click();
-    expect(vm.currentView).toEqual(constants.TWO_UP);
+    expect(vm.currentView).toEqual(viewTypes.TWO_UP);
   });
 });