gitlab-org--gitlab-foss/spec/javascripts/environments/folder/environments_folder_view_spec.js

import _ from 'underscore';
import Vue from 'vue';
import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { environmentsList } from '../mock_data';

describe('Environments Folder View', () => {
  let Component;
  let component;
  const mockData = {
    endpoint: 'environments.json',
    folderName: 'review',
    canCreateDeployment: true,
    canReadEnvironment: true,
    cssContainerClass: 'container',
  };

  beforeEach(() => {
    Component = Vue.extend(environmentsFolderViewComponent);
  });

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

  describe('successfull request', () => {
    const environmentsResponseInterceptor = (request, next) => {
      next(request.respondWith(JSON.stringify({
        environments: environmentsList,
        stopped_count: 1,
        available_count: 0,
      }), {
        status: 200,
        headers: {
          'X-nExt-pAge': '2',
          'x-page': '1',
          'X-Per-Page': '2',
          'X-Prev-Page': '',
          'X-TOTAL': '20',
          'X-Total-Pages': '10',
        },
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(environmentsResponseInterceptor);
      Vue.http.interceptors.push(headersInterceptor);

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

    afterEach(() => {
      Vue.http.interceptors = _.without(
        Vue.http.interceptors, environmentsResponseInterceptor,
      );
      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
    });

    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', () => {
    const environmentsErrorResponseInterceptor = (request, next) => {
      next(request.respondWith(JSON.stringify([]), {
        status: 500,
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
    });

    afterEach(() => {
      Vue.http.interceptors = _.without(
        Vue.http.interceptors, environmentsErrorResponseInterceptor,
      );
    });

    it('should not render a table', (done) => {
      component = mountComponent(Component, mockData);

      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', () => {
    const environmentsEmptyResponseInterceptor = (request, next) => {
      next(request.respondWith(JSON.stringify([]), {
        status: 200,
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
      Vue.http.interceptors.push(headersInterceptor);

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

    afterEach(() => {
      Vue.http.interceptors = _.without(
        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
      );
      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
    });

    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' });
      });
    });
  });
});