單元測試與茉莉花敲除綁定處理程序

Question

我已經創建了一個綁定處理程序，它依賴於用於格式化日期的時刻。我想用Jasmine單元測試這個綁定處理程序。

下面是我的結合處理代碼：

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 
    }; 
}); 

我如下創建我的規格文件：

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); 
      }); 
     }); 
    }); 
}); 

不知道從哪裏開始測試，需要進行測試哪些部分。

Answer 1

檢查了它們如何對單元測試自定義綁定的敲除規範。

他們使用javascript動態創建元素，並將KO綁定爲其中一個。

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('-'); 
      }); 
     }); 
    }); 
});