import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { environmentsList } from '../mock_data';

describe('Environments Folder View', () => {
  let Component;
  let component;
  let mock;

  const mockData = {
    endpoint: 'environments.json',
    folderName: 'review',
    canCreateDeployment: true,
    canReadEnvironment: true,
    cssContainerClass: 'container',
  };

  beforeEach(() => {
    mock = new MockAdapter(axios);

    Component = Vue.extend(environmentsFolderViewComponent);
  });

  afterEach(() => {
    mock.restore();

    component.$destroy();
  });

  describe('successfull request', () => {
    beforeEach(() => {
      mock.onGet(mockData.endpoint).reply(200, {
        environments: environmentsList,
        stopped_count: 1,
        available_count: 0,
      }, {
        'X-nExt-pAge': '2',
        'x-page': '1',
        'X-Per-Page': '2',
        'X-Prev-Page': '',
        'X-TOTAL': '20',
        'X-Total-Pages': '10',
      });

      component = mountComponent(Component, mockData);
    });

    it('should render a table with environments', (done) => {
      setTimeout(() => {
        expect(component.$el.querySelectorAll('table')).not.toBeNull();
        expect(
          component.$el.querySelector('.environment-name').textContent.trim(),
        ).toEqual(environmentsList[0].name);
        done();
      }, 0);
    });

    it('should render available tab with count', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('.js-environments-tab-available').textContent,
        ).toContain('Available');

        expect(
          component.$el.querySelector('.js-environments-tab-available .badge').textContent,
        ).toContain('0');
        done();
      }, 0);
    });

    it('should render stopped tab with count', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('.js-environments-tab-stopped').textContent,
        ).toContain('Stopped');

        expect(
          component.$el.querySelector('.js-environments-tab-stopped .badge').textContent,
        ).toContain('1');
        done();
      }, 0);
    });

    it('should render parent folder name', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('.js-folder-name').textContent.trim(),
        ).toContain('Environments / review');
        done();
      }, 0);
    });

    describe('pagination', () => {
      it('should render pagination', (done) => {
        setTimeout(() => {
          expect(
            component.$el.querySelectorAll('.gl-pagination'),
          ).not.toBeNull();
          done();
        }, 0);
      });

      it('should make an API request when changing page', (done) => {
        spyOn(component, 'updateContent');
        setTimeout(() => {
          component.$el.querySelector('.gl-pagination .js-last-button a').click();

          expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '10' });
          done();
        }, 0);
      });

      it('should make an API request when using tabs', (done) => {
        setTimeout(() => {
          spyOn(component, 'updateContent');
          component.$el.querySelector('.js-environments-tab-stopped').click();

          expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
          done();
        });
      });
    });
  });

  describe('unsuccessfull request', () => {
    beforeEach(() => {
      mock.onGet(mockData.endpoint).reply(500, {
        environments: [],
      });

      component = mountComponent(Component, mockData);
    });

    it('should not render a table', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('table'),
        ).toBe(null);
        done();
      }, 0);
    });

    it('should render available tab with count 0', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('.js-environments-tab-available').textContent,
        ).toContain('Available');

        expect(
          component.$el.querySelector('.js-environments-tab-available .badge').textContent,
        ).toContain('0');
        done();
      }, 0);
    });

    it('should render stopped tab with count 0', (done) => {
      setTimeout(() => {
        expect(
          component.$el.querySelector('.js-environments-tab-stopped').textContent,
        ).toContain('Stopped');

        expect(
          component.$el.querySelector('.js-environments-tab-stopped .badge').textContent,
        ).toContain('0');
        done();
      }, 0);
    });
  });

  describe('methods', () => {
    beforeEach(() => {
      mock.onGet(mockData.endpoint).reply(200, {
        environments: [],
      });

      component = mountComponent(Component, mockData);
      spyOn(window.history, 'pushState').and.stub();
    });

    describe('updateContent', () => {
      it('should set given parameters', (done) => {
        component.updateContent({ scope: 'stopped', page: '4' })
          .then(() => {
            expect(component.page).toEqual('4');
            expect(component.scope).toEqual('stopped');
            expect(component.requestData.scope).toEqual('stopped');
            expect(component.requestData.page).toEqual('4');
            done();
          })
          .catch(done.fail);
      });
    });

    describe('onChangeTab', () => {
      it('should set page to 1', () => {
        spyOn(component, 'updateContent');
        component.onChangeTab('stopped');

        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
      });
    });

    describe('onChangePage', () => {
      it('should update page and keep scope', () => {
        spyOn(component, 'updateContent');

        component.onChangePage(4);

        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
      });
    });
  });
});