首页 > 代码库 > JavaScipt测试调研

JavaScipt测试调研

2024-07-21 23:30:34   221人阅读

JavaScipt测试调研

1        JsUnit

1.1     简介

JsUnit是JavaScript的开源单元测试框架。它受到JUnit的启发，并完全用JavaScript编写。这是以前流行的一个JavaScript的单元测试工具，可以和Maven以及Ant结合来完成一些持续集成的工作。

1.2     使用步骤初探

（1）       下载JsUnit，然后解压文件。下载地址：http://sourceforge.net/projects/jsunit/?source=navbar

（2）       使用浏览器打开解压目录下的testRunner.html文件。

 

（3）       准备测试用例，可以直接使用下载目录中的tests文件夹中的一个测试用例的page来做试验。

（4）       运行测试用例，将测试套件或者测试文件路径填入输入框中。点击运行即可，运行完后我们可以看到运行后的结果。

1.3     JsUnit测试用例的编写示例

（1）       一个简单的测试用例的编写

<html>

 <title>A unit test for drw.SystemUnderTest class</title>

 <head>

  <script type=‘text/javascript‘ src=http://www.mamicode.com/‘../jsunit/app/jsUnitCore.js‘></script>

  <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/jsUnitStyle.css">

  <script type=‘text/javascript‘ src=http://www.mamicode.com/‘../app/system_under_test.js‘></script>

  <script type=‘text/javascript‘>

    function setUp(){

      // perform fixture set up

    }

    function tearDown() {

      // clean up

    }

    function testOneThing(){

      // instantiating a SystemUnderTest, a class in the drw namespace

      var sut = new drw.SystemUnderTest();

      var thing = sut.oneThing();

      assertEquals(1, thing);

    }

    function testAnotherThing(){

      var sut = new drw.SystemUnderTest();

      var thing = sut.anotherThing();

      assertNotEquals(1, thing);

    }

  </script>

 </head>

 <body/>

</html>

 

 

以上为测试用例的编写的一个示例，我们可以上面就是一个html的文件。我们需要在html文件的head中引入jsUnitCore.js以及jsUnitStyle.css两个文件，个文件一个JsUnit的核心框架。还需要加入我们的需要测试的js脚本文件system_under_test.js。

后面可以看到有和junit相同的setup以及teardown，这里的两个函数是测试用例的准备和最后的处理，在每个测试用例之前和之后执行。

testOneThing()以及testAnotherThing()这两个函数就是测试用例，里面完成需要测试的内容。

与Junit相同，在JsUnit中也定义了很多的断言函数。形如assert**的函数都是其断言函数，我们使用这些函数来判定结果是与预期相同。

（2）       JsUnit测试集编写

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>JsUnit Test Suite</title>

    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/jsUnitStyle.css">

    <script type="text/javascript" src="http://www.mamicode.com/app/jsUnitCore.js"></script>

    <script type="text/javascript">

        function coreSuite() {

            var result = new JsUnitTestSuite();

            result.addTestPage("tests/jsUnitAssertionTests.html");

            result.addTestPage("tests/jsUnitFrameworkUtilityTests.html");

            result.addTestPage("tests/jsUnitOnLoadTests.html");

            result.addTestPage("tests/jsUnitRestoredHTMLDivTests.html");

            result.addTestPage("tests/jsUnitSetUpTearDownTests.html");

            result.addTestPage("tests/jsUnitTestManagerTests.html");

            result.addTestPage("tests/jsUnitParamsTests.html");

            result.addTestPage("tests/jsUnitTestSetUpPages.html");

            result.addTestPage("tests/jsUnitTestSuiteTests.html");

            result.addTestPage("tests/jsUnitUtilityTests.html");

            result.addTestPage("tests/TestPageTest.html");

            result.addTestPage("tests/UiManagerTest.html");

            return result;

        }

        function librariesSuite() {

            var result = new JsUnitTestSuite();

            result.addTestPage("tests/jsUnitMockTimeoutTest.html");

            result.addTestPage("tests/jsUnitAjaxTest.html");

            return result;

        }

        function suite() {

            var newsuite = new JsUnitTestSuite();

            newsuite.addTestSuite(coreSuite());

            newsuite.addTestSuite(librariesSuite());

            return newsuite;

        }

    </script>

</head>

<body>

<p>This page contains a suite of tests for testing JsUnit.</p>

</body>

</html>

以上的代码就是测试集的编写，测试集和Junit的概念一致。为了定义一个测试集，需要创建一个名为suite的函数，它会返回一个JsUnitTestSuite的对象。然后通过增加测试用例页面或者其他测试集对象来建立JsUnitTestSuite对象。在上面的例子中最终coreSuite和librariesSuite两个函数返回的JsUnitTestSuite对象在suite函数中加入到了一个JsUnitTestSuite对象中，然后返回该对象。

2        Jasmine

2.1     简介

Jasmine 是一款行为驱动的JavaScript 测试框架，它不依赖于其他任何 JavaScript 框架。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。

2.2     使用步骤初探

（1）       下载Jasmine

下载地址：https://github.com/pivotal/jasmine/releases

Introduction：http://jasmine.github.io/2.0/introduction.html

（2）       目录解析

解压下载下来的zip文件，点开文件夹。看到有如下的目录，其中lib为Jasmine 的源代码。src为一个示例中被测的js文件，spec为编写的测试用例代码，SpecRunner.html为加入

 

（3）       运行测试用例

解压文件后可以看到有一个文件叫做：SpecRunner.html，点击使用浏览器打开就能够运行相关的测试用例了。

在浏览器中打开运行完后我们可以看到一个结果页面，页面会展示运行的结果信息。

 

2.3     测试用例编写

（1）       一个简单的测试用例

  describe("when song has been paused", function() {

    beforeEach(function() {

      player.play(song);

      player.pause();

    });

 

    it("should indicate that the song is currently paused", function() {

      expect(player.isPlaying).toBeFalsy();

 

      // demonstrates use of ‘not‘ with a custom matcher

      expect(player).not.toBePlaying(song);

    });

 

    it("should be possible to resume", function() {

      player.resume();

      expect(player.isPlaying).toBeTruthy();

      expect(player.currentlyPlayingSong).toEqual(song);

    });

  });

 

describe 是 Jasmine 的全局函数，作为一个 Test Suite 的开始，它通常有 2 个参数：字符串和方法。字符串作为特定 Suite 的名字和标题。方法是包含实现 测试用例集的代码。

Specs 通过调用 it 的全局函数来定义。和 describe 类似，it 也是有 2 个参数，字符串和方法。每个 Spec 包含一个或多个 expectations 来测试需要测试代码。每个it就是一个测试用例。

         Jasmine 中的每个 expectation 是一个断言，可以是 true 或者 false。当每个 Spec 中的所有 expectations 都是 true，则通过测试。有任何一个 expectation 是 false，则未通过测试。而方法的内容就是测试主体。

3        JSLint

3.1     简介

JSLint是一款 JavaScript语法检查和验证工具，可以扫描JavaScript源代码来查找问题。JSLint不是一款开源的软件，它使用纯JavaScript编写。JSLint定义了一个专业的语法规则和建议的集合。

如果JSLint发现一个问题，JSLint就会显示描述这个问题的消息，并指出错误在源代码中的大致位置。有些编码风格约定可能导致未预见的行为或错误，JSLint除了能指出这些不合理的约定，还能标志出结构方面的问题。尽管JSLint不能保证逻辑一定正确，但确实有助于发现错误，这些错误很可能导致浏览器的 JavaScript引擎抛出错误。

JSLint 执行代码质量检测的原理核心在于用户设定的规则集。JSLint 默认提供的规则集包含了 Web 开发人员多年积累下来的认为不好的开发风格，我们可以根据自己项目的需求选择构建一套特定的规则。JSLint 将根据它进行对 JavaScript 脚本的扫描工作，并给出相应的问题描述信息。

3.2     JSLint用法初探

（1）              直接使用http://www.jslint.com/网址进行检测。在输入框中你的JavaScript脚本。然后点击JSLint按钮，我们就可以看到了JSLint说到的我们的错误之处。

这个页面还提供一些其他的规则，如果你不选择这些规则，则按照JSLint的默认的规则进行

JavaScipt测试调研


联系
我们