Testen Sie das AngularJS-Seitenprogramm mit Jasmine und Karma_node.js

AngularJS ist das Beste, was JavaScript seit jQuery passieren konnte. Dies ist die Art und Weise, wie die JavaScript-Entwicklung schon immer beabsichtigt war. Einer der Hauptvorteile von Angular ist die Abhängigkeitsinjektion (Dependency Injection), die für Unit-Tests von Code sehr praktisch ist. Was jedoch etwas seltsam ist, ist, dass ich kein Tutorial zum Durchführen von Unit-Tests finden kann.

Natürlich gibt es viele gute Empfehlungen: die Verwendung des Jasmine-Test-Frameworks und des Karma-Test-Executors (Test Runner); aber es gibt kein vollständiges Tutorial, wie man von Grund auf testet. Also habe ich diesen Artikel geschrieben. Ich habe online viele Ressourcen gefunden, um herauszufinden, wie das geht, und Sie müssen nichts davon jetzt tun (wenn Sie diesen Artikel überhaupt gelesen haben).

Bitte teilen Sie mir alle Fehler mit, die Sie sehen, bis ich sagen kann, dass dies die beste Vorgehensweise zum Testen von Angular-Apps auf Basis von Karma und Jasmine ist.

Einführung

In diesem Artikel erfahren Sie, wie Sie alle Tools installieren, die Sie für die Verwendung von Karma und Jasmine für automatisierte Tests benötigen. Es ist mir egal, ob Sie tatsächlich TDD (Test Driven Development) oder TAD (Test Assisted Development) verwenden. Für die Zwecke dieses Artikels gehe ich davon aus, dass Sie bereits eine Datei zum Testen haben.

Karma installieren

Wenn Sie Node.js nicht installiert haben, laden Sie es bitte selbst herunter und installieren Sie es. Öffnen Sie nach der Installation ein Terminal oder eine Befehlszeile und geben Sie den Befehl ein:

npm install -g karma

Dateistruktur

Die Dateistruktur hat nicht viel mit unserem Thema zu tun, aber in den folgenden Tests habe ich folgende Dateistruktur verwendet:

Application
| angular.js
| angular-resource.js
| Home
 | home.js
| Tests
 | Home
 | home.tests.js
 | karma.config.js (will be created in the next step)
 | angular-mocks.js

*Ich befürworte diese Dokumentstruktur nicht, ich zeige sie nur als Testbeispiel.

Karma konfigurieren

Wechseln Sie in das Verzeichnis, in dem Sie die Konfigurationsdatei ablegen möchten, und geben Sie dann den folgenden Befehl in das Terminal ein, um die Konfigurationsdatei zu erstellen:

karma init karma.config.js

Ihnen werden einige Fragen gestellt, darunter, welches Test-Framework Sie verwenden möchten, ob Sie automatische Überwachungsdateien benötigen, welche Tests und getesteten Dateien enthalten sind usw. In unserem Tutorial behalten wir „Jasmine“ als Standard-Framework bei, aktivieren die automatische Dateierkennung und schließen die folgenden Dateien ein:

../*.js
../**.*.js
angular-mocks.js
**/*.tests.js

Dies sind relative Pfade, einschließlich 1) aller .js-Dateien im übergeordneten Verzeichnis, 2) aller .js-Dateien in allen Unterverzeichnissen unter dem übergeordneten Verzeichnis, 3) angle-mock.js im aktuellen Verzeichnis, 4) und alle .tests.js-Dateien im aktuellen Verzeichnis (einschließlich Unterverzeichnissen) (auf diese Weise unterscheide ich gerne Testdateien von anderen Dateien).

Unabhängig davon, welche Dateien Sie auswählen, stellen Sie sicher, dass Sie „angular.js“, „angular-mock.js“ und andere Dateien, die Sie verwenden müssen, einschließen.

Karma starten

Jetzt können Sie Karma starten, geben Sie dazu noch im Terminal ein:

karma start karma.config.js

Dieser Befehl startet die Browser, die Sie in der Konfigurationsdatei auf Ihrem Computer aufgeführt haben. Diese Browser stellen über Sockets eine Verbindung zur Karma-Instanz her. Sie sehen eine Liste der aktiven Browser und werden darüber informiert, ob sie Tests ausführen. Ich wünschte, Karma hätte Ihnen eine Zusammenfassung der endgültigen Testergebnisse für jeden Browser gegeben (z. B. 15 von 16 bestanden, 1 nicht bestanden), aber leider können Sie diese Informationen nur über das Terminalfenster sehen.

Eine der herausragenden Funktionen von Karma ist, dass Sie mit jedem Gerät im Netzwerk eine Verbindung herstellen und Ihren Code testen können. Versuchen Sie, Ihren mobilen Browser auf den Karma-Dienst zu verweisen. Sie finden die Test-URL in jedem Browser, der auf Ihrem Computer ausgeführt wird. Es sollte wie folgt aussehen: http://localhost:9876/?id=5359192. Sie können den Browser Ihres Telefons, Ihrer virtuellen Maschine oder eines anderen Geräts auf [Ihre IP-Adresse im Netzwerk]:9876/?id=5359192 verweisen. Da Karma eine Node.js-Instanz ausführt, ist Ihre Testmaschine genau wie ein Web Server werden Tests an jeden Browser gesendet, der auf ihn verweist.

Grundlegende Tests

Wir gehen davon aus, dass Sie bereits eine Datei zum Testen haben. Die home.js-Datei, die wir verwenden möchten, lautet wie folgt:

home.js

'use strict';
 
var app = angular.module('Application', ['ngResource']);
 
app.factory('UserFactory', function($resource){
 return $resource('Users/users.json')
});
 
app.controller('MainCtrl', function($scope, UserFactory) {
 $scope.text = 'Hello World!';
 $scope.users = UserFactory.get();
});

Wir können unsere Testfälle in der Datei home.test.js erstellen. Beginnen wir mit dem einfachen Test: $scope.text sollte gleich „Hello World!“ sein. Um diesen Test abzuschließen, müssen wir unser Anwendungsmodul und die Variable $scope verspotten. Wir werden dies in Jasmines beforeEach-Methode tun, sodass wir zu Beginn jedes Testfalls ein brandneues (sauberes) Controller- und Scope-Objekt haben.

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope;
//我们会在测试中使用这个scope
 
 
//模拟我们的Application模块并注入我们自己的依赖
 beforeEach(angular.mock.module('Application'));
 
//模拟Controller，并且包含 $rootScope 和 $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller){
  
//创建一个空的 scope
  scope = $rootScope.$new();
  
//声明 Controller并且注入已创建的空的 scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// 测试从这里开始
});

Sie können dem Code entnehmen, dass wir unseren eigenen Bereich einfügen, damit wir seine Informationen außerhalb davon validieren können. Vergessen Sie auch nicht, das Modul selbst zu verspotten (Zeile 7)! Wir sind jetzt bereit zum Testen:

home.tests.js

// 测试从这里开始
it('should have variable text = "Hello World!"', function(){
 expect(scope.text).toBe('Hello World!);
});

如果你运行这个测试，它可以在任何指向Karma的浏览器中执行，并且测试通过。

发送$resource请求

现在我们已经准备好测试 $resource 请求。要完成这个请求，我们需要使用到 $httpBackend， 它一个模拟版本的Angular $http。我们会创建另一个叫做 $httpBackend 的变量，在第二个 beforEach块中，注入 _$httpBackend_ 并将新创建的变量指向 _$httpBackend_。接下来我们会告诉 $httpBackend 如何对请求做出响应。

$httpBackend = _$httpBackend_; 
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);

我们的测试： home.tests.js

it('should fetch list of users', function(){
   $httpBackend.flush();
   expect(scope.users.length).toBe(2);
   expect(scope.users[0].name).toBe('Bob');
  });

都放到一起

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope, $httpBackend;
//we'll use these in our tests
 
 
//mock Application to allow us to inject our own dependencies
 beforeEach(angular.mock.module('Application'));
 
//mock the controller for the same reason and include $rootScope and $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
  $httpBackend = _$httpBackend_;
  $httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
 
  
//create an empty scope
  scope = $rootScope.$new();
  
//declare the controller and inject our empty scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// tests start here
 it('should have variable text = "Hello World!"', function(){
  expect(scope.text).toBe('Hello World!');
 });
 it('should fetch list of users', function(){
  $httpBackend.flush();
  expect(scope.users.length).toBe(2);
  expect(scope.users[0].name).toBe('Bob');
 });
});

技巧

Karma会运行所有文件中的所有测试用例，如果你只想运行所有测试的一个子集，修改 describe 或 it 为 ddescribe 或 iit 来运行个别的一些测试。如果有些测试你不想运行他们，那么修改 describe 或 it 为 xdescribe 或 xit 来忽略这些代码。

你也可以在html文件的页面上运行你的测试。举例的代码如下：
home.runner.html

<!DOCTYPE html>
<html>
<head>
 <title>Partner Settings Test Suite</title>
 
<!-- include your script files (notice that the jasmine source files have been added to the project) -->
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"></script>
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"></script>
 <script type="text/javascript" src="../angular-mocks.js"></script>
 <script type="text/javascript" src="home.tests.js"></script>
 <link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/>
</head>
<body>
 
<!-- use Jasmine to run and display test results -->
 <script type="text/javascript">
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.addReporter(new jasmine.HtmlReporter());
  jasmineEnv.execute();
 </script>
</body>
</html>