Typescript – unit test using typescript and karma

amdkarma-runnertypescript

I am using karma, jasmine, typescript to write unit test for the helloworld application from https://angular.io/docs/js/latest/quickstart.html.

Below is the test code:

///<reference path="../typings/jasmine/jasmine.d.ts"/>

import {
    MyAppComponent
} from '../spray1';

describe("name is Alice", () => {
    var comp = new MyAppComponent();

    it("verify name", () => {
        expect(comp.name).toBe("Alice"); 
    });
});

tsc (with "–module commonjs") transpiles this test code into:

///<reference path="../typings/jasmine/jasmine.d.ts"/>
var spray1_1 = require('../spray1');
describe("name is Alice", function () {
    var comp = new myAppComponent_1.MyAppComponent();
    it("verify name", function () {
        expect(comp.name).toBe("Alice");
    });
});

karma fails to run the unit test:

Uncaught Error: Module name "../myAppComponent" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at /Users/spray1/web2/node_modules/requirejs/require.js:141

Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 SUCCESS (0 secs / 0 secs)

If I use tsc with "–module amd", the transpiled test code is:

define(["require", "exports", '../spray1'], function (require, exports, spray1_1) {
    describe("name is Alice", function () {
        var comp = new spray1_1.MyAppComponent();
        it("verify name", function () {
            expect(comp.name).toBe("Alice");
        });
    });
});

"karma start test/karma.conf.js" threw below error on the transpiled js files:

Uncaught Error: Mismatched anonymous define() module: function (require, exports, spray1_1) {
describe("name is Alice", function () {
var comp = new spray1_1.MyAppComponent();
it("verify name", function () {
expect(comp.name).toBe("Alice");
});
});
}
http://requirejs.org/docs/errors.html#mismatch
at /Users/spray1/web2/node_modules/requirejs/require.js:141
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 ERROR (0.04 secs / 0 secs)

As you see, I have trouble to make it work either way (–module commonjs/amd). Which way is the right way to go and how to make it work? Appreciate any help!

Best Answer

So, the link you've provided is to the JavaScript version of the quickstart, but it appears you're using TypeScript.

I would suggest looking at the TypeScript version of the quickstart documentation. It has a tsconfig.json file which provides the appropriate compile target:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Related Solutions

Typescript – How to explicitly set a new property on `window` in TypeScript

I just found the answer to this in another Stack Overflow question's answer.

declare global {
    interface Window { MyNamespace: any; }
}

window.MyNamespace = window.MyNamespace || {};

Basically, you need to extend the existing window interface to tell it about your new property.

Typescript – get and set in TypeScript

TypeScript uses getter/setter syntax that is like ECMAScript4/ActionScript3.

class foo {
    private _bar: boolean = false;
    get bar(): boolean {
        return this._bar;
    }
    set bar(value: boolean) {
        this._bar = value;
    }
}

That will produce this JavaScript, using the ECMAScript 5 Object.defineProperty() feature.

var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (value) {
            this._bar = value;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

So to use it,

var myFoo = new foo();
if(myFoo.bar) {         // calls the getter
    myFoo.bar = false;  // calls the setter and passes false
}

However, in order to use it at all, you must make sure the TypeScript compiler targets ECMAScript5. If you are running the command line compiler, use --target flag like this;

tsc --target ES5

If you are using Visual Studio, you must edit your project file to add the flag to the configuration for the TypeScriptCompile build tool. You can see that here:

As @DanFromGermany suggests below, if your are simply reading and writing a local property like foo.bar = true, then having a setter and getter pair is overkill. You can always add them later if you need to do something, like logging, whenever the property is read or written.

Getters can be used to implement readonly properties. Here is an example that also shows how getters interact with readonly and optional types.

//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
    readonly bar: string;
    readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined

//
// interface with optional readonly property
//
interface iFoo {
    readonly bar: string;
    readonly baz?: string;
}

const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar)  // prints 'bar'
console.log(ifoo.baz)  // prints undefined


//
// class implements bar as a getter, 
// but leaves off baz.
//
class iBarClass implements iFoo {

    get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar)  // prints 'bar'
// accessing bas gives warning that bas does not exist 
// on iBarClass but returns undefined
console.log(iBarInstance.bas) // prints 'undefined'
// note that you could define baz as a getter
// and just return undefined to remove the warning.


//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
    private readonly _baz?: string

    constructor(baz?:string) {
        super()
        this._baz = baz
    }

    get baz() { return this._baz; }
}

const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar)  // prints bar
console.log(iBazInstance.baz)  // prints baz

Best Answer

Related Solutions

Typescript – How to explicitly set a new property on `window` in TypeScript

Typescript – get and set in TypeScript

Related Topic