Angular5 part-2

There is only word which is synonymous with Angular, C H A N G E. Few months ago I made a post on Angular2 & now we have landed on Angular5. It is definitely challenging to keep us on par with the latest in the Angular world.

So to keep my dice rolling, I decided to make my angular posts into a series. In this we look at debugging our unit tests on a browser. In Javascript world, we all know and/or have used Jasmine for Unit Testing at some point.

By default it runs on a headless browser (usually PhantomJS) so we launch the test case/suite from terminal & just wait till test results but we never get to see anything!

But if we change this to a browser like Chrome, we could actually see how the test cases are being executed. Just like UI automation tests, fro example, this would show us text being inserted on forms, button being clicked & etc. Without no more explaination, let’s dive into how we establish this; Just 3 steps!

01 | Get the karma chrome launcher for your project

npm install karma-chrome-launcher --save-dev

02 | Modify karma.conf.json to add the following

    customLaunchers: {
      Chrome_without_security: {
        base: 'Chrome',
        flags: ['--disable-web-security']
      }
    },
    broswers [
        'phantomJS','Chrome', 'Chrome_without_security'
    ]

03 | add the following script definition to package.json

"test-watch": "node node_modules/karma/bin/karma start --browsers=Chrome,Chrome_without_security --single-run=true --auto-watch",

That is it!

Now open up terminal from your project path and hit the following and see magic happen on chrome (look for port on the output)

npm run test-watch
Advertisements