Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CodePen, AngularJS, and Jasmine!

DZone's Guide to

CodePen, AngularJS, and Jasmine!

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Online Web editors, like JSbin, plnkr, and CodePen, are awesome. They allow you to easily work on an idea without all of the muss and fuss of having to spin up a server. You can also share the idea with friends or the entire Internet easily. 
Unit test is something that all developers, especially AngularJS ones, are encouraged to do. I work on a lot of angular ideas initially in CodePen. I also write unit test in Jasmine, but getting the two to play nice together in CodePen wasn't as easy as I thought it should be. 
In the pen below I show how to get the two working together. The main trouble I was having was the order of the files. It has to be as follows:

  1. jasmine.css
  2. jasmine.js
  3. jasmine-html.js
  4. boot.js 
  5. angular.js
  6. angular-mocks.js
If you get the order wrong, you may get errors like:  ReferenceError: inject is not defined or  ReferenceError: module is not defined. These can make you think something is wrong with your code when there isn't. 
The pen below is written using Jasmine 2.0 and AngularJS 1.26.

See the Pen finished-jasmine-unit-test by Troy Miles (@Rockncoder) on CodePen.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}