驗證Angular單元測試中的ng-pattern

我有以下一段HTML，它是通過switch case動態加載的。沒有必要爲此創建單獨的指令，因此我們決定這樣做。驗證Angular單元測試中的ng-pattern

<li ng-form="form"> 
    <input name="number" type="number" ng-model="selectedCriterion.valueFrom" ng-pattern="selectedCriterion.regexPattern"> 
</li>

用下面的單元測試

describe('form', function() { 
    rootScope.selectedCriterion = { regexPattern: '[0-5]+' }; 

    it('allows numbers to be filled in the input field', function() { 
     var compiledElement = $compile(html)(rootScope); 
     rootScope.$apply();  
     var form = rootScope.form; 
     var inputElement = compiledElement.find('input[name="number"]'); 

     inputElement.val(4).triggerHandler('input'); 
     rootScope.$digest(); 

     expect(inputElement.val()).toEqual('4'); 
     expect(form.$valid).toEqual(true); 

     inputElement.val(8).triggerHandler('input'); 
     rootScope.$digest(); 

     expect(inputElement.val()).toEqual('8'); 
     expect(form.$valid).toEqual(false); 
    }); 
});

我想這樣做是在單元測試測試NG模式，沒有在E2E測試水平。測試在最後的期望

expect(form.$valid).toEqual(false);

失敗似乎形式無法驗證自己在這個層面上，即使我編譯我的HTML和調用$手動消化週期。

我在做什麼錯？我可以驗證此級別的表單嗎？

編輯：我已經深入搜索了StackOverflow和Google，但沒有成功。

來源

2016-08-12 JordyV

您需要提供更多信息（例如，哪些期望失敗，指令中是否包含此html等） – vbuhlev

我發現了這個問題。就像vbuhlev說的，我的代碼起作用了，但其原因並不適合我，首先是因爲我在輸入元素上有一個額外的屬性，因爲我認爲這並不重要。我的實際輸入元素有一個反跳選項：

<input name="number" type="number" ng-model="selectedCriterion.valueFrom" ng-pattern="selectedCriterion.regexPattern" ng-model-options="{debounce: 200}" >

噶沒有默認考慮到這一點，看到自己的狀態是「有效的」，而無需等待防抖完成並剛去上。我

$timeout.flush()

解決了這個沖洗是仍在進行的任何任務，這檢查表格的有效性的前立即執行反跳。

狗屎現在順利運行他媽的！

來源

2016-08-17 13:48:00 JordyV

您的代碼是正確的！

我已經嘗試過你的測試孤立，它的工作原理。基本上它和你的一樣。

'use strict'; 

describe('form', function() { 

    it('allows numbers to be filled in the input field', inject(function($compile, $rootScope) { 
     var html = '<li ng-form="form">' 
      + '<input name="number" type="number" ng-model="selectedCriterion.valueFrom" ng-pattern="selectedCriterion.regexPattern">' 
      + '</li>'; 

     $rootScope.selectedCriterion = { regexPattern: '[0-5]+' }; 
     var rootScope = $rootScope; 

     var compiledElement = $compile(html)(rootScope); 
     rootScope.$apply();  
     var form = rootScope.form; 
     var inputElement = compiledElement.find('input[name="number"]'); 

     inputElement.val(4).triggerHandler('input'); 
     rootScope.$digest(); 

     expect(inputElement.val()).toEqual('4'); 
     expect(form.$valid).toEqual(true); 

     inputElement.val(8).triggerHandler('input'); 
     rootScope.$digest(); 

     expect(inputElement.val()).toEqual('8'); 
     expect(form.$valid).toEqual(false); 
    })); 
});

你有其他一些破壞事情的代碼。你需要提供更多的上下文。

來源

2016-08-12 15:09:18 vbuhlev

驗證Angular單元測試中的ng-pattern

回答

相關問題