AngularJS

Why AngularJS?

Migrating to AngularJS

Testing AngularJS

Testing is a core value of the AngularJS development team.

Are Some Tests Just Stupid?

Yes! You will probably write a lot of dumb tests.

So what is all this talk about testing?

Fact is web developers did not have many tools for testing until recently. Testing is not yet a common practice in front-end development, but web apps are becoming increasingly complex so Google created tools for testing their own suite of web apps. Thanks to guys like Miško Hevery and other AngularJS team members, Google made these tools open source and available for everyone.

Essentially these tools provide:

proof of testing

a way to catch bugs before the client does

a way to ensure that new code does not break old code

testable code that is more maintainable

Writing Testable Code

Test Driven Development means that code is written to be testable.

Learn to think about code in a way that makes it testable.

Testable code is usually modular and easy to understand.

Code that is not written to be testable is usually untestable.

How to Actually TestThere are many testing frameworks out there.

Here are 3 of the most popular:

These frameworks are very much alike. Jasmine is typically used with AngularJS, but you can use whatever you like.

Writing Tests with JasmineDownload from GitHub: http://pivotal.github.io/jasmine

Typical directory structure

http://www.adobe.com/devnet/html5/articles/unit-test-javascript-applications-with-jasmine.html

Writing Tests with Jasmine

describe("blogCtrl", function () {

it('Add a blog entry', inject(function($rootScope, $controller) {

var Ctrl = $controller('blogCtrl', {$scope: $rootScope.$new()});

Ctrl.addBlogEntry({“title”:”blog”, “content”:”blah blah”});

expect(scope.blogs.length).toEqual(1);

}));

it('Remove a blog entry by title', inject(function($rootScope, $controller) {

var Ctrl = $controller('blogCtrl', {$scope: $rootScope.$new()});

Ctrl.removeBlogbyTitle({“title”:”blog”});

expect(scope.blogs.length).toEqual(0);

}));

});

Running your Jasmine Tests

Running tests can be done manually or automatically.

Small, simple projects rarely need automatic testing. Test are written to run whenever any major changes are done as a way of catching bugs that you might not have expected.

Complex applications that have many people are working on them generally benefit from automated tests because those tests can quickly cover the entire code base in several seconds, catching bugs in modules you may not have even been aware of.

Automated Testing with Karma

Karma is an open source project started by developers at Google. It automates the testing process and has been used of for years to test everything from AngularJS docs to Gmail.

It runs as a nodejs server and is framework agnostic meaning you can use it with any testing or application framework.

Karma provides a fast way to auto-run unit tests for data models and logic. Interactivity and DOM tests are not typically done with Karma.

Automated Testing with Karma

Setting up Karma

Install nodejs: http://nodejs.org

Install and run Karma with 3 commands using nodejs package manager

$ npm install -g karma – downloads and installs everything you need

$ karma init – answer some questions about where yous test scripts are and what browser you want to use for testing

$ karma start – starts the karma server

End to End Testing with Protractor

Used for front-end DOM testing

Built on top of WebDriverJS and Selenium Server

Installed via NodeJS

Replaces the old ngScenario test runner

Uses Jasmine or Mocha

Does not use Karma

Tests are written for DOM elements

Tests are more “expensive” than Karma tests and run much slower

End to End Testing with Protractorhttp://blog.envylabs.com/post/61403296076/testing-angularjs-apps-with-protractor

describe('Say Hello', function() {

ptor = protractor.getInstance();

beforeEach(function() {

ptor.get('#/');

button = ptor.findElement(protractor.By.className('btn-say-hello'));

button.click();

});

it('says hello', function() {

message = ptor.findElement(protractor.By.className('message'));

expect(message.getText()).toEqual('Hello!');

});

});

The Future of Front-end Testing

Front-end testing is incredibly boring – a task reserved for interns or junior developers. That is because until recently, front-end testing was an entirely manual process.

Most universities and colleges still do not offer courses on either front-end or back-end testing, but an increasing number of real-world programming jobs now require at least some experience with testing.

Automated testing systems will improve over the next few years to bring us to an entirely new level of reality in testing. Writing code for testing scenarios will be as much a required programming skill as writing the code it is intended to test.