Intro to Unit Testing in AngularJS

Intro To Unit Testing
In AngularJS

Jim Lynch
Front-End Engineer
at Altered Image
twitter.com/webWhizJim
Slides available here: http://www.slideshare.net/
JimLynch22/intro-to-unit-testing-in-angularjs

Who is This Talk For?
• People interested in unit testing.
• AngularJS developers.
• Front-End developers.

Why Test?
• To prevent regression (recurring bugs).
• Catches bugs before end users see them.
• Removes fear from refactoring.
• Much quicker and less error-prone than manual testing.
• Can be a form of documentation for your code.

If You Don’t Test…
WRITE UNIT TESTS!!

Anatomy of a Test Suite
Test Suite

Test Case
Test Case
Test Suite

Test Case
Assertion
Assertion
Assertion
Test Case
Test Suite

Test Suite
• A collection of independent tests.
• Usually exists as its own ﬁle.
• Contains methods for setting
up for and tearing down unit
tests.
Test Case
Assertion
Assertion
Assertion
Test Case
Test Suite

Test Case
• Tests a single “piece” of your
application independent of the
other code.
• A function that can either pass or
fail.
• Each case should test a
different “situation” from the
user’s perspective (BDD).
Test Case
Assertion
Assertion
Assertion
Test Case
Test Suite

Test Case
Assertion
Assertion
Assertion
Test Case
Test Suite
Assertion
• Uses a matcher API for comparing
values  
eg. expected(var).toEqual(5)
• Tells the test case when it should
pass and when it should fail.
• If output values for SUT (system
under test) are as expected from
known input then behavior of SUT is
as expected.

Unit testing in JavaScript
uses a peculiar syntax…

If you are ever feeling lost,
just remember that a test
suite in JavaScript is this:

A describe
full of
it’s
with some
beforeEach’s

Test Suite Anatomy for JS 
Testing Frameworks
it
describeTest Suite
Test Case
Assertion expect
it
expect
expect

Building Your First Test Suite
• A test suite is simply a Javascript file.
• Karma will automatically consider *.spec.js
files to be test suites.
Step 1) Create an empty *.spec.js file.

describe describe(‘MyController’, function() {
})
Adding a describe.

})
A name for your test suite  
(can be anything, but it should
describe what you are testing!).
Adding a describe.

})
A function that takes no
arguments. This creates the
“wrapper” around your test
cases.
Adding a describe.

describe
describe(‘MyController’, function() {
})
it
it(‘Should do something…’, function() {
});
Adding an it.

describe
})
Some text that describes the
purpose of this test case. Can be
anything but usually begins with
the word should.
it
});
Adding an it.

describe
})
it
});
A function that takes no
arguments. The code for this
test case is contained in this
function.
Adding an it.

describe
})
it
});
Adding an assertion.
expect
expect(true).toEqual(true);

describe
})
it
});
expect
The expect keyword lets the
test case know that we want to
do an assertion here.

describe
})
it
});
expect
The expect method takes one
argument: the variable whose
value you wish to check.

describe
})
it
});
expect
Depending on how you wish to
compare the two values, a
matcher method is chained
onto the end of the expect.

describe
})
it
});
expect
The matcher method takes one
argument: the expected value
for the variable being passed
into the expect method.

You did it!
})
});
Ahhh, so a test suite is really just…

A describe
full of
it’s!
…with some beforeEach’s.

beforeEach
• Goes inside the describe
but outside of the it’s.
describe
it
expect
it
expect
beforeEach
beforeEach
• Gives you access to your
module, controllers,
services, etc. through DI.

beforeEach
})
});
beforeEach(module(‘YOUR_MODULE’));

beforeEach
Keyword that runs argument
before every it.

beforeEach
Allows you to load in
your module so that you have
access to it’s controllers,
services, ﬁlters, etc.

beforeEach
Replace this with the name
of your project’s module.

Injecting a Controller
with beforeEach
})
});
var myController = $controller('MyController', {})
beforeEach(inject(function(_$controller_) {
$controller = _$controller_;
}));

with beforeEach
}));
A method from the angular-
mocks.js ﬁle that allows you to
inject services into your unit tests.

with beforeEach
}));
Angular knows to “unwrap”, the underscores,
ﬁnd corresponding provider, and give you a
reference to the service.
Q. But what’s the deal with those
underscores on either side?

with beforeEach
}));
Angular knows to “unwrap”, the underscores,
ﬁnd corresponding provider, and give you a
reference to the service.
Suppose you didn’t use the underscores. You want to set a variable named
$controller available inside of your “it’s” equal to the function’s argument, but
the function argument must be named $controller in order to be injected
properly. Doing this is not possible in JavaScript so the Angular team
implemented the underscore notation to work around the issue.

with beforeEach
}));
You can then use this global
reference anywhere in the test suite
to instantiate controllers.

Using the Injected
Controller
This var has all of the properties
and methods you deﬁned for the
speciﬁed controller.

Using the Injected
Controller
This is the global $controller
variable that was set in the
beforeEach.

Using the Injected
Controller
Replace this with the name
of the controller you want
to instantiate.

Pass in any arguments to your
controller with this object.
Using the Injected
Controller

The Complete Suite
})
});
}));
A good start to a nice looking test suite:

Okay, so how do I run
these test suites?
Q )
KarmaA )

Fun Facts About Karma
• Created at Google- now open source.
• It’s a command line test runner.
• Integrates with practically all CI tools.
• Runs tests on all browsers (even PhantomJS).

How Does Karma Work?
• It integrates nicely with Gulp and Grunt (gulp test)
or runs on its own (karma start).
• It’s installed from npm: npm install karma
• The karma.conf.js file allows you to configure it to
run with your desired settings.
• It automatically sees *.spec.js files in your project
folder as test suites.

How do I add Karma to
My Project?

Easy Way Hard(er) Way
Use a yeoman generator to
scaffold a project that already
has karma set up for you
(such as the Gulp-Angular
generator).
Install and conﬁgure it
manually.
karma-runner.github.io
Adding Karma to Your Project
And then you’re ready to start testing!

All together now!
A JavaScript test suite is:

Thanks!
twitter.com/webWhizJim
jim@wisdomofjim.com
https://www.teepublic.com/t-shirt/468156-
describes-full-of-its-white-text
www.wisdomofjim.com
The ofﬁcial “Describe’s Full of
It’s” T-Shirt! Available now!
Slides available here: http://
www.slideshare.net/JimLynch22/intro-to-unit-
testing-in-angularjs

Intro to Unit Testing in AngularJS

More Related Content

What's hot (20)

Similar to Intro to Unit Testing in AngularJS (20)

Recently uploaded (20)

Intro to Unit Testing in AngularJS