standalone Jasmine vs Karma - Jasmine

Question

I'm new to testing in general, and have been teaching myself Jasmine. I'm trying to understand the differences between running Jasmine and jQuery-Jasmine in Karma vs running Jasmine by itself. The tutorials for Jasmine don't address the adjustments that are needed if using Karma.

Can someone explain to me how Karma-Jasmine differs in requirements from the standalone Jasmine? Does it still require a spec runner, and is the file structure still the same?

I'm testing DOM events - a lot of click handlers - and don't understand how to mock this. Can someone outline some basic ideas? If I want to, for example, check that a p element has been added to a div after a user clicks a button, how would that work in both file structure and functions?

Thanks.

Answer 1

Karma and Jasmine's SpecRunner.html are both test runners (aka spec runners). The difference between the two is that Karma is an application that runs outside the browser, while SpecRunner is a normal HTML file with a bunch of script references that you open up in a browser.

A test runner that lives outside the browser gives you a number of benefits:

• automatically run tests in one or multiple browsers at once
• automatically run tests on file changes, without having to manually refresh the browser
• file pre-processing, i.e.
  • compiling TypeScript to JavaScript before running tests
  • inlining HTML templates into JavaScript
• file/report generation, i.e. test coverage reports
• test framework flexibility
• easily include/exclude test and source files using file and folder patterns rather than trying to wrangle 100s of <script> references in a HTML file

Answer 2

I haven't used jasmine-jquery, but for jasmine tests with Karma, Karma uses the karma.conf.js to discover external dependencies (such as jasmine-jquery). Particularly the files property. Some nice examples are here If you're running jasmine tests with jasmine's SpecRunner.html, you need to make sure anything you use is linked in the SpecRunner.html with script tags.

As for testing click handlers, one good bet might be just to call the click handler functions directly. It sounds like if you want something more realistic, you're getting closer to functional testing. For that you might consider incorporating nightmare to automate user interactions such as clicks, etc.