ユニットテストノックアウトバインディングハンドラー（ジャスミン付き）

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

私は以下のように私のspecファイルを作成しています：

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バインディングを1つ適用します。ノックアウトは、独自のデフォルトのバインディングをテストする方法

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