我们如何在角度2中编写基本单元测试？

Question

我们如何在角度2中编写基本单元测试？

Rum*_*man 7 javascript unit-testing angular

我在官方网站上有以下角度文档.但在文档测试中,部分已过时,无法使用当前的角度2 beta版本.我需要编写一个基本测试来检查if条件是否正常工作.我怎么能用角度2中的茉莉花做到这一点.

Answer 1

Mar*_*arc 9

设置jasmine以使用angular2(beta.7)运行typescript单元测试:

设置Angular-Project
(参见说明5 Min Quickstart https://angular.io/guide/quickstart)

Rootdir是我的项目
用mpm安装茉莉花
```
npm install jasmine-core --save-dev --save-exact
```
Run Code Online (Sandbox Code Playgroud)
安装实时服务器
https://www.npmjs.com/package/live-server
获取语法/智能感知支持:
在myproject/typings中创建一个新文件jasmine.d.ts
```
/// <reference path="jasmine\jasmine.d.ts" /> 
```
Run Code Online (Sandbox Code Playgroud)
从https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jasmine/jasmine.d.ts获取jasmine.d.ts

并将其保存在myproject\typings\jasmine中作为文件jasmine.d.ts

在myproject中保存unit-test.html

<html>
 <head>
   <title>Angular2: Jasmine 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.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/app.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>

Run Code Online (Sandbox Code Playgroud)

.then(window.onload)对于启动testexecution非常重要.

请参阅此处等待加载模块以执行其包含的测试

在dir myproject\app中创建新文件app.spec.ts

import {AppComponent} from './app.component';


// Jasmin Test  App title property
describe('AppComponent', () => {
    var app: AppComponent = null

    beforeEach(() => {
    app = new AppComponent();
    app.title = "App in Test";
    });

   it('should have an title property', () => {

      expect(app.title).toBeDefined();
   });

   it('should have the title App in Test', () => {

      expect(app.title).toBe("App in Test");
   })
});


// Jasmin Test without Angular
describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
});

Run Code Online (Sandbox Code Playgroud)

从cmdline开始
```
live-server --open=unit-test.html
```
Run Code Online (Sandbox Code Playgroud)

这是我使用Angular 2在typescript中运行使用Jasmine运行Unit-Tests的工作设置.

如果您有任何错误,请发布您尝试过的内容以及Günther在评论中提出的失败位置.

Answer 2

Rum*_*man 0

现在，Angular 拥有关于 Angular 2 单元测试以及使用 jasmine 和 karma 进行端到端测试的良好文档。它使用示例进行了解释，非常容易理解和遵循。

参考：Angular 2测试

归档时间：	9 年，8 月前
查看次数：	562 次
最近记录：	8 年，1 月前