Micro testing library that allows you to practice TDD in Angular applications.
To install it, type:
$ npm install angular-test-runner --save-dev
angular-test-runner was created as a replacement of "official" Angular testing library: ngMock. It was designed to address following shortcommings of ngMock:
- different style of testing for each component type (controller, directive, service, etc.),
- long and boilerplate-rich setup of test,
- difficult testing of html templates and no support for interacting with DOM elements,
- focusing on testing objects in isolation instead of testing coherent set of behaviours (white-box testing)
- obscure tests with irrelevant informations exposing implentation details, especially in context of HTTP communication (need of
$http.flush()
) and DOM interaction (need of$scope.$digest()
)
Therefore angular-test-runner tries to address those issues by:
- providing uniform abstraction and consistent API for testing Angular parts, regardless of their type (contoller, directive, component, filter, etc.),
- providing higher confidence by excercising html templates and interacting with real DOM elements (black-box testing),
- promoting fine grained, self-encapsulated modules by enforcing testing at a module level instead of testing controllers, services, directives in isolation,
- avioding mocks in favour of fakes for HTTP communication, use synchronous HTTP stubbing by default (no need for
$http.flush()
) and asynchronous on demand, - introducing compact, readable and declarative programming interface by introducing fluent interface.
Following example presents tests for simple counter component.
var test = require('angular-test-runner');
var { click, expectElement } = test.actions;
describe('counter component', () => {
var app, server, html;
beforeEach(() => {
app = test.app(['counterApp']);
server = test.http();
});
beforeEach(() => {
html = app.runHtml('<counter value="start"></counter>', {start: 0});
});
it('should render counter value', () => {
html.verify(
expectElement('#counter').toHaveText('0')
);
});
it('should increment counter value by 1', () => {
html.perform(
click.in('button#increment')
);
html.verify(
expectElement('#counter').toHaveText('1')
);
});
it('should increment counter value by 1', () => {
var jsonSentToServer;
server.post('/counter/increment', (req) => {
jsonSentToServer = req.body();
req.sendStatus(200);
});
html.perform(
click.in('button#increment')
);
html.verify(
() => expect(jsonSentToServer).toEqual({ counter: 1 })
);
});
});
Below you can compare angular-test-runner style of testing to traditional ngMock way. Following example was taken from Official Angular Developers Guide:
See more examples
While Protractor is focused on end-to-end testing Angular application as a whole (from a browser perspective), angular-test-runner focuses on testing coherent parts of application by excerising selected components in isolation.
- readable performing actions, e.g. clicking on elements, typing into inputs etc.
- easy request and response server stubbing
- simplified testing of code with async operations
- easy to write asserts concerning html elements