Menu
Basically, I'm quite experienced with Mocha (written thousands of unit tests), and I'm quite new to AngularJS (written just my first project).
Now I am wondering how I might unit test all the AngularJS stuff using Mocha.
I know that Mocha runs in the browser, and I have already done this. But how do I structure and setup things?
I guess I need to:
Within each of the tests, I need to load a controller, a service, ... to test. How do I do that? I am not using require.js or something like that, the files are just script files with basically the following content:
angular.controller('fooController', [ '$scope', function ($scope) { // ... }]); How do I reference and instantiate that controller within a test? The same holds true for services, directives, ...
Do I need to create mocks for $scope, $http & co. for myself, or is there some help?
Please note that I am aware that there is the Karma test runner (formerly known as Testacular), but I do not want to switch my test runner completely.
831
It generates test files at component creation, collects unit tests, runs karma, and displays results on a web page. However, you can also configure Jest and Mocha to test Angular Components.
Testing in AngularJS is achieved by using the karma framework, a framework which has been developed by Google itself. The karma framework is installed using the node package manager. The key modules which are required to be installed for basic testing are karma, karma-chrome-launcher ,karma-jasmine, and karma-cli.
AngularJS is written with testability in mind, but it still requires that you do the right thing. We tried to make the right thing easy, but if you ignore these guidelines you may end up with an untestable application.
One way of doing that is to use Angular $injector in your tests:
myModule_test.js
suite('myModule', function(){ setup(function(){ var app = angular.module('myModule', []); var injector = angular.injector(['myModule', 'ng']); var service = injector.get('myService'); }); suite('myService', function(){ test('should return correct value', function(){ // perform test with an instance of service here }); }); }); your html should look similar to this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>myModule tests</title> <link rel="stylesheet" media="all" href="vendor/mocha.css"> </head> <body> <div id="mocha"><p><a href=".">Index</a></p></div> <div id="messages"></div> <div id="fixtures"></div> <script src="vendor/mocha.js"></script> <script src="vendor/chai.js"></script> <script src="angular.min.js"></script> <script src="myModule.js"></script> <script>mocha.setup('tdd')</script> <script src="myModule_test.js"></script> <script>mocha.run();</script> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
