茉莉花的角度測試無法比較html節點

我正在使用茉莉花在Angular中構建指令測試。我有一個小例子測試，看起來像這樣：茉莉花的角度測試無法比較html節點

it("should compare html node", inject(function ($compile, $rootScope) { 
    var elm = angular.element('<input>'); 
    elm = $compile(elm)($scope); 
    $scope.$digest(); 
    console.log('btn', elm); // output: '<input class="ng-scope">' 
    expect(elm).toBe('<input class="ng-scope">'); 

    expect(elm[0]).toBe('<input class="ng-scope">'); // these also fail 
    expect(elm.html()).toBe('<input class="ng-scope">'); // "" 
}));

所以我得到的預期輸出到控制檯，但茉莉一個錯誤Expected { length: 1, 0: HTMLNode } to be '<input class="ng-scope">'

我也使用elm[0]這給了同樣的錯誤嘗試抱怨和elm.html()但這只是返回一個空字符串。如何正確比較HTML節點和字符串？

NB我知道這是一個不切實際的測試，但我只想演示我當前的問題。

來源

2015-02-06 Darwin Tech

也許試試elm [0] .outerHTML – hassassin 2015-02-07 00:06:08

哇！這實際上起作用。不過，我可以在API中找到它（https://docs.angularjs.org/api/ng/function/angular.element）。如果你想讓它成爲一個答案，我會接受。謝謝。 – 2015-02-10 18:46:17

所以榆樹是一個angular.element這是一個jqLite對象。正如你指出的，你可以使用elm [0]來獲得實際的dom元素。然後，您可以通過訪問.outerHTML字段來訪問該節點的html。所以我們的最終解決方案是使用

elm[0].outerHTML

來源

2015-02-10 20:22:44 hassassin

在做我的茉莉花測試中，我將考驗element.html()這樣我就可以再使用jQuery來尋找諸如

expect(element.html()).toContain($('input.ng-scope'));

我也走得更深，並嘗試看到HTMLNode比較HTMLNode但我相信在特定條件這是茉莉花的限制。你可以試試，

expect(element[0]).toEqual($.parseHTML('<input class="ng-scope">')[0])

但是Jasmine給出了「期望的HTMLNode等於HTMLNode」。最好的方法是使用不同的測試用例解構如上所示的編譯後的HTML元素。

來源

2015-02-07 01:43:19

element.html（）有時會返回空字符串，其中elm [0] .outerHTML返回HTML – Hoto 2015-10-06 14:45:57

茉莉花的角度測試無法比較html節點

回答

相關問題