Kiểm thử đơn vị AngularJS: Hướng dẫn về Karma Jasmine

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

Trong AngularJS, việc kiểm tra thường được thực hiện bằng Karma (framework). Kiểm tra Angular JS có thể được thực hiện mà không cần Karma, nhưng khung Karma có chức năng tuyệt vời để kiểm tra mã AngularJS, nên việc sử dụng khung này là điều hợp lý.

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 tôi cũng có thể thực hiện thử nghiệm cuối cùng của AngularJS, thử nghiệm này từ góc độ 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 Angular JS 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

Trong đó,

npm là tiện ích dòng lệnh dành cho trình quản lý gói nút được sử dụng để cài đặt các mô-đun tùy chỉnh trên bất kỳ máy nào.
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.
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 karma-cli

trong đó,

karma-cli dùng để cài đặt giao diện dòng lệnh cho karma, giao diện này sẽ dùng để viết các lệnh karma trong giao diện dòng lệnh.

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: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-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

'Tên ứng dụng của bạn' – Điều này sẽ được thay thế bằng tên ứng dụng của bạn.
'Tên ứng dụng của bạn'/AngularJS/AngularJS.js' – Điều này 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
'Tên ứng dụng của bạn'/AngularJS-mocks/AngularJS-mocks.js' – Điều này yêu cầu karma sử dụng chức năng Kiểm tra đơn vị cho AngularJS từ tệp Angular.JS-mocks.js.
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.
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

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.
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.
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.

Đầ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ụ.
Ở đâ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”.
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.
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.

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

Tạo một biến ID và gán giá trị 5 cho nó.
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.JS-mocks qua npm. Điều này có thể được thực hiện bằng cách thực hiện dòng dưới đây trong dấu nhắc lệnh

npm install Angular JS-mocks

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/AngularJS.js','lib/AngularJS-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ó tệp AngularJS.js và AngularJS-mocks.js để chạy thử nghiệm đơn vị 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à mã Angular.JS của chúng tôi sẽ được lưu trữ dưới dạng tệp Index.js trong thư mục thử nghiệm của ứng dụng của chúng tôi.

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

tạo một Mô-đun AngularJS được gọi là sampleApp
Tạo bộ điều khiển có tên AngularJSController
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 = AngularJS.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

Hàm beforeEach – Hàm này được sử dụng để tải mô-đun AngularJS.JS của chúng tôi có tên là 'sampleApp' trước khi chạy thử. Lưu ý rằng đây là tên của mô-đun trong tệp index.js.
Đối tượng $controller được tạo dưới dạng đối tượng mô phỏng cho bộ điều khiển ”Angular JSController” được xác định trong tệp index.js của chúng tôi. Trong bất kỳ loại Thử nghiệm đơn vị nào, một đối tượng giả đại diện cho một đối tượng giả sẽ thực sự được sử dụng để thử nghiệm. Đối tượng giả này sẽ thực sự mô phỏng hành vi của bộ điều khiển của chúng ta.
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ế.
var $scope = {}; Đây là một đối tượng giả được tạo cho đối tượng $scope.
var control = $controller('AngularJSController', { $scope: $scope }); – Ở đây chúng tôi đang kiểm tra sự tồn tại của bộ điều khiển có tên 'Angular.JSController'. Ở đây, chúng tôi cũng đang gán tất cả các biến từ đối tượng $scope trong bộ điều khiển của chúng tôi trong tệp Index.js cho đối tượng $scope trong tệp thử nghiệm của chúng tôi
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 tra nghiệp chướng cũng có chức năng kiểm tra các chỉ thị tùy chỉnh. Điều này bao gồm các URL mẫu đượ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

Tạo một mô-đun AngularJS có tên sampleApp
Tạo một chỉ thị tùy chỉnh với tên – Guru99
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 = AngularJS.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

Hàm beforeEach – Hàm này được sử dụng để tải mô-đun Angular JS của chúng tôi có tên là 'sampleApp' trước khi chạy thử.
Dịch vụ $compile được sử dụng để biên dịch lệnh. Dịch vụ này là bắt buộc và cần được khai báo để Angular.JS có thể sử dụng nó để biên dịch chỉ thị tùy chỉnh của chúng tôi.
$rootscope là phạm vi chính của bất kỳ ứng dụng AngularJS.JS 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. Chà, đối tượng $scope là đối tượng con của đối tượng $rootscope. Lý do điều này được khai báo ở đây là vì chúng tôi đang thực hiện thay đổi đối với thẻ HTML thực tế trong DOM thông qua lệnh tùy chỉnh của chúng tôi. Do đó, chúng ta cần sử dụng dịch vụ $rootscope để thực sự lắng nghe hoặc biết khi nào có bất kỳ thay đổi nào xảy ra từ bên trong tài liệu HTML.
phần tử var = $compile(“ ”) – Điều này được sử dụng để kiểm tra xem lệnh của chúng tôi có được đưa vào như bình thường hay không. Tên của chỉ thị tùy chỉnh của chúng tôi là Guru99 và từ chương chỉ thị tùy chỉnh của chúng tôi, chúng tôi biết rằng khi lệnh này được đưa vào HTML của chúng tôi, nó sẽ được đưa vào dưới dạng ' '. Do đó tuyên bố này được sử dụng để thực hiện kiểm tra đó.
mong đợi(element.html()).toContain(“Đây là thử nghiệm AngularJS”) – Điều này được sử dụng để hướng dẫn hàm mong đợi rằng nó sẽ tìm phần tử (trong trường hợp của chúng tôi là thẻ div) để chứa văn bản bên trongHTML của “Đây là Thử nghiệm AngularJS”.

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("<ng-Guru99></ng-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 tra từ đầu đến cuối các ứng dụng AngularJS JS

Khung kiểm tra nghiệp lực cùng với khung có tên Protractor có chức năng kiểm tra ứ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.

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.
Đố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.
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 = AngularJS.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"}
			]   });

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 thư viện thước đo góc qua npm. Điều này có thể được thực hiện bằng cách thực hiện dòng dưới đây trong dấu nhắc lệnh

"npm install 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

Chức năng trình duyệt được cung cấp bởi thư viện thước đo góc và giả định rằng ứng dụng AngularJS của chúng tôi (với mã hiển thị ở trên) đang chạy trên URL trang web của chúng tôi – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); - Dòng mã này thực sự đ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 do thư viện protractor cung cấp cho phép chúng ta lấy thông tin chi tiết về chỉ thị ng-repeat.
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.

Tổng kết

Việc thử nghiệm trong AngularJS được thực hiện bằng cách sử dụng karma framework, một framework được chính Google phát triển.
Khung nghiệp chướng được cài đặt bằng trình quản lý gói nút. Các mô-đun chính cần được cài đặt để thử nghiệm cơ bản là karma, karma-chrome-launcher, karma-jasmine và karma-cli.
Các bài kiểm tra được viết trong các tệp js riêng biệt, thường được lưu trong thư mục kiểm tra của ứng dụng của bạn. Vị trí của các tệp thử nghiệm này phải được đề cập trong tệp cấu hình đặc biệt có tên karma.conf.js. Karma sử dụng tệp cấu hình này khi thực hiện tất cả các thử nghiệm.
Karma cũng có thể được sử dụng để kiểm tra Bộ điều khiển và các chỉ thị tùy chỉnh.
Để kiểm tra web từ đầu đến cuối, một khung khác gọi là thước đo góc cần được cài đặt thông qua Node, trình quản lý gói. Khung này cung cấp các phương thức đặc biệt có thể được sử dụng để kiểm tra tất cả các thành phần trên trang HTML.

Bạn có thể thích:

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

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

Cấu hình khung Karma

NHỮNG BÀI VIẾT LIÊN QUAN

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

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

Kiểm tra từ đầu đến cuối các ứng dụng AngularJS JS

Tổng kết