Skip to content

G
gitlab-ce
Commit 5cfe92da authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Jacob Schatz
Browse files
Options

Adds tests for empty state

parent dca25122
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 33 deletions
app/assets/javascripts/environments/components/deploy_board_component.js.es6
View file @ 5cfe92da
...@@ -117,6 +117,10 @@ module.exports = { ...@@ -117,6 +117,10 @@ module.exports = {
return !this.isLoading && !this.hasError && !this.deployBoardData.valid; return !this.isLoading && !this.hasError && !this.deployBoardData.valid;
}, },
canRenderErrorState() {
return !this.isLoading && this.hasError;
},
instanceTitle() { instanceTitle() {
let title; let title;
...@@ -157,8 +161,7 @@ module.exports = { ...@@ -157,8 +161,7 @@ module.exports = {
<template v-for="instance in deployBoardData.instances"> <template v-for="instance in deployBoardData.instances">
<instance-component <instance-component
:status="instance.status" :status="instance.status"
:tooltipText="instance.tooltip"> :tooltipText="instance.tooltip"/>
</instance-component>
</template> </template>
</div> </div>
</section> </section>
...@@ -184,33 +187,7 @@ module.exports = { ...@@ -184,33 +187,7 @@ module.exports = {
<div v-if="canRenderEmptyState"> <div v-if="canRenderEmptyState">
<section class="deploy-board-empty-state-svg"> <section class="deploy-board-empty-state-svg">
<svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg"> <svg width="55" height="44" viewBox="0 0 55 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(1.488 .803)"><rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/><rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/><rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/><rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/><rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/><rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/><rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/><rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/><rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/><rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/></g><g transform="rotate(-45 33.371 -12.99)"><ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/><path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/><rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/></g></g></svg>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1.488 .803)">
<rect stroke="#E5E5E5" stroke-width="1.6" fill="#FFF" width="42" height="42" rx="4"/>
<rect stroke="#E7E7E7" stroke-width="1.6" fill="#FFF" x="6" y="12" width="7.171" height="24" rx="2"/>
<rect stroke="#B5A7DD" stroke-width="1.6" fill="#FFF" x="6" y="5" width="32.17" height="3.5" rx="1.75"/>
<rect stroke="#FDE5D8" stroke-width="1.6" fill="#FFF" x="17" y="12" width="21.17" height="24" rx="2"/>
<rect fill="#E52C5A" x="19.74" y="14.197" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="28.35" y="18.272" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="19.74" y="26.697" width="15.943" height="2.408" rx="1.204"/>
<rect fill="#E5E5E5" x="19.74" y="30.697" width="15.943" height="2.408" rx="1.204"/>
<rect fill="#E52C5A" x="21.911" y="21.272" width="4.78" height="2.408" rx="1.204"/>
<rect fill="#FC8A51" x="28.472" y="22.429" width="7.171" height="2.408" rx="1.204"/>
<rect fill="#FDE5D8" x="26.691" y="8.429" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#FF8340" x="8.512" y="14.85" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#E52C5A" x="8.512" y="19.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#FF8340" x="8.512" y="31.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#E7E7E7" x="8.512" y="27.197" width="2.39" height="2.408" rx="1.195"/>
<rect fill="#B5A7DD" x="8.512" y="23.197" width="2.39" height="2.408" rx="1.195"/>
</g>
<g transform="rotate(-45 33.371 -12.99)">
<ellipse stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".1" fill="#FFF" cx="11.951" cy="12.041" rx="11.951" ry="12.041"/>
<path d="M5.536 22.29c5.716 3.3 13.046 1.307 16.37-4.452 3.326-5.759 1.387-13.103-4.329-16.403" stroke="#6B4FBB" stroke-width="3.2" fill-opacity=".3" fill="#FFF"/>
<rect fill="#6B4FBB" x="9.561" y="23.279" width="4.78" height="13.646" rx="2.39"/>
</g>
</g>
</svg>
</section> </section>
<section class="deploy-board-empty-state-text"> <section class="deploy-board-empty-state-text">
...@@ -222,7 +199,7 @@ module.exports = { ...@@ -222,7 +199,7 @@ module.exports = {
</section> </section>
</div> </div>
<div v-if="!isLoading && hasError" class="deploy-board-error-message"> <div v-if="canRenderErrorState" class="deploy-board-error-message">
We can't fetch the data right now. Please try again later. We can't fetch the data right now. Please try again later.
</div> </div>
</div> </div>
......
spec/javascripts/environments/deploy_board_component_spec.js.es6
View file @ 5cfe92da
const Vue = require('vue'); const Vue = require('vue');
const DeployBoard = require('~/environments/components/deploy_board_component'); const DeployBoard = require('~/environments/components/deploy_board_component');
const Service = require('~/environments/services/environments_service'); const Service = require('~/environments/services/environments_service');
const { deployBoardMockData } = require('./mock_data'); const { deployBoardMockData, invalidDeployBoardMockData } = require('./mock_data');
describe('Deploy Board', () => { describe('Deploy Board', () => {
let DeployBoardComponent; let DeployBoardComponent;
...@@ -77,6 +77,46 @@ describe('Deploy Board', () => { ...@@ -77,6 +77,46 @@ describe('Deploy Board', () => {
}); });
}); });
describe('successfull request without valid data', () => {
const deployBoardInterceptorInvalidData = (request, next) => {
next(request.respondWith(JSON.stringify(invalidDeployBoardMockData), {
status: 200,
}));
};
let component;
beforeEach(() => {
Vue.http.interceptors.push(deployBoardInterceptorInvalidData);
this.service = new Service('environments');
component = new DeployBoardComponent({
propsData: {
store: {},
service: new Service('environments'),
deployBoardData: invalidDeployBoardMockData,
environmentID: 1,
endpoint: 'endpoint',
},
}).$mount();
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, deployBoardInterceptorInvalidData,
);
});
it('should render the empty state', (done) => {
setTimeout(() => {
expect(component.$el.querySelector('.deploy-board-empty-state-svg svg')).toBeDefined();
expect(component.$el.querySelector('.deploy-board-empty-state-text .title').textContent).toContain('Kubernetes deployment not found');
done();
}, 0);
});
});
describe('unsuccessfull request', () => { describe('unsuccessfull request', () => {
const deployBoardErrorInterceptor = (request, next) => { const deployBoardErrorInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({}), { next(request.respondWith(JSON.stringify({}), {
...@@ -108,7 +148,7 @@ describe('Deploy Board', () => { ...@@ -108,7 +148,7 @@ describe('Deploy Board', () => {
it('should render empty state', (done) => { it('should render empty state', (done) => {
setTimeout(() => { setTimeout(() => {
expect(component.$el.children.length).toEqual(0); expect(component.$el.children.length).toEqual(1);
done(); done();
}, 0); }, 0);
}); });
......
spec/javascripts/environments/mock_data.js.es6
View file @ 5cfe92da
...@@ -120,7 +120,15 @@ const deployBoardMockData = { ...@@ -120,7 +120,15 @@ const deployBoardMockData = {
abort_url: 'url', abort_url: 'url',
rollback_url: 'url', rollback_url: 'url',
completion: 100, completion: 100,
is_completed: true, valid: true,
};
const invalidDeployBoardMockData = {
instances: [],
abort_url: 'url',
rollback_url: 'url',
completion: 100,
valid: false,
}; };
module.exports = { module.exports = {
...@@ -128,4 +136,5 @@ module.exports = { ...@@ -128,4 +136,5 @@ module.exports = {
environment, environment,
serverData, serverData,
deployBoardMockData, deployBoardMockData,
invalidDeployBoardMockData,
}; };
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