如何在Jasmine中模拟DOM元素，以便控制器可以访问它

How to mock DOM element in Jasmine such that the controller can access it?

本文关键字：控制器 访问 元素 Jasmine DOM 模拟      更新时间：2023-09-26

我正在尝试模拟我的jasmine测试套件中的DOM元素

     it('Test changing radio', function () {
        testElement = angular.element("<div><input class='my_radio' type='radio' /></div>");
        testElement.find('input')[0].checked = true;
        var scope = $rootScope.$new();
        $compile(testElement)(scope);
        scope.$digest();
        console.log(testElement.find('input')[0].checked); // should print true
        myController.changeRadio();
        console.log(testElement.find('input')[0].checked); // should print false
    });

在我的控制器中

function changeRadio(){
    for(var i = 0; i < angular.element('.testElement').length; i++){
        angular.element('testElement')[i].checked = false;
    }
}

控制台日志应返回以下

true
false

由于myController.changeRadio将单选按钮从true更改为false，所以我在运行应用程序时验证了它是否有效，但jasmine测试套件不起作用。我发现控制器根本找不到输入元素。在测试期间，是否有方法将$compiled DOM传递给控制器？

看起来您的方法是错误的。您正在单元测试中测试HTML元素，但不应该这样做。单元测试仅用于测试代码。使用量角器进行E2E测试是为了测试HTML接口。

例如，我有。。。

<button ng-click="controller.fred()">hello</button>

在我的单元测试中，我调用并测试控制器函数fred。在我的E2E测试中，我点击按钮，并根据我的按钮点击做出与HTML界面相关的期望（例如，检查或不检查某些内容）。

希望这能有所帮助。

相关文章：