vendredi 5 février 2016

Jasmine Testing Angular2 Components failing on @Component annotation

I have a simple test I'm trying to run through jasmine. Here are the ts files.

Unit-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 NOTICE THE COMMENTED OUT COMPONENT ANNOTATION

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;
    }
}

Now if I hit the unit-test.html with the @Copmonent annotation commented out I get the following result

enter image description here

however if I uncomment the @Component annotation line, as this is really how my components will be defined... I get the following error

enter image description here

Can someone please tell me why I'm getting this error. I've tried importing "reflect-metadata" as well with no success

Aucun commentaire:

Enregistrer un commentaire