Add Unit Test Samples to the Templates #87

Activity

1. laskoviymishka commented on May 23, 2016

   

   laskoviymishka

   on May 23, 2016

   Last edited by laskoviymishka

   Contributor

   More actions

   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
2. SteveSandersonMS

   added

   enhancement

   on Jun 14, 2016
3. JeremyLikness commented on Aug 15, 2016

   

   JeremyLikness

   on Aug 15, 2016

   Member

   More actions

   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
4. rgamage commented on Sep 8, 2016

   

   rgamage

   on Sep 8, 2016

   More actions

   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.
5. SteveSandersonMS commented on Sep 9, 2016

   

   SteveSandersonMS

   on Sep 9, 2016

   Member

   More actions

   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?

   👍React with 👍1Reacted by Eddie Oosthuizen
6. rgamage commented on Sep 9, 2016

   

   rgamage

   on Sep 9, 2016

   More actions

   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.
   
7. MarkPieszak commented on Sep 11, 2016

   

   MarkPieszak

   on Sep 11, 2016

   Contributor

   More actions

   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!
8. MarkPieszak commented on Sep 11, 2016

   

   MarkPieszak

   on Sep 11, 2016

   Contributor

   More actions

   I use ts-node in all my Node / karma / gulp situations to automatically handle all Typescript. Check it out in the future!
9. rgamage commented on Sep 12, 2016

   

   rgamage

   on Sep 12, 2016

   More actions

   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?
10. MarkPieszak commented on Sep 12, 2016

    

    MarkPieszak

    on Sep 12, 2016

    Last edited by MarkPieszak

    Contributor

    More actions

    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']
        },
    
11. SteveSandersonMS commented on Sep 13, 2016

    

    SteveSandersonMS

    on Sep 13, 2016

    Member

    More actions

    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.
12. SteveSandersonMS

    closed this as completedon Sep 13, 2016
13. rgamage commented on Sep 13, 2016

    

    rgamage

    on Sep 13, 2016

    More actions

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