#478 dialog Front unit test
This commit is contained in:
parent
bd38d07af4
commit
8d79298d92
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue