從指令測試隔離範圍的屬性

Question

我已經檢查過this Q &與指令相關的隔離範圍幫助我解析測試使用'@'屬性的屬性;但我發現使用'='屬性測試屬性很困難。

考慮（從打電話給我的指令即將到來的）：使用isolateScope()功能，像這樣

return { 
     restrict: 'A', 
     link: link, 
     scope: { 
      upcoming: '@', 
      patientDetails: '=' 
     } 
    }; 

在我的測試爲upcoming我可以訪問它（從角1.2起）：

elm = angular.element('<div upcoming="remembered" patient-details="patientDetails"></div>'); 

    // Compiles the directive and links it to the scope 
    $compile(elm)(scope); 
    scope.$digest(); 
    isolateScope = elm.isolateScope(); 

而且在測試中，我可以這樣做：

it("should have attribute 'upcoming' attached to isolate scope", function() { 
    expect(isolateScope.upcoming).toBeDefined(); 
    expect(isolateScope.upcoming).toBe('remembered'); 
}); 

但是如果我a以與獲得undefined錯誤相同的方式處理其他屬性。那麼我想這：

// Retrieve the target html - remembered.html 
beforeEach(inject(function ($compile) { 
    patient = { 
     name: 'Lorem Ipsum', 
     readyForRefill: 1, 
     progressCount: 2, 
     upcomingCount: 3, 
     taggedCount: 4, 
     expiringCount: 5, 
     oneRefillRemaining: 9000 
    }; 
    elm = angular.element('<div upcoming="remembered" patient-details="patient"></div>'); 

    // Compiles the directive and links it to the scope 
    $compile(elm)(scope); 
    scope.$digest(); 
    isolateScope = elm.isolateScope(); 
    isolateScope.patientDetails = patient; 
})); 

測試：

it("should have attribute 'patientDetails' attached to isolate scope", function() { 
    expect(isolateScope.patientDetails).toBeDefined(); 
}); 

傳球，但我覺得這是測試錯誤的事情。

任何人都可以澄清這一點嗎？

編輯

做什麼tasseKATT提示解決了這個問題，但沒有發生破壞其他5次測試。這些測試基本上檢查了正在加載的實際模板並確定了它們具有的內容。例如：

it("ul should contain 4 li", function() { 
    var li = elm.find('li'); 
    expect(li.length).toBe(4); 
}); 

不再有效作爲elm元素現在是<div upcoming="remembered" patient-details="patient"></div> HTML而不是在一個通過模板裝：

<p><a href=""><b>Sign in</b></a> to view your full <br>prescription statuses.</p> 
<ul> 
    <li><span>{{patientDetails.readyForRefill}}</span> Prescriptions Ready for Refill</li> 
    <li><span>{{patientDetails.readyForRefill}}</span> ReadyFill<sup>&#174;</sup> 
    <li><span>{{patientDetails.expiringCount}}</span> Expiring Prescriptions</li> 
    <li><span>{{patientDetails.oneRefillRemaining}}</span> Prescriptions with 1 Refill Left</li> 
</ul> 

有沒有去正確加載兩者兼而有之？雖然值得注意的是，取決於誰登錄，模板會發生變化，因此會導致計數與測試無關的div和p標籤。

感謝

Answer 1

如果你想確保指令的範圍被傳遞正確的病人信息的對象，你應該把它的範圍元素被編譯之前。然後，您可以通過isolateScope()檢索它並執行驗證。

例如：

elm = angular.element('<div upcoming="remembered" patient-details="patient"></div>'); 

scope = $rootScope.$new(); 

scope.patient = { 
    name: 'Lorem Ipsum', 
    readyForRefill: 1, 
    progressCount: 2, 
    upcomingCount: 3, 
    taggedCount: 4, 
    expiringCount: 5, 
    oneRefillRemaining: 9000 
}; 

$compile(elm)(scope); 
isolateScope = elm.isolateScope(); 

和：

it("should work", function() { 
    expect(isolateScope.patientDetails).toBeDefined(); 
    expect(isolateScope.patientDetails.name).toBe('Lorem Ipsum'); 
}); 

更新：

如果你真的需要測試生成的標記，你應該使用的編譯元素：

compiled = $compile(elm)(scope); 

... 

it("ul should contain 4 li", function() { 
    var li = compiled.find('li'); 
    expect(li.length).toBe(4); 
});