Testing in 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 Test
There 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 Jasmine
Download from GitHub: http://pivotal.github.io/jasmine
Typical directory structure

http://www.adobe.com/devnet/html5/articles/unit-test-javascript-applicationswith-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.

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 Protractor
http://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 realworld 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.

Testing in AngularJS

Recommended

More Related Content

What's hot (20)

Similar to Testing in AngularJS (20)

Recently uploaded (20)

Testing in AngularJS