Học lập trình Kiểm thử phần mềm (Unit test) – Sử dụng Jasmine thực hiện kiểm thử trên trình duyệt với TypeScript - Bài số 01

Học lập trình Kiểm thử phần mềm (Unit test) – Sử dụng Jasmine thực hiện kiểm thử trên trình duyệt với TypeScript - Bài số 01
access_time 12/16/2015 12:00:00 AM
person Đào Minh Giang

1. Giới thiệu

Chúng ta viết các unit test để khám phá và xác nhận hành vi của từng phần trên ứng dụng của ta.

Lý do cho việc phải có unit test có nhiều nhưng trong đó có 3 lý do chủ chốt:

1.    Chúng bảo vệ việc phá vỡ các mã code đã có khi chúng ta thực hiện các thay đổi

2.    Chúng giúp ta làm rõ những mã code xử lý ra sao khi được sử dụng theo đúng mục đích thiết kế cũng như điều kiện lệch chuẩn.

3.    Chúng chỉ rõ các sai lầm trong thiết kế và thực thi. Các kiểm thử bắt chúng ta xem lại mã code bằng nhiều góc khác nhau. Khi một phần trong ứng dụng của ta dường như khó để kiểm thử, chúng ta có thể phát hiện ra lỗ hổng trong thiết kế, hay một số vấn đề khác mà chúng có thể sửa ngay lúc này thay vì để việc sửa chữa trở nên đắt đỏ hơn sau này.

Trong khi chúng ta thích có các kiểm thử, nhưng chúng ta lại không liên tục thích tạo các kiểm thử. Một chút nào đó nó giống như sự khác biệt giữa thích có tiềnlàm ra tiền.

2. Test với Jasmine

Chúng ta viết các kiểm thử với nền tảng kiểm thử Jasmine, trong đó ta sẽ xem xét về:

·         Các kỹ năng kiểm thử Jasmine cơ bản

·         Thực thi chạy các kiểm thử trên trình duyệt

·         Viết kiểm thử Jasmine đơn giản trong TypeScript

Ta tạo một thư mục project kiểm thử với tên là angular2-unit-testing

2.1. Cài đặt các gọi npm cục bộ

Tại thư mục mới tạo ta cài đặt gói Jasmine qua npm qua lệnh:

npm install jasmine-core --save-dev --save-exact

Chú ý: chúng ta cài đặt gói jasmine-core chứ không phải là jasmine

Tạo thư mục con là src trong project và chuyển vào thư mục đó qua lệnh cd

Tạo một file với tên là unit-tests.html và nhập nội dung như sau:

<html>
<head>
    <title>1st Jasmine Tests</title>
    <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
    <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
</body>
</html>

Trong phần head ta có 3 file script Jasmine và một file css Jasmine. Đó chính là các thành phần cơ bản cho phép chạy bất kỳ kiểm thử nào.

Ta sẽ viết mã kiểm thử đầu tiên qua đoạn mã JavaScript ngay trong thẻ body:

<script>
    it('true is true'function () { expect(true).toEqual(true); });
</script>

Để dễ dàng cho việc xem kết quả kiểm thử trên trình duyệt ta sẽ cài đặt một ứng dụng nodejs để tạo server http đơn giản phục vụ việc phát triển là live-server bằng cách thực hiện lệnh cài gói live-server ở chế độ global

npm install –g live-server

Và để mở file kiểm thử đầu tiên unit-tests.html bằng cách khởi động live-server với lệnh trên thư mục project:

live-server --port=8899 --open=unit-tests.html

Khi đó live-sever sẽ tự động mở trình duyệt mặc định tại máy và mở tạo kết nối tới file test của ta theo dạng http://127.0.0.1:8899/unit-tests.html

2.2. Kiểm thử với TypeScript

Trong thực tế việc việc thử không quá đơn giản như ví dụ trên, mà thông thường phần mã kiểm thử sẽ được tách nội dung html riêng với phần mã. Ta sẽ tách riêng đoạn mã kiểm thử ra file TypeScript đặt trong thư mục src với tên là 1st.spec.ts

Ghi chú: Với các lập trình viên Jasmine, một kiểm thử được gọi là một “spec” và các tên file kiểm thử sẽ gộp kèm theo từ “spec”. Và chúng ta sẽ áp dụng quy tắc này.

Đoạn mã lệnh kiểm thử trên vẫn hợp lệ với TypeScript vì bất kỳ mã JavaScript nào đều là mã TypeScript hợp lệ. Tuy nhiên ta có thể tạo đoạn mã trông hiện đại hơn với việc áp dụng hàm mũi tên (arrow) như sau:

it("true is true", () => expect(true).toEqual(true));

Tuy nhiên nếu các bạn mở file TypeScript này trên các công cụ hỗ trợ TypeScript như Visual Studio Code, hay Visual Studio 2015, … thì sẽ nhận được các thông báo lỗi về việc trình biên dịch TypeScript không tìm thấy định nghĩa tên it, và expect

Lỗi này bởi vì ta cần cung cấp cho trình biên dịch TypeScript các khai báo thư viện Jasmine. Trường hợp này ta sẽ sử dụng một công cụ trên nodejs hỗ trợ việc khai báo sử dụng các khai báo thư viện JavaScript là “TypeScript Definition manager for DefinitelyTyped” – tsd. Để cài đặt tsd ta thực hiện lệnh cài đặt qua npm:

npm install –g tsd

Sau đó có thể sử dụng lệnh tsd để quản lý các file khai báo thư viện JavaScript cho TypeScript:

tsd init

Bằng việc thực thi lệnh này tsd sẽ tạo ra 2 file:

·         tsd.json : Cấu hình các thành phần khai báo TypeScript cho thư viện JavaScript được cài đặt

·         typings\tsd.d.ts : đặt liên kết tới tất cả các file khai báo d.ts của TypeScript

Kế tiếp ta cài đặt thư viện Jasmine qua lệnh sau:

tsd install jasmine --resolve --save

Ở đây hai tham số resolvesave được cung cấp kèm để tsd sẽ tự động cài đặt các thư viện mà Jasmine phụ thuộc cũng như các thành phần cài đặt sẽ được lưu lại vào file cấu hình tsd.json

Ghi chú: Công cụ tsd có rất nhiều các lệnh để thực hiện truy vấn (query) , cài đặt hay cập nhật, .. các thư viện. Để biết chi tiết cách sử dụng các bạn có thể tham khảo thêm ở liên kết sau https://www.npmjs.com/package/tsd

Lúc này ta có thể đặt tham chiếu tới file typings\tsd.d.ts trong đoạn mã TypeScript như sau:

/// <reference path="../typings/tsd.d.ts" />
it("true is true", () => expect(true).toEqual(true));

Để biên dịch file TypeScript sang JavaScript ta tạo file tsconfig.json trong thư mục src cấu hình cho việc biên dịch với nội dung như sau:

{
  "compilerOptions": {
    "target""es5",
    "module""commonjs",
    "sourceMap"true,
    "emitDecoratorMetadata"true,
    "experimentalDecorators"true,
    "removeComments"false,
    "noImplicitAny"false
  }
}

Sau đó tại thư mục project thực hiện lệnh biên dịch:

tsc –p src

Tham số -p src được cung cấp để chỉ ra thư mục để trình biên dịch TypeScript tìm các file TypeScript.

Khi việc biên dịch thành công ta sẽ có file JavaScript được biên dịch là 1st.spec.js, lúc này ta cần điều chỉnh lại mã cho file unit-tests.html như sau:

<html>
<head> ... </head>
<body>
    <script src="src/1st.spec.js"></script>
</body>
</html>

Sau khi điều chỉnh lại mã code như trên ta có thể khởi chạy live-server và cũng sẽ nhận được kết quả giống như trước.

2.3. Bổ xung mô tả vào mã kiểm thử

Như bạn đã thấy trong kết quả kiểm thử trước trên trình duyệt thì ta không thể phân biệt được nội dung file kiểm thử nào phát sinh kết quả. Ở đây ta chỉ có 1 file kiểm thử nhưng trong thực tế có thể có rất nhiều các file kiểm thử khác.

Trong Jasmine chúng ta có thể đóng gói các thông tin để nhận diện file kiểm thử, hay đọc thông tin chi tiết nội dung kiểm thử bằng việc sử dụng hàm describe. Và thông thường mỗi file kiểm thử tối thiểu cần có một mô tả bên trong để nhận diện nội dung kiểm thử trong đó.

Ở đây ta sẽ thực hiện điều chỉnh lại mã cho file 1st.spec.ts bao trong hàm describe như sau:

/// <reference path="../typings/tsd.d.ts" />
describe("1st tests", () => {
    it("true is true", () => expect(true).toEqual(true));
});

Và lúc này ta sẽ nhận được kết quả kiểm thử mới như hình sau:

Tiếp tục bổ xung mã kiểm thử vào file 1st.spec.ts trong thân của hàm describe

it('null is not the same thing as undefined',
    () => expect(null).not.toEqual(undefined)
);

Cập nhật kết quả kiểm thử mới ta có hình sau:

Và nếu kết quả kiểm thử thất bại thì sẽ ra sao? Bằng cách bỏ đoạn code nhỏ .not trong đoạn mã mới thêm vào ta sẽ nhận được kết quả chi tiết lỗi xảy ra:

Click vào liên kết Spec List ta sẽ chỉ nhìn thấy kết quả tổng kết như sau:

vertical_align_top
share
Chat...