client side unit test for dialog

client/core/src/dialog/dialog.js

@@ -20,13 +20,13 @@ export default class Dialog extends Component {
      */
     show() {
         let style = this.dialog.style;
-        let screenMargin = 20;
-
         let window = this.window;
         let innerWidth = window.innerWidth;
         let innerHeight = window.innerHeight;
         let width = this.dialog.offsetWidth;
         let height = this.dialog.offsetHeight;
+        let screenMargin = 20;
+        let dblMargin = screenMargin * 2;
 
         if (width + screenMargin > innerWidth) {
             width = innerWidth - dblMargin;
@@ -37,10 +37,8 @@ export default class Dialog extends Component {
             style.height = height + 'px';
         }
 
-        this.keypressHandler =
+        this.keypressHandler = event => this.onKeypress(event);
-            event => this.onKeypress(event);
+        this.document.addEventListener('keypress', this.keypressHandler);
-        this.document.addEventListener('keypress',
-            this.keypressHandler);
         this.element.style.display = 'block';
 
         if (this.onOpen)
@@ -68,12 +66,12 @@ export default class Dialog extends Component {
 
     realHide() {
         this.element.style.display = 'none';
-        this.document.removeEventListener('keypress',
+        this.document.removeEventListener('keypress', this.keypressHandler);
-            this.keypressHandler);
         this.lastEvent = null;
     }
 
     onButtonClick(event) {
+        console.log(event);
         let buttonBar = this.element.querySelector('.button-bar');
         let buttons = buttonBar.querySelector('tpl-buttons');
         let node = event.target;
@@ -111,8 +109,8 @@ module.component('vnDialog', {
         tplButtons: 'tplButtons'
     },
     bindings: {
-        onOpen: '&',
+        onOpen: '&?',
-        onResponse: '&'
+        onResponse: '&?'
     },
     controller: Dialog
 });

client/core/src/dialog/dialog.spec.js

@@ -0,0 +1,91 @@
+import './dialog.js';
+
+describe('Component vnDialog', () => {
+    let $componentController;
+    let $element;
+
+    beforeEach(() => {
+        angular.mock.module('client');
+    });
+
+    beforeEach(angular.mock.inject(_$componentController_ => {
+        $componentController = _$componentController_;
+        $element = angular.element('<div></div>');
+    }));
+
+    describe('show()', () => {
+        it(`should define keypressHandler function, call addEventListener function and define element.style.display to block then call onOpen function`, () => {
+            window.innerHeight = 600;
+            window.innerWidth = 800;
+            let controller = $componentController('vnDialog', {$element}, {onOpen: () => {}, dialog: {style: {}, offsetWidth: 780, offsetHeight: 581}});
+            spyOn(controller.document, 'addEventListener');
+            spyOn(controller, 'onOpen');
+            controller.show();
+
+            expect(controller.keypressHandler).toBeDefined();
+            expect(controller.document.addEventListener).toHaveBeenCalledWith('keypress', controller.keypressHandler);
+            expect(controller.element.style.display).toEqual('block');
+            expect(controller.onOpen).toHaveBeenCalledWith();
+        });
+
+        it(`should define keypressHandler function, call addEventListener function and define element.style.display to block and never call onOpen function`, () => {
+            window.innerHeight = 600;
+            window.innerWidth = 800;
+            let controller = $componentController('vnDialog', {$element}, {dialog: {style: {}, offsetWidth: 781, offsetHeight: 581}});
+            spyOn(controller.document, 'addEventListener');
+            controller.show();
+
+            expect(controller.keypressHandler).toBeDefined();
+            expect(controller.document.addEventListener).toHaveBeenCalledWith('keypress', controller.keypressHandler);
+            expect(controller.element.style.display).toEqual('block');
+            expect(controller.onOpen).not.toBeDefined();
+        });
+    });
+
+    describe('hide()', () => {
+        it(`should call fireResponse() and realHide()`, () => {
+            let controller = $componentController('vnDialog', {$element});
+            spyOn(controller, 'fireResponse');
+            spyOn(controller, 'realHide');
+            controller.hide();
+
+            expect(controller.fireResponse).toHaveBeenCalledWith();
+            expect(controller.realHide).toHaveBeenCalledWith();
+        });
+    });
+
+    describe('fireResponse()', () => {
+        it(`should return cancel as false`, () => {
+            let controller = $componentController('vnDialog', {$element});
+            let result = controller.fireResponse('I am the answer!');
+
+            expect(controller.onResponse).not.toBeDefined();
+            expect(result).toEqual(false);
+        });
+
+        it(`should return onResponse()`, () => {
+            let text = 'I am the answer!';
+            let controller = $componentController('vnDialog', {$element}, {onResponse: () => {
+                return {response: text};
+            }});
+            let result = controller.fireResponse(text);
+
+            expect(result.response).toEqual(text);
+        });
+    });
+
+    describe('realHide()', () => {
+        it(`should set element.style.display and lastEvent properties and call removeEvenListener()`, () => {
+            let controller = $componentController('vnDialog', {$element});
+            spyOn(controller.document, 'removeEventListener');
+
+            expect(controller.element.style.display).not.toEqual('none');
+            expect(controller.lastEvent).not.toBeDefined();
+            controller.realHide();
+
+            expect(controller.element.style.display).toEqual('none');
+            expect(controller.document.removeEventListener).toHaveBeenCalledWith('keypress', controller.keypressHandler);
+            expect(controller.lastEvent).toEqual(null);
+        });
+    });
+});