import Vue from 'vue';
import JobDetail from '~/ide/components/jobs/detail.vue';
import { createStore } from '~/ide/stores';
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
import { jobs } from '../../mock_data';

describe('IDE jobs detail view', () => {
  const Component = Vue.extend(JobDetail);
  let vm;

  beforeEach(() => {
    const store = createStore();

    store.state.pipelines.detailJob = {
      ...jobs[0],
      isLoading: true,
      output: 'testing',
      rawPath: `${gl.TEST_HOST}/raw`,
    };

    vm = createComponentWithStore(Component, store);

    spyOn(vm, 'fetchJobTrace').and.returnValue(Promise.resolve());

    vm = vm.$mount();

    spyOn(vm.$refs.buildTrace, 'scrollTo');
  });

  afterEach(() => {
    vm.$destroy();
  });

  it('calls fetchJobTrace on mount', () => {
    expect(vm.fetchJobTrace).toHaveBeenCalled();
  });

  it('scrolls to bottom on mount', done => {
    setTimeout(() => {
      expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalled();

      done();
    });
  });

  it('renders job output', () => {
    expect(vm.$el.querySelector('.bash').textContent).toContain('testing');
  });

  it('renders empty message output', done => {
    vm.$store.state.pipelines.detailJob.output = '';

    vm.$nextTick(() => {
      expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged');

      done();
    });
  });

  it('renders loading icon', () => {
    expect(vm.$el.querySelector('.build-loader-animation')).not.toBe(null);
    expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('');
  });

  it('hides output when loading', () => {
    expect(vm.$el.querySelector('.bash')).not.toBe(null);
    expect(vm.$el.querySelector('.bash').style.display).toBe('none');
  });

  it('hide loading icon when isLoading is false', done => {
    vm.$store.state.pipelines.detailJob.isLoading = false;

    vm.$nextTick(() => {
      expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none');

      done();
    });
  });

  it('resets detailJob when clicking header button', () => {
    spyOn(vm, 'setDetailJob');

    vm.$el.querySelector('.btn').click();

    expect(vm.setDetailJob).toHaveBeenCalledWith(null);
  });

  it('renders raw path link', () => {
    expect(vm.$el.querySelector('.controllers-buttons').getAttribute('href')).toBe(
      `${gl.TEST_HOST}/raw`,
    );
  });

  describe('scroll buttons', () => {
    it('triggers scrollDown when clicking down button', done => {
      spyOn(vm, 'scrollDown');

      vm.$el.querySelectorAll('.btn-scroll')[1].click();

      vm.$nextTick(() => {
        expect(vm.scrollDown).toHaveBeenCalled();

        done();
      });
    });

    it('triggers scrollUp when clicking up button', done => {
      spyOn(vm, 'scrollUp');

      vm.scrollPos = 1;

      vm
        .$nextTick()
        .then(() => vm.$el.querySelector('.btn-scroll').click())
        .then(() => vm.$nextTick())
        .then(() => {
          expect(vm.scrollUp).toHaveBeenCalled();
        })
        .then(done)
        .catch(done.fail);
    });
  });

  describe('scrollDown', () => {
    it('scrolls build trace to bottom', () => {
      spyOnProperty(vm.$refs.buildTrace, 'scrollHeight').and.returnValue(1000);

      vm.scrollDown();

      expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 1000);
    });
  });

  describe('scrollUp', () => {
    it('scrolls build trace to top', () => {
      vm.scrollUp();

      expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 0);
    });
  });

  describe('scrollBuildLog', () => {
    beforeEach(() => {
      spyOnProperty(vm.$refs.buildTrace, 'offsetHeight').and.returnValue(100);
      spyOnProperty(vm.$refs.buildTrace, 'scrollHeight').and.returnValue(200);
    });

    it('sets scrollPos to bottom when at the bottom', done => {
      spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(100);

      vm.scrollBuildLog();

      setTimeout(() => {
        expect(vm.scrollPos).toBe(1);

        done();
      });
    });

    it('sets scrollPos to top when at the top', done => {
      spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(0);
      vm.scrollPos = 1;

      vm.scrollBuildLog();

      setTimeout(() => {
        expect(vm.scrollPos).toBe(0);

        done();
      });
    });

    it('resets scrollPos when not at top or bottom', done => {
      spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(10);

      vm.scrollBuildLog();

      setTimeout(() => {
        expect(vm.scrollPos).toBe('');

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