51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 1527|回复: 0

[讨论] JavaScript单元测试框架JsUnit基本介绍和使用

[复制链接]
  • TA的每日心情
    无聊
    2023-12-19 11:16
  • 签到天数: 40 天

    连续签到: 1 天

    [LV.5]测试团长

    发表于 2018-3-7 15:56:49 | 显示全部楼层 |阅读模式
    XUnit framework
      XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests).

      每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit,
    Oracle SQL有UTPL/SQL.



    JsUnit
      JsUnit的官网: http://jsunit.net/

      JsUnit遵循XUnit的一些惯例:

      单元测试在JsUnit中叫做Test Functions.

      Test Functions所在的HTML页面叫做Test Page.

      一个Test Page是一个包含jsUnitCore.js的HTML页面. jsUnitCore.js提供了一些断言函数, 比如assertE
    quals(comment, arg1, arg2).

      JsUnit支持setUp()和tearDown().

      Test Suite Page声明了一个suite()函数,返回一个JsUnitTestSuite, 用来运行含多个测试的套件.

      JsUnit的testRunner.html页运行Test Pages.

      TestRunner页面可以运行在一个文件服务器或者web服务器上.



    JUnit和JsUnit


    JavaScript编码规范

      由于JavaScript没有访问修饰符,所以通常在JavaScript中,不希望外界访问的成员和方法名以下划
    线开始.

      这是一种编码规范,不是语言的规定,虽然外界仍然可以访问但是不推荐.

      JsUnit测试函数要遵循的规则与JUnit3.8类似,比如说测试函数名以test开头等.



    JsUnit基本使用实例
      待测试的源代码:test1.js
    1. function add(num1, num2)
    2.   {
    3.     return num1 + num2;
    4.   }

    5.   function subtract(num1, num2)
    6.   {
    7.     return num1 - num2;
    8.   }

    9.   function multiply(num1, num2)
    10.   {
    11.     return num1 * num2;
    12.   }

    13.   function addNumbers()
    14.   {
    15.     var v1 = document.getElementById("value1").value;
    16.     var v2 = document.getElementById("value2").value;

    17.     v1 = parseInt(v1);
    18.     v2 = parseInt(v2);

    19.     var v3 = v1 + v2;

    20.     document.getElementById("value3").value = v3;
    21.   }
    22. 复制代码


    23.   测试页面:test1.html

    24. 复制代码
    25. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    26. <html>
    27. <head>
    28.   <title> New Document </title>
    29.   <meta name="Generator" content="EditPlus">
    30.   <meta name="Author" content="">
    31.   <meta name="Keywords" content="">
    32.   <meta name="Description" content="">

    33.   <script type="text/javascript" src="..\jsunit2_2\jsunit\app\jsUnitCore.js"></script>

    34.   <script type="text/javascript" src="test1.js"></script>

    35.   <script type="text/javascript">

    36.   var count = 0;

    37.   // 此函数只执行一次(在页面加载后),类似于JUnit 4.x中的@BeforeClass
    38.   // 注意:并没有与@AfterClass对应的函数存在
    39.   function setUpPage()
    40.   {
    41.     alert('setUpPage Invoked');

    42.     // 这行代码必须放在setUpPage函数的最后一行
    43.     // 告诉JsUnit,setUpPage函数已经执行完毕
    44.    
    45.     setUpPageStatus = "complete";
    46.   }


    47.   // setUp run before every test function
    48.   function setUp()
    49.   {
    50.     //alert(count++);    //JUnit若这样执行,count全是0,因为每一个测试方法都会生成新的测试对象;
    51.                         //JsUnit会递增count, 因为都是在同一个页面里去执行,所以会基于原有的值
    52.    
    53.     //设定初始条件
    54.     document.getElementById("value1").value = 2;
    55.     document.getElementById("value2").value = 3;
    56.   }

    57.   // tearDown run after every test function
    58.   function tearDown()
    59.   {
    60.     //alert("tearDown");

    61.     //清理状态
    62.     document.getElementById("value1").value = "";
    63.     document.getElementById("value2").value = "";
    64.     document.getElementById("value3").value = "";
    65.   }

    66.   // 以下为测试函数(Test Function)
    67.   
    68.   function testAdd()
    69.   {
    70.     var result = add(1, 2);

    71.     assertEquals(3, result);
    72.   }

    73.   function testSubtract()
    74.   {
    75.     var result = subtract(1, 2);

    76.     assertEquals(-1, result);
    77.   }

    78.   function testMultiply()
    79.   {
    80.     var result = multiply(1, 2);

    81.     assertEquals(2,result);
    82.   }

    83.   function testAddNumbers()
    84.   {
    85.     addNumbers();

    86.     assertEquals("5", document.getElementById("value3").value);
    87.   }

    88.   </script>

    89. </head>
    90. <body>
    91.   
    92.   <input type="text" id="value1"><br>
    93.   <input type="text" id="value2"><br>
    94.   <input type="text" id="value3"><br>

    95.   <input type="button" value="Add" onclick="addNumbers();">

    96. </body>
    97. </html>
    复制代码
    使用JsUnit提供的测试运行器: testRunner.html, 加载测试页面,即可运行相关测试,并报告结果.



    setUp()和tearDown()
      setUp()在每一个测试方法运行之前运行;

      tearDown()在每一个测试方法运行之后运行.

      对于JsUnit来说, 其setUp()和tearDown()方法与JUnit的运行原理是不同的.

      JUnit中的setUp()和tearDown()之间是没有关系的,也就是说不同的测试方法运行在不同的测试
    对象之中;

      而JsUnit的各个测试函数是运行在同一个测试页面中,因此同一个页面中setUp()和tearDown()
    运行多次(每个测试函数之前和之后),会针对同一个变量进行操作.



    setUpPage()
      setUpPage()在测试页面加载时执行,每次运行只执行一次.

      这个方法的末尾必须加上:

           setUpPageStatus = "complete";
      表示setUpPage()执行完成,否则会提示setUpPage not completed, 从而无法执行测试用例.



    测试套件Suite
      JsUnitTestSuite定义在jsUnitCore.js中, JsUnitTestSuite代表多个JsUnit测试页面的套件,测试页
    面和测试套件都可以被加在套件中,即套件是可嵌套的.(组合模式).

      JsUnitTestSuite的定义(见jsUnitCore.js):

    1. /**
    2. * @class
    3. * A JsUnitTestSuite represents a suite of JsUnit Test Pages.  Test Pages and Test Suites can be added to a
    4. * JsUnitTestSuite
    5. * @constructor
    6. */
    7. function JsUnitTestSuite() {
    8.     /**
    9.      * Declares that this object is a JsUnitTestSuite
    10.      */
    11.     this.isJsUnitTestSuite = true;
    12.     /**
    13.      * @private
    14.      */
    15.     this._testPages = Array();
    16.     /**
    17.      * @private
    18.      */
    19.     this._pageIndex = 0;

    20.     for (var i = 0; i < arguments.length; i++) {
    21.         if (arguments[i]._testPages) {
    22.             this.addTestSuite(arguments[i]);
    23.         } else {
    24.             this.addTestPage(arguments[i]);
    25.         }
    26.     }
    27. }
    28. 复制代码


    29. 测试套件的使用例子1: test2.html

    30. 复制代码
    31. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    32. <html>
    33. <head>
    34.   <title> New Document </title>
    35.   <meta name="Generator" content="EditPlus">
    36.   <meta name="Author" content="">
    37.   <meta name="Keywords" content="">
    38.   <meta name="Description" content="">

    39.   <script type="text/javascript" src="..\jsunit2_2\jsunit\app\jsUnitCore.js"></script>

    40. <script type="text/javascript">


    41. //测试套件名一定为suite
    42. function suite()
    43. {
    44.     var testSuite = new top.jsUnitTestSuite();

    45.     // 增加的测试页面的路径是相对于测试运行器(testRunner.html)的路径
    46.     // 而不是当前页面
    47.     testSuite.addTestPage("../../jsUnit_code/test1.html");
    48.     testSuite.addTestPage("../../jsUnit_code/test1.html");
    49.     testSuite.addTestPage("../../jsUnit_code/test1.html");

    50.     return testSuite; // 最后需要返回套件
    51. }
    52. </script>
    53. </head>

    54. <body>
    55.   
    56. </body>
    57. </html>
    58. 复制代码


    59. 测试套件的使用例子2: test3.html

    60. 复制代码
    61. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    62. <html>
    63. <head>
    64.   <title> New Document </title>
    65.   <meta name="Generator" content="EditPlus">
    66.   <meta name="Author" content="">
    67.   <meta name="Keywords" content="">
    68.   <meta name="Description" content="">

    69.   <script type="text/javascript" src="..\jsunit2_2\jsunit\app\jsUnitCore.js"></script>

    70.   <script type="text/javascript">

    71.    // 自定义的测试套件
    72.   function mySuite()
    73.   {
    74.     var testSuite = new top.jsUnitTestSuite();

    75.     testSuite.addTestPage("../../jsUnit_code/test1.html");
    76.     testSuite.addTestPage("../../jsUnit_code/test1.html");
    77.     testSuite.addTestPage("../../jsUnit_code/test1.html");

    78.     return testSuite;
    79.   }

    80.   function suite()
    81.   {
    82.     var testSuite = new top.jsUnitTestSuite();

    83.     testSuite.addTestPage("../../jsUnit_code/test1.html"); // 在测试套件中加入页面
    84.     testSuite.addTestSuite(mySuite()); // 在测试套件中加入测试套件

    85.     return testSuite; // 记得返回套件
    86.   }

    87.   </script>

    88. </head>

    89. <body>
    90.   
    91. </body>
    92. </html>
    复制代码


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

    x
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-3-29 13:32 , Processed in 0.071241 second(s), 25 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表