Unit Testing Knockout-Handler mit Jasmine

Question

Ich habe einen Bindungs-Handler abhängig von Moment erstellt, die für die Formatierung des Datums verwendet wird. Ich wollte diesen Bindungshandler mit Jasmine testen.

Unten ist mein Bindungs ​​Handler-Code:

define(['knockout', 'moment'], function (ko, moment) { 

    'use strict'; 
    ko.bindingHandlers.date = { 
     update: function (element, dateValue, allBindings) { 
      var date = ko.utils.unwrapObservable(dateValue()) || '-', 
       format = allBindings.get('format'), 
       formattedDate = function() { 
        return moment(date).format(format); 
       }; 
      ko.bindingHandlers.text.update(element, formattedDate); 
     } 
    }; 

    return { 
     dateBinding: ko.bindingHandlers.date 
    }; 
}); 

I wie unten meine Spec-Datei erschaffe:

define(['testUtils', 'jquery', 'knockout'], function (testUtils, $, ko) { 

    'use strict'; 
    ddescribe('utils/date.binding', function() { 

     var testee; 

     beforeEach(function (done) { 
      testUtils.loadWithCurrentStubs('utils/date.binding', function (dateUtils) { 
       testee = dateUtils; 
       done(); 
      }); 
     }); 

     afterEach(function() { 
      testUtils.reset(); 
     }); 

     describe('ko.bindingHandlers.date', function() { 
      var element = document.createElement(); 

      it('should be true', function() { 
       expect(true).toBe(true); 
      }); 
     }); 
    }); 
}); 

Nicht sicher, wo Tests beginnen und was muss Teile getestet werden.

Answer 1

Überprüft die Knockout-Spezifikationen, wie sie die benutzerdefinierten Bindungen Einheit testen.

Sie erstellen die Elemente dynamisch mit Javascript und wenden KO-Bindungen an.

define(['testUtils', 'knockout', 'moment', 'utils/date.binding'], function (testUtils, ko, moment) { 

    'use strict'; 
    ddescribe('utils/date.binding', function() { 

     var testee, 
      targetElement, 
      dateValue; 

     beforeEach(function (done) { 
      testUtils.loadWithCurrentStubs('utils/date.binding', function (dateUtils) { 
       testee = dateUtils; 
       done(); 
      }); 
     }); 

     afterEach(function() { 
      testUtils.reset(); 
     }); 

     function createTestNode() { 
      targetElement = document.createElement('div'); 
      targetElement.innerHTML = '<div id="dateBindingElement" data-bind="date: dateValue, format: \'DD MMM YYYY\'"></div>'; 
      document.body.appendChild(targetElement); 
     } 

     function deleteTestNode() { 
      var element = document.getElementById("dateBindingElement"); 
      element.parentNode.removeChild(element); 
     } 

     describe('ko.bindingHandlers.date', function() { 

      beforeEach(createTestNode); 
      afterEach(deleteTestNode); 

      it('should take an observable date 02-01-2017 and format it to DD MMM YYYY format - 01 Feb 2017', function() { 
       dateValue = ko.observable('02-01-2017'); 
       ko.applyBindings({dateValue: dateValue}, targetElement); 
       expect(document.getElementById('dateBindingElement').innerHTML).toBe('01 Feb 2017'); 
      }); 

      it('should take a string date 02-01-2017 and format it to DD MMM YYYY format - 01 Feb 2017', function() { 
       dateValue = '02-01-2017'; 
       ko.applyBindings({dateValue: dateValue}, targetElement); 
       expect(document.getElementById('dateBindingElement').innerHTML).toBe('01 Feb 2017'); 
      }); 

      it('should take any date (string or observable) and conver it to requested format. 02-01-2017 to MM DD YY', function() { 
       dateValue = '02-01-2017'; 

       targetElement.innerHTML = '<div id="dateBindingElement" data-bind="date: dateValue, format: \'MM-DD-YY\'"></div>'; 
       document.body.appendChild(targetElement); 

       ko.applyBindings({dateValue: dateValue}, targetElement); 
       expect(document.getElementById('dateBindingElement').innerHTML).toBe('02-01-17'); 
      }); 

      it('should return - if the date value is null or undefiled or blank', function() { 
       dateValue = ''; 
       ko.applyBindings({dateValue: dateValue}, targetElement); 
       expect(document.getElementById('dateBindingElement').innerHTML).toBe('-'); 
      }); 
     }); 
    }); 
});