Uji program halaman AngularJS menggunakan Jasmine dan Karma_node.js

AngularJS ialah perkara terbaik yang berlaku kepada JavaScript sejak jQuery. Ini adalah cara pembangunan JavaScript sentiasa dimaksudkan. Salah satu kelebihan utama Angular ialah suntikan kebergantungannya (Suntikan Ketergantungan), yang sangat mudah untuk ujian unit kod. Tapi yang pelik sikit saya tak jumpa tutorial macam mana nak buat unit testing.

Sudah tentu terdapat banyak cadangan yang baik: menggunakan rangka kerja ujian Jasmine dan pelaksana ujian Karma (Test Runner); tetapi tiada tutorial lengkap tentang cara menguji dari awal. Jadi saya menulis artikel ini. Saya menemui banyak sumber dalam talian untuk mengetahui cara melakukannya, dan anda tidak perlu melakukan apa-apa daripada itu sekarang (jika anda membaca artikel ini dari awal).

Sila beritahu saya sebarang ralat yang anda lihat sehingga saya boleh mengatakan ini adalah amalan terbaik untuk menguji apl Angular berdasarkan Karma dan Jasmine.

Pengenalan

Artikel ini akan membimbing anda untuk memasang semua alatan yang anda perlukan untuk menggunakan Karma dan Jasmine untuk ujian automatik. Saya tidak kisah jika anda benar-benar menggunakan TDD (Test Driven Development) atau TAD (Test Assisted Development), untuk tujuan artikel ini saya mengandaikan anda sudah mempunyai fail untuk diuji.

Pasang Karma

Jika anda tidak memasang Node.js, sila muat turun dan pasang sendiri. Selepas pemasangan, buka terminal atau baris arahan dan masukkan arahan:

npm install -g karma

Struktur fail

Struktur fail tidak berkait rapat dengan topik kami, tetapi dalam ujian berikut, struktur fail yang saya gunakan adalah seperti berikut:

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

*Saya tidak menyokong struktur dokumen ini, saya menunjukkannya hanya sebagai contoh ujian.

Konfigurasikan Karma

Tukar ke direktori di mana anda ingin meletakkan fail konfigurasi, kemudian masukkan arahan berikut dalam terminal untuk mencipta fail konfigurasi:

karma init karma.config.js

Anda akan ditanya beberapa soalan, termasuk rangka kerja ujian yang ingin anda gunakan, sama ada anda memerlukan fail pemantauan automatik, ujian dan fail yang diuji yang disertakan, dsb. Dalam tutorial kami, kami mengekalkan 'Jasmine' sebagai rangka kerja lalai kami, mendayakan pengesanan fail automatik dan memasukkan fail berikut:

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

Ini adalah laluan relatif, termasuk 1) semua fail .js dalam direktori induk, 2) semua fail .js dalam semua subdirektori di bawah direktori induk, 3) angular-mock.js dalam direktori semasa, 4) Dan semua Fail .tests.js dalam direktori semasa (termasuk subdirektori) (Saya suka membezakan fail ujian daripada fail lain dengan cara ini).

Tidak kira apa fail yang anda pilih, pastikan anda memasukkan angular.js, angular-mock.js dan fail lain yang perlu anda gunakan.

Mulakan Karma

Kini anda boleh mulakan Karma, masih masuk ke terminal:

karma start karma.config.js

Arahan ini akan melancarkan penyemak imbas yang anda senaraikan dalam fail konfigurasi pada komputer anda. Penyemak imbas ini akan menyambung ke contoh Karma melalui soket Anda akan melihat senarai penyemak imbas yang aktif dan dimaklumkan sama ada mereka menjalankan ujian. Saya harap Karma memberi anda ringkasan keputusan ujian akhir pada setiap penyemak imbas (cth. 15 daripada 16 lulus, 1 gagal), tetapi malangnya anda hanya boleh melihat maklumat ini melalui tetingkap terminal.

Salah satu ciri Karma yang menonjol ialah anda boleh menyambung dan menguji kod anda menggunakan mana-mana peranti pada rangkaian. Cuba halakan penyemak imbas mudah alih anda ke perkhidmatan Karma Anda boleh menemui URL ujian dalam mana-mana penyemak imbas yang dijalankan pada komputer anda. Ia sepatutnya kelihatan seperti: http://localhost:9876/?id=5359192. Anda boleh menghalakan penyemak imbas telefon anda, mesin maya atau mana-mana peranti lain ke [alamat IP anda pada rangkaian]:9876/?id=5359192 Kerana Karma menjalankan contoh Node.js, mesin ujian anda Sama seperti web pelayan, ujian akan dihantar ke mana-mana penyemak imbas yang ditunjukkan kepadanya.

Ujian asas

Kami menganggap anda sudah mempunyai fail untuk diuji. Fail home.js yang ingin kami gunakan adalah seperti berikut:

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();
});

Kami boleh mencipta kes ujian kami dalam fail home.test.js. Mari kita mulakan dengan ujian mudah: $scope.text sepatutnya sama dengan 'Hello World!'. Untuk melengkapkan ujian ini, kami perlu mengejek modul Aplikasi kami dan pembolehubah $scope. Kami akan melakukan ini dalam kaedah beforeEach Jasmine supaya kami mempunyai pengawal dan objek skop yang baharu (bersih) pada permulaan setiap kes ujian.

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});
 });
 
// 测试从这里开始
});

Anda boleh melihat daripada kod bahawa kami menyuntik skop kami sendiri supaya kami boleh mengesahkan maklumatnya di luarnya. Juga, jangan lupa untuk mengejek modul itu sendiri (baris 7)! Kami kini bersedia untuk ujian:

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>