Jasmine 2.0 中的 async done() 和 angular-mocks 中的 inject() 在同一个 it() 函数中的使用

阅读时长 5 分钟读完

在前端单元测试中,Jasmine 是常用的测试框架之一。Jasmine 2.0 提供了异步测试支持,可以通过 done() 函数来实现。而在 AngularJS 的单元测试中,angular-mocks 模块提供了 inject() 函数来进行依赖注入。本文将介绍如何在同一个 it() 函数中使用这两个函数,并给出详细的示例代码。

使用场景

有时候我们需要进行异步测试,并且需要注入依赖。比如我们要测试一个使用了 $http 服务的控制器:

-- -------------------- ---- -------
-----------------------
--------------------------- --------- --------------- -
    --- -- - -----
    ------- - -----

    ---------------------------------------------- -
        ------- - --------------
    ---
----

我们可以编写以下测试用例:

-- -------------------- ---- -------
------------------------ ---------- -
    --- ------------ -------------

    ----------------------------

    ----------------------------------------- --------------- -
        ----------- - --------------
        ------------ - ---------------

        ------------------------------------------- ---- ----- ---
    ----

    ---------- ---- ---- ---- --- -------- -------------- -
        --- ---- - ----------------------------

        ---------------------

        --------------------------- ---- ----- ---

        -------
    ---
---

这里我们在 it() 函数中同时使用了 done() 和 inject()。

done() 函数

Jasmine 2.0 中的 done() 函数用于处理异步测试。它将测试用例的执行暂停,直到 done() 函数被调用。在上面的示例代码中,我们传入了一个名为 done 的参数,并在测试用例的最后调用了 done() 函数。

如果没有调用 done() 函数,Jasmine 将会超时并认为测试用例失败。默认情况下,Jasmine 的超时时间为 5 秒钟。如果需要修改超时时间,可以使用 jasmine.DEFAULT_TIMEOUT_INTERVAL 属性:

inject() 函数

angular-mocks 模块提供的 inject() 函数用于注入依赖。它接受一个函数作为参数,该函数的参数列表中包含需要注入的依赖。在上面的示例代码中,我们在 beforeEach() 函数中调用了 inject(),并传入了一个函数,该函数的参数列表中包含了 $controller 和 $httpBackend 两个依赖。

在调用 inject() 函数之后,我们可以通过变量名来访问这些依赖,比如 $controller 和 $httpBackend。

示例代码

下面是完整的示例代码:

-- -------------------- ---- -------
------------------------ ---------- -
    --- ------------ -------------

    ----------------------------

    ----------------------------------------- --------------- -
        ----------- - --------------
        ------------ - ---------------

        ------------------------------------------- ---- ----- ---
    ----

    ---------- ---- ---- ---- --- -------- -------------- -
        --- ---- - ----------------------------

        ---------------------

        --------------------------- ---- ----- ---

        -------
    ---
---

在这个测试用例中,我们首先通过 module() 函数加载了我们要测试的模块。然后,我们使用 beforeEach() 函数来进行一些初始化工作。在这里,我们通过 inject() 函数注入了 $controller 和 $httpBackend 两个依赖,并为 $httpBackend 对象设置了一个响应。

在 it() 函数中,我们创建了 MyController 的实例,并调用了 $httpBackend.flush() 来触发 $http.get() 请求。当请求返回时,我们断言 vm.data 的值是否正确,并调用 done() 函数结束测试

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/25439

纠错
反馈