nelsonic/learn-karma

Dive into Karma JavaScript Test Runner

GoTo: https://github.com/dwyl/learn-karma

Dive into Karma JavaScript Test Runner

---

Not only can data be "real" but so can testing (in "real" browsers)!

What is Karma?

If you've never heard of Karma, prepare to have your mind blown! :-)

Official Description: Karma is a [test automation] tool that spawns a web server and executes source code against test code for each of the browsers connected. The results for each browser are examined and displayed via the command line so developers can see which browsers and tests passed or failed.

In other words, you can automatically test all your front-end code in any / all your target browsers each time you save your work.

Why is Karma Awesome?

You don't have to think about switching contexts to run your tests. Simply save the file you are working on and Karma's watcher will automatically instruct all the connected browsers to re-run the tests.

Imagine you have 10 browsers you need to test your code against: [Internet Explorer 7/8/9/10, Firefox 3.5/Latest, Chrome, Safari Mac/iOS, Opera] If the target browsers are all on the machine that is running Karma, you would simply add them to the configuration file and Karma would manage them for you.

Any browsers on machines/devices can connect to Karma over the internet and run tests simply by pointing the browser at the Karma server: http://test.acme.com:9876/ or using a service like http://localtunnel.me to make your development machine accessible outside of your network.

Once the browser is connected to Karma it will run all the tests for you on auto-pilot and respond with test results.

Get Started

If you are learning by cloning this repository

git clone https://github.com/nelsonic/learn-karma.git

then install dependencies (karma and jasmine) locally:

npm install

Otherwise, if you are going to run Karma for all your projects (because you think its awesome):

sudo npm install -g karma

As of version 0.12

sudo npm install -g karma-cli

Karama Configuration (File)

Run the Karma initilisation (wizard) to create your configuration file:

karma init

Go through each step and select the defaults. You can always change them manually in your karma.config.js file.

Once you are through the wizard, initiate Karma:

karma start karma.conf.js

This will open a browser window (what ever the default on your computer is) with the url: http://localhost:9876/

I will need to come back to this tutorial later as have just been handed a ton of work that needs to be done Today! :-( if you can't wait read: http://www.tuesdaydeveloper.com/2013/06/angularjs-testing-with-karma-and-jasmine/

Notes

Useful Links

• Project Site: http://karma-runner.github.io/
• Karma GitHub page: https://github.com/karma-runner/karma
• Karma Config File: http://karma-runner.github.io/0.8/config/configuration-file.html
• Sample Karma Config: https://github.com/karma-runner/karma/blob/v0.8.5/test/client/karma.conf.js
• Using Karma with Travis CI: http://karma-runner.github.io/0.10/plus/travis.html
• Jasmine Report: http://stackoverflow.com/questions/16684582/generate-jasmine-report-using-karma-runner
• https://egghead.io/lessons/unit-testing-introduction-to-karma (requires webstorm...)
• Non angular-specific: http://kroltech.com/2013/11/javascript-tdd-with-jasmine-and-karma

Using Karma with Travis CI

• http://karma-runner.github.io/0.8/plus/Travis-CI.html
• http://docs.travis-ci.com/user/gui-and-headless-browsers/

How-to Videos

• Testacular Tutorial (still relevant): http://www.youtube.com/watch?v=MVw8N3hTfCI

Tutorials

• Angular-specific: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html
• Angular (Again): http://www.tuesdaydeveloper.com/2013/06/angularjs-testing-with-karma-and-jasmine/

learn-karma's Issues

Re-visit and Update this Tutorial?

Can we use Karma standalone just to run our non-angular tests (without grunt/gulp/mocha...!) ??