1 files changed, 60 insertions, 22 deletions
diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js
index dff2fac191d..44018464b35 100644
--- a/spec/javascripts/repo/components/repo_edit_button_spec.js
+++ b/spec/javascripts/repo/components/repo_edit_button_spec.js
@@ -1,45 +1,83 @@
 import Vue from 'vue';
+import store from '~/repo/stores';
 import repoEditButton from '~/repo/components/repo_edit_button.vue';
-import RepoStore from '~/repo/stores/repo_store';
+import { file, resetStore } from '../helpers';
 
 describe('RepoEditButton', () => {
-  function createComponent() {
+  let vm;
+
+  beforeEach(() => {
+    const f = file();
     const RepoEditButton = Vue.extend(repoEditButton);
 
-    return new RepoEditButton().$mount();
-  }
+    vm = new RepoEditButton({
+      store,
+    });
+
+    f.active = true;
+    vm.$store.dispatch('setInitialData', {
+      canCommit: true,
+      onTopOfBranch: true,
+    });
+    vm.$store.state.openFiles.push(f);
+  });
 
   afterEach(() => {
-    RepoStore.openedFiles = [];
+    vm.$destroy();
+
+    resetStore(vm.$store);
   });
 
-  it('renders an edit button that toggles the view state', (done) => {
-    RepoStore.isCommitable = true;
-    RepoStore.changedFiles = [];
-    RepoStore.binary = false;
-    RepoStore.openedFiles = [{}, {}];
+  it('renders an edit button', () => {
+    vm.$mount();
+
+    expect(vm.$el.querySelector('.btn')).not.toBeNull();
+    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
+  });
 
-    const vm = createComponent();
+  it('renders edit button with cancel text', () => {
+    vm.$store.state.editMode = true;
 
-    expect(vm.$el.tagName).toEqual('BUTTON');
-    expect(vm.$el.textContent).toMatch('Edit');
+    vm.$mount();
 
-    spyOn(vm, 'editCancelClicked').and.callThrough();
+    expect(vm.$el.querySelector('.btn')).not.toBeNull();
+    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
+  });
 
-    vm.$el.click();
+  it('toggles edit mode on click', (done) => {
+    vm.$mount();
+
+    vm.$el.querySelector('.btn').click();
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
 
-    Vue.nextTick(() => {
-      expect(vm.editCancelClicked).toHaveBeenCalled();
-      expect(vm.$el.textContent).toMatch('Cancel edit');
       done();
     });
   });
 
-  it('does not render if not isCommitable', () => {
-    RepoStore.isCommitable = false;
+  describe('discardPopupOpen', () => {
+    beforeEach(() => {
+      vm.$store.state.discardPopupOpen = true;
+      vm.$store.state.editMode = true;
+      vm.$store.state.openFiles[0].changed = true;
+
+      vm.$mount();
+    });
+
+    it('renders popup', () => {
+      expect(vm.$el.querySelector('.modal')).not.toBeNull();
+    });
+
+    it('removes all changed files', (done) => {
+      vm.$el.querySelector('.btn-warning').click();
 
-    const vm = createComponent();
+      vm.$nextTick(() => {
+        expect(vm.$store.getters.changedFiles.length).toBe(0);
+        expect(vm.$el.querySelector('.modal')).toBeNull();
 
-    expect(vm.$el.innerHTML).toBeUndefined();
+        done();
+      });
+    });
   });
 });