Add Unit Test Samples to the Templates

[on3al]

These templates are extremely helpful for getting started, but I'm at a loss how to fit unit testing into this workflow. Could someone please look into adding a working sample of a unit test using jasmine/karma? A jasmine test page in addition to the index page on the home controller that updates as changes occur during development would be great.

[laskoviymishka]

Good point, this issue related to #9.
A jasmine test page in controller IMHO is not quite good, it better to run your tests from CLI via something like karma. But option to add unit tests should be presented in yo generator definetely

[JeremyLikness]

Definitely think karma tests should be a part of the workflow as an option to add on, so that with PhantomJS they can be run as part of a Continuous Integration and Deployment

[rgamage]

I agree, a working example of Jasmine/Karma unit tests would be extremely helpful. We're at our wit's end at this point trying to find a way to get this to work with this template.

[SteveSandersonMS]

I've put an example of Karma+Jasmine+Chai testing in a separate branch here: 3d50174

Is this what you're trying to do? To add this to your own project:

• Add the files ClientApp/tests/counter.ts and karma.conf.js from that Git commit to the same locations in your project
• Run npm install chai jasmine-core karma karma-chai karma-chrome-launcher karma-jasmine karma-webpack --save-dev
• Run tsd install jasmine chai --save (and if you don't have tsd, run npm install -g tsd first)
• Run npm install -g karma-cli, but do not install karma itself globally. Just in case you already did in the past, run npm uninstall -g karma, because having it installed globally causes problems.
• Now make sure your vendor file is built (webpack --config webpack.config.vendor.js)
• Finally you can run karma start

Are these the kinds of tests you want to write?

[rgamage]

Thanks much Steve. Yes exactly those kinds of tests. We tried to implement this on our project but are getting errors any time we try to import. This test works:

describe("A suite", ()=> {
    it("contains spec with an expectation",()=> {
        expect(true).toBe(true);
    });
});

But this code does not:

import { Counter } from '../components/counter/counter';
describe("A suite", ()=> {
    it("contains spec with an expectation",()=> {
        expect(true).toBe(true);
    });
});

import 'angular2-universal-polyfills';
import { assert } from 'chai';
import { Counter } from '../components/counter/counter';


describe('Counter component', () => {
    it('should start with value 0', () => {
        const instance = new Counter();
        assert.equal(0, 0);
    });

    it('should increment the counter by 1 when requested', () => {
        const instance = new Counter();
        instance.incrementCounter();
        assert.equal(1, 1);
        instance.incrementCounter();
        assert.equal(1, 2);
    });
});

I've attached a screenshot of the error - unexpected token import.

[MarkPieszak]

Do you have a preproccessor setup to handle your spec files and compile the typescript? Karma doesn't know es6 imports / typescript by default. Hopefully soon it will!

[MarkPieszak]

I use ts-node in all my Node / karma / gulp situations to automatically handle all Typescript. Check it out in the future!

[rgamage]

Mark,
I believe these lines in the webpack.config.js should take care of transpiling the test script .ts files, right?

module: {
    loaders: [
        { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' },
        { test: /\.html$/, loader: 'raw-loader' },
        { test: /\.css/, loader: extractCSS.extract(['css']) }
    ]

In the branch Steve posted I don't see where he explicitly added any code to do what you're talking about other than the existing code above, which it seems should transpile everything inside the ClientApp folder (our test scripts are inside this folder, in ClientApp/specs folder, Steve's are in ClientApp/tests folder). Or maybe I'm missing something with this assumption?

[MarkPieszak]

You have the preproccessor sin karma config file and everything else in that commit?

Under files there that commit is also pointing to ClientApp/test/ so that might be it!

files: [
   // Note: you must have already run 'webpack --config webpack.config.vendor.js' for this file to exist
     './wwwroot/dist/vendor.js',

      './ClientApp/tests/*.ts', // <-- CHANGE THIS
      './ClientApp/tests/**/*.ts'
    ],

    preprocessors: {
      './ClientApp/tests/*.ts': ['webpack'],
      './ClientApp/tests/**/*.ts': ['webpack']
    },

[SteveSandersonMS]

The Unexpected token import message sounds like your TypeScript is either not being transpiled at all, or is being transpiled to a newer version of JavaScript than your browser supports natively (e.g., ES6). Please check your tsconfig.json and make sure it's the same as in the repo I linked to, along with your karma.conf.js being the same.

I'll close this since it's now seeming to be a TypeScript/Karma usage question, and will reopen a new issue that just reflects the original request (adding unit tests to the templates). Hope that's OK.

[rgamage]

Thanks so much for your work on this. We did finally get it working with all of your help.