Can someone please provide a general purpose example of testing AngularJS 1.x application (factory, controller) with Jest? The example should be written in plain ES5 (no ES6 import syntax).
-
Have you got an answer to your question? Trying to understand how to configure jest with Angular 1.6 here.Rantiev– Rantiev2017-06-11 21:54:30 +00:00Commented Jun 11, 2017 at 21:54
Add a comment
|
3 Answers
High-level:
- Install Angular-Mocks and Jest-CLI
- Create a test file
- Mock Angular and Inject the service/factory
require('../node_modules/angular/angular.min.js');
require('../node_modules/angular-mocks/angular-mocks.js');
require('./mathservice.js');
describe('Math service - addTwoNumbers', function(){
beforeEach(
angular.mock.module('mathmodule')
);
var _mathservice;
beforeEach(inject((mathservice) => {
_mathservice = mathservice;
}));
it('1 + 1 should equal 2', function(){
var actual = _mathservice.addTwoNumbers(1,1);
expect(actual).toEqual(2);
});
});
I've put an article together showing step-by-step how to get set up for more detail:
https://curtistimson.co.uk/post/angularjs/angularjs-jest-unit-testing/
1 Comment
bsmidtson
How are you testing components which use a http request to get a template? I have tried ng-html2js and nghtml2js-jest but their docs aren't great, and can't find any good examples.
Add this to your package.json:
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand"
},
"jest": {
"verbose": true,
"moduleDirectories": ["node_modules", "app"]
}
Install angular, angular-mocks and jest with npm.
Write a test and run it with npm test command.
See example here https://github.com/rantiev/template-jest-with-angular
Comments
In my answer you can see how to test AngularJS typescript controller (ES5)
// foo-controller.test.js
// --------------------------------
require("angular/angular.min");
require("angular-mocks");
angular.module("app.fooModule", []);
require("../Controllers/FooController.ts");
describe("test controller FooController", () => {
var controller, payload = {};
var controllerScope = {
"FooModule.Services": {},
"$rootScope": {}
}
angular.mock.module.sharedInjector();
beforeAll(() => {
var controllerPayload;
angular.mock.module("app.fooModule");
angular.mock.inject((_$controller_) => {
controllerPayload = _$controller_;
});
controller = controllerPayload("FooModule.FooController", controllerScope);
controller.setMinDate(payload);
});
it("FooController minDate should be equal to current year", () => {
expect(controller.minDate.getFullYear()).toEqual((new Date().getFullYear()));
});
});
// foo-controller.ts
// --------------------------------
module FooModule
{
"use strict";
export class FooController {
public minDate: any;
static $inject = [ "FooModule.Services", "$rootScope" ];
constructor(public services: FooModule.Services, public $rootScope: ng.IRootScopeService) {}
setMinDate() {
this.minDate = new Date();
}
}
angular.module("app.fooModule ").controller("FooModule.FooController ", FooController);
}
// package.json
// --------------------------------
{
"package-json-regular-fields": "",
"scripts": {
"test": "jest --forceExit --watchAll"
},
"jest": {
"roots": ["<rootDir>/."],
"moduleFileExtensions": ["ts", "js"],
"transform": {
"^.+\\.(ts|tsx)?$": "ts-jest"
},
"testMatch": ["**/__tests__/**/*.test.+(ts|js)"]
},
"dependencies": {
"angular": "^1.6.6"
},
"devDependencies": {
"@types/angular": "^1.6.56",
"@types/jest": "^24.0.23",
"angular-mocks": "^1.6.6",
"jest": "^24.9.0",
"jest-cli": "^21.2.1",
"ts-jest": "^24.1.0",
"typescript": "^3.7.2"
}
}
For more info go to https://docs.angularjs.org/guide/unit-testing
Enjoy!
