221 lines
6.1 KiB
JavaScript
221 lines
6.1 KiB
JavaScript
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('successful 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' });
|
|
});
|
|
});
|
|
});
|
|
});
|