Kiểm thử đơn vị AngularJS với Karma và Jasmine

Một trong những tính năng tuyệt vời nhất của AngularJS là... Kiểm tra khía cạnh. Khi các nhà phát triển tại Google Khi phát triển AngularJS, họ luôn chú trọng đến việc kiểm thử và đảm bảo toàn bộ khung AngularJS đều có thể kiểm thử được.

Trong AngularJS, việc kiểm thử thường được thực hiện bằng Karma (một framework). Việc kiểm thử AngularJS có thể được thực hiện mà không cần Karma, nhưng framework Karma có chức năng tuyệt vời để kiểm thử mã AngularJS, vì vậy việc sử dụng framework này là hợp lý hơn.

• Trong AngularJS, chúng ta có thể thực hiện Kiểm tra đơn vị riêng cho bộ điều khiển và chỉ thị.
• Chúng ta cũng có thể thực hiện thử nghiệm từ đầu đến cuối của AngularJS, đó là việc kiểm thử từ góc nhìn người dùng.

Giới thiệu & Cài đặt Karma framework

Nghiệp chướng là một công cụ tự động hóa thử nghiệm được tạo bởi nhóm AngularJS tại Google. Bước đầu tiên để sử dụng Karma là cài đặt Karma. Karma được cài đặt qua npm (là trình quản lý gói được sử dụng để dễ dàng cài đặt các mô-đun trên máy cục bộ).

Cài đặt nghiệp chướng

Việc cài đặt Karma qua npm được thực hiện theo quy trình gồm hai bước.

Bước 1) Thực hiện dòng dưới đây từ trong dòng lệnh

npm install karma karma-chrome-launcher karma-jasmine --save-dev

Trong đó,

1. npm là tiện ích dòng lệnh của trình quản lý gói Node.js, được sử dụng để cài đặt các mô-đun tùy chỉnh trên bất kỳ máy nào. Nó được tích hợp sẵn trong thư viện npm. Node.js.
2. Tham số cài đặt hướng dẫn tiện ích dòng lệnh npm rằng cần phải cài đặt.
3. Có 3 thư viện được chỉ định trong dòng lệnh cần thiết để hoạt động với nghiệp chướng.
   • nghiệp là thư viện cốt lõi sẽ được sử dụng cho mục đích thử nghiệm.
   • karma-chrome-launcher là một thư viện riêng biệt cho phép trình duyệt chrome nhận ra các lệnh nghiệp báo.
   • karma-jasmine – Cái này cài đặt Jasmine, một khung phụ thuộc cho Karma.

Bước 2) Bước tiếp theo là cài đặt tiện ích dòng lệnh karma. Điều này là cần thiết để thực hiện các lệnh dòng nghiệp. Tiện ích dòng nghiệp sẽ được sử dụng để khởi tạo môi trường nghiệp để thử nghiệm.

Để cài đặt tiện ích dòng lệnh, hãy thực hiện dòng dưới đây từ trong dòng lệnh

npm install -g karma-cli

• Công cụ karma-cli được sử dụng để cài đặt giao diện dòng lệnh cho Karma, giao diện này sẽ được dùng để viết các lệnh Karma trong giao diện dòng lệnh. Cờ -g cài đặt nó trên toàn hệ thống, do đó lệnh Karma có thể được sử dụng từ bất kỳ thư mục nào.

Cấu hình khung Karma

Bước tiếp theo là cấu hình nghiệp có thể được thực hiện thông qua lệnh

karma init

Sau khi thực hiện bước trên, karma sẽ tạo tệp karma.conf.js. Tệp có thể sẽ trông giống như đoạn mã được hiển thị bên dưới

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Các tập tin cấu hình ở trên cho biết công cụ chạy karma những điều sau

1. angle.js – Điều này báo cho Karma biết rằng ứng dụng của bạn phụ thuộc vào các mô-đun cốt lõi trong AngularJS.
2. angular-mocks.js – Điều này cho Karma biết cần sử dụng chức năng Kiểm thử đơn vị (Unit Testing) cho AngularJS từ tệp angular-mocks.js.
3. Tất cả các tệp logic nghiệp vụ hoặc ứng dụng chính đều có trong thư mục lib của ứng dụng của bạn.
4. Thư mục kiểm tra sẽ chứa tất cả các bài kiểm tra đơn vị.

Để kiểm tra xem nghiệp chướng có hoạt động hay không, hãy tạo một tệp có tên Sample.js, nhập mã bên dưới và đặt nó vào thư mục kiểm tra.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

Đoạn mã trên có các khía cạnh sau

1. Chức năng mô tả được sử dụng để đưa ra mô tả về bài kiểm tra. Trong trường hợp của chúng tôi, chúng tôi đang đưa ra mô tả 'Thử nghiệm mẫu' cho thử nghiệm của mình.
2. Hàm 'it' được sử dụng để đặt tên cho bài kiểm tra. Trong trường hợp của chúng tôi, chúng tôi đặt tên cho bài kiểm tra của mình là 'Điều kiện là đúng'. Tên của bài kiểm tra cần phải có ý nghĩa.
3. Sự kết hợp giữa từ khóa 'mong đợi' và 'toBe' cho biết giá trị thực tế và mong đợi của kết quả thử nghiệm là gì. Nếu giá trị thực tế và giá trị mong đợi bằng nhau thì thử nghiệm sẽ vượt qua, nếu không nó sẽ thất bại.

Khi bạn thực hiện dòng sau tại dấu nhắc lệnh, nó sẽ thực thi tệp kiểm tra ở trên

karma start

Đầu ra bên dưới được lấy từ IDE Webstorm trong đó các bước trên đã được thực hiện.

1. Đầu ra xuất hiện trong Karma explorer bên trong Webstorm. Cửa sổ này hiển thị việc thực hiện tất cả các thử nghiệm được xác định trong khung nghiệp vụ.
2. Ở đây bạn có thể thấy mô tả của thử nghiệm được thực hiện được hiển thị là “Thử nghiệm mẫu”.
3. Tiếp theo, bạn có thể thấy rằng bản thân bài kiểm tra có tên “Điều kiện là đúng” đã được thực thi.
4. Lưu ý rằng vì tất cả các bài kiểm tra đều có biểu tượng “Ok” màu xanh lá cây bên cạnh tượng trưng cho việc tất cả các bài kiểm tra đều đã vượt qua.

Jasmine trong kiểm thử đơn vị AngularJS là gì?

Karma quyết định nơi các bài kiểm tra được chạy, trong khi Jasmine quyết định cách chúng được viết. Jasmine là một khung đặc tả hướng hành vi cung cấp từ vựng được sử dụng trong mọi ví dụ trên trang này, đó là lý do tại sao bộ chuyển đổi karma-jasmine được cài đặt cùng với trình chạy.

Jasmine đóng góp bốn yếu tố cấu thành:

• mô tả(): Nhóm các thông số kỹ thuật liên quan thành một bộ và chấp nhận mô tả dễ hiểu về đơn vị cần kiểm tra.
• Nó(): Khai báo một đặc tả duy nhất. Tên nên thể hiện hành vi đang được kiểm chứng chứ không phải phương thức được gọi.
• expect() với các bộ so khớp: So sánh giá trị thực tế với giá trị mong đợi. Các phương thức so khớp phổ biến bao gồm toBe, toEqual, toContain và toBeDefined.
• beforeEach() và afterEach(): Thực hiện thiết lập và gỡ bỏ trước và sau mỗi lần kiểm tra đặc tả, điều này đảm bảo mỗi bài kiểm tra đều độc lập với nhau.

Jasmine cũng cung cấp các "spy" (công cụ thay thế hàm). Spy thay thế một hàm thực bằng một hàm được ghi lại, do đó bộ điều khiển có thể được kiểm tra mà không cần gọi đến điểm cuối HTTP thực tế. Vì Jasmine không cần DOM và không cần thư viện xác nhận riêng, sự kết hợp giữa Karma và Jasmine vẫn là cách nhẹ nhất để chạy AngularJS. JavaKiểm thử đơn vị kịch bản.

Kiểm tra bộ điều khiển AngularJS

Khung kiểm tra nghiệp lực cũng có chức năng kiểm tra các Bộ điều khiển từ đầu đến cuối. Điều này bao gồm việc kiểm tra đối tượng $scope được sử dụng trong Bộ điều khiển.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Trong ví dụ của chúng tôi,

Đầu tiên chúng ta cần định nghĩa một bộ điều khiển. Bộ điều khiển này sẽ thực hiện các bước được đề cập dưới đây

1. Tạo một biến ID và gán giá trị 5 cho nó.
2. Gán biến ID cho đối tượng $scope.

Thử nghiệm của chúng tôi sẽ kiểm tra sự tồn tại của bộ điều khiển này và cũng kiểm tra xem biến ID của đối tượng $scope có được đặt thành 5 hay không.

Đầu tiên chúng ta cần đảm bảo các điều kiện tiên quyết sau được đáp ứng

Cài đặt thư viện angular-mocks thông qua npm. Bạn có thể thực hiện việc này bằng cách chạy dòng lệnh sau trong cửa sổ dòng lệnh:

npm install angular-mocks --save-dev

Tiếp theo là sửa đổi tệp karma.conf.js để đảm bảo đưa đúng tệp vào thử nghiệm. Đoạn bên dưới chỉ hiển thị một phần tệp của karma.conf.js cần được sửa đổi

files: ['lib/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

• Về cơ bản, tham số 'tệp' sẽ cho Karma biết tất cả các tệp được yêu cầu trong quá trình chạy thử nghiệm.
• Cần có hai tệp angular.js và angular-mocks.js để chạy các bài kiểm tra đơn vị của AngularJS.
• Tệp index.js sẽ chứa mã của chúng tôi cho bộ điều khiển
• Thư mục kiểm tra sẽ chứa tất cả các bài kiểm tra AngularJS của chúng tôi

Dưới đây là đoạn mã AngularJS của chúng tôi, sẽ được lưu trữ dưới dạng tệp Index.js trong thư mục test của ứng dụng.

Mã bên dưới chỉ thực hiện những điều sau

1. tạo một Mô-đun AngularJS được gọi là sampleApp
2. Tạo bộ điều khiển có tên AngularJSController
3. Tạo một biến tên là ID, đặt cho nó giá trị 5 và gán nó cho đối tượng $scope

var sampleApp = angular.module('sampleApp', []);
sampleApp.controller('AngularJSController', function($scope) {
  $scope.ID = 5;
});

Khi đoạn mã trên được thực thi thành công, bước tiếp theo sẽ là tạo một Trường hợp thử nghiệm để đảm bảo mã đã được viết và thực thi đúng cách.

Mã cho thử nghiệm của chúng tôi sẽ như dưới đây.

Mã sẽ nằm trong một tệp riêng có tên là ControllerTest.js, sẽ được đặt trong thư mục thử nghiệm. Mã bên dưới chỉ thực hiện những điều chính sau

1. Hàm beforeEach – Hàm này được sử dụng để tải mô-đun AngularJS có tên 'sampleApp' trước khi chạy thử nghiệm. Lưu ý rằng đây là tên của mô-đun trong tệp index.js.
2. Đối tượng `$controller` được tạo ra như một đối tượng giả lập cho bộ điều khiển “AngularJSController” được định nghĩa trong tệp `index.js` của chúng ta. Trong bất kỳ loại kiểm thử đơn vị nào, một đối tượng giả lập đại diện cho một đối tượng ảo sẽ được sử dụng thực tế để kiểm thử. Đối tượng giả lập này sẽ mô phỏng hành vi của bộ điều khiển của chúng ta.
3. beforeEach(inject(function(_$controller_) – Điều này được sử dụng để đưa đối tượng mô phỏng vào thử nghiệm của chúng tôi để nó hoạt động giống như bộ điều khiển thực tế.
4. var $scope = {}; Đây là một đối tượng giả được tạo cho đối tượng $scope.
5. `var controller = $controller('AngularJSController', { $scope: $scope });` – Tại đây, chúng ta kiểm tra sự tồn tại của một controller có tên là 'AngularJSController'. Đồng thời, chúng ta cũng gán tất cả các biến từ đối tượng `$scope` trong controller ở file `Index.js` cho đối tượng `$scope` trong file `test`.
6. Cuối cùng, chúng tôi so sánh $scope.ID với 5

describe('AngularJSController', function() {
  beforeEach(module('sampleApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  describe('$scope.ID', function() {
    it('Check the scope object', function() {
      var $scope = {};
      var controller = $controller('AngularJSController', { $scope: $scope });
      expect($scope.ID).toEqual(5);
    });
  });
});

Bài kiểm tra trên sẽ chạy trong trình duyệt karma và cho kết quả đạt tương tự như trong chủ đề trước.

Kiểm tra các chỉ thị AngularJS

Khung kiểm thử Karma cũng có chức năng kiểm thử các chỉ thị tùy chỉnh. Điều này bao gồm cả mẫu.URL's được sử dụng trong các chỉ thị tùy chỉnh.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Trong ví dụ của chúng tôi, trước tiên chúng tôi sẽ xác định một chỉ thị tùy chỉnh thực hiện những điều sau

1. Tạo một mô-đun AngularJS có tên sampleApp
2. Tạo một chỉ thị tùy chỉnh với tên là – guru99
3. Tạo một hàm trả về một mẫu có thẻ tiêu đề hiển thị dòng chữ “Đây là Thử nghiệm AngularJS”.

var sampleApp = angular.module('sampleApp', []);
sampleApp.directive('guru99', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<h1>This is AngularJS Testing</h1>'
  };
});

Khi đoạn mã trên được thực thi thành công, bước tiếp theo sẽ là tạo một trường hợp thử nghiệm để đảm bảo mã đã được viết và thực thi đúng cách. Mã cho thử nghiệm của chúng tôi sẽ như dưới đây

Mã sẽ nằm trong một tệp riêng có tên là DirectiveTest.js, sẽ được đặt trong thư mục thử nghiệm. Mã bên dưới chỉ thực hiện những điều chính sau

1. Hàm beforeEach – Hàm này được sử dụng để tải mô-đun AngularJS có tên 'sampleApp' trước khi chạy thử nghiệm.
2. Dịch vụ `$compile` được sử dụng để biên dịch chỉ thị. Dịch vụ này là bắt buộc và cần được khai báo để AngularJS có thể sử dụng nó để biên dịch chỉ thị tùy chỉnh của chúng ta.
3. `$rootScope` là phạm vi chính của bất kỳ ứng dụng AngularJS nào. Chúng ta đã thấy đối tượng `$scope` của bộ điều khiển trong các chương trước. Về cơ bản, đối tượng `$scope` là đối tượng con của đối tượng `$rootScope`. Lý do nó được khai báo ở đây là vì chúng ta đang thực hiện thay đổi đối với một thẻ HTML thực tế trong DOM thông qua chỉ thị tùy chỉnh của mình. Do đó, chúng ta cần sử dụng dịch vụ `$rootScope` để lắng nghe hoặc biết khi nào bất kỳ thay đổi nào xảy ra từ bên trong tài liệu HTML.
4. var element = $compile(“ ”)($rootScope) – Thuộc tính này được sử dụng để kiểm tra xem chỉ thị của chúng ta có được chèn đúng cách hay không. Chỉ thị được đăng ký với tên viết hoa kiểu camel case là guru99, vì vậy AngularJS sẽ khớp với phần tử viết thường. trong mã đánh dấu. Do đó, câu lệnh này được sử dụng để thực hiện việc kiểm tra đó.
5. expect(element.html()).toContain(“This is AngularJS Testing”) – Câu lệnh này được sử dụng để hướng dẫn hàm expect tìm phần tử (trong trường hợp này là thẻ h1) chứa văn bản innerHTML “This is AngularJS Testing”.

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
  beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Bài kiểm tra trên sẽ chạy trong trình duyệt karma và cho kết quả đạt tương tự như trong chủ đề trước.

Kiểm thử đầu cuối ứng dụng AngularJS

Khung kiểm thử Karma cùng với một khung gọi là ProtracTor có chức năng kiểm thử ứng dụng web từ đầu đến cuối.

Vì vậy, nó không chỉ kiểm tra các lệnh và bộ điều khiển mà còn kiểm tra bất kỳ thứ gì khác có thể xuất hiện trên trang HTML.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Trong ví dụ bên dưới, chúng ta sẽ có một ứng dụng AngularJS tạo bảng dữ liệu bằng cách sử dụng lệnh ng-repeat.

1. Trước tiên, chúng tôi tạo một biến có tên là “hướng dẫn” và gán cho nó một số cặp khóa-giá trị trong một bước. Mỗi cặp khóa-giá trị sẽ được sử dụng làm dữ liệu khi hiển thị bảng. Biến hướng dẫn sau đó được gán cho đối tượng phạm vi để có thể truy cập nó từ chế độ xem của chúng tôi.
2. Đối với mỗi hàng dữ liệu trong bảng, chúng tôi đang sử dụng lệnh ng-repeat. Lệnh này đi qua từng cặp khóa-giá trị trong đối tượng phạm vi hướng dẫn bằng cách sử dụng biến ptutor.
3. Cuối cùng, chúng tôi đang sử dụng tag cùng với các cặp giá trị khóa (ptutor.Name và ptutor.Description) để hiển thị dữ liệu bảng.

<table>
  <tr ng-repeat="ptutor in tutorial">
    <td>{{ ptutor.Name }}</td>
    <td>{{ ptutor.Description }}</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

Khi đoạn mã trên được thực thi thành công, bước tiếp theo sẽ là tạo một trường hợp thử nghiệm để đảm bảo mã đã được viết và thực thi đúng cách. Mã cho thử nghiệm của chúng tôi sẽ như dưới đây

Thử nghiệm của chúng tôi thực sự sẽ kiểm tra lệnh ng-repeat và đảm bảo rằng nó chứa 3 hàng dữ liệu như ví dụ trên.

Đầu tiên chúng ta cần đảm bảo các điều kiện tiên quyết sau được đáp ứng

Cài đặt chuyên nghiệptracCài đặt thư viện Tor thông qua npm. Có thể thực hiện bằng cách chạy dòng lệnh sau trong cửa sổ lệnh:

npm install -g protractor

Mã cho thử nghiệm của chúng tôi sẽ như dưới đây.

Mã sẽ nằm trong một tệp riêng có tên CompleteTest.js, sẽ được đặt trong thư mục thử nghiệm. Mã bên dưới chỉ thực hiện những điều chính sau

1. Chức năng trình duyệt được cung cấp bởi chuyên gia.tracThư viện Tor giả định rằng ứng dụng AngularJS của chúng ta (với đoạn mã được hiển thị ở trên) đang chạy trên trang web của chúng ta. URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); - Dòng mã này thực chất đang lấy chỉ thị ng-repeat được điền bởi mã 'ptutor in tutorial'. element và by.repeater là các từ khóa đặc biệt được cung cấp bởi thư viện pro.tracThư viện Tor cho phép chúng ta lấy thông tin chi tiết về chỉ thị ng-repeat.
3. mong đợi(list.count()).toEqual(3); – Cuối cùng, chúng ta đang sử dụng hàm mong đợi để thấy rằng chúng ta thực sự nhận được 3 mục được điền vào bảng do lệnh ng-repeat.

describe('Unit testing end to end', function() {
  beforeEach(function() {
    browser.get('http://localhost:8080/Guru99/');
  });

  it('Check the ng directive', function() {
    var list = element.all(by.repeater('ptutor in tutorial'));
    expect(list.count()).toEqual(3);
  });
});

Bài kiểm tra trên sẽ chạy trong trình duyệt karma và cho kết quả đạt tương tự như trong chủ đề trước.

Karma đấu với Jasmine đấu với ProtracTor: Những điểm khác biệt chính

Ba công cụ được sử dụng trên trang này thường bị nhầm lẫn vì chúng xuất hiện trong cùng một dòng lệnh. Mỗi công cụ chiếm một tầng khác nhau trong kiến ​​trúc kiểm thử, như bảng dưới đây đã chỉ rõ.

Tóm lại, Jasmine viết bài kiểm tra, Karma thực thi nó, và ProtracTor mở rộng cú pháp tương tự của Jasmine cho một trang được hiển thị hoàn chỉnh.

Các phương pháp tốt nhất để kiểm thử đơn vị trong AngularJS

Một vài thói quen đơn giản giúp duy trì tốc độ và độ tin cậy của bộ ứng dụng AngularJS khi ứng dụng phát triển.

1. Kiểm tra từng thiết bị một. Chỉ tải mô-đun cần kiểm thử bên trong beforeEach và tạo đối tượng giả cho mọi cộng tác viên để lỗi chỉ ra một tệp duy nhất.
2. Đừng bao giờ gọi trực tiếp đến máy chủ phụ trợ thực sự. Sử dụng dịch vụ `$httpBackend` từ thư viện angular-mocks để trả về các phản hồi được định sẵn. Sau đó, các bài kiểm tra sẽ chạy ngoại tuyến và cho ra kết quả giống hệt nhau trên mọi máy tính.
3. Hãy giữ cho tên thông số kỹ thuật mang tính hành vi. Một cái tên như "trả về 5 khi bộ điều khiển khởi tạo" sẽ dễ đọc hơn trong báo cáo so với "test1".
4. Luôn luôn xả sạch chu trình phân hủy. Hãy gọi `$rootScope.$digest()` sau khi thay đổi dữ liệu phạm vi, nếu không các liên kết và trình theo dõi sẽ không bao giờ được cập nhật và các khẳng định sẽ thất bại vì lý do không chính xác.
5. Đo lường mức độ bao phủ, nhưng hãy đánh giá một cách cẩn thận. Thêm karma-coverage để xem các nhánh chưa được kiểm thử. Độ phủ cao với các khẳng định yếu vẫn che giấu các lỗi.
6. Chạy bộ kiểm thử trong chế độ tích hợp liên tục. Hãy sử dụng trình khởi chạy Chrome không giao diện người dùng để đảm bảo cùng một thông số kỹ thuật được thực thi trên mọi lần cập nhật mã, thay vì chỉ trên máy của nhà phát triển.

Việc áp dụng các quy tắc này biến các ví dụ trên từ những minh họa riêng lẻ thành một mạng lưới an toàn chống lỗi hồi quy cho một codebase AngularJS cũ. Để có cái nhìn tổng quan hơn, hãy xem phần tiếp theo. Hướng dẫn AngularJS series.

Câu Hỏi Thường Gặp