jquery.worldClock.js

(function($){
  $.worldClock = function(clockElement, opts) {
    var settings =$.extend( {}, $.worldClock.defaults, opts, getMetadata(clockElement));
    return setInterval((function() {
      updateClock(clockElement, settings);
      return arguments.callee;
    })(), settings.interval);
  };
  
  $.worldClock.defaults = {
    interval: 5000,
    timeZoneId: 'local',
    zuluOffset: 0,
    days: new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    newDate: function() { return new Date(); }
  };

  $.fn.worldClock = function(opts) {
    return this.each(function() {
      var $this = $(this);
      if ($this.data('worldClockIntervalId')) clearInterval($this.data('worldClockIntervalId'));
      $this.data('worldClockIntervalId', $.worldClock(this, opts));
    });
  };
  
  function updateClock(clockElement, settings) {
    $(clockElement).html(formatTime(calculateTime(settings), settings.days));
  };
  
  function formatTime(currentDate, days) {
    return formatHours(currentDate) + ':' + formatMinutes(currentDate) + ' ' + days[currentDate.getDay()];
  };
  
  function formatHours(currentDate) {
    return addLeadingZeros(currentDate.getHours());
  };
  
  function formatMinutes(currentDate) {
    return addLeadingZeros(currentDate.getMinutes());
  };
  
  function addLeadingZeros(num) {
    return (num < 10) ? "0" + num : num;
  };
  
  function getAdjustTimeForOffset(settings) {
    var date = settings.newDate();
    var minutesOffset = (60 * settings.zuluOffset) + date.getTimezoneOffset();
    date.setMinutes(date.getMinutes() + minutesOffset);
    return date;
  };
  
  function calculateTime(settings) {
    return (settings.timeZoneId != 'local') ? getAdjustTimeForOffset(settings) : settings.newDate();
  };

  function getMetadata(element) {
    return $.metadata ? $(element).metadata() : {};
  };
})(jQuery);

tests.js

jasmine.include("../WebContent/javascripts/jquery.worldClock.js", true);

describe('worldClock', function() {
  beforeEach(function() {
    this.testArea = jQuery('#testArea');
    this.testArea.html('');
  });
  
  describe('#defaults', function(){
    it('should have an interval of 5000ms', function() {
      expect(jQuery.worldClock.defaults.interval).toEqual(5000);
    });
    
    it('should have a timeZoneId of "local"', function() {
      expect(jQuery.worldClock.defaults.timeZoneId).toEqual('local');
    });
    
    it('should have a zuluOffset of 0', function() {
      expect(jQuery.worldClock.defaults.zuluOffset).toEqual(0);
    });
    
    it('should have all the days abbreviated to three characters', function() {
      expect(jQuery.worldClock.defaults.days).toEqual(new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"));
    });
    
    it('should have newDate create a default new Date', function() {
      expect(jQuery.worldClock.defaults.newDate.toString()).toEqual(function(){ return new Date(); }.toString());
    });
  });
  
  describe('#worldClock', function() {
    beforeEach(function(){
      runs(function() {
        jQuery.worldClock.defaults.interval = 15;
        this.testDate = new Date();
        this.testDate.setHours(10);
        this.testDate.setMinutes(10);
        var closureDate = this.testDate;
        jQuery.worldClock.defaults.newDate = function() {
          var localDate = new Date(closureDate);
          closureDate.setMinutes(closureDate.getMinutes()+1);
          return localDate;
        };
        this.intervalId = jQuery.worldClock(this.testArea, {});
      });
    });
    
     afterEach(function(){ clearInterval(this.intervalId); });
    
    it('should return the interval id so it can be cancelled', function(){
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
        clearInterval(this.intervalId);
      });
    
      waits(16);
    
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    });
    
    it('should set the interval for updating the clock', function() {
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    
      waits(16);
    
      runs(function() {
        expect(this.testArea.html()).toEqual("10:11 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    });
  });
  
  describe('#fn#worldClock', function() {
    beforeEach(function(){
      runs(function() {
        jQuery.worldClock.defaults.interval = 15;
        this.testDate = new Date();
        this.testDate.setHours(10);
        this.testDate.setMinutes(10);
        var closureDate = this.testDate;
        jQuery.worldClock.defaults.newDate = function() {
          var localDate = new Date(closureDate);
          closureDate.setMinutes(closureDate.getMinutes()+1);
          return localDate;
        };
        this.testArea.worldClock();
      });
    });
    
    afterEach(function(){ clearInterval(this.testArea.data('worldClockIntervalId')); });
    
    it('should get a new interval if on existed', function() {
      expect(this.testArea.data('worldClockIntervalId')).toNotEqual(this.testArea.worldClock().data('worldClockIntervalId'));
    });
    
    it('should set the interval id on the object so it can be cancelled', function(){
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
        clearInterval(this.testArea.data('worldClockIntervalId'));
      });
    
      waits(16);
    
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    });
    
    it('should set the interval for updating the clock', function() {
      runs(function() {
        expect(this.testArea.html()).toEqual("10:10 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    
      waits(16);
    
      runs(function() {
        expect(this.testArea.html()).toEqual("10:11 " + jQuery.worldClock.defaults.days[this.testDate.getDay()]);
      });
    });
  });
});