AngularJS Unit Testing: Karma Jasmine Tutorial

Mục lục:

Anonim

Một trong những tính năng tuyệt vời nhất của Angular.JS là khía cạnh Thử nghiệm. Khi các nhà phát triển tại Google phát triển AngularJS, họ đã liên tục kiểm tra và đảm bảo rằng toàn bộ khung AngularJS đều có thể kiểm tra được.

Trong AngularJS, kiểm tra thường được thực hiện bằng Karma (framework). Thử nghiệm Angular JS có thể được thực hiện mà không cần Karma, nhưng khung công tác Karma có một chức năng tuyệt vời để thử nghiệm mã AngularJS, vì vậy sẽ rất hợp lý khi sử dụng khung công tác này.

  • Trong AngularJS, chúng ta có thể thực hiện Unit Testing riêng biệt cho các bộ điều khiển và chỉ thị.
  • Chúng tôi cũng có thể thực hiện kiểm tra cuối giai đoạn cuối của AngularJS, đang kiểm tra từ góc độ người dùng.

Trong hướng dẫn này, bạn sẽ học-

  • Giới thiệu và cài đặt khung Karma
    • Cài đặt Karma
    • Cấu hình của khung Karma
  • Kiểm tra bộ điều khiển AngularJS
  • Kiểm tra các chỉ thị AngularJS
  • End to End Testing ứng dụng AngularJS JS

Giới thiệu và cài đặt khung Karma

Karma 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 thông qua npm (là trình quản lý gói được sử dụng để cài đặt dễ dàng các mô-đun trên máy cục bộ).

Cài đặt Karma

Quá trình cài đặt Karma qua npm được thực hiện theo hai bước.

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

npm install karma karma-chrome-launcher karma-jasmine

Trong đó

  1. npm là tiện ích dòng lệ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.
  2. Tham số cài đặt hướng dẫn tiện ích dòng lệnh npm rằng việc cài đặt là bắt buộc.
  3. Có 3 thư viện được chỉ định trong dòng lệnh được yêu cầu để làm việc với karma
    • karma 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 của karma.
    • karma-jasmine - Hoa nhài này cài đặt hoa nhài là một khuôn khổ phụ thuộc vào 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ừ bên trong dòng lệnh

npm install karma-cli

trong đó,

  1. karma-cli được sử dụng để cài đặt giao diện dòng lệnh cho karma sẽ được sử dụng để viết các lệnh karma trong giao diện dòng lệnh.

Cấu hình của khung Karma

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

"karma -init"

Sau khi bước trên được thực hiện, karma sẽ tạo một tệp karma.conf.js. Tệp có thể sẽ 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 cấu hình ở trên cho biết công cụ thời gian chạy karma những điều sau đây

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

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

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. Hàm 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 mô tả 'Thử nghiệm mẫu' vào 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 chúng tôi 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 của từ khoá 'kì vọng' và 'toBe' cho biết giá trị thực tế và mong đợi của kết quả thử nghiệm là bao nhiêu. Nếu giá trị thực tế và giá trị kỳ vọng giống nhau, thì bài kiểm tra sẽ vượt qua, nếu không nó sẽ không thành công.

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

Kết quả bên dưới được lấy từ IDE Webstorm mà các bước trên đã được thực hiện.

  1. Kết quả xuất hiện trong trình thám hiểm Karma trong Webstorm. Cửa sổ này hiển thị việc thực hiện tất cả các bài kiểm tra được xác định trong khung nghiệp vụ.
  2. Ở đây bạn có thể thấy rằng 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 kiểm tra có tên là "Đ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, biểu tượng này tượng trưng rằng tất cả các bài kiểm tra đã 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 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 xác định 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 bên dưới

  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.

Trước tiên, chúng tôi cần đảm bảo điều kiện tiên quyết sau đây được đặt ra

    1. 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
  1. Tiếp theo là sửa đổi tệp karma.conf.js để đảm bảo các tệp phù hợp được đưa vào thử nghiệm. Phân đoạn dưới đây 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']
  • Tham số 'files' về cơ bản cho Karma biết tất cả các tệp được yêu cầu trong quá trình chạy các bài kiểm tra.
  • Tệp AngularJS.js và AngularJS-mocks.js được yêu cầu để chạy các bài kiểm tra đơ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 thử nghiệm sẽ chứa tất cả các thử nghiệm 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.

Đoạn mã dưới đây chỉ thực hiện những việc sau

  1. Tạo một mô-đun Angular JS được gọi là sampleApp
  2. Tạo bộ điều khiển có tên AngularJSController
  3. Tạo một biến có tên là ID, đặt cho nó giá trị là 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 Test Case để đảm bảo mã đã được viết và thực thi đúng cách.

Mã cho bài kiểm tra của chúng tôi sẽ như hình dưới đây.

Mã sẽ nằm trong một tệp riêng có tên ControllerTest.js, tệp này sẽ được đặt trong thư mục thử nghiệm. Đoạn mã dưới đây chỉ thực hiện những điều quan trọng sau

  1. beforeEach function - Chức năng này được sử dụng để tải mô-đun AngularJS.JS của chúng tôi được gọi là '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 như một đối tượng mockup cho bộ điều khiển '' Angular JSController '' được định nghĩa trong tệp index.js của chúng tôi. Trong bất kỳ loại Kiểm thử đơn vị nào, một đối tượng mô phỏng đại diện cho một đối tượng giả thực sự sẽ được sử dụng để kiểm tra. Đối tượng giả lập này sẽ thực sự mô phỏng hành vi của bộ điều khiển của chúng ta.

  3. beforeEach (injection (function (_ $ controller_)) - Điều này được sử dụng để chèn đối tượng giả trong 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ả đang được tạo cho đối tượng $ scope.

  5. var controller = $ 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

  6. Cuối cùng, chúng tôi đang 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ả vượt qua giống như được hiển thị trong chủ đề trước.

Kiểm tra Chỉ thị AngularJS

Khung kiểm tra nghiệp lực 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 templateURL được sử dụng trong các lệnh 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 việc sau

  1. Tạo một mô-đun AngularJS được gọi là sampleApp
  2. Tạo một chỉ thị tùy chỉnh với tên - Guru99
  3. Tạo một hàm trả về một mẫu có thẻ tiêu đề hiển thị văn bản "Đây là Thử nghiệm AngularJS."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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 bài kiểm tra của chúng tôi sẽ như được hiển thị bên dưới

Mã sẽ nằm trong một tệp riêng biệt có tên là Directest.js, tệp này sẽ được đặt trong thư mục thử nghiệm. Đoạn mã dưới đây chỉ thực hiện những điều quan trọng sau

  1. beforeEach function - Hàm này được sử dụng để tải mô-đun Angular JS có tên là 'sampleApp' trước khi chạy thử nghiệm.

  2. Dịch vụ biên dịch $ đượ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 để Angular.JS có thể sử dụng nó để biên dịch chỉ thị tùy chỉnh của chúng tôi.

  3. $ Rootcope 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 controller trong các chương trước. Đối tượng $ scope là đối tượng con của đối tượng $ rootcope. 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 chỉ thị tùy chỉnh của chúng tôi. Do đó, chúng ta cần sử dụng dịch vụ $ rootcope 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.

  4. var element = $ compile (" ") - Điều này được sử dụng để kiểm tra xem chỉ thị của chúng ta 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à chúng tôi biết từ chương chỉ thị tùy chỉnh của mình rằng khi chỉ thị được đưa vào HTML của chúng tôi, nó sẽ được đưa vào là ' '. Do đó câu lệnh này được sử dụng để thực hiện kiểm tra đó.

  5. mong đợi (element.html ()). toContain ("Đây là AngularJS Testing") - Đ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 ta là thẻ div) để chứa văn bản InternalHTML 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 directivevar element = $compile("")($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ả vượt qua giống như được hiển thị trong chủ đề trước.

End to End Testing ứng dụng AngularJS JS

Khung kiểm thử nghiệp chướng cùng với một khung công tác được gọi là Thước đo góc có chức năng kiểm tra một ứng dụng web từ đầu đến cuối.

Vì vậy, nó không chỉ kiểm tra các chỉ thị 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ụ dưới đây, chúng ta sẽ có một ứng dụng AngularJS tạo một bảng dữ liệu bằng cách sử dụng chỉ thị ng-repeat.

  1. Đầu 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 để nó có thể được truy cập từ chế độ xem của chúng ta.
  2. Đối với mỗi hàng dữ liệu trong bảng, chúng tôi đang sử dụng chỉ thị ng-repeat. Chỉ thị 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 thẻ 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.


{{ ptutor.Name }}{{ ptutor.Description }}