Question

我有一个简单的测试，我试图通过茉莉花。这是ts文件。

单位-的test.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注释行，因为这实际上是我的组件的定义...我得到以下错误

有人可以告诉我为什么我会收到此错误。我尝试过导入＆＃34;反射元数据＆＃34;也没有成功

Answer 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>

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

1 个答案: