BigW Consortium Gitlab

pipelines_spec.js 3.62 KB
Newer Older
1 2
import Vue from 'vue';
import PipelinesTable from '~/commit/pipelines/pipelines_table';
3 4

describe('Pipelines table in Commits and Merge requests', () => {
5 6 7
  const jsonFixtureName = 'pipelines/pipelines.json';
  let pipeline;

8
  preloadFixtures('static/pipelines_table.html.raw');
9
  preloadFixtures(jsonFixtureName);
10 11

  beforeEach(() => {
12
    loadFixtures('static/pipelines_table.html.raw');
13 14
    const pipelines = getJSONFixture(jsonFixtureName).pipelines;
    pipeline = pipelines.find(p => p.id === 1);
15 16
  });

17
  describe('successful request', () => {
18 19 20 21 22 23 24
    describe('without pipelines', () => {
      const pipelinesEmptyResponse = (request, next) => {
        next(request.respondWith(JSON.stringify([]), {
          status: 200,
        }));
      };

25
      beforeEach(function () {
26
        Vue.http.interceptors.push(pipelinesEmptyResponse);
27 28 29 30

        this.component = new PipelinesTable({
          el: document.querySelector('#commit-pipeline-table-view'),
        });
31 32
      });

33
      afterEach(function () {
34 35 36
        Vue.http.interceptors = _.without(
          Vue.http.interceptors, pipelinesEmptyResponse,
        );
37
        this.component.$destroy();
38 39
      });

40
      it('should render the empty state', function (done) {
41
        setTimeout(() => {
42 43
          expect(this.component.$el.querySelector('.empty-state')).toBeDefined();
          expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
44
          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
45 46 47 48 49 50 51 52 53 54 55 56 57 58
          done();
        }, 1);
      });
    });

    describe('with pipelines', () => {
      const pipelinesResponse = (request, next) => {
        next(request.respondWith(JSON.stringify([pipeline]), {
          status: 200,
        }));
      };

      beforeEach(() => {
        Vue.http.interceptors.push(pipelinesResponse);
59 60 61 62

        this.component = new PipelinesTable({
          el: document.querySelector('#commit-pipeline-table-view'),
        });
63 64 65 66 67 68
      });

      afterEach(() => {
        Vue.http.interceptors = _.without(
          Vue.http.interceptors, pipelinesResponse,
        );
69
        this.component.$destroy();
70 71 72 73
      });

      it('should render a table with the received pipelines', (done) => {
        setTimeout(() => {
74 75
          expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
          expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
76 77
          expect(this.component.$el.querySelector('.empty-state')).toBe(null);
          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
78 79 80 81 82 83 84 85 86 87 88 89 90
          done();
        }, 0);
      });
    });
  });

  describe('unsuccessfull request', () => {
    const pipelinesErrorResponse = (request, next) => {
      next(request.respondWith(JSON.stringify([]), {
        status: 500,
      }));
    };

91
    beforeEach(function () {
92
      Vue.http.interceptors.push(pipelinesErrorResponse);
93 94 95 96

      this.component = new PipelinesTable({
        el: document.querySelector('#commit-pipeline-table-view'),
      });
97 98
    });

99
    afterEach(function () {
100 101 102
      Vue.http.interceptors = _.without(
        Vue.http.interceptors, pipelinesErrorResponse,
      );
103
      this.component.$destroy();
104 105
    });

106
    it('should render error state', function (done) {
107
      setTimeout(() => {
108 109
        expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
        expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
110 111
        expect(this.component.$el.querySelector('.js-empty-state')).toBe(null);
        expect(this.component.$el.querySelector('table')).toBe(null);
112 113 114 115 116
        done();
      }, 0);
    });
  });
});