BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit ed072645 by Filipa Lacerda
Options

Adds props validation

Improves documentation Adds tests Fix prop validation for objects Finish tests for environment item Adds tests for toggle folder function Environment tests Adds tests
parent bebbf12a
Showing with 219 additions and 335 deletions
app/assets/javascripts/boards/services/board_service.js.es6
......@@ -11,6 +11,7 @@ class BoardService {
this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
Vue.http.interceptors.push((request, next) => {
debugger;
request.headers['X-CSRF-Token'] = $.rails.csrfToken();
next();
});
......
app/assets/javascripts/environments/components/environment.js.es6
......@@ -23,8 +23,14 @@ $(() => {
return fn(item);
}).filter(Boolean);
window.gl.environmentsList.EnvironmentsComponent = Vue.extend({
props: ['store'],
window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
props: {
store: {
type: Object,
required: true,
default: () => ({}),
},
},
components: {
'environment-item': window.gl.environmentsList.EnvironmentItem,
......@@ -43,9 +49,8 @@ $(() => {
projectStoppedEnvironmentsPath: environmentsListApp.dataset.projectStoppedEnvironmentsPath,
newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
helpPagePath: environmentsListApp.dataset.helpPagePath,
loading: true,
visibility: 'available',
isLoading: this.loading,
isLoading: false,
};
},
......@@ -65,6 +70,10 @@ $(() => {
canCreateDeploymentParsed() {
return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
},
canCreateEnvironmentParsed() {
return this.$options.convertPermissionToBoolean(this.canCreateEnvironment);
},
},
created() {
......@@ -74,6 +83,15 @@ $(() => {
if (scope) {
this.visibility = scope;
}
this.isLoading = true;
return window.gl.environmentsService.all()
.then(resp => resp.json())
.then((json) => {
this.store.storeEnvironments(json);
this.isLoading = false;
});
},
/**
......@@ -81,12 +99,7 @@ $(() => {
* Toggles loading property.
*/
mounted() {
window.gl.environmentsService.all()
.then(resp => resp.json())
.then((json) => {
this.store.storeEnvironments(json);
this.loading = false;
});
},
/**
......@@ -143,21 +156,21 @@ $(() => {
</a>
</li>
</ul>
<div v-if="canCreateEnvironment && !loading" class="nav-controls">
<div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
New envrionment
New environment
</a>
</div>
</div>
<div class="environments-container">
<div class="environments-list-loading text-center" v-if="loading">
<div class="environments-list-loading text-center" v-if="isLoading">
<i class="fa fa-spinner spin"></i>
</div>
<div
class="blank-state blank-state-no-icon"
v-if="!loading && state.environments.length === 0">
v-if="!isLoading && state.environments.length === 0">
<h2 class="blank-state-title">
You don't have any environments right now.
</h2>
......@@ -170,7 +183,7 @@ $(() => {
Read more about environments
</a>
<a
v-if="canCreateEnvironment"
v-if="canCreateEnvironmentParsed"
:href="newEnvironmentPath"
class="btn btn-create">
New Environment
......@@ -180,7 +193,7 @@ $(() => {
<div
class="table-holder"
v-if="!loading && state.environments.length > 0">
v-if="!isLoading && state.environments.length > 0">
<table class="table ci-table environments">
<thead>
<tr>
......
app/assets/javascripts/environments/components/environment_external_url.js.es6
......@@ -14,7 +14,7 @@
},
template: `
<a class="btn external_url" :href="external_url" :target="_blank">
<a class="btn external_url" :href="external_url" target="_blank">
<i class="fa fa-external-link"></i>
</a>
`,
......
app/assets/javascripts/environments/components/environment_item.js.es6
/*= require lib/utils/timeago
/*= require lib/utils/text_utility
/*= require vue_common_component/commit
/*= require ./environment_actions
/*= require ./environment_external_url
......@@ -31,7 +33,30 @@
'rollback-component': window.gl.environmentsList.RollbackComponent,
},
props: ['model', 'toggleRow', 'can-create-deployment', 'can-read-environment'],
props: {
model: {
type: Object,
required: true,
default: () => ({}),
},
toggleRow: {
type: Function,
required: false,
},
canCreateDeployment: {
type: Boolean,
required: false,
default: false,
},
canReadEnvironment: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -48,10 +73,10 @@
* Folder items have different behaviours - it is possible to toggle
* them and show their children.
*
* @returns {Boolean}
* @returns {Boolean|Undefined}
*/
isFolder() {
return this.$options.hasKey(this.model, 'children') &&
return this.model.children &&
this.model.children.length > 0;
},
......@@ -69,25 +94,14 @@
* Counts the number of environments in each folder.
* Used to show a badge with the counter.
*
* @returns {Boolean} The number of environments for the current folder
* @returns {Number|Undefined} The number of environments for the current folder.
*/
childrenCounter() {
return this.$options.hasKey(this.model, 'children') &&
return this.model.children &&
this.model.children.length;
},
/**
* Returns the value of the `last?` key sent in the API.
* Used to know wich title to render when the environment can be re-deployed
*
* @returns {Boolean}
*/
isLast() {
return this.$options.hasKey(this.model, 'last_deployment') &&
this.model.last_deployment['last?'];
},
/**
* Verifies if `last_deployment` key exists in the current Envrionment.
* This key is required to render most of the html - this method works has
* an helper.
......@@ -95,18 +109,21 @@
* @returns {Boolean}
*/
hasLastDeploymentKey() {
return this.$options.hasKey(this.model, 'last_deployment');
if (this.model.last_deployment && this.model.last_deployment !== {}) {
return true;
}
return false;
},
/**
* Verifies is the given environment has manual actions.
* Used to verify if we should render them or nor.
*
* @returns {Boolean}
* @returns {Boolean|Undefined}
*/
hasManualActions() {
return this.$options.hasKey(this.model, 'manual_actions') &&
this.model.manual_actions.length > 0;
return this.model.last_deployment && this.model.last_deployment.manual_actions &&
this.model.last_deployment.manual_actions.length > 0;
},
/**
......@@ -122,12 +139,12 @@
* Verifies if the `deployable` key is present in `last_deployment` key.
* Used to verify whether we should or not render the rollback partial.
*
* @returns {Boolean}
* @returns {Boolean|Undefined}
*/
canRetry() {
return this.hasLastDeploymentKey &&
this.model.last_deployment &&
this.$options.hasKey(this.model.last_deployment, 'deployable');
this.model.last_deployment.deployable;
},
/**
......@@ -144,9 +161,10 @@
/**
* Returns the manual actions with the name parsed.
*
* @returns {Array.<Object>}
* @returns {Array.<Object>|Undefined}
*/
manualActions() {
if (this.hasManualActions) {
return this.model.last_deployment.manual_actions.map((action) => {
const parsedAction = {
name: gl.text.humanize(action.name),
......@@ -154,10 +172,22 @@
};
return parsedAction;
});
}
return [];
},
/**
* Builds the string used in the user image alt attribute.
*
* @returns {String}
*/
userImageAltDescription() {
if (this.model.last_deployment &&
this.model.last_deployment.user &&
this.model.last_deployment.user.username) {
return `${this.model.last_deployment.user.username}'s avatar'`;
}
return '';
},
/**
......@@ -166,7 +196,8 @@
* @returns {String|Undefined}
*/
commitTag() {
if (this.model.last_deployment && this.model.last_deployment.tag) {
if (this.model.last_deployment &&
this.model.last_deployment.tag) {
return this.model.last_deployment.tag;
}
return undefined;
......@@ -178,7 +209,8 @@
* @returns {Object|Undefined}
*/
commitRef() {
if (this.model.last_deployment && this.model.last_deployment.ref) {
if (this.model.last_deployment &&
this.model.last_deployment.ref) {
return this.model.last_deployment.ref;
}
return undefined;
......@@ -241,6 +273,11 @@
return undefined;
},
/**
* Verifies if the `retry_url` key is present and returns its value.
*
* @returns {String|Undefined}
*/
retryUrl() {
if (this.model.last_deployment &&
this.model.last_deployment.deployable &&
......@@ -250,35 +287,66 @@
return undefined;
},
/**
* Verifies if the `last?` key is present and returns its value.
*
* @returns {Boolean|Undefined}
*/
isLastDeployment() {
return this.model.last_deployment && this.model.last_deployment['last?'];
},
/**
* Builds the name of the builds needed to display both the name and the id.
*
* @returns {String}
*/
buildName() {
if (this.model.last_deployment && this.model.last_deployment.deployable) {
if (this.model.last_deployment &&
this.model.last_deployment.deployable) {
return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
}
return undefined;
return '';
},
/**
* Builds the needed string to show the internal id.
*
* @returns {String}
*/
deploymentInternalId() {
if (this.model.last_deployment) {
if (this.model.last_deployment &&
this.model.last_deployment.iid) {
return `#${this.model.last_deployment.iid}`;
}
return '';
},
},
/**
* Helper to verify if key is present in an object.
* Can be removed once we start using lodash.
* Verifies if the user object is present under last_deployment object.
*
* @param {Object} obj
* @param {String} key
* @returns {Boolean}
*/
hasKey(obj, key) {
return {}.hasOwnProperty.call(obj, key);
deploymentHasUser() {
if (this.model.last_deployment &&
this.model.last_deployment.user) {
return true;
}
return false;
},
/**
* Returns the user object nested with the last_deployment object.
* Used to render the template.
*
* @returns {Object}
*/
deploymentUser() {
if (this.model.last_deployment && this.model.last_deployment.user) {
return this.model.last_deployment.user;
}
return {};
},
},
template: `
......@@ -303,18 +371,20 @@
</td>
<td class="deployment-column">
<span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId">
<span
v-if="!isFolder && model.last_deployment && model.last_deployment.iid"
v-html="deploymentInternalId">
</span>
<span v-if="model.last_deployment.user">
<span v-if="!isFolder && deploymentHasUser">
by
<a :href="model.last_deployment.user.web_url">
<a :href="deploymentUser.web_url" class="js-deploy-user-container">
<img class="avatar has-tooltip s20"
:src="model.last_deployment.user.avatar_url"
:src="deploymentUser.avatar_url"
:alt="userImageAltDescription"
:title="model.last_deployment.user.username" />
:title="deploymentUser.username" />
</a>
</span>
</span>
</td>
<td>
......@@ -326,7 +396,7 @@
</td>
<td>
<div v-if="!isFolder && model.last_deployment">
<div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
<commit-component
:tag="commitTag"
:ref="commitRef"
......@@ -336,7 +406,7 @@
:author="commitAuthor">
</commit-component>
</div>
<p v-if="!isFolder && !model.last_deployment" class="commit-title">
<p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title">
No deployments yet
</p>
</td>
......@@ -351,25 +421,25 @@
<td class="hidden-xs">
<div v-if="!isFolder">
<div v-if="hasManualActions && canCreateDeployment" class="inline">
<div v-if="hasManualActions && canCreateDeployment" class="inline js-manual-actions-container">
<actions-component
:actions="manualActions">
</actions-component>
</div>
<div v-if="model.external_url && canReadEnvironment" class="inline">
<div v-if="model.external_url && canReadEnvironment" class="inline js-external-url-container">
<external-url-component
:external_url="model.external_url">
</external_url-component>
</div>
<div v-if="isStoppable && canCreateDeployment" class="inline">
<div v-if="isStoppable && canCreateDeployment" class="inline js-stop-component-container">
<stop-component
:stop_url="model.environment_url">
</stop-component>
</div>
<div v-if="canRetry && canCreateDeployment" class="inline">
<div v-if="canRetry && canCreateDeployment" class="inline js-rollback-component-container">
<rollback-component
:is_last_deployment="isLastDeployment"
:retry_url="retryUrl">
......
app/assets/javascripts/environments/services/environments_service.js.es6
......@@ -8,7 +8,10 @@ class EnvironmentsService {
this.environments = Vue.resource(root);
Vue.http.interceptors.push((request, next) => {
// needed in order to not break the tests.
if ($.rails) {
request.headers['X-CSRF-Token'] = $.rails.csrfToken();
}
next();
});
}
......
app/assets/javascripts/vue_common_component/commit.js.es6
......@@ -26,7 +26,7 @@
ref: {
type: Object,
required: false,
default: () => {},
default: () => ({}),
},
/**
......@@ -66,7 +66,7 @@
author: {
type: Object,
required: false,
default: () => {},
default: () => ({}),
},
},
......
db/schema.rb
......@@ -106,6 +106,9 @@ ActiveRecord::Schema.define(version: 20161109150329) do
t.integer "housekeeping_incremental_repack_period", default: 10, null: false
t.integer "housekeeping_full_repack_period", default: 50, null: false
t.integer "housekeeping_gc_period", default: 200, null: false
t.boolean "sidekiq_throttling_enabled", default: false
t.string "sidekiq_throttling_queues"
t.decimal "sidekiq_throttling_factor"
end
create_table "audit_events", force: :cascade do |t|
......
spec/features/environments_spec.rb
require 'spec_helper'
feature 'Environments', feature: true do
feature 'Environments', feature: true, js:true do
given(:project) { create(:empty_project) }
given(:user) { create(:user) }
given(:role) { :developer }
......@@ -59,6 +59,7 @@ feature 'Environments', feature: true do
given(:deployment) { create(:deployment, environment: environment) }
scenario 'does show deployment SHA' do
puts page.body
expect(page).to have_link(deployment.short_sha)
end
......
spec/javascripts/environments/environment_item_spec.js.es6
......@@ -9,6 +9,7 @@ describe('Environment item', () => {
describe('When item is folder', () => {
let mockItem;
let component;
beforeEach(() => {
mockItem = {
......@@ -34,61 +35,31 @@ describe('Environment item', () => {
},
],
};
});
it('Should render clickable folder icon and name', () => {
const component = new window.gl.environmentsList.EnvironmentItem({
component = new window.gl.environmentsList.EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: mockItem,
toggleRow: () => {},
'can-create-deployment': false,
'can-read-environment': true,
canCreateDeployment: false,
canReadEnvironment: true,
},
});
});
it('Should render folder icon and name', () => {
expect(component.$el.querySelector('.folder-name').textContent).toContain(mockItem.name);
expect(component.$el.querySelector('.folder-icon')).toBeDefined();
});
it('Should render the number of children in a badge', () => {
const component = new window.gl.environmentsList.EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: mockItem,
toggleRow: () => {},
'can-create-deployment': false,
'can-read-environment': true,
},
});
expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
});
describe('when clicked', () => {
it('Should call the given prop', () => {
const component = new window.gl.environmentsList.EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: mockItem,
toggleRow: () => {
console.log('here!');
},
'can-create-deployment': false,
'can-read-environment': true,
},
});
spyOn(component.$options.propsData, 'toggleRow');
component.$el.querySelector('.folder-name').click();
expect(component.$options.propsData.toggleRow).toHaveBeenCalled();
});
});
});
describe('when item is not folder', () => {
let environment;
let component;
beforeEach(() => {
environment = {
......@@ -151,104 +122,93 @@ describe('Environment item', () => {
created_at: '2016-11-07T11:11:16.525Z',
updated_at: '2016-11-10T15:55:58.778Z',
};
});
it('should render environment name', () => {
const component = new window.gl.environmentsList.EnvironmentItem({
component = new window.gl.environmentsList.EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: environment,
toggleRow: () => {},
'can-create-deployment': false,
'can-read-environment': true,
canCreateDeployment: true,
canReadEnvironment: true,
},
});
});
debugger;
it('should render environment name', () => {
expect(component.$el.querySelector('.environment-name').textContent).toEqual(environment.name);
});
describe('With deployment', () => {
it('should render deployment internal id', () => {
expect(
component.$el.querySelector('.deployment-column span').textContent
).toContain(environment.last_deployment.iid);
});
it('should link to deployment', () => {
expect(
component.$el.querySelector('.deployment-column span').textContent
).toContain('#');
});
describe('With user information', () => {
it('should render user avatar with link to profile', () => {
expect(
component.$el.querySelector('.js-deploy-user-container').getAttribute('href')
).toEqual(environment.last_deployment.user.web_url);
});
});
describe('With build url', () => {
it('Should link to build url provided', () => {
expect(
component.$el.querySelector('.build-link').getAttribute('href')
).toEqual(environment.last_deployment.deployable.build_url);
});
it('Should render deployable name and id', () => {
expect(
component.$el.querySelector('.build-link').getAttribute('href')
).toEqual(environment.last_deployment.deployable.build_url);
});
});
describe('With commit information', () => {
it('should render commit component', () => {});
it('should render commit component', () => {
expect(
component.$el.querySelector('.js-commit-component')
).toBeDefined();
});
it('Should render timeago created date', () => {
});
});
describe('Without deployment', () => {
it('should render no deployments information', () => {
});
});
describe('With manual actions', () => {
describe('With create deployment permission', () => {
it('Should render actions component', () => {
});
});
describe('Without create deployment permission', () => {
it('should not render actions component', () => {
});
expect(
component.$el.querySelector('.js-manual-actions-container')
).toBeDefined();
});
});
describe('With external URL', () => {
it('should render external url component', () => {
expect(
component.$el.querySelector('.js-external-url-container')
).toBeDefined();
});
});
describe('With stop action', () => {
describe('With create deployment permission', () => {
it('Should render stop action component', () => {
});
});
describe('Without create deployment permission', () => {
it('should not render stop action component', () => {
});
expect(
component.$el.querySelector('.js-stop-component-container')
).toBeDefined();
});
});
describe('With retry action', () => {
describe('With create deployment permission', () => {
it('Should render rollback component', () => {
});
});
describe('Without create deployment permission', () => {
it('should not render rollback component', () => {
});
expect(
component.$el.querySelector('.js-rollback-component-container')
).toBeDefined();
});
});
});
......
spec/javascripts/environments/environment_spec.js.es6 deleted 100644 → 0
//= require vue
//= require environments/stores/environments_store
//= require environments/components/environment
/* globals environmentsList */
describe('Environments', () => {
fixture.preload('environments/environments.html');
fixture.preload('environments/environments_no_permission.html');
let Store;
let component;
beforeEach(() => {
Store = window.gl.environmentsList.EnvironmentsStore;
});
describe('While loading', () => {
beforeEach(() => {
fixture.load('environments/environments.html');
component = new window.gl.environmentsList.EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
propsData: {
store: Store.create(),
},
});
});
it('Should render two tabs', () => {
expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
});
it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
expect(
component.$el.querySelector('.js-available-environments-count').textContent
).toContain('0');
expect(
component.$el.querySelector('.js-stopped-environments-count').textContent
).toContain('0');
});
it('Should render loading icon', () => {
expect(
component.$el.querySelector('environments-list-loading')
).toBeDefined();
});
});
describe('Without environments', () => {
beforeEach(() => {
fixture.load('environments/environments.html');
spyOn(component, 'ready').and.callFake(() => {
return {
then: callback => callback([]),
json: () => ({ then: cb => cb([]) }),
};
});
component = new window.gl.environmentsList.EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
propsData: {
store: Store.create(),
},
});
});
it('Should render two tabs', () => {
expect(component.$el.querySelectorAll('ul li').length).toEqual(2);
});
it('Should render bagdes with zeros in both tabs indicating the number of available environments', () => {
expect(
component.$el.querySelector('.js-available-environments-count').textContent
).toContain('0');
expect(
component.$el.querySelector('.js-stopped-environments-count').textContent
).toContain('0');
});
it('Should render blank state information', () => {
expect(
component.$el.querySelector('.blank-state-title').textContent
).toEqual('You don\'t have any environments right now.');
expect(
component.$el.querySelector('.blank-state-text').textContent
).toEqual('Environments are places where code gets deployed, such as staging or production.');
});
it('Should render the provided help url', () => {
expect(
component.$el.querySelector('.blank-state a').getAttribute('href')
).toEqual(component.$data.helpPagePath);
});
describe('With create permission', () => {
it('Should render new environment button', () => {
expect(
component.$el.querySelector('a.btn-create').getAttribute('href')
).toEqual(component.$data.newEnvironmentPath);
expect(
component.$el.querySelector('a.btn-create').textContent
).toEqual('New environment');
});
});
describe('Without create permission', () => {
beforeEach('Load fixture without permission', () => {
fixture.load('environments/environments_no_permission.html');
component = new window.gl.environmentsList.EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
propsData: {
store: Store.create(),
},
});
});
it('Should not render new environment button', () => {
});
});
});
describe('With environments', () => {
describe('Tabs behavior', () => {
it('Should render two tabs', () => {
});
it('Should render badges with the correct count', () => {
});
describe('When clicking in the available tab', () => {
it('Should make Available tab active', () => {
});
it('Should make visible only available environments', () => {
});
});
describe('When clicking in the stopped tab', () => {
it('Should make Stopped tab active', () => {
});
it('Should make visible only stopped environments', () => {
});
});
});
describe('With create permissions', () => {
it('Should render new environment button', () => {
});
});
describe('Without create permissions', () => {
it('Should not render the new environment button', () => {
});
});
it('Should render a table', () => {
});
it('Should render table pagination', () => {
});
});
});
spec/javascripts/environments/environments_store_spec.js.es6
//= require vue
//= require environments/stores/environmnets_store
//= require environments/stores/environments_store
//= require ./mock_data
/* globals environmentsList */
(() => {
......@@ -50,5 +50,20 @@
expect(environments[2].name).toBe('review_app');
});
});
describe('toggleFolder', () => {
beforeEach(() => {
gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
});
it('should toggle the open property for the given environment', () => {
gl.environmentsList.EnvironmentsStore.toggleFolder('review');
const { environments } = gl.environmentsList.EnvironmentsStore.state;
const environment = environments.filter(env => env['vue-isChildren'] === true && env.name === 'review');
expect(environment[0].isOpen).toBe(true);
});
});
});
})();
spec/javascripts/fixtures/environments/environments.html.haml
......@@ -2,7 +2,7 @@
#environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
"can-create-deployment" => "true",
"can-read-environment" => "true",
"can-create-environmnet" => "true",
"can-create-environment" => "true",
"project-environments-path" => "https://gitlab.com/foo/environments",
"project-stopped-environments-path" => "https://gitlab.com/foo/environments?scope=stopped",
"new-environment-path" => "https://gitlab.com/foo/environments/new",
......
spec/javascripts/fixtures/environments/environments_no_permission.html.haml deleted 100644 → 0
%div
#environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
"can-create-deployment" => "false",
"can-read-environment" => "true",
"can-create-environmnet" => "false",
"project-environments-path" => "https://gitlab.com/foo/environments",
"project-stopped-environments-path" => "https://gitlab.com/foo/environments?scope=stopped",
"new-environment-path" => "https://gitlab.com/foo/environments/new",
"help-page-path" => "https://gitlab.com/help_page"}}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment