Angular 2和Jasmine

我一直在遵循教程https://angular.io/docs/ts/latest/guide/testing.html来使用Tour of Heroes教程来实现Jasmine with Angular 2。Angular 2和Jasmine

当我用“hero.spec”测试时，一切正常。但是，当我尝试用名为“app.spec”的单元测试文件测试“app.component.ts”时，系统JS不会向其添加“js”。我收到以下错误：

angular2-polyfills.js:126 GET http://127.0.0.1:8080/src/test/app.component 404 (Not Found)` 

system.src.js:1068 GET http://127.0.0.1:8080/angular2/core 404 (Not Found)

的app.spec.ts文件如下：

import { AppComponent } from 'app.component'; 

describe('AppComponent',() => { 

let app : AppComponent; 

beforeEach(() => { 
    app = new AppComponent(); 
}); 

it('true to be true',() => { 
    expect(true).toEqual(true); 
}); 

});

单元测试文件如下：

<!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 files explicitly 
    Promise.all([ 
      System.import('app/app.spec'), 
      System.import('app/app.component') 
     ]) 

      // #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>

它看起来像它的系统JS将“js”附加到“app.spec”而不是“app.component”或其他。任何人都可以将我指向正确的方向吗？

感谢

来源

2016-04-20 Christopher Grigg

你可以在你的System.config中尝试defaultJSExtensions：true吗？ – echonax

@echonax的确看起来不够紧密。好问题 - 我敢打赌，修复它。 – drewmoore

尝试：import { AppComponent } from './app.component' 或者，如果app.component是应用程序文件夹下： './app/app.component'。 spec文件是否与组件相同的文件夹？

来源

2016-04-20 06:23:14

我认为你忘了将一些JS文件导入HTML文件，因为我看到angular2/core模块出现404错误。此外，我不认为您需要导入您要测试的模块（app.component），因为它将被导入到您的测试模块中。

此外，我看到你的测试文件不在app文件夹下，因为SystemJS试图通过这个URL加载它：http://127.0.0.1:8080/src/test/app.component。您只配置app文件夹。这就是为什么该工具不附加js扩展名。

这里是什么，我会在你的HTML文件中使用：

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/testing.dev.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> 

<script> 
    System.config({ 
    packages: { 
     app: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('angular2/src/platform/browser/browser_adapter') 
    .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); }) 
    .then(function() { 
     System.import('app/foo.bar.spec') 
     .then(null, console.error.bind(console)) 
     .then(window.onload); 
    }) 
</script>

看到这个plunkr：https://plnkr.co/edit/YAVD4s?p=preview。

来源

2016-04-20 07:21:25

Angular 2和Jasmine

回答

相关问题