ユニットテスト中に指令のhtml要素が存在するかどうかを確認します

Question

受け取ったタイプに基づいてフォームフィールドを作成する指示文 "generate-form-field-directive"を作成しました。

(function() { 
"use strict"; 

var app = angular.module("appModule"); 

app.directive("generateFormField", generateFormField); 

/*@ngInject*/ 
function generateFormField() { 

    return { 
     restrict: "E", 

     scope: { 
      attributeDetails: "=", 
      fieldName: "=" 
     }, 

     replace: false, 

     controller: function($scope, actionStore) { 
      var vm = this;     
     }, 

     template: "<div class='col-sm-9 generate-form-field-container'>" + 

        "<input type='text' class='form-control' name='{{fieldName}}' ng-if='attributeDetails.type === \"String\"' ng-model='attributeDetails.value' required>" + 
        "<input type='number' class='form-control' name='{{fieldName}}'' ng-if='attributeDetails.type === \"Integer\"' ng-model='attributeDetails.value' required>" + 
       "</div>" 

    }; 
} 

}()); 

attributeDetails.typeは、「文字列」であるならば、最初のinputタグがレンダリングされますので、 - 以下は、ディレクティブのコードがあります。 attributeDetails.type = integerと同じです。今度は、obkecj属性を渡すときにDOMに "input [type = text]"が存在するかどうかをチェックしたいと思います：{ "type"： "String"、 "name"： "Name"、 "値 "："ボリューム1 " }。

ユニットテストファイルがある -

describe("UNIT DIRECTIVE: generateFormField", function() { 
"use strict"; 

// Angular injectables 
var $compile, $rootScope, $httpBackend, $q; 

// Module defined (non-Angular) injectables 
var $scope, generateFormField, actionStore; 

// Local variables used for testing 
var element, formRequestResponse, directiveScope, vm, template, getListOptions; 

// Initialize modules 
beforeEach(function() { 
    module("appModule"); 
}); 

beforeEach(function() { 

    inject(function (_$compile_, _$rootScope_, _$httpBackend_, _$q_, _actionStore_) { 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
     $httpBackend = _$httpBackend_; 
     $q = _$q_; 
     $scope = $rootScope.$new();    
    }); 
}); 

describe("generateFormField unit testing", function() { 

    beforeEach(function() { 
     template = "<generate-form-field attribute-details='attribute' field-name='key'></generate-form-field>";    
     $scope.attribute = { 
      "type":"String", 
      "name": "Name", 
      "value": "Volume1" 
     }, 

     $scope.key = "volName"; 
     element = $compile(template)($scope);  

     directiveScope = element.find("generate-form"); 

     // Exercise SUT 
     $scope.$digest(); 
    }); 

    **//how to check for input[type=text]** 
    it("it should create input button of type='text'", function() { 
     //expect(element.html()).indexOf("type='text'").to.not.equal(-1); 
     //expect(element("input[type=text]").length).to.be(1); 
    }); 

}); 
}); 

あなたはそれのために働いフィドルを提供できる場合、それが良いだろう。前もって感謝します。

element = $compile(template)($scope); 

あなたはあなたの入力を見つけることができるはずです：このコードを実行した後

Answer 1

var input = element[0].querySelector("input[type=text]");