角2打字稿应用测试 - 规格出现在茉莉

多次我按照这个教程用于测试的角度2应用程序：https://angular.io/docs/ts/latest/guide/testing.html 角2打字稿应用测试 - 规格出现在茉莉

与First app test部分完成后，前往unit-tests.html我看到我出现多个规格报告时间：

虽然我还没有做出任何改变教程代码，对于快速参考，这里是我单位tests.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Ng App Unit Tests</title> 

    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> 
</head> 
<body> 
<!-- #1. add the system.js library --> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script> 
    // #2. Configure systemjs to use the .js extension 
    //  for imports from the app folder 
    System.config({ 
     packages: { 
      'app': {defaultExtension: 'js'} 
     } 
    }); 

    // #3. Import the spec file explicitly 
    System.import('app/hero.spec') 

    // #4. wait for all imports to load ... 
    //  then re-execute `window.onload` which 
    //  triggers the Jasmine test-runner start 
    //  or explain what went wrong. 
      .then(window.onload) 
      .catch(console.error.bind(console)); 
</script> 
</body> 

</html>

个

hero.spec.ts

import {Hero} from './hero'; 

describe('Hero',() => { 
    it('has name',() => { 
     let hero:Hero = {id: 1, name: 'Super Cat'}; 
     expect(hero.name).toEqual('Super Cat'); 
    }); 
    it('has id',() => { 
     let hero:Hero = {id: 1, name: 'Super Cat'}; 
     expect(hero.id).toEqual(1); 
    }); 
});

任何想法可能出在哪里？

来源

2016-04-20 fips

对于Angular2.0.0-rc.5的教程，即对hero.ts的简单测试的结果是三倍时，此问题仍然存在。请注意，本教程中的下一组测试（即my-uppercase.pipe.ts）没有三倍的结果。所以不仅仅是所有的结果都是三倍的，只是一些。我猜这与事物的挑剔时机有关，例如简单测试完成的时间与需要其他更多复杂测试（其他下载？）的时间完成相对比，例如，当浏览器窗口完成加载并重新启动茉莉花时。 –

由于我以前的评论是标记为删除，我写下我的最终解决方案，以驱逐的问题。该解决方案的工作，唯一的问题是，它第一次显示了文字的HTML页面“未发现规格”，但是当所有的模块被加载，它会显示所有规格ANS其结果。

该解决方案所采取的书“角2开发与打字稿V7 MEAP”曼宁早期使用计划的：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Unit Tests</title> 
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 
    <!-- #1. Polyfills --> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <!-- #2. Zone.js dependencies --> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/zone.js/dist/async-test.js"></script> 
    <script src="node_modules/zone.js/dist/fake-async-test.js"></script> 
    <!-- #3. Add specs dependencies --> 
    <script src="app/treeNode.spec.ts"></script> 
    <script src="app/template.spec.ts"></script> 
    <script src="app/services/tree.side.service.spec.ts"></script> 
    <script src="app/services/tree.service.spec.ts"></script> 
    <!-- #4. Add Jasmine dependencies --> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> 
    <script src="node_modules/jasmine-expect/dist/jasmine-matchers.js"></script> 
    <!-- #5. Add the system.js library --> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script>System.packageWithIndex = true;</script> 
    <script src="systemjs.config.js"></script> 

    <script> 
     // #6. Configure SystemJS to use the .js extension for imports from the app folder 
     System.config({ 
      packages: { 
       'app': {defaultExtension: 'js'} 
      } 
     }); 

     var SPEC_MODULES = [ 
      'app/treeNode.spec', 
      'app/template.spec', 
      'app/services/tree.side.service.spec', 
      'app/services/tree.service.spec' 
     ]; 

     /** 
     * #7. Import the spec files explicitly 
     */ 
     Promise.all([ 
      System.import('@angular/core/testing'), 
      System.import('@angular/platform-browser-dynamic/testing') 
     ]) 
     .then(function (modules) { 
      var testing = modules[0]; 
      var testingBrowser = modules[1]; 
      testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule, testingBrowser.platformBrowserDynamicTesting()); 
      return Promise.all(SPEC_MODULES.map(function (module) { 
       return System.import(module); 
      })); 
     }) 
     .then(window.onload) 
     .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
</body> 
</html>

我希望你能找到这个解决方案是有用的。

来源

2016-08-31 13:12:21

我认为这应该是正确/可接受的解决方案。我一直在使用官方的在线Angular2（2.0.0-rc.5）教程，并且'hero.ts'测试结果增加了三倍（这里是原始问题），但不是'my-uppercase.pipe。 ts'测试结果（未在问题中讨论）。我使用了这个解决方案，用教程的'... spec（.ts）'文件替换了'SPEC_MODULES'数组。与其他一些公布的答案相比，该解决方案（A）将不适当的结果减少三倍为单一结果，但是（B）维持后续测试的实施和报告。 –

我无法重现你的问题。看到这个plunkr：https://plnkr.co/edit/viMSZD?p=preview。

我看到的唯一区别是，我包括那些茉莉花前SystemJS库文件：

<script src="https://code.angularjs.org/tools/system-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>

来源

2016-04-21 07:42:04

只是猜测，但我想知道原始问题是不是在这里转载，因为依赖关系是从“远方”（即“https ...”）加载的。在遵循官方在线Angular2.0.0-rc.5教程后，我确实得到了不适当的结果三倍，但是在那里，例如，jasmine.js在本地加载，即从'。因此，这个答案并不能解决问题，但它确实提供了一些有趣的证据，说明为什么问题有时会发生，但并非总是发生，也就是说可能与相对加载时间有关。 –

我正在关注该教程，并且在Jasmine实际上为我工作（本地）之前包括了SystemJS库文件。但我同意这可能只是掩盖了问题。 – shusson

我有相同的问题（测试案例出现3次而不是1次）。

为了解决它，我删除了.then(window.onload)致电System.import('app/hero.spec')诺言。

它看起来好像SystemJS模块能够在浏览器升起车窗load事件之前加载hero.spec.js。这会使后续对window.onload函数的调用过时。

来源

2016-05-05 13:32:37 Bit2Gosu

此解决方案不适用于浏览器引发窗口加载事件后加载的规范。我找到的一个（丑陋的）解决方法是在setTimeout中延迟包含它们的规格的执行。有关更多详细信息，请参阅[此处]（https://github.com/jasmine/jasmine/issues/1003）。 – pliski

这确实“解决”了问题，但不是以适当的方式。我一直在关注Angular2教程（现在版本为rc.5），测试结果与原始问题相比增加了三倍。但是，只有Hero测试才是真实的，也就是一些不需要Angular的非常简单的测试。本教程中测试管道的下一组测试不是三倍。实施此解决方案可将原始三重结果减少为适当的单一结果，但后续测试结果将完全跳过。因此，这个解决方案不是一个合适的完整解决方案 –

我同意，这不应该被接受的答案。事实上，正如@AndrewWillems所指出的，它实际上会导致其他测试失败。 – shusson

如果我使用lite-server我可以重现这个奇怪的行为。如果你遵循的angular2网站的例子，你会发现，他们正在使用live-server（注意“v”，而不是“牛逼”）。用live-server茉莉花正确呈现我的测试。也许有一些browser-sync魔法被注入html的问题？

来源

2016-06-22 08:01:33 locobytes

我不知道2016年6月22日最初发布这个答案时，官方在线Angular2教程的状态是什么，但当前的教程发布用于Angular2版本rc.5并没有显示“live-server”谷歌搜索中教程的任何位置，而“lite-server”确实显示在类似的搜索中。因此，我真的不认为这是通向解决方案的正确途径，并且可能会给出误导性的“正确”结果。（只是在这里猜测），迫使浏览器加载其他“东西”，推迟测试，这在某种程度上使得它们不会在window.onload上重复。 –

我遇到同样的问题，导入核心匀场库后问题消失。还请确保将其作为第一个脚本导入。

<script src="https://unpkg.com/core-js/client/shim.min.js"></script>

来源

2017-01-07 20:36:16

角2打字稿应用测试 - 规格出现在茉莉

回答

相关问题