#478 dialog Front unit test

This commit is contained in:
Carlos Jimenez 2018-08-30 08:16:50 +02:00
parent bd38d07af4
commit 8d79298d92
2 changed files with 60 additions and 26 deletions

View File

@ -25,12 +25,15 @@ export default class Dialog extends Component {
}, null, 'buttons');
}
}
set body(value) {
this.element.querySelector('.body').appendChild(value);
}
set buttons(value) {
this.element.querySelector('.buttons').appendChild(value);
}
/**
* Displays the dialog to the user.
*/
@ -48,6 +51,7 @@ export default class Dialog extends Component {
let firstFocusable = this.element.querySelector('input, textarea');
if (firstFocusable) firstFocusable.focus();
}
/**
* Hides the dialog calling the response handler.
*/
@ -55,6 +59,7 @@ export default class Dialog extends Component {
this.fireResponse();
this.realHide();
}
/**
* Calls the response handler.
*
@ -67,15 +72,16 @@ export default class Dialog extends Component {
cancel = this.onResponse({response: response});
return cancel;
}
realHide() {
if (!this.shown) return;
this.element.style.display = 'none';
this.document.removeEventListener('keydown', this.keyDownHandler);
this.lastEvent = null;
this.shown = false;
this.transitionTimeout =
setTimeout(() => this.$element.removeClass('shown'), 30);
this.transitionTimeout = setTimeout(() => this.$element.removeClass('shown'), 30);
}
onButtonClick(event) {
let buttons = this.element.querySelector('.buttons');
let tplButtons = buttons.querySelector('tpl-buttons');
@ -89,17 +95,21 @@ export default class Dialog extends Component {
let cancel = this.fireResponse(response);
if (cancel !== false) this.realHide();
}
onDialogMouseDown(event) {
this.lastEvent = event;
}
onBackgroundMouseDown(event) {
if (event != this.lastEvent)
this.hide();
}
onkeyDown(event) {
if (event.keyCode == 27) // Esc
this.hide();
}
$onDestroy() {
clearTimeout(this.transitionTimeout);
}

View File

@ -10,44 +10,68 @@ describe('Component vnDialog', () => {
beforeEach(angular.mock.inject(_$componentController_ => {
$componentController = _$componentController_;
$element = angular.element('<vn-dialog></vn-dialog>');
controller = $componentController('vnDialog', {$element: $element, $transclude: null});
controller = $componentController('vnDialog', {$element, $transclude: null});
controller.onOpen = jasmine.createSpy('onOpen');
}));
describe('show()', () => {
it(`should handle escape keypress event, define element.style.display to not none and call onOpen function`, () => {
window.innerHeight = 600;
window.innerWidth = 800;
controller.dialog = {style: {display: 'none'}};
controller.onOpen = () => {};
spyOn(controller, 'onOpen');
it(`should do nothing if controller.shown is defined`, () => {
controller.element = {style: {display: 'none'}};
controller.shown = true;
controller.show();
expect(controller.element.style.display).not.toEqual('none');
expect(controller.element.style.display).toEqual('none');
expect(controller.onOpen).not.toHaveBeenCalledWith();
});
it(`should set shown on the controller, set style.display on the element and call onOpen()`, () => {
controller.show();
expect(controller.element.style.display).toEqual('flex');
expect(controller.shown).toBeTruthy();
expect(controller.onOpen).toHaveBeenCalledWith();
});
});
describe('hide()', () => {
it(`should call onResponse()`, () => {
controller.onResponse = () => {};
spyOn(controller, 'onResponse');
controller.hide();
describe('fireResponse()', () => {
it(`should call onResponse() if it's defined in the controller`, () => {
controller.onResponse = () => {};
spyOn(controller, 'onResponse');
controller.hide();
expect(controller.onResponse).toHaveBeenCalled();
expect(controller.onResponse).toHaveBeenCalledWith(jasmine.any(Object));
});
it(`should call onResponse() with a response`, () => {
let responseRes;
controller.onResponse = response => {
responseRes = response;
return false;
};
let responseRet = controller.fireResponse('answer');
expect(responseRes).toEqual({response: 'answer'});
expect(responseRet).toEqual(false);
});
});
});
describe('fireResponse()', () => {
it(`should call onResponse()`, () => {
let responseRes;
controller.onResponse = response => {
responseRes = response;
return false;
};
let responseRet = controller.fireResponse('answer');
describe('realHide()', () => {
it(`should do nothing if controller.shown is not defined`, () => {
controller.element = {style: {display: 'not none'}};
controller.hide();
expect(responseRes).toEqual({response: 'answer'});
expect(responseRet).toEqual(false);
expect(controller.element.style.display).toEqual('not none');
});
it(`should set lastEvent, shown and element.style.display to their expected values`, () => {
controller.shown = true;
controller.hide();
expect(controller.lastEvent).toBeFalsy();
expect(controller.shown).toBeFalsy();
expect(controller.element.style.display).toEqual('none');
});
});
});
});