Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Việc test ứng dụng là một bước không thể thiếu trong quá trình phát triển phần mềm, giúp đảm bảo tính năng hoạt động của ứng dụng trước khi đưa ra thị trường. Trong AngularJS, Karma và Jasmine là hai công cụ phổ biến được sử dụng để test ứng dụng.

Trong quá trình phát triển phần mềm, việc đảm bảo tính năng hoạt động của ứng dụng là vô cùng quan trọng. Một trong những phương pháp để đảm bảo tính năng hoạt động của ứng dụng chính là việc test ứng dụng. Với AngularJS, Karma và Jasmine là hai công cụ phổ biến được sử dụng để test ứng dụng. Trong bài viết này, chúng ta sẽ tìm hiểu các cách để test ứng dụng AngularJS bằng cách sử dụng Karma và Jasmine.

Tại sao sử dụng Karma và Jasmine để test ứng dụng AngularJS?

Sử dụng Karma và Jasmine để test ứng dụng AngularJS có nhiều lợi ích, bao gồm:

• Đảm bảo tính năng hoạt động: Việc test ứng dụng giúp đảm bảo tính năng hoạt động của ứng dụng trước khi đưa ra thị trường. Sử dụng Karma và Jasmine giúp kiểm tra tính năng của ứng dụng trong các trường hợp khác nhau để đảm bảo rằng ứng dụng hoạt động tốt trên nhiều môi trường khác nhau.
• Tăng năng suất và tiết kiệm thời gian: Sử dụng Karma và Jasmine giúp viết và chạy các test case nhanh chóng và dễ dàng, giúp tiết kiệm thời gian và tăng năng suất trong quá trình phát triển ứng dụng.
• Dễ dàng bảo trì và phát triển: Việc test ứng dụng với Karma và Jasmine giúp phát hiện lỗi sớm và dễ dàng sửa chữa, giúp cho quá trình phát triển và bảo trì ứng dụng dễ dàng hơn.
• Tăng độ tin cậy: Việc test ứng dụng với Karma và Jasmine giúp đảm bảo tính tin cậy của ứng dụng, giúp người dùng tin tưởng hơn vào sản phẩm của bạn.

Vì những lý do trên, Karma và Jasmine là hai công cụ phổ biến được sử dụng để test ứng dụng AngularJS.

Bài viết này được đăng tại [free tuts .net]

Các khái niệm cơ bản trong Karma và Jasmine

Karma là gì?

Karma là một công cụ test runner phổ biến được sử dụng để chạy các test case trong AngularJS. Nó được xây dựng trên nền tảng Node.js và hỗ trợ chạy các test trên nhiều trình duyệt khác nhau, bao gồm Chrome, Firefox, Safari và PhantomJS. Karma cũng cung cấp tính năng tạo và quản lý các test suite và test case. Karma được tích hợp sẵn với Angular CLI, cho phép bạn dễ dàng tạo ra các test cho ứng dụng Angular của mình và chạy chúng trong quá trình phát triển.

Jasmine là gì?

Jasmine là một framework test JavaScript phổ biến được sử dụng để viết và chạy các test case cho các ứng dụng web, trong đó có cả AngularJS. Jasmine cung cấp các phương thức để định nghĩa và xử lý các test suite và test case. Nó được thiết kế để đọc và viết như một câu chuyện, giúp người dùng dễ dàng hiểu các bài test. Jasmine cũng cung cấp nhiều hàm matcher để kiểm tra các kết quả của các phương thức, đảm bảo rằng code của bạn đang hoạt động đúng như mong đợi. Jasmine cũng có thể được sử dụng với Karma để chạy các test case của bạn trên nhiều trình duyệt khác nhau.

Các bước để test ứng dụng AngularJS với Karma và Jasmine

Để sử dụng Karma và Jasmine trong việc test ứng dụng AngularJS, bạn cần thực hiện các bước sau:

Bước 1: Cài đặt Karma và Jasmine

Để cài đặt Karma và Jasmine, bạn cần cài đặt Node.js và npm (Node Package Manager) trước. Sau đó, chạy các lệnh sau trong Terminal hoặc Command Prompt để cài đặt Karma và Jasmine:

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

Bước 2: Tạo file config cho Karma

Sau khi cài đặt Karma và Jasmine, bạn cần tạo một file cấu hình cho Karma. File cấu hình này sẽ cho phép Karma biết cách tìm các test case của bạn, cấu hình các trình duyệt mà bạn muốn chạy test và cài đặt các plugin cần thiết. Bạn có thể tạo một file karma.conf.js bằng cách chạy lệnh sau:

karma init

Lệnh này sẽ yêu cầu bạn nhập một số thông tin để cấu hình Karma.

Bước 3: Viết các test case với Jasmine

Bây giờ bạn có thể viết các test case của mình bằng Jasmine. Jasmine cung cấp cho bạn nhiều hàm matcher để kiểm tra kết quả của các phương thức. Ví dụ:

describe('Test Suite', function() {
   it('Test Case', function() {
      expect(true).toBe(true);
   });
});

Trong ví dụ này, chúng ta đang định nghĩa một test suite với một test case. Trong test case này, chúng ta sử dụng hàm matcher expect để kiểm tra xem giá trị true có bằng true hay không.

Bước 4: Chạy các test case với Karma

Cuối cùng, bạn cần chạy các test case của mình bằng Karma. Bạn có thể chạy Karma bằng cách chạy lệnh sau trong Terminal hoặc Command Prompt:

karma start

Lệnh này sẽ chạy Karma với cấu hình được định nghĩa trong file karma.conf.js và hiển thị kết quả của các test case của bạn.

Các loại test case phổ biến trong AngularJS

Unit test

Unit test là kiểm tra chức năng của các thành phần riêng lẻ trong ứng dụng. Các thành phần này có thể là các service, controller, directive, filter hoặc các hàm riêng lẻ. Trong unit test, một thành phần được kiểm tra mà không phụ thuộc vào các thành phần khác. Điều này đảm bảo rằng khi có sự thay đổi trong một thành phần, chỉ các unit test liên quan đến thành phần đó sẽ bị ảnh hưởng. Đây là loại test case quan trọng nhất trong AngularJS vì nó giúp bạn đảm bảo rằng các thành phần của ứng dụng hoạt động đúng như mong đợi.

Ví dụ minh hoạ

Trong phần này, chúng ta sẽ tập trung vào việc viết các unit test cho các service và controller của ứng dụng. Đầu tiên, hãy xem xét service để quản lý danh sách sản phẩm.

angular.module('myApp').factory('productService', function() {
  var products = [];

  return {
    getAll: function() {
      return products;
    },

    add: function(product) {
      products.push(product);
    },

    remove: function(index) {
      products.splice(index, 1);
    }
  };
});

Các hàm getAll, add và remove của service này sẽ được kiểm tra bằng các unit test. Dưới đây là ví dụ về các unit test cho hàm add.

describe('productService', function() {
  var productService;

  beforeEach(module('myApp'));

  beforeEach(inject(function(_productService_) {
    productService = _productService_;
  }));

  it('should add a product', function() {
    productService.add({ name: 'Product 1', price: 10 });
    expect(productService.getAll().length).toEqual(1);
  });

  it('should add multiple products', function() {
    productService.add({ name: 'Product 1', price: 10 });
    productService.add({ name: 'Product 2', price: 20 });
    productService.add({ name: 'Product 3', price: 30 });
    expect(productService.getAll().length).toEqual(3);
  });
});

Ở đây, chúng ta đã sử dụng Jasmine để viết các unit test cho productService. Trong đó, chúng ta đã kiểm tra xem hàm add có thêm sản phẩm vào danh sách sản phẩm hay không.

Integration test

Integration test là kiểm tra chức năng của các thành phần của ứng dụng hoạt động cùng nhau. Nó kiểm tra xem các thành phần có thể giao tiếp với nhau và làm việc đúng như mong đợi hay không. Integration test giúp bạn đảm bảo rằng các thành phần của ứng dụng hoạt động tốt với nhau và tránh lỗi khi tích hợp chúng lại với nhau.

Ví dụ minh hoạ

Trong phần này, chúng ta sẽ tập trung vào việc viết các integration test cho các thành phần của ứng dụng. Đầu tiên, hãy xem xét controller để quản lý danh sách sản phẩm.

angular.module('myApp').controller('productController', function($scope, productService) {
  $scope.products = productService.getAll();

  $scope.newProduct = {};

  $scope.addProduct = function() {
    productService.add($scope.newProduct);
    $scope.newProduct = {};
  };

  $scope.removeProduct = function(index) {
    productService.remove(index);
  };
});

Các hàm addProduct và removeProduct của controller này sẽ được kiểm tra bằng các integration test. Dưới đây là ví dụ về các integration test cho hàm addProduct.

describe('productController', function() {
  var scope, productService, controller;

  beforeEach(module('myApp'));

  beforeEach(inject(function($rootScope, $controller, _productService_) {
    scope = $rootScope.$new();
    productService = _productService_;
    controller = $controller('productController', {
      $scope: scope,
      productService: productService
    });
  }));

  it('should filter products by category', function() {
    scope.filterByCategory('Clothing');
    expect(scope.products.length).toBe(2);
    expect(scope.products[0].category).toEqual('Clothing');
    expect(scope.products[1].category).toEqual('Clothing');
  });

  it('should set the selected product', function() {
    var product = {
      id: 2,
      name: 'Product 2',
      category: 'Electronics'
    };
    scope.setSelectedProduct(product);
    expect(scope.selectedProduct).toEqual(product);
  });

  it('should add a new product', function() {
    var product = {
      name: 'Product 3',
      category: 'Clothing'
    };
    spyOn(productService, 'addProduct').and.returnValue(true);
    scope.addProduct(product);
    expect(productService.addProduct).toHaveBeenCalled();
  });

});

Trong đoạn code này, chúng ta đã định nghĩa thêm các test case sau:

• Kiểm tra tính năng lựa chọn sản phẩm.
• Kiểm tra tính năng thêm sản phẩm mới.

Các test case này sẽ giúp chúng ta đảm bảo tính chính xác và hoạt động tốt của các tính năng trong ứng dụng của chúng ta.

Để chạy các test case này, chúng ta cần cài đặt Karma và Jasmine và cấu hình Karma để chạy các test case này. Sau đó, chúng ta có thể chạy lệnh "karma start" để bắt đầu quá trình test và xem kết quả trên trình duyệt.

End-to-end test

End-to-end (E2E) test là loại test case mà kiểm tra một chức năng hoặc một tính năng của ứng dụng hoạt động như mong đợi từ góc độ người dùng cuối.

Để viết E2E test, chúng ta có thể sử dụng Protractor - một framework test E2E cho ứng dụng AngularJS.

Dưới đây là một ví dụ E2E test case sử dụng Protractor để kiểm tra tính năng tìm kiếm sản phẩm trên trang web bán hàng:

describe('Product search', function() {
  beforeEach(function() {
    browser.get('http://localhost:8000');
  });

  it('should search for products', function() {
    var searchInput = element(by.model('searchTerm'));
    searchInput.sendKeys('laptop');
    searchInput.submit();

    var productList = element.all(by.repeater('product in productList'));
    expect(productList.count()).toBeGreaterThan(0);
  });
});

Trong ví dụ này, chúng ta truy cập vào trang web tại địa chỉ http://localhost:8000 và tìm kiếm sản phẩm với từ khóa "laptop". Sau đó, chúng ta kiểm tra xem kết quả tìm kiếm có ít nhất một sản phẩm trở lên hay không.

Để chạy E2E test case này, chúng ta cần khởi động ứng dụng và chạy lệnh protractor conf.js (với conf.js là file cấu hình của Protractor). Protractor sẽ mở trình duyệt và tự động thực hiện các bước trong test case để kiểm tra tính năng tìm kiếm sản phẩm của ứng dụng.

Kết bài viết

Trong quá trình phát triển phần mềm, việc test ứng dụng là rất quan trọng để đảm bảo tính ổn định, độ tin cậy và chất lượng của ứng dụng. Sử dụng Karma và Jasmine để test ứng dụng AngularJS cung cấp nhiều lợi ích cho nhà phát triển như tiết kiệm thời gian và chi phí, tăng tính ổn định và độ tin cậy của ứng dụng.

Khi thực hiện test case, cần lưu ý các nguyên tắc quan trọng như tách biệt các test case, giữ cho test case đơn giản, sử dụng mock data, viết các test case phù hợp với từng loại test, chạy test case thường xuyên và theo dõi kết quả test để cải thiện chất lượng của ứng dụng.

Việc sử dụng Karma và Jasmine để test ứng dụng AngularJS là một phần không thể thiếu trong quá trình phát triển phần mềm. Điều này giúp đảm bảo chất lượng của ứng dụng và mang lại lợi ích lớn cho nhà phát triển.