CiviCRM Community Forums (archive)

In the past month, we announced new dependencies for Civi development (https://civicrm.org/blogs/totten/new-46-dev-composer-and-nodejs) and merged Peter Haight's PR #4767 (https://github.com/civicrm/civicrm-core/pull/4767) which adds support for unit-testing of Angular code (https://docs.angularjs.org/guide/unit-testing) with Karma and Jasmine (http://karma-runner.github.io/ and http://jasmine.github.io/2.1/introduction.html). As of Tuesday, Jenkins will automatically run these tests on any PRs, which means...

It's alive!

That's a lot of buzzwords and links. Which should I look at first?

Try it out first.

• Get the latest code from the master branch. Run setup.sh.
• In the main "civicrm" git repo, run "npm test". Chrome may open a new window. Minimize Chrome. Leave these commands running.
• In a text-editor, open up tests/karma/unit/crmCaseTypeSpec.js (or any of the other files in that folder).
• Edit crmCaseTypeSpec.js. Add a new test case and save.

it('fails on a contradiction', function() {
  expect(false).toBe(true);
});


• Go back to the "npm test" window. It should display an error.
• Alternately hack the .js file and look at "npm test". It should update the test results promptly.

it('succeeds on a tautology', function() {
  expect(true).toBe(true);
});

When you have a feel for the basic process, the Angular documentation (https://docs.angularjs.org/guide/unit-testing) can provide a tutorial with some boilerplate, and the Jasmine documentation (http://jasmine.github.io/2.1/introduction.html) can provide a reference-manual with detailed test features.

Get your dagfangled middlewarez out of my way!

OK. "npm test" is a thin wrapper around karma. You can call "karma" directly and make it do more tricks. This can be useful if you want to test with different web-browsers or to report results in a different format.

## Call karma using the copy in the Civi folder
node node_modules/karma/bin/karma start tests/karma.conf.js

## Or, if you have installed karma globally
karma start tests/karma.conf.js

## Maybe call karma and use http://phantomjs.org/
karma start tests/karma.conf.js --browsers PhantomJS

## Use Karma as part of continuous integration
karma start tests/karma.conf.js --single-run --browsers PhantomJS --reporters=dots,junit
# results are stored in tests/output/karma.xml

What about extensions?

That's new terrain. It's probably easier to learn in core first. When you understand karma, it shouldn't be too hard to hack together a karma.conf.js file for testing code in an extension. The challenge will be going from a hacked/local variant of karma.conf.js to something reusable. If you pursue it, please share your experiences.

Aside: Avoiding redundant runtimes

The Javascript tooling (karma, jasmine, bower, etc) adds a big chunk to disk usage (currently ~70mb). That's probably fine for a lot a folks, but... for me... I have ten copies of Civi running, and I sometimes treat sites like a 4 year-old treats wooden blocks. (Hint: There's a lot of repetitive destruction.) So an extra 70mb adds to a lot.

If you use buildkit, then buildkit will download the tools once, and setup.sh won't download any extra copies. As with everything else in buildkit, the commands are part of $BUILDKIT/bin.

If you're a JS fiend who has already installed karma and bower globally, then setup.sh won't download any extra copies. You can just use your existing copies. You may need to tune them (e.g. passing "--browsers" with your preferred browser), but you're already a JS fiend, so you know about that.

Open questions

A few things I'm still on the fence about. Wonder if there are other opinions:

• The default configuration for "npm test" is to use Chrome as the browser. Almost every web developer on the planet has Chrome installed already. However, some folks don't, and it's a little silly that we have to open an empty placeholder popup. Looks like we can automatically install http://phantomjs.org/ instead.
• Tempted to move karma.conf.js into the root of the git repo. That seems a bit more canonical.