import Vue from 'vue';
import editActions from '~/issue_show/components/edit_actions.vue';
import eventHub from '~/issue_show/event_hub';
import Store from '~/issue_show/stores';

describe('Edit Actions components', () => {
  let vm;

  beforeEach(done => {
    const Component = Vue.extend(editActions);
    const store = new Store({
      titleHtml: '',
      descriptionHtml: '',
      issuableRef: '',
    });
    store.formState.title = 'test';

    spyOn(eventHub, '$emit');

    vm = new Component({
      propsData: {
        canDestroy: true,
        formState: store.formState,
        issuableType: 'issue',
      },
    }).$mount();

    Vue.nextTick(done);
  });

  it('renders all buttons as enabled', () => {
    expect(vm.$el.querySelectorAll('.disabled').length).toBe(0);

    expect(vm.$el.querySelectorAll('[disabled]').length).toBe(0);
  });

  it('does not render delete button if canUpdate is false', done => {
    vm.canDestroy = false;

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-danger')).toBeNull();

      done();
    });
  });

  it('disables submit button when title is blank', done => {
    vm.formState.title = '';

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-success').getAttribute('disabled')).toBe('disabled');

      done();
    });
  });

  it('should not show delete button if showDeleteButton is false', done => {
    vm.showDeleteButton = false;

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-danger')).toBeNull();
      done();
    });
  });

  describe('updateIssuable', () => {
    it('sends update.issauble event when clicking save button', () => {
      vm.$el.querySelector('.btn-success').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
    });

    it('shows loading icon after clicking save button', done => {
      vm.$el.querySelector('.btn-success').click();

      Vue.nextTick(() => {
        expect(vm.$el.querySelector('.btn-success .fa')).not.toBeNull();

        done();
      });
    });

    it('disabled button after clicking save button', done => {
      vm.$el.querySelector('.btn-success').click();

      Vue.nextTick(() => {
        expect(vm.$el.querySelector('.btn-success').getAttribute('disabled')).toBe('disabled');

        done();
      });
    });
  });

  describe('closeForm', () => {
    it('emits close.form when clicking cancel', () => {
      vm.$el.querySelector('.btn-default').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
    });
  });

  describe('deleteIssuable', () => {
    it('sends delete.issuable event when clicking save button', () => {
      spyOn(window, 'confirm').and.returnValue(true);
      vm.$el.querySelector('.btn-danger').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('delete.issuable');
    });

    it('shows loading icon after clicking delete button', done => {
      spyOn(window, 'confirm').and.returnValue(true);
      vm.$el.querySelector('.btn-danger').click();

      Vue.nextTick(() => {
        expect(vm.$el.querySelector('.btn-danger .fa')).not.toBeNull();

        done();
      });
    });

    it('does no actions when confirm is false', done => {
      spyOn(window, 'confirm').and.returnValue(false);
      vm.$el.querySelector('.btn-danger').click();

      Vue.nextTick(() => {
        expect(eventHub.$emit).not.toHaveBeenCalledWith('delete.issuable');

        expect(vm.$el.querySelector('.btn-danger .fa')).toBeNull();

        done();
      });
    });
  });
});