Category Archives: AngularJS

AngularJS JavaScript

UTC dates handling in AngularJS applications

March 25, 2015 – 2:05 pm

Almost every developer sooner or later is facing issues with dates. It may be formatting, timezones, etc. I would like to describe few tips about dates handling in AngularJS applications.

Using date filter

If you know, that some model field is native date object you can tell Angular to display it as date in UTC timezone. This is important, because in Javascript native dates are always in user’s local timezone. This is usually helpful when we need to display dates received from REST services, which most often are in UTC.

{{ ::model.someDate | date : 'dd/MM/yyyy' : 'UTC'}}

Using ngModelOptions

Using ngModelOptions is very helpful when you need to create input and allow users to set some date. The issue here is that when user enters date for the first time, everything is fine. But after storing it in backend, and receiving it back as date in UTC, you can have issues with differences between dates. In order to fix that Angular (from 1.3.0) has ng-model-options directive.

 <input
	id="someDate"
	name="someDate"
	type="date"
	ng-model="someDate"                            
	ng-model-options="{timezone: 'UTC'}">

Creating new date in UTC

New Date object created by new Date() will be in local timezone. If you want to create Date object in UTC timezone, you can use following service (it requires moment.js):

'use strict';

angular.module('dates').service('UtcDate', [
  function() {
    var UtcDate = function() {

    };

    UtcDate.prototype.getCurrentMomentUTC = function() {
      var date = new Date();
      return moment.utc(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
    };

    return new UtcDate();
  }
]);
Tags , , , , | Permalink | Comments (4,017)
AngularJS JavaScript

AngularJS: testing keydown listener

January 26, 2015 – 7:56 am

Working with AngularJS is really great experience. This framework comes with many handy features. One of them is build-in support for unit testing. In this post I want to show how to test keydown event listener.

I was recently working on performing some action when user press ESC key. Basically implementation is easy:

angular.module('app').directive('handleEsc', [
  '$document',
  function (
    $document
  ) {
    var ESC_KEY_CODE = 27;

    return {
      scope: {
        handleEsc: '&'
      },
      link: function (scope, element, attrs) {
        /**
         * Create handler for keydown event
         */
        function escHandler (event) {
          if (event.keyCode === ESC_KEY_CODE) {
            scope.handleEsc();
          }
        }

        /**
         * Attach handler to event
         */
        $document.on('keydown', escHandler);

        /**
         * Clean on destroy
         */
        scope.$on('$destroy', function () {
          $document.off('keydown', escHandler);
        });
      }
    };
  }
]);

So what this code is doing? First of all it creates isolated scope with binding method from parent scope by using &. Then in link function it is defining handler for keydown event and attaching this to document. In such cases it is necessary to unregister listener when in order to prevent memory leakage and this is done on scope destroy event.

Now lets move to the interesting part!

Testing keydown

I was looking for solution for a really long time. Finally my more experienced friends helped me.

'use strict';

describe('Directive: handleEsc', function() {
  var scope;
  var $compile;
  var $document;

  beforeEach(angular.mock.module('app'));

  var element = null;
  /**
   * Lets call scope.close() method on ESC key event
   */
  var template = '<div handle-esc="close()"></div>';

  beforeEach(inject(function($injector) {
    $compile  = $injector.get('$compile');
    scope     = $injector.get('$rootScope').$new();
    $document = $injector.get('$document');
  }));

  beforeEach(function() {
    element = $compile(template)(scope);
    /**
     * Create method and spyOn it.
     */
    scope.close = function() {};
    spyOn(scope, 'close');
  });

  function triggerEscKeyDown() {
    /**
     * Create KeyboardEvent
     */
    var e = new window.KeyboardEvent('keydown', {
      bubbles: true,
      cancelable: true,
      shiftKey: true
    });

    /**
     * Assing 27 as keyCode
     */
    delete e.keyCode;
    Object.defineProperty(e, 'keyCode', {'value': 27});

    $document[0].dispatchEvent(e);
  }

  it('should call callback function when the event happens', function() {
    triggerEscKeyDown();
    expect(scope.close).toHaveBeenCalled();
  });

  it('deregisters on scope $destroy', function() {
    scope.$destroy();
    triggerEscKeyDown();
    expect(scope.close).not.toHaveBeenCalled();
  });

});

As you can see in this test I had to use native KeyboardEvent in order to test my directive. As was not able to find any other working example with test for keydown listener. If you know other solution please share in comments.

Tags , , , | Permalink | Comments (4,025)