Unit testing 角JS中div单元的单元测试崩溃行为

我有一个简单的表单，我想通过点击按钮来显示。i、 e一个按钮显示“添加新用户”，然后页面展开并显示一个表单，在用户完成表单工作后，表单向后折叠并向用户显示一条消息。 我面临的第一个问题是： 使用此代码

function AngularUI($scope, $window) {


    $scope.collapse = function (selector) {
        angular.element(selector).collapse();
    }
}  

及

使用角元素
这里有些东西！
简单可折叠
这个能正常工作

第二个不使用angular.element.collapse的方法工作正常

第二个问题是：如何测试上述行为

在第一次按下按钮时，使用angular.element的按钮（如果div被隐藏）会显示，但在显示后不会隐藏可折叠的。 （即，一个按钮显示“添加新用户”，然后页面展开并显示一个表单，在用户完成表单工作后，表单向后折叠并向用户显示一条消息

---

提前感谢。

你做错了。在控制器中进行DOM操作是不好的，因为你试图在DOM有机会呈现/刷新/更新之前查找/操作DOM。想象一下控制器中的所有JS都是在它自己的阶段执行的，然后所有HTML都会更新以反映最终模型状态

尝试使用

ng class=“{collapse:someBoolExpression}”

您还可以查看

ui-hide

、

ui-show

和

ui-toggle

（从，但我认为我们可能应该添加一个票证，让您自定义使用的类

---

试着摆脱手动操作DOM的思维模式。这需要一段时间，但一旦你习惯了，你的开发速度就会呈指数级增长。当你最终遇到AngularUI无法为你完成任务的时候，开始阅读指令，并检查AngularUI的源代码以获得一些好的、有评论的示例.

感谢您的良好回复，我知道DOM操作不是一个好主意，我曾经使用GWT，在GWT中，我们使用模型-视图-演示者模式，其中仅测试演示者。但是，如何测试我是否已将ui show、ui hide绑定到HTML标记元素。您可以测试该类是否已从DOM元素中添加或删除。这是我们所做的最好的事情。或者，如果你没有使用ui切换，你可以检索CSS属性。你能再解释一下吗。我认为检查DOM是最好的测试方法，也是正确的测试方法！因为即使你检查变量更改，也没有任何授权者认为你在html！这里讨论了两个独立的问题：测试和DOM操作。对于测试DOM，是的，您需要检查DOM元素，以查看类或CSS是否已相应地修改。但是我看到您有从控制器中修改DOM的代码，这显然是错的。

<div class="ang-ui-test">
    <button ng-click="collapse('#collapsible')">
        using angular.element
    </button>

    <div id="collapsible" class="collapse">
        some thing in here ...... !
    </div>


    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
        simple collapsible
    </button>

    <div id="demo" class="collapse in">This one work properly</div>
</div>