summaryrefslogtreecommitdiff
path: root/spec/javascripts/registry/components/app_spec.js
blob: cf1d0625397c4c5d396fc5ad931b825c2f5bcfd3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import _ from 'underscore';
import Vue from 'vue';
import registry from '~/registry/components/app.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { reposServerResponse } from '../mock_data';

describe('Registry List', () => {
  let vm;
  let Component;

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

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

  describe('with data', () => {
    const interceptor = (request, next) => {
      next(request.respondWith(JSON.stringify(reposServerResponse), {
        status: 200,
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(interceptor);
      vm = mountComponent(Component, { endpoint: 'foo' });
    });

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

    it('should render a list of repos', (done) => {
      setTimeout(() => {
        expect(vm.$store.state.repos.length).toEqual(reposServerResponse.length);

        Vue.nextTick(() => {
          expect(
            vm.$el.querySelectorAll('.container-image').length,
          ).toEqual(reposServerResponse.length);
          done();
        });
      }, 0);
    });

    describe('delete repository', () => {
      it('should be possible to delete a repo', (done) => {
        setTimeout(() => {
          Vue.nextTick(() => {
            expect(vm.$el.querySelector('.container-image-head .js-remove-repo')).toBeDefined();
            done();
          });
        }, 0);
      });
    });

    describe('toggle repository', () => {
      it('should open the container', (done) => {
        setTimeout(() => {
          Vue.nextTick(() => {
            vm.$el.querySelector('.js-toggle-repo').click();
            Vue.nextTick(() => {
              expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual('fa fa-chevron-up');
              done();
            });
          });
        }, 0);
      });
    });
  });

  describe('without data', () => {
    const interceptor = (request, next) => {
      next(request.respondWith(JSON.stringify([]), {
        status: 200,
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(interceptor);
      vm = mountComponent(Component, { endpoint: 'foo' });
    });

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

    it('should render empty message', (done) => {
      setTimeout(() => {
        expect(
          vm.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
        ).toEqual('No container images stored for this project. Add one by following the instructions above.');
        done();
      }, 0);
    });
  });

  describe('while loading data', () => {
    const interceptor = (request, next) => {
      next(request.respondWith(JSON.stringify(reposServerResponse), {
        status: 200,
      }));
    };

    beforeEach(() => {
      Vue.http.interceptors.push(interceptor);
      vm = mountComponent(Component, { endpoint: 'foo' });
    });

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

    it('should render a loading spinner', (done) => {
      Vue.nextTick(() => {
        expect(vm.$el.querySelector('.fa-spinner')).not.toBe(null);
        done();
      });
    });
  });
});