npm 包 @juliankniephoff/grunt-blanket-qunit 使用教程

阅读时长 16 分钟读完

在前端开发中,测试是不可或缺的一环。而在测试框架中,QUnit 是最为受欢迎的之一。但是,QUnit 自带的覆盖率报告功能比较简单,无法满足大型项目的需要。因此,我们需要借助 @juliankniephoff/grunt-blanket-qunit 这个 npm 包来生成更为详细的测试覆盖率报告。

安装

我们需要在项目中下载 @juliankniephoff/grunt-blanket-qunit,可以通过以下命令进行安装:

配置

首先,需要添加配置文件 gruntfile.js,并添加以下代码:

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

其中,options 可以设置许多参数,如 urls(待测试文件 URL)、threshold(覆盖率百分比)等等。这里我们需要将 urls 配置为待测试文件的 URL,threshold 配置为我们期望达到的覆盖率百分比。

接下来,需要在 gruntfile.js 中添加以下代码,完成 grunt-blanket-qunit 与 QUnit 的集成:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

执行

配置完成后,即可执行以下命令来运行测试:

测试完成后,即可在控制台中看到测试覆盖率的相关信息。同时,在项目的 cover/ 目录下,也可以找到测试的覆盖率报告。

示例代码

以下是一个简单的示例代码,以帮助读者更好地了解 @juliankniephoff/grunt-blanket-qunit 的使用方法:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结束语

有了 @juliankniephoff/grunt-blanket-qunit 这个 npm 包,我们可以更加轻松地生成测试覆盖率报告。希望本文对大家有所启示。

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

纠错
反馈