environments_app_spec.js 9.4 KB
Newer Older
Filipa Lacerda's avatar
Filipa Lacerda committed
1
import Vue from 'vue';
2 3
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
4
import environmentsComponent from '~/environments/components/environments_app.vue';
5
import mountComponent from 'spec/helpers/vue_mount_component_helper';
6
import { environment, folder } from './mock_data';
Filipa Lacerda's avatar
Filipa Lacerda committed
7 8

describe('Environment', () => {
9 10 11 12 13 14 15
  const mockData = {
    endpoint: 'environments.json',
    canCreateEnvironment: true,
    canReadEnvironment: true,
    cssContainerClass: 'container',
    newEnvironmentPath: 'environments/new',
    helpPagePath: 'help',
16 17 18 19 20 21 22
    // ee-only start
    canaryDeploymentFeatureId: 'canary_deployment',
    showCanaryDeploymentCallout: true,
    userCalloutsPath: '/callouts',
    lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
    helpCanaryDeploymentsPath: 'help/canary-deployments',
    // ee-only end
23
  };
Filipa Lacerda's avatar
Filipa Lacerda committed
24

25
  let EnvironmentsComponent;
Filipa Lacerda's avatar
Filipa Lacerda committed
26
  let component;
27
  let mock;
Filipa Lacerda's avatar
Filipa Lacerda committed
28 29

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

32
    EnvironmentsComponent = Vue.extend(environmentsComponent);
Filipa Lacerda's avatar
Filipa Lacerda committed
33 34
  });

35 36 37 38 39
  afterEach(() => {
    component.$destroy();
    mock.restore();
  });

40
  describe('successful request', () => {
Filipa Lacerda's avatar
Filipa Lacerda committed
41
    describe('without environments', () => {
42
      beforeEach(done => {
43
        mock.onGet(mockData.endpoint).reply(200, { environments: [] });
Filipa Lacerda's avatar
Filipa Lacerda committed
44

45
        component = mountComponent(EnvironmentsComponent, mockData);
Filipa Lacerda's avatar
Filipa Lacerda committed
46 47 48 49 50

        setTimeout(() => {
          done();
        }, 0);
      });
51 52

      it('should render the empty state', () => {
53 54 55
        expect(component.$el.querySelector('.js-new-environment-button').textContent).toContain(
          'New environment',
        );
56

57 58 59
        expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain(
          "You don't have any environments right now",
        );
60
      });
Filipa Lacerda's avatar
Filipa Lacerda committed
61 62
    });

63
    describe('with paginated environments', () => {
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
      beforeEach(done => {
        mock.onGet(mockData.endpoint).reply(
          200,
          {
            environments: [environment],
            stopped_count: 1,
            available_count: 0,
          },
          {
            'X-nExt-pAge': '2',
            'x-page': '1',
            'X-Per-Page': '1',
            'X-Prev-Page': '',
            'X-TOTAL': '37',
            'X-Total-Pages': '2',
          },
        );
Filipa Lacerda's avatar
Filipa Lacerda committed
81

82
        component = mountComponent(EnvironmentsComponent, mockData);
Filipa Lacerda's avatar
Filipa Lacerda committed
83 84 85 86 87

        setTimeout(() => {
          done();
        }, 0);
      });
88

89 90
      it('should render a table with environments', () => {
        expect(component.$el.querySelectorAll('table')).not.toBeNull();
91 92 93
        expect(component.$el.querySelector('.environment-name').textContent.trim()).toEqual(
          environment.name,
        );
94 95
      });

96
      describe('pagination', () => {
97
        it('should render pagination', () => {
98
          expect(component.$el.querySelectorAll('.gl-pagination li').length).toEqual(5);
99 100
        });

101
        it('should make an API request when page is clicked', done => {
102
          spyOn(component, 'updateContent');
103
          setTimeout(() => {
104
            component.$el.querySelector('.gl-pagination li:nth-child(5) .page-link').click();
105

106
            expect(component.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
107 108 109 110
            done();
          }, 0);
        });

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

116
            expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
117
            done();
118
          }, 0);
119 120
        });
      });
121 122

      describe('deploy boards', () => {
123
        it('should render arrow to open deploy boards', done => {
124
          setTimeout(() => {
125 126 127
            expect(
              component.$el.querySelector('.deploy-board-icon.ic-chevron-right'),
            ).toBeDefined();
128 129 130 131
            done();
          }, 0);
        });
      });
Filipa Lacerda's avatar
Filipa Lacerda committed
132
    });
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196

    // ee-only start
    describe('canary callout', () => {
      it('should render banner underneath second environment', done => {
        mock.onGet(mockData.endpoint).reply(
          200,
          {
            environments: [environment, environment],
            stopped_count: 1,
            available_count: 0,
          },
          {
            'X-nExt-pAge': '2',
            'x-page': '1',
            'X-Per-Page': '1',
            'X-Prev-Page': '',
            'X-TOTAL': '37',
            'X-Total-Pages': '2',
          },
        );

        component = mountComponent(EnvironmentsComponent, mockData);

        setTimeout(() => {
          expect(
            component.$el
              .querySelector('.canary-deployment-callout')
              .getAttribute('data-js-canary-promo-key'),
          ).toBe('1');
          done();
        }, 0);
      });

      it('should render banner underneath first environment', done => {
        mock.onGet(mockData.endpoint).reply(
          200,
          {
            environments: [environment],
            stopped_count: 1,
            available_count: 0,
          },
          {
            'X-nExt-pAge': '2',
            'x-page': '1',
            'X-Per-Page': '1',
            'X-Prev-Page': '',
            'X-TOTAL': '37',
            'X-Total-Pages': '2',
          },
        );

        component = mountComponent(EnvironmentsComponent, mockData);

        setTimeout(() => {
          expect(
            component.$el
              .querySelector('.canary-deployment-callout')
              .getAttribute('data-js-canary-promo-key'),
          ).toBe('0');
          done();
        }, 0);
      });
    });
    // ee-only end
Filipa Lacerda's avatar
Filipa Lacerda committed
197 198 199
  });

  describe('unsuccessfull request', () => {
200
    beforeEach(done => {
201
      mock.onGet(mockData.endpoint).reply(500, {});
Filipa Lacerda's avatar
Filipa Lacerda committed
202

203
      component = mountComponent(EnvironmentsComponent, mockData);
Filipa Lacerda's avatar
Filipa Lacerda committed
204 205 206 207 208

      setTimeout(() => {
        done();
      }, 0);
    });
209 210

    it('should render empty state', () => {
211 212 213
      expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain(
        "You don't have any environments right now",
      );
214
    });
Filipa Lacerda's avatar
Filipa Lacerda committed
215
  });
216 217

  describe('expandable folders', () => {
218
    beforeEach(() => {
219 220
      mock.onGet(mockData.endpoint).reply(
        200,
221 222 223 224 225 226
        {
          environments: [folder],
          stopped_count: 0,
          available_count: 1,
        },
        {
227 228 229 230 231 232 233
          'X-nExt-pAge': '2',
          'x-page': '1',
          'X-Per-Page': '1',
          'X-Prev-Page': '',
          'X-TOTAL': '37',
          'X-Total-Pages': '2',
        },
234
      );
235

236
      mock.onGet(environment.folder_path).reply(200, { environments: [environment] });
237

238
      component = mountComponent(EnvironmentsComponent, mockData);
239 240
    });

241
    it('should open a closed folder', done => {
242 243 244 245
      setTimeout(() => {
        component.$el.querySelector('.folder-name').click();

        Vue.nextTick(() => {
246
          expect(component.$el.querySelector('.folder-icon.ic-chevron-right')).toBe(null);
247 248
          done();
        });
249
      }, 0);
250 251
    });

252
    it('should close an opened folder', done => {
253 254 255 256 257 258 259 260 261
      setTimeout(() => {
        // open folder
        component.$el.querySelector('.folder-name').click();

        Vue.nextTick(() => {
          // close folder
          component.$el.querySelector('.folder-name').click();

          Vue.nextTick(() => {
262
            expect(component.$el.querySelector('.folder-icon.ic-chevron-down')).toBe(null);
263 264 265
            done();
          });
        });
266
      }, 0);
267 268
    });

269
    it('should show children environments and a button to show all environments', done => {
270 271 272 273 274 275 276 277
      setTimeout(() => {
        // open folder
        component.$el.querySelector('.folder-name').click();

        Vue.nextTick(() => {
          // wait for next async request
          setTimeout(() => {
            expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
278 279 280
            expect(component.$el.querySelector('.text-center > a.btn').textContent).toContain(
              'Show all',
            );
Filipa Lacerda's avatar
Filipa Lacerda committed
281
            done();
282 283
          });
        });
284
      }, 0);
285 286
    });
  });
287 288 289

  describe('methods', () => {
    beforeEach(() => {
290 291
      mock.onGet(mockData.endpoint).reply(
        200,
292 293 294 295 296 297 298
        {
          environments: [],
          stopped_count: 0,
          available_count: 1,
        },
        {},
      );
299 300

      component = mountComponent(EnvironmentsComponent, mockData);
301
      spyOn(window.history, 'pushState').and.stub();
302 303 304
    });

    describe('updateContent', () => {
305 306 307
      it('should set given parameters', done => {
        component
          .updateContent({ scope: 'stopped', page: '3' })
308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336
          .then(() => {
            expect(component.page).toEqual('3');
            expect(component.scope).toEqual('stopped');
            expect(component.requestData.scope).toEqual('stopped');
            expect(component.requestData.page).toEqual('3');
            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' });
      });
    });
  });
Filipa Lacerda's avatar
Filipa Lacerda committed
337
});