Jasmine 测试 Angular2 组件在 @Component 注释上失败答案

【问题标题】：Jasmine Testing Angular2 Components failing on @Component annotationJasmine 测试 Angular2 组件在 @Component 注释上失败
【发布时间】：2016-02-05 16:11:29
【问题描述】：

我正在尝试通过 jasmine 进行一个简单的测试。这是 ts 文件。

单元测试.html

<html>
<head>
    <title>1st Jasmine Tests</title>
    <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css" />
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <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/zone/lib/zone.js"></script>-->

</head>
<body>

    <script>
        // #2. Configure systemjs to use the .js extension
        //     for imports from the app folder
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {
                'test': { defaultExtension: 'js' },
                'app': { defaultExtension: 'js' }
            }
        });
        // #3. Import the spec file explicitly
        System.import('test/test.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>

test.spec.ts

import {TestComponent} from "../app/components/about/test.component"

describe('Test Component->', () => {
    it('has name given in the constructor', () => {
        var t1 = new TestComponent('Super Cat');
        expect(t1.myValue).toEqual('Super Cat');
    });
    it('does not have the id given in the constructor', () => {
        var t2 = new TestComponent('Super Cat');
        expect(t2.myValue).not.toEqual(1);
    });
});

test.component.ts 注意注释掉的组件注释

import {Component} from 'angular2/core';

//@Component({
//    selector: 'test-component',
//    templateUrl: "<div></div>",
//})

export class TestComponent {

    constructor(value: string) {
        this.myValue = value;
    }

    public myValue = '';

    onKey2() {
        return this.myValue;
    }
}

现在，如果我在 @Copmonent 注释被注释掉的情况下点击 unit-test.html，我会得到以下结果

但是，如果我取消注释 @Component 注释行，因为这实际上是我的组件的定义方式...我收到以下错误

谁能告诉我为什么会出现这个错误。我也尝试过导入“reflect-metadata”，但没有成功

【问题讨论】：

标签： unit-testing jasmine angular typescript1.7

【解决方案1】：

好的，我想我明白了......我必须按照这个确切的顺序将我的 unit-test.html 中的脚本部分更改为以下内容！现在我只需要弄清楚如何将其拉入一个单独的项目中

<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/testing.dev.js"></script>
<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>

【讨论】：