Skip to content

G
gitlab-ce
Commit 30c6a7d3 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Adds tests 

Adds tests.
Changes instance into a constructor

Adds tests for environments component

Adds tests assertations

Adds external URL test

Adds tests for Rollback component

Adds tests for stop component

Adds tests for actions component
Fix environment item

Init environment item tests
parent 8cebb71e
Hide whitespace changes
Inline Side-by-side
Showing with 825 additions and 209 deletions
app/assets/javascripts/environments/components/environment.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require vue-resource
//= require_tree ../services/
//= require ./environment_item
/* globals Vue, EnvironmentsService */
/* eslint-disable no-param-reassign */
$(() => {
window.gl = window.gl || {};
const filterState = state => environment => environment.state === state && environment;
// recursiveMap :: (Function, Array) -> Array
const recursiveMap = (fn, arr) => arr.map((item) => {
if (item.children) {
const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
if (filteredChildren.length) {
item.children = filteredChildren;
return item;
}
}
return fn(item);
}).filter(Boolean);
window.gl.environmentsList.EnvironmentsComponent = Vue.extend({
props: ['store'],
components: {
'environment-item': window.gl.environmentsList.EnvironmentItem,
},
data() {
const environmentsListApp = document.querySelector('#environments-list-view');
return {
state: this.store.state,
endpoint: environmentsListApp.dataset.environmentsDataEndpoint,
canCreateDeployment: environmentsListApp.dataset.canCreateDeployment,
canReadEnvironment: environmentsListApp.dataset.canReadEnvironment,
canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment,
projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath,
projectStoppedEnvironmentsPath: environmentsListApp.dataset.projectStoppedEnvironmentsPath,
newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
helpPagePath: environmentsListApp.dataset.helpPagePath,
loading: true,
visibility: 'available',
};
},
computed: {
filteredEnvironments() {
return recursiveMap(filterState(this.visibility), this.state.environments);
},
scope() {
return this.$options.getQueryParameter('scope');
},
canReadEnvironmentParsed() {
return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
},
canCreateDeploymentParsed() {
return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
},
},
created() {
window.gl.environmentsService = new EnvironmentsService(this.endpoint);
const scope = this.$options.getQueryParameter('scope');
if (scope) {
this.visibility = scope;
}
},
/**
* Fetches all the environmnets and stores them.
* Toggles loading property.
*/
ready() {
window.gl.environmentsService.all().then(resp => resp.json()).then((json) => {
this.store.storeEnvironments(json);
this.loading = false;
});
},
/**
* Transforms the url parameter into an object and
* returns the one requested.
*
* @param {String} param
* @returns {String} The value of the requested parameter.
*/
getQueryParameter(parameter) {
return window.location.search.substring(1).split('&').reduce((acc, param) => {
const paramSplited = param.split('=');
acc[paramSplited[0]] = paramSplited[1];
return acc;
}, {})[parameter];
},
/**
* Converts permission provided as strings to booleans.
* @param {String} string
* @returns {Boolean}
*/
convertPermissionToBoolean(string) {
if (string === 'true') {
return true;
}
return false;
},
template: `
<div>
<div class="top-area">
<ul v-if="!isLoading" class="nav-links">
<li v-bind:class="{ 'active': scope === undefined}">
<a :href="projectEnvironmentsPath">
Available
<span class="badge js-available-environments-count">
{{state.availableCounter}}
</span>
</a>
</li>
<li v-bind:class="{ 'active': scope === 'stopped'}">
<a :href="projectStoppedEnvironmentsPath">
Stopped
<span class="badge js-stopped-environments-count">
{{state.stoppedCounter}}
</span>
</a>
</li>
</ul>
<div v-if="canCreateEnvironment && !loading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
New envrionment
</a>
</div>
</div>
<div class="environments-container">
<div class="environments-list-loading text-center" v-if="loading">
<i class="fa fa-spinner spin"></i>
</div>
<div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
<h2 class="blank-state-title">
You don't have any environments right now.
</h2>
<p class="blank-state-text">
Environments are places where code gets deployed, such as staging or production.
<br />
<a :href="helpPagePath">
Read more about environments
</a>
<a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
New Environment
</a>
</p>
</div>
<div class="table-holder" v-if="!loading && state.environments.length > 0">
<table class="table ci-table environments">
<thead>
<th>Environment</th>
<th>Last deployment</th>
<th>Build</th>
<th>Commit</th>
<th></th>
<th class="hidden-xs"></th>
</thead>
<tbody>
<tr is="environment-item"
v-for="model in filteredEnvironments"
:model="model"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed">
</tbody>
</table>
</div>
</div>
</div>
`,
});
});
app/assets/javascripts/environments/components/environment_item.js.es6
View file @ 30c6a7d3
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
'rollback-component': window.gl.environmentsList.RollbackComponent, 'rollback-component': window.gl.environmentsList.RollbackComponent,
}, },
props: ['model', 'can-create-deployment', 'can-create-deployment', 'can-read-environment'], props: ['model', 'can-create-deployment', 'can-read-environment'],
data() { data() {
return { return {
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
*/ */
hasManualActions() { hasManualActions() {
return this.$options.hasKey(this.model, 'manual_actions') && return this.$options.hasKey(this.model, 'manual_actions') &&
this.model.manual_actions.length; this.model.manual_actions.length > 0;
}, },
/** /**
...@@ -142,17 +142,6 @@ ...@@ -142,17 +142,6 @@
return timeagoInstance.format(this.model.created_at); return timeagoInstance.format(this.model.created_at);
}, },
/**
* Verifies if the environment has any manual actions to be rendered.
*
* @returns {Boolean}
*/
hasManualActions() {
return this.model.last_deployment &&
this.model.last_deployment.manual_actions &&
this.model.last_deployment.manual_actions.length > 0;
},
/** /**
* Returns the manual actions with the name parsed. * Returns the manual actions with the name parsed.
* *
...@@ -359,25 +348,25 @@ ...@@ -359,25 +348,25 @@
<td class="hidden-xs col-sm-3"> <td class="hidden-xs col-sm-3">
<div v-if="!isFolder"> <div v-if="!isFolder">
<div v-if="hasManualActions && canCreateDeployment" class="inline"> <div v-if="hasManualActions && canCreateDeployment" class="inline">
<actions-component <actions-component
:actions="manualActions"> :actions="manualActions">
</actions-component> </actions-component>
</div> </div>
<div v-if="model.external_url && canReadEnvironment" class="inline"> <div v-if="model.external_url && canReadEnvironment" class="inline">
<external-url-component <external-url-component
:external_url="model.external_url"> :external_url="model.external_url">
</external_url-component> </external_url-component>
</div> </div>
<div v-if="isStoppable && canCreateDeployment" class="inline"> <div v-if="isStoppable && canCreateDeployment" class="inline">
<stop-component <stop-component
:stop_url="model.environment_url"> :stop_url="model.environment_url">
</stop-component> </stop-component>
</div> </div>
<div v-if="canRetry && canCreateDeployment" class="inline"> <div v-if="canRetry && canCreateDeployment" class="inline">
<rollback-component <rollback-component
:is_last_deployment="isLastDeployment" :is_last_deployment="isLastDeployment"
:retry_url="retryUrl"> :retry_url="retryUrl">
</rollback-component> </rollback-component>
......
app/assets/javascripts/environments/components/environment_stop.js.es6
View file @ 30c6a7d3
...@@ -13,12 +13,18 @@ ...@@ -13,12 +13,18 @@
}, },
}, },
methods: {
openConfirmDialog() {
return window.confirm('Are you sure you want to stop this environment?');
},
},
template: ` template: `
<a class="btn stop-env-link" <a v-on:click="openConfirmDialog"
:href="stop_url" class="btn stop-env-link"
:href="stop_url"
method="post" method="post"
rel="nofollow", rel="nofollow">
data-confirm="Are you sure you want to stop this environment?">
<i class="fa fa-stop stop-env-icon"></i> <i class="fa fa-stop stop-env-icon"></i>
</a> </a>
`, `,
......
app/assets/javascripts/environments/environments_bundle.js.es6
View file @ 30c6a7d3
//= require vue //= require vue
//= require vue-resource //= require_tree ./stores/
//= require_tree ./stores //= require ./components/environment
//= require_tree ./services
//= require ./components/environment_item
//= require ./vue_resource_interceptor //= require ./vue_resource_interceptor
/* globals Vue, EnvironmentsService */
/* eslint-disable no-param-reassign */
$(() => {
const environmentsListApp = document.getElementById('environments-list-view');
const Store = gl.environmentsList.EnvironmentsStore;
$(() => {
window.gl = window.gl || {}; window.gl = window.gl || {};
if (gl.EnvironmentsListApp) { if (window.gl.EnvironmentsListApp) {
gl.EnvironmentsListApp.$destroy(true); window.gl.EnvironmentsListApp.$destroy(true);
} }
const Store = window.gl.environmentsList.EnvironmentsStore;
const filterState = state => environment => environment.state === state && environment; window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
// recursiveMap :: (Function, Array) -> Array propsData: {
const recursiveMap = (fn, arr) => arr.map((item) => { store: Store.create(),
if (item.children) {
const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
if (filteredChildren.length) {
item.children = filteredChildren;
return item;
}
}
return fn(item);
}).filter(Boolean);
gl.EnvironmentsListApp = new Vue({
el: '#environments-list-view',
components: {
item: gl.environmentsList.EnvironmentItem,
},
data: {
state: Store.state,
endpoint: environmentsListApp.dataset.environmentsDataEndpoint,
canCreateDeployment: environmentsListApp.dataset.canCreateDeployment,
canReadEnvironment: environmentsListApp.dataset.canReadEnvironment,
canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment,
projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath,
projectClosedEnvironmentsPath: environmentsListApp.dataset.projectClosedEnvironmentsPath,
newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
helpPagePath: environmentsListApp.dataset.helpPagePath,
loading: true,
visibility: 'available',
},
computed: {
filteredEnvironments() {
return recursiveMap(filterState(this.visibility), this.state.environments);
},
scope() {
return this.$options.getQueryParameter('scope');
},
canReadEnvironmentParsed() {
return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
},
canCreateDeploymentParsed() {
return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
},
}, },
init: Store.create.bind(Store),
created() {
gl.environmentsService = new EnvironmentsService(this.endpoint);
const scope = this.$options.getQueryParameter('scope');
if (scope) {
this.visibility = scope;
}
},
/**
* Fetches all the environmnets and stores them.
* Toggles loading property.
*/
ready() {
gl.environmentsService.all().then(resp => resp.json()).then((json) => {
Store.storeEnvironments(json);
this.loading = false;
});
},
/**
* Transforms the url parameter into an object and
* returns the one requested.
*
* @param {String} param
* @returns {String} The value of the requested parameter.
*/
getQueryParameter(parameter) {
return window.location.search.substring(1).split('&').reduce((acc, param) => {
const paramSplited = param.split('=');
acc[paramSplited[0]] = paramSplited[1];
return acc;
}, {})[parameter];
},
/**
* Converts permission provided as strings to booleans.
* @param {String} string
* @returns {Boolean}
*/
convertPermissionToBoolean(string) {
if (string === 'true') {
return true;
}
return false;
},
template: `
<div>
<div class="top-area">
<ul v-if="!isLoading" class="nav-links">
<li v-bind:class="{ 'active': scope === undefined}">
<a :href="projectEnvironmentsPath">
Available
<span class="badge js-available-environments-count">
{{state.availableCounter}}
</span>
</a>
</li>
<li v-bind:class="{ 'active': scope === 'stopped'}">
<a :href="projectClosedEnvironmentsPath">
Stopped
<span class="badge js-stopped-environments-count">
{{state.stoppedCounter}}
</span>
</a>
</li>
</ul>
<div v-if="canCreateEnvironment && !loading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
New envrionment
</a>
</div>
</div>
<div class="environments-container">
<div class="environments-list-loading text-center" v-if="loading">
<i class="fa fa-spinner spin"></i>
</div>
<div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
<h2 class="blank-state-title">
You don't have any environments right now.
</h2>
<p class="blank-state-text">
Environments are places where code gets deployed, such as staging or production.
<br />
<a :href="helpPagePath">
Read more about environments
</a>
<a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
New Environment
</a>
</p>
</div>
<div class="table-holder" v-if="!loading && state.environments.length > 0">
<table class="table ci-table environments">
<thead>
<th>Environment</th>
<th>Last deployment</th>
<th>Build</th>
<th>Commit</th>
<th></th>
<th class="hidden-xs"></th>
</thead>
<tbody>
<tr is="environment-item"
v-for="model in filteredEnvironments"
:model="model"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed">
</tbody>
</table>
</div>
</div>
</div>
`,
}); });
}); });
app/assets/javascripts/environments/stores/environmnets_store.js.es6 → app/assets/javascripts/environments/stores/environments_store.js.es6
View file @ 30c6a7d3
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
this.state.environments = []; this.state.environments = [];
this.state.stoppedCounter = 0; this.state.stoppedCounter = 0;
this.state.availableCounter = 0; this.state.availableCounter = 0;
return this;
}, },
/** /**
......
app/assets/javascripts/environments/vue_resource_interceptor.js.es6 0 → 100644
View file @ 30c6a7d3
/* eslint-disable */
Vue.http.interceptors.push((request, next) => {
Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
next(function (response) {
console.log("this is the repsponse", JSON.stringify(response, null, ' '));
if (typeof response.data === "string") {
response.data = JSON.parse(response.data)
}
Vue.activeResources--;
});
});
app/views/projects/environments/index.html.haml
View file @ 30c6a7d3
...@@ -15,6 +15,6 @@ ...@@ -15,6 +15,6 @@
"can-read-environment" => can?(current_user, :read_environment, @project), "can-read-environment" => can?(current_user, :read_environment, @project),
"can-create-environmnet" => can?(current_user, :create_environment, @project), "can-create-environmnet" => can?(current_user, :create_environment, @project),
"project-environments-path" => project_environments_path(@project), "project-environments-path" => project_environments_path(@project),
"project-closed-environments-path" => project_environments_path(@project, scope: :stopped), "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
"new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project), "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
"help-page-path" => help_page_path("ci/environments")}, class: container_class } "help-page-path" => help_page_path("ci/environments")}, class: container_class }
spec/features/environments_spec.rb
View file @ 30c6a7d3
...@@ -43,6 +43,10 @@ feature 'Environments', feature: true, js:true do ...@@ -43,6 +43,10 @@ feature 'Environments', feature: true, js:true do
context 'with environments' do context 'with environments' do
let(:resource) { create_list(:environment, 2) } let(:resource) { create_list(:environment, 2) }
before do
endpoint = namespace_project_environments_path(project.namespace, project)
stub_request(:any, endpoint).to_return(body: [{"name": "test"}])
end
scenario 'does show "Available" and "Stopped" tab with links' do scenario 'does show "Available" and "Stopped" tab with links' do
expect(page).to have_link('Stopped') expect(page).to have_link('Stopped')
......
spec/javascripts/environments/environment_actions_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require environments/components/environment_actions
describe('Actions Component', () => {
fixture.preload('environments/element.html');
beforeEach(() => {
fixture.load('environments/element.html');
});
it('Should render a dropdown with the provided actions', () => {
const actionsMock = [
{
name: 'bar',
play_url: 'https://gitlab.com/play',
},
{
name: 'foo',
play_url: '#',
},
];
const component = new window.gl.environmentsList.ActionsComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
actions: actionsMock,
},
});
expect(
component.$el.querySelectorAll('.dropdown-menu li').length
).toEqual(actionsMock.length);
expect(
component.$el.querySelector('.dropdown-menu li a').getAttribute('href')
).toEqual(actionsMock[0].play_url);
});
});
spec/javascripts/environments/environment_external_url_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require environments/components/environment_external_url
describe('External URL Component', () => {
fixture.preload('environments/element.html');
beforeEach(() => {
fixture.load('environments/element.html');
});
it('should link to the provided external_url', () => {
const externalURL = 'https://gitlab.com';
const component = new window.gl.environmentsList.ExternalUrlComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
external_url: externalURL,
},
});
expect(component.$el.getAttribute('href')).toEqual(externalURL);
expect(component.$el.querySelector('fa-external-link')).toBeDefined();
});
});
spec/javascripts/environments/environment_item_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require environments/components/environment_item
describe('Environment item', () => {
fixture.preload('environments/table.html');
beforeEach(() => {
fixture.load('environments/table.html');
});
describe('When item is folder', () => {
let mockItem;
let component;
beforeEach(() => {
mockItem = {
name: 'review',
children: [
{
name: 'review-app',
id: 1,
state: 'available',
external_url: '',
last_deployment: {},
created_at: '2016-11-07T11:11:16.525Z',
updated_at: '2016-11-10T15:55:58.778Z',
},
{
name: 'production',
id: 2,
state: 'available',
external_url: '',
last_deployment: {},
created_at: '2016-11-07T11:11:16.525Z',
updated_at: '2016-11-10T15:55:58.778Z',
},
],
};
component = new window.gl.environmentsList.EnvironmentItem({
el: document.querySelector('tr#environment-row'),
propsData: {
model: mockItem,
'can-create-deployment': false,
'can-read-environment': true,
},
});
});
it('Should render clickable folder icon and name', () => {
expect(document.querySelector('.folder-name').textContent).toContain(mockItem.name);
expect(document.querySelector('.folder-icon')).toBeDefined();
});
it('Should render the number of children in a badge', () => {
expect(document.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
});
it('Should not render any information other than the name', () => {
});
describe('when clicked', () => {
it('Should render child row', () => {
});
});
});
describe('when item is not folder', () => {
it('should render environment name', () => {
});
describe('With deployment', () => {
it('should render deployment internal id', () => {
});
it('should link to deployment', () => {
});
describe('With user information', () => {
it('should render user avatar with link to profile', () => {
});
});
describe('With build url', () => {
it('Should link to build url provided', () => {
});
it('Should render deployable name and id', () => {
});
});
describe('With commit information', () => {
it('should render commit component', () => {});
});
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', () => {
});
});
});
describe('With external URL', () => {
it('should render external url component', () => {
});
});
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', () => {
});
});
});
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', () => {
});
});
});
});
});
spec/javascripts/environments/environment_rollback_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require environments/components/environment_rollback
describe('Rollback Component', () => {
fixture.preload('environments/element.html');
const retryURL = 'https://gitlab.com/retry';
beforeEach(() => {
fixture.load('environments/element.html');
});
it('Should link to the provided retry_url', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retry_url: retryURL,
is_last_deployment: true,
},
});
expect(component.$el.getAttribute('href')).toEqual(retryURL);
});
it('Should render Re-deploy label when is_last_deployment is true', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retry_url: retryURL,
is_last_deployment: true,
},
});
expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
});
it('Should render Rollback label when is_last_deployment is false', () => {
const component = new window.gl.environmentsList.RollbackComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
retry_url: retryURL,
is_last_deployment: false,
},
});
expect(component.$el.querySelector('span').textContent).toContain('Rollback');
});
});
spec/javascripts/environments/environment_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= 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/environment_stop_spec.js.es6 0 → 100644
View file @ 30c6a7d3
//= require vue
//= require environments/components/environment_stop
describe('Stop Component', () => {
fixture.preload('environments/element.html');
beforeEach(() => {
fixture.load('environments/element.html');
});
it('should link to the provided URL', () => {
const stopURL = 'https://gitlab.com/stop';
const component = new window.gl.environmentsList.StopComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
stop_url: stopURL,
},
});
expect(component.$el.getAttribute('href')).toEqual(stopURL);
});
describe('When clicked', () => {
it('Should open popup with confirmation warning', () => {
const component = new window.gl.environmentsList.StopComponent({
el: document.querySelector('.test-dom-element'),
propsData: {
stop_url: '#',
},
});
const spy = spyOn(window, 'confirm');
component.$el.click();
expect(spy).toHaveBeenCalled();
});
});
});
spec/javascripts/fixtures/environments/element.html.haml 0 → 100644
View file @ 30c6a7d3
.test-dom-element
\ No newline at end of file
spec/javascripts/fixtures/environments/environments.html.haml 0 → 100644
View file @ 30c6a7d3
%div
#environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
"can-create-deployment" => "true",
"can-read-environment" => "true",
"can-create-environmnet" => "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",
"help-page-path" => "https://gitlab.com/help_page"}}
\ No newline at end of file
spec/javascripts/fixtures/environments/environments_no_permission.html.haml 0 → 100644
View file @ 30c6a7d3
%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
spec/javascripts/fixtures/environments/table.html.haml 0 → 100644
View file @ 30c6a7d3
%table
%thead
%tr
%th Environment
%th Last deployment
%th Build
%th Commit
%th
%th
%tbody
%tr#environment-row
spec/javascripts/vue_common_components/commit_spec.js.es6 0 → 100644
View file @ 30c6a7d3
/*= require vue_common_components/commit */
/* eslint-disable */
describe('Commit component', () => {
const getRenderedText = (Component, propsData) => {
const Constructor = Vue.extend(Component);
const vm = new Constructor({propsData}).$mount();
return vm.$el.textContent;
};
const MyComponent = window.gl.commitComponent;
describe('When `ref` is provided', () => {
const props = {
tag: true,
ref: {
name: 'master',
ref_url: 'http://localhost/namespace2/gitlabhq/tree/master'
},
commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
short_sha: 'b7836edd',
title: 'Commit message',
author: {
avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
web_url: 'https://gitlab.com/jschatz1',
username: 'jschatz1'
}
};
it('should render a tag icon if it represents a tag', () => {
const renderedText = getRenderedText(MyComponent, props);
});
it('should render a code-fork icon if it does not represent a tag', () => {
});
it('should render a link to the ref url', () => {
});
it('should render the ref name', () => {
});
});
});
it('should render the commit icon as an svg', () => {
});
it('should render the commit short sha with a link to the commit url', () => {
});
describe('Given commit title and author props', () => {
it('Should render a link to the author profile', () => {
});
it('Should render the author avatar with title and alt attributes', () => {
});
});
describe('When commit title is not provided', () => {
it('Should render default message', () => {
});
});
describe('Given no ref prop', () => {
it('Should render without errors', () => {
});
});
describe('Given no title prop', () => {
it('Should render without errors', () => {
});
});
describe('Given no author prop', () => {
it('Should render without errors', () => {
});
});
\ 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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7