搜索
首页web前端js教程单元测试骨干。JS应用程序

单元测试骨干。JS应用程序

花费数小时后,也许>天> ,为您的Web应用程序提供了令人敬畏的新功能的完成,您终于准备好看到它的行动。您将新代码添加到您的JavaScript基础,构建发布候选者,并启动您的浏览器,希望惊讶。然后……嗯……新功能可能运行良好,但是您的应用程序中的其他一些关键部分 - 在开发新版本时您没有 touch

的部分 - 变得非常糟糕。现在,您面临着在几天工作中进行回溯的挑战,以弄清楚如何打破现有代码。快乐的日子绝对不在这里。>

>这种情况比我想承认的要多。而且,如果您已经编码了一段时间,那么您也可能已经看到了它。但是,请考虑一下使这种情况如此痛苦的原因。这并不是因为我们的新代码破坏了现有代码;这是不可避免的。真正的痛苦是,花了很长时间才能注意到破裂。由于我们知道我们的应用程序正在起作用,因此有如此多的发展,因此该错误可能隐藏了大量代码。而且,尽管它似乎有点像在草丛中寻找针头,但我们别无选择。 在本文中,我们将真正从JavaScript开发中消除这种情况。不再需要在数小时,数天或几周的代码中进行挖掘。我们将采用的原则是一个简单的原则:在我们创建它后立即找到任何错误

。这是正确的;我们将建立一个开发环境和流程,当我们编写引入错误的代码时立即告诉我们。此外,一旦最初的开发完成,我们将付出的额外努力就不会浪费。在集成环境中,捕获我们开发错误的相同测试代码将完全重复使用。我们可以轻松地将测试纳入我们的源代码管理系统中,在错误进入我们的代码库之前阻止错误。 在以下四个部分中,我们将首先研究JavaScript测试环境所需的工具。然后,我们将考虑一个琐碎的应用程序,该应用程序足够简单,可以理解,但具有实际生产Web应用程序中可能存在的所有功能。最后两个部分展示了我们如何使用环境在开发过程中测试示例应用程序,并且在整合过程中初始开发完成后。

钥匙要点

  • >强调开发过程中的早期错误检测,以防止在后期阶段进行复杂的问题,确保平稳的编码体验并最大程度地减少回溯。
  • >由于其与浏览器和node.js环境的兼容性,将摩卡咖啡作为核心测试框架,从而允许从开发到集成测试的无缝过渡。
  • 纳入Chai断言库,以增强测试可读性和灵活性,提供多种样式(断言,期望,应)符合不同的开发人员偏好。
  • >使用sinon.js创建间谍,存根和模拟,这对于在不影响其操作的情况下测试与外部库和服务的互动至关重要。
  • >使用Test'em设置连续测试环境,以自动在代码更改上运行测试,从而立即提供有关应用程序健康的反馈。>
  • 在开发过程中,专注于为模型,视图和收集创建详细的单元测试,以确保每个组件孤立地正确起作用。 通过将单位测试与Node.js调整为命令行执行,以确保应用程序在生产环境中的预期行为,从而平稳地过渡到集成测试。
  • 组装JavaScript测试环境
    1. 我们的环境必须支持开发过程中无摩擦,连续测试。 在开发过程中创建的测试必须同样在集成中。
    2. >
    3. 执行环境
    对于JavaScript编码,没有比现代Web浏览器更好的开发环境。无论您的口味是Firebug还是Webkit的开发人员工具,浏览器都支持实时检查和编辑,完整的交互式调试以及复杂的性能分析。 Web浏览器非常适合开发,因此我们的测试工具和环境必须与浏览器内开发集成。但是,Web浏览器对于集成测试并不是那么好。集成测试通常发生在云中某个地方的服务器上(或至少在数据中心中的某个地方)。这些系统甚至没有图形用户界面,更不用说现代的Web浏览器了。为了有效的集成测试,我们需要简单的命令行脚本和支持它们的JavaScript执行环境。对于这些要求,选择的工具是node.js。尽管还有其他命令行JavaScript环境,但没有一个可以匹配Node.js的宽度和深度。在集成阶段,我们的测试工具必须与node.js.

    集成。

    测试框架

    >我们已经确定我们的测试工具必须支持Web浏览器和Node.js环境,我们可以缩小选择的范围,以选择核心测试框架。存在许多JavaScript测试框架,但大多数人倾向于浏览器测试。通常可以让他们与node.js一起工作,但通常需要不高的黑客攻击或调整。摩卡咖啡是一个不遭受此问题的框架,其合理地描述为:>

    > Mocha是在节点和浏览器上运行的功能丰富的JavaScript测试框架,使异步测试简单而有趣。

    Mocha最初是为Node.js开发的,它也很容易支持Web浏览器。通过使用Mocha作为我们的测试框架,我们可以编写支持开发和集成而无需修改的测试。

    >断言库

    与某些JavaScript测试框架不同,摩卡咖啡是为了最大程度的灵活性而设计的。结果,我们将不得不选择其他一些作品来完成。特别是,我们需要一个JavaScript断言库。为此,我们将依靠Chai主张库。柴的某种独特之处在于它支持所有常见的断言样式 -

    sustert>,>期望, and 应该。代码。在封面下,它们都是等效的。将测试从一种断言样式转换为另一种主张风格很容易。断言风格的主要区别在于它们的可读性。主张样式的选择主要取决于您(或您的团队)认为最可读性的样式,哪种风格会产生最可理解的测试。要查看差异,请考虑为以下代码开发琐碎的测试:>

    >传统的断言测试可以写为:
    <span>var sum = 2 + 2;</span>
    >

    该测试可以完成工作,但是除非您已经习惯了老式的单元测试,否则阅读和解释可能有些挑战。替代断言风格的使用期望:
    assert<span>.equal(sum, 4, "sum should equal 4");</span>

    大多数开发人员发现,与断言风格的测试相比,预期的断言更容易阅读和理解。第三个替代方案应该使考试断言更像是自然语言:
    <span>expect(sum).to.equal(4);</span>

    > Chai库支持所有三种主张样式。在本文中,我们应该坚持。

    sum<span>.should.equal(4);</span>
    间谍,存根和模拟

    >

    >大多数Web应用程序,包括我们将在本文中考虑的琐碎示例,依赖第三方库和服务。在许多情况下,测试我们的代码需要观察甚至控制这些库和服务。 Sinon.js库提供了许多用于测试这些交互的工具。这样的工具分为三个一般类:

    间谍
      。测试代码观察到正在测试的代码之外的功能的调用。间谍不会干扰这些外部功能的操作;他们只是记录调用和返回值。
    • > stub
    • 。测试代码供应在测试的代码之外调用功能。存根代码不会尝试复制外部功能;当测试中的代码访问外部功能时,它只是防止未解决的错误。>
    • 模拟。测试代码模仿正在测试的代码之外的功能或服务。使用模拟,测试代码可以从这些函数或服务中指定返回值,以便可以验证代码的响应。>
    • >与sinon.js库本身一起,我们可以使用Sinon.js主张chai。

      单元测试开发环境

      >我们测试工作台的最终工具是用于单元测试的开发环境。在我们的示例中,我们将使用Test’EM。 Test’em是一个方便的脚本集合,用于设置并运行连续的测试环境。如果我们选择,我们可以自己编写脚本并手动管理环境;但是,Toby Ho(Test’em的创建者)整理了一个很棒的软件包,可以节省我们的麻烦。

      示例应用程序

      要查看我们的测试环境,请考虑一个简单的应用程序。尽管该应用程序包含了实际应用所需的所有功能,但该应用程序包含了其裸露的必需品。 (该应用程序的完整源代码可在GitHub上找到。)

      > 单元测试骨干。JS应用程序

      >用户可以看到他们的毒品列表,他们可以单击一个复选框以切换任何todo的状态。

      todos数据库

      >我们的应用程序从包含托多斯信息的数据库表开始。这是我们可以用来创建该表的SQL。

      >我们在其中放了一些测试数据后,表可能会看起来。
      <span>var sum = 2 + 2;</span>

      id

      title 完整 1A示例数据库中的todo项目 2 ANATHONE样品todo item1 3 yet另一个样本todo item0 >如表所示,我们的Todos仅包括一个主键(ID),标题和一个状态位,以指示它们是否完成。 一个REST API

      我们的Web应用程序需要访问此数据库,因此我们将提供标准的REST接口。 API遵循Ruby惯例,但是任何服务器技术都可以轻松实现。特别是:

      get api/todos返回数据库中所有行的JSON编码阵列。

      get api/todos/nnn返回todo的json表示,ID等于nnn。
      • > POST API/TODOS使用请求中的JSON编码的信息在数据库中添加了新的TODO。
      • put api/todos/nnn使用请求中的JSON编码的信息更新与NNN等于NNN的todo。
      • 删除API/TODOS/NNN从数据库中删除与NNN等于NNN的TODO。
      • >
      • 如果您不是特别喜欢Ruby,则源代码包括此API的完整PHP实现。
      • > JavaScript库
      >我们的适度应用程序足够简单,可以在没有任何库的纯JavaScript中实现,但是我们的计划要大得多。我们可能会开始较小,但最终该应用程序将具有惊人的功能和令人愉悦的用户界面。为了准备那天,我们将建立一个可以支持我们最终杀手应用程序的框架:>
      • >用于DOM操作,事件处理和服务器通信的jQuery
      • undescore.js用许多难以置信的公用事业来增强核心语言。
      • backbone.js以模型和视图来定义应用程序的结构。
      • >
      html骨架

      >现在,我们知道将包含我们应用程序的组件,我们可以定义支持它的HTML骨架。 (现在)没有什么幻想的,只有最小的HTML5文档,一些JavaScript文件以及一小部分代码可以启动。

      >

      在开发过程中进行测试
      <span>var sum = 2 + 2;</span>

      >现在我们已经选择了我们的工具并指定了该应用程序了,现在该开始开发了。我们的第一个任务是安装工具。

      >安装工具

      即使我们将在浏览器中开发,我们的测试环境也依赖于node.js。因此,第一步是安装node.js和Node软件包管理器(NPM)。 Node.js网站上有针对OS X,Windows,Linux和Sunos的可执行性二进制文件,以及其他操作系统的源代码。运行安装程序后,您可以从命令行验证node.js和npm。

      >我们需要的其他所有内容都可以作为节点软件包可用。 Node软件包管理器可以处理其安装以及任何依赖项。>

      assert<span>.equal(sum, 4, "sum should equal 4");</span>
      创建项目结构

      此示例的源代码包括一个完整的项目结构,其中包含以下15个文件:>
      <span>expect(sum).to.equal(4);</span>

      这是每个文件夹和文件所包含的内容:

      • > testem.json:test'em的配置文件;我们将很快详细介绍一下。
      • >
      • api/:用于我们的REST API实现的文件夹。
        • api/htaccess:支持我们的REST API的Apache Web服务器的示例配置。
        • api/todos.php:实现REST API的PHP代码。
        • lib/:应用程序本身使用的JavaScript库和测试框架的文件夹。
      • lib/backbone-min.js:backbone.js。
      • 的缩小版本
          lib/chai.js:柴断言图书馆。
        • >
        • > lib/jquery-1.9.0.min.js:jquery的缩小版本。
        • lib/sinon-1.5.2.js:sinon.js库。
        • lib/sinon-chai.js:sinon.js chai的主张。
        • lib/underscore-min.js:unterscore.js。
        • > mysql/:用于应用程序的mySQL代码的文件夹。
        > mysql/todos.sql:mysql命令创建应用程序数据库。>
        • php-lib/:用于PHP库的文件夹和应用程序REST API的配置。
        • php-lib/dbconfig.inc.inc.php:REST API的PHP数据库配置
      • > src/:我们的客户端应用程序代码的文件夹。
        • > src/app-todos.js:我们的应用程序。
      • >测试/:测试代码的文件夹。
        • test/app-todos-test.js:我们应用程序的测试代码。
        • >测试/摩卡咖啡:摩卡咖啡的配置选项;我们将在下一部分中查看这一点。
        • 在开发过程中,我们只对其中三个文件感兴趣,即Testem.json,src/app-todos.js和test/app-todos-test.js。
        • >配置test’em
        • 实际开发之前的最后一步是定义Test'EM配置。该配置位于JSON-formatted Testem.json中,它足够简单,可以在任何文本编辑器中创建。我们只需指定我们使用的是摩卡咖啡(test'em支持多个框架),然后列出了我们的应用程序和测试代码所需的JavaScript文件。
      • 开始开发

      >最后,我们准备好编码了。在命令外壳中,导航到我们项目的根文件夹并执行命令testem。 Test’em脚本将运行,清除终端窗口,并在右上方给我们一个URL。将该URL复制并粘贴到我们选择的浏览器中,我们已经离开了。

      >

      >一旦我们启动Web浏览器,它将自动执行我们定义的所有测试。由于我们刚刚开始开发,因此我们将没有任何代码,也不会有任何测试用例。浏览器将向我们指出。

      >

      <span>var sum = 2 + 2;</span>
      我们启动测试的终端窗口也将为我们提供状态。单元测试骨干。JS应用程序

      第一个测试用例

      >本着真正的测试驱动开发的精神,我们将首先在测试/app-todos-test.js文件中编写第一个测试用例。像任何好的Web应用程序一样,我们希望最大程度地减少全球名称空间污染。为此,我们将依靠一个全局变量doApp来包含我们的所有代码。我们的第一个测试案例将确保存在全局名称空间变量。

      >
      <span>var sum = 2 + 2;</span>
      如您所见,我们需要一个初步陈述,以告诉Mocha我们正在使用Chai主张。然后,我们可以开始编写测试。通过惯例,javaScript测试被组织成块(可以嵌套到子块中,依此类推)。每个块以DECRICON()函数调用开始,以确定我们正在测试的代码的哪个部分。在这种情况下,我们正在测试总体应用程序,因此这是第一个描述()的参数。

      >

      在测试块中,我们通过测试的内容记录了每个测试用例。这就是IT()函数的目的。读取任何测试案例的方法是将描述()和()字符串组合到单个语句中。因此,我们的第一个测试案例是

      应用程序为名称space

      创建一个全局变量

      测试代码本身在IT()块内部。我们的测试案例是

      assert<span>.equal(sum, 4, "sum should equal 4");</span>
      >现在我们有一个完整的测试用例。一旦我们保存文件,test'em便会自动接管。它注意到我们的一个文件已更改,因此它立即重新运行测试。毫不奇怪(由于我们尚未为应用程序编写任何代码),我们的第一个测试失败了。

      终端窗口也会自动更新。单元测试骨干。JS应用程序

      要进行测试,我们必须创建全局名称空间变量。我们转移到srcapp-todos.js文件并添加必要的代码。单元测试骨干。JS应用程序>

      >我们保存文件后,请再次验证“ EM再次弹出”。我们立即为测试案例获得更新的结果。
      <span>expect(sum).to.equal(4);</span>
      >

      >退后一会儿,考虑发生了什么!每当我们更改测试代码或应用程序时,Test`EM都会立即重新运行我们的整个测试套件。我们要做的就是将Test'Em的浏览器或终端窗口保持在屏幕的角落,并且在开发单元测试骨干。JS应用程序>时,我们可以实时看到代码的健康状况。即使引入一个错误,我们也会知道,即使该错误在代码的一部分中表现出来,与我们正在工作的位置不同。在我们引入错误时,不再需要在数小时,几天或几周的新代码中进行挖掘。

      测试模型

      >随着我们的开发环境现已完全建立,我们可以开始开发应用程序。由于我们的应用程序显示了招待员列表,因此最好为这些毒品创建一个模型。该模型将需要跟踪Todo的标题及其状态。让我们添加一个单元测试,该测试可以验证我们可以使用合理默认值创建一个todo。

      >
      <span>var sum = 2 + 2;</span>

      这些测试值得注意的几个方面。

      >
      • >我们可以彼此嵌套测试块。一个测试块将包含用于TODO模型的所有单元测试,这些测试的子块集中于初始化。 在测试块中,我们可以定义每个测试之前执行的功能。这就是toteach()块的目的。在上面的示例中,我们正在每次测试之前创建一个todo的新实例。
      • >
      • >摩卡摩卡框架会自动确保我们所有测试用例的JavaScript上下文(即,其值)是一致的。这就是为什么我们可以在一个函数(toteARK()参数)中定义this.todo并将其安全地引用其他函数(例如IT()参数)。如果没有摩卡咖啡在幕后工作以提供这种一致性,JavaScript将为每个功能定义不同的上下文。
      • 当然,由于我们尚未编写模型代码,因此我们所有的测试都会失败。 (而且我们会立即知道。)但是,一旦我们添加了模型的代码,测试就通过了。

      使用第三方功能的存根

      assert<span>.equal(sum, 4, "sum should equal 4");</span>
      >现在我们有了一个简单的毒品模型,我们可以开始定义其行为。我们的模型应该做的一件事是在任何属性更改时更新数据库。但是,在单元测试环境中,我们将没有实际的数据库检查。另一方面,我们实际上并未编写任何代码来进行数据库更新。相反,我们依靠骨干来处理这种互动。这暗示了此测试案例的单位测试策略。我们需要知道的是,骨干模型使用save()方法更新任何支持商店正在持续使用该模型。在我们的情况下,备份商店是数据库。这是我们可以使用的单元测试代码:

      >在每个测试之前,我们还包括一些其他代码,并且在每个测试后都添加了一部分代码以执行。该额外的代码管理Sinon存根,该函数有效地将代码中的另一个函数取消。在我们的情况下,存根将this.todo的save()方法无效。有了存根,对该方法的呼叫实际上不会访问后库库。相反,Sinon拦截了这些电话,并立即返回。这种行为很重要。如果我们试图在单元测试环境中执行实际的骨干保存()方法,则该调用将失败,因为不会有数据库或服务器API。

      >存根后,我们的测试用例可以使用它来验证模型的行为。在第一个测试案例中,我们立即将TODO的标题设置为新值。由于这更改了标题属性,因此我们希望我们的模型更新其备份商店。为了检查我们是否只验证了该存根是被调用的。为了使我们的模型通过这些测试,我们可以寻找变更事件并做出适当的响应。

      <span>var sum = 2 + 2;</span>
      测试视图

      当然,如果我们的应用程序实际上没有向用户展示Todos,那么我们的应用程序将不会对任何人有任何好处,这需要创建一些HTML。我们将使用骨干视图来实现该功能。在我们琐碎的应用程序中,我们只想将每个待办事项作为列表项目。这是将使我们开始的测试用例。

      >

      assert<span>.equal(sum, 4, "sum should equal 4");</span>
      >我们通过两个测试用例开始对视图的测试。首先,我们确保视图的渲染方法返回视图本身。这是主链中常见且非常方便的惯例,因为它允许方法链条。我们的第二个测试用例验证了渲染创建的HTML元素是列表项目(
    • )。通过这些测试所需的代码是直接的骨干视图。

      接下来,我们可以开发该列表项目视图的详细内容。例如,我们希望完整的列表项目看起来像以下内容。
      <span>expect(sum).to.equal(4);</span>
      >

      对于我们的测试案例,我们可以利用jQuery从视图的主要元素中提取单个元素。
      sum<span>.should.equal(4);</span>

      请注意,在上一个测试案例中,我们将模型的save()方法固定了。由于我们正在从其默认值中更改属性,因此我们的模型将尽职尽责地将其持续到其备用商店。但是,在单元测试环境中,我们将没有数据库或服务器API。该存根取代了缺失的组件,并允许测试无错误进行。为了通过这些测试通过,我们必须在我们的视图中添加一些其他代码。
      CREATE TABLE `todos` (
        `id`       int(11)      NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.',
        `title`    varchar(256) NOT NULL DEFAULT ''     COMMENT 'The text for the todo item.',
        `complete` bit(1)       NOT NULL DEFAULT b'0'   COMMENT 'Boolean indicating whether or not the item is complete.',
        PRIMARY KEY (`id`)
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'
      
      >

      测试模型/视图交互
      <span><span>
      </span><span><span><span> lang<span>="en"</span>></span>
      </span>  <span><span><span>></span>
      </span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
      </span>    <span><span><span><title>></title></span><span><span></span>></span>
      </span>  <span><span><span></span>></span>
      </span>  <span><span><span>></span>
      </span>    <span><span><span><h1 id="gt">></h1></span>List of Todos<span><span></span>></span>
      </span>
          <span><span><span><script> src<span >="lib/jquery-1.9.0.min.js"</script></span>></span><span><span></span>></span>
      </span>    <span><span><span><script> src<span >="lib/underscore-min.js"</script></span>></span><span><span></span>></span>
      </span>    <span><span><span><script> src<span >="lib/backbone-min.js"</script></span>></span><span><span></span>></span>
      </span>    <span><span><span><script> src<span >="src/app-todos.js"</script></span>></span><span><span></span>></span>
      </span>    <span><span><span><script>></script></span><span>
      </span></span><span><span>      <span>$(function () {
      </span></span></span><span><span>        <span>var todos = new todoApp<span>.Todos</span>();
      </span></span></span><span><span>        todos<span>.fetch();
      </span></span></span><span><span>        <span>var list = new todoApp<span>.TodosList</span>({collection: todos});
      </span></span></span><span><span>        <span>$("body").append(list.el);
      </span></span></span><span><span>      <span>})
      </span></span></span><span><span>    </span><span><span></span>></span>
      </span>  <span><span><span></span>></span>
      </span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span>

      >现在我们已经验证了我们的视图实现会创建正确的HTML标记,我们可以测试其与模型的交互。特别是,我们要确保用户可以通过单击复选框来切换A TODO的状态。我们的测试环境不需要实际的人用户,因此我们将使用jQuery生成点击事件。但是,为此,我们必须将内容添加到真实的Live DOM中。该内容被称为测试

      夹具

      。这是单元测试代码。

      请注意,我们再次将todo's save()方法固定。否则,当我们通过模拟单击更改todo状态时,骨干将尝试更新不存在的备份商店。
      bash-3.2$ node --version
      v0.8.18
      bash-3.2$ npm --version
      1.2.2
      bash-3.2$
      

      对于测试用例本身,我们首先创建具有固定件ID的

      元素,然后将该元素添加到我们的实时文档中。在这种情况下,实时文档是显示我们测试结果的网页。尽管我们在验证测试案例后立即删除元素,但我们也将其显示属性设置为无,因此它不会干扰Mocha的测试结果。实现此功能的代码包括对TODO模型的少量添加。添加是一种新的togglestatus()方法。>
      <span>var sum = 2 + 2;</span>

      在视图中,我们想在元素上查看单击事件,并为模型调用此方法。

      assert<span>.equal(sum, 4, "sum should equal 4");</span>

      测试集合

      在这一点上,我们的应用程序几乎完成了。剩下的唯一功能是将所有招待员聚集在一起。自然,我们将使用骨干收藏。实际上,我们不会在收藏中做任何特别的事情,因此我们真的不需要任何单位测试。

      但是,我们可以验证我们对集合观点的实施是否合适。我们希望该视图呈现为无序列表(

        )。测试用例不需要我们以前从未见过的任何功能。>
      <span>expect(sum).to.equal(4);</span>

      视图实现也很简单。它跟踪集合中的任何添加并更新视图。对于初始渲染(),它一次只会一次添加一个集合中的所有模型。

      >
      sum<span>.should.equal(4);</span>

      奖励测试:验证API

      CREATE TABLE `todos` (
        `id`       int(11)      NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.',
        `title`    varchar(256) NOT NULL DEFAULT ''     COMMENT 'The text for the todo item.',
        `complete` bit(1)       NOT NULL DEFAULT b'0'   COMMENT 'Boolean indicating whether or not the item is complete.',
        PRIMARY KEY (`id`)
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'
      
      由于我们的REST API完美地匹配了骨干期望期望的API,因此我们不需要任何自定义代码来管理API交互。结果,我们不需要任何单位测试用例。在现实世界中,您可能不会那么幸运。如果您的API不符合骨干惯例,则可能需要覆盖或扩展一些骨干代码来处理非标准API。该额外的代码也需要单位测试。幸运的是,即使在单元测试环境中,测试API交互也相对容易。

      测试API交互的最简单方法依赖于sinon.js的假服务器功能。不幸的是,该功能仅在Sinon的浏览器实现中(当前)可用。它明确排除在Node.js实现中。有一些骇客可以在Node.js中运行它,但是这些骇客很脆弱,并且依赖于内部实现细节。如果可能的话,最好避免它们。幸运的是,如果没有Sinon的假服务器,我们就可以通过。

      >秘密知道骨干依赖于jQuery的$ .ajax()函数来实现REST API。我们可以通过固定该功能来拦截API相互作用。当我们启动功能时,我们将要替代自己的响应。 存根的屈服方法为我们提供了这个机会。它告诉辛农(Sinon)在称呼该存根时应采取什么其他动作。这是一个完整的测试案例,可以验证我们的收集使用REST API正确初始初始初始初始初始初始初始初始初始初始初始。

      <span>var sum = 2 + 2;</span>
      完成!

      从随后的屏幕截图中可以看到,我们现在已经编写了通过所有单元测试用例的代码。至少目前,开发是完整的。

      >

      在集成期间进行测试

      单元测试骨干。JS应用程序>现在,我们的应用程序的客户端开发已经完成(并且我们已经有了证明这一点的测试),我们可以将JavaScript安全地塞入源代码管理系统中。然后可以将其集成到整个应用程序的构建过程中。作为该过程的一部分,我们希望执行我们开发的所有测试用例。这将确保构成最终部署的代码通过我们定义的所有测试。它还将防止无意中引入新错误的代码的“次要调整”。

      在构建过程中,我们可能希望从命令行执行测试,而不是在Web浏览器中执行测试。我们不需要单个测试用例的细节,只是保证它们都通过了。 Node.js非常容易适应这一要求。我们只需要对我们的源代码和单元测试代码文件进行几个小添加。

      >

      我们的代码需要这些修改,因为Node.js处理全局变量的处理方式与Web浏览器不同。在Web浏览器中,默认情况下,JavaScript变量在范围内是全局。另一方面,node.js默认情况下将变量限制在其本地模块中。在那个环境中,我们的代码将无法找到所需的第三方库(jQuery,下划线和骨干。 。

      >我们还需要调整测试代码。测试脚本需要访问自己的库(jQuery,Chai,Sinon.js和Sinon-Chai)。此外,我们需要添加一些额外的内容来模拟Web浏览器的文档对象模型(DOM)。回想一下,我们的点击处理测试要求我们将“固定装置”

      临时添加到网页。当然,Node.js通常没有网页。但是,JSDOM节点软件包让我们模仿一个。下面的代码为我们的测试创建了一个最小的,模拟的网页。>
      <span>var sum = 2 + 2;</span>

      >包装这些语句测试的条件,以查看我们是否在Node.js环境中运行,而不是Web浏览器。在浏览器中,不需要额外的语句,因此我们可以安全地跳过它们。

      >通过这些更改,我们可以从命令行执行完整的测试套件。只需导航到项目的根文件夹并执行命令摩卡咖啡即可。结果看起来很熟悉。

      >

      单元测试骨干。JS应用程序当然,摩卡咖啡返回出口水平,以指示是否通过了所有测试。这使我们可以将测试自动化为连续集成过程的一部分,或者仅仅是保留我们自己的理智的本地预设脚本。

      结论

      在这一点上,我们已经实现了目标。我们有一个单元测试环境在开发过程中在后台运行,并在任何测试失败时立即通知我们。测试在网络浏览器中执行,使我们在编码时完全访问了浏览器的开发工具。相同的测试也从命令行脚本同样运行良好,因此我们可以在构建或集成过程中自动执行。

      资源

      这是文章中使用的主要单元测试资源。

      >

      >命令行JavaScript执行环境:node.js

        > JavaScript单元测试框架:Mocha
      • 测试开发环境:test’em
      • > JavaScript断言库:Chai断言库
      • 间谍,存根和模拟:sinon.js
      • 其他断言:sinon.js chai
      • >
      • 在单位测试backbone.js应用程序上的常见问题(FAQ)
      backbone.js中的单元测试与其他JavaScript框架相比?

      backbone.js与其他JavaScript框架一样,支持单元测试以确保应用程序的质量。但是,由于其灵活性和简单性,Backbone.js脱颖而出。它并不决定您的应用程序应如何构建,从而使开发人员可以自由设计自己的应用程序,因为他们认为合适。这种灵活性扩展到单元测试,使开发人员可以选择其首选的测试工具和方法。此外,与其他框架相比,Backbone.js具有较小的占地面积,使其用于单元测试更快,更有效。

      >

      >我可以在Backbone.js中使用什么工具?是否可以在backbone.js中用于单元测试的几种工具。一些受欢迎的包括摩卡咖啡,茉莉和开玩笑。 Mocha是一种功能丰富的JavaScript测试框架,可为开发人员提供一种测试其应用程序的简单方法。茉莉花是用于测试JavaScript代码的行为驱动的开发框架。它不依赖浏览器,DOM或任何JavaScript框架,因此非常适合测试backbone.js应用程序。另一方面,开玩笑是一种全面的测试解决方案,专注于简单和支持大型Web应用程序。 Backbone.js应用程序的测试涉及为应用程序的每个组件创建测试用例。这包括模型,视图和收藏。每个测试用例应涵盖组件的特定功能,并应独立于其他测试用例。您可以使用Mocha或Jasmine等测试框架来编写测试。这些框架提供了定义测试用例,设置和拆除测试环境并做出断言的功能。

      >

      >我如何在backbone.js?

      中运行单位测试? JS取决于您使用的测试框架。例如,如果您使用的是摩卡咖啡,则可以使用Mocha命令行工具运行测试。如果您使用的是茉莉花,则可以使用Jasmine命令行工具运行测试。这些工具提供了运行单个测试用例,整个测试套件或应用程序中所有测试的选项。他们还提供了有关测试结果的详细报告,包括通过,失败和跳过的测试数量。

      我可以在Backbone.js.js吗?自动化单元测试在backbone.js中。自动化涉及建立连续集成(CI)系统,该系统每当对代码进行更改时会自动运行测试。这样可以确保更改引入的任何错误都会立即捕获。有几种CI工具,例如Jenkins,Travis CI和CircleCi,它们支持JavaScript,可用于在Backbone.js中自动化单元测试。

      在backbone.js?

      >

      >我如何在backbone.js中调试失败的单位测试?报告确定失败的原因。大多数测试框架都提供详细的错误消息,可以帮助您查明问题。您还可以使用chrome devtools或node.js debugger等调试工具逐步浏览您的代码并检查变量和函数调用。

      我可以在单元测试backbone.js吗? >是的,您可以在单元测试骨干链中使用模拟和存根。模拟和存根是模拟真实对象行为的假对象。它们用于隔离系统的其余部分。这使得测试更加可靠,更容易编写。有几个可用的库,例如sinon.js,它们提供了创建和管理模拟和存根的功能。

      >

      >如何改善backbone.js中的单元测试的性能? Backbone.js中单元测试的性能涉及优化您的测试和测试环境。这包括编写有效的测试,这些测试快速执行,并行运行测试以及使用快速的测试框架。您还可以使用分析工具在测试过程中识别慢速测试和瓶颈。

      >

以上是单元测试骨干。JS应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:社区,图书馆和资源Python vs. JavaScript:社区,图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript:所有工作方式从C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript引擎:比较实施JavaScript引擎:比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript:探索网络语言的多功能性JavaScript:探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的演变:当前的趋势和未来前景JavaScript的演变:当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。