Jasmine: Hướng dẫn thân thiện với người mới bắt đầu về các hàm thuần túy và các bài kiểm tra cơ bản

Các hàm thuần túy là trường hợp hoàn hảo cho thử nghiệm đơn vị. Đối với một đầu vào nhất định, chúng tôi luôn mong đợi đầu ra giống nhau—không có trạng thái nội bộ nào liên quan. Chúng ta hãy xem một vài ví dụ và một số thử nghiệm đơn giản để kiểm tra xem các phương pháp có hoạt động như mong đợi hay không.

hoa nhài

Jasmine là một khung kiểm tra đơn vị cho JavaScript. Nó có thể chạy thử nghiệm trong cả Node.js hoặc trên trình duyệt. Nó được sử dụng trong Angular framework và đặc biệt phổ biến trong các dự án dựa trên Angular. Đó là một lựa chọn chắc chắn cho các dự án Vanilla JS hoặc các dự án dựa trên các khung công tác khác.

Kiểm tra con đường hạnh phúc

Kiểm tra đường dẫn vui vẻ là khi chúng tôi kiểm tra một phương thức với các đầu vào dự kiến sẽ hoạt động bình thường. Các đối số là hợp lệ và trong phạm vi hợp lý. Các thử nghiệm đó kiểm tra xem phương thức có thực hiện đúng công việc của nó hay không—các trường hợp thử nghiệm phải là ví dụ đơn giản về cách giải thích phương thức trong tài liệu của nó.

Ví dụ về mã giả:

• expect(add(2, 2)).toBe(4) ,

• expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”)

Những thử nghiệm đó nhằm mục đích tự động phát hiện bất cứ khi nào hành vi của phím phương thức bị hỏng.

phương pháp

Hãy xem một số phương pháp đơn giản: các thao tác đơn giản mà chúng ta có thể cần trong một số ứng dụng trong thế giới thực.

Tất cả việc triển khai đều được đơn giản hóa rất nhiều—tất cả các phương thức sẽ bị hỏng một cách tồi tệ nếu chúng ta chỉ cung cấp cho chúng các tham số hơi khác so với những gì được mong đợi. Mã này còn lâu mới mạnh mẽ.

chào

Phương thức chào người dùng bằng tên và họ của họ:

 export function greet(name, surname) { return `Hello ${name} ${surname}!`; }

ngày ngắn

shortDate là một phương thức định dạng lấy một đối tượng ngày và trả về nó được định dạng dưới dạng một chuỗi ngắn. Mật mã:

 export function shortDate(date) { return date.toISOString().substring(0, 10); }

dấu chấm lửng

ellipsis lấy một chuỗi văn bản dài và một tham số độ dài tùy chọn, sau đó cắt bớt chuỗi để vừa với giới hạn:

 export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; }

dịch

Một phương thức cung cấp các giá trị chuỗi đã dịch cho một cặp key và lang . Đó là cách triển khai đơn giản hóa những gì có thể được thay thế bằng các thư viện dịch nâng cao hơn.

 export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } }

áp dụngGiảm giá

Phương pháp áp dụng chiết khấu phần trăm cho một mức giá. Có thể cảm thấy như quá mức cần thiết với cách triển khai đơn giản này, nhưng sau này, khi chúng tôi bắt đầu điều tra các trường hợp nguy hiểm, mọi việc sẽ trở nên thú vị hơn nhiều.

 export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; }

tính giá

Cái này tính tổng giá khi mua nhiều đơn vị ở một mức giá nhất định. Nó cũng sẽ trở nên phức tạp hơn sau khi thêm các trường hợp đặc biệt thú vị.

 export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }

Mã JS hoàn chỉnh

Mã JS hoàn chỉnh, src/main.js :

 export function greet(name, surname) { return `Hello ${name} ${surname}!`; } export function shortDate(date) { return date.toISOString().substring(0, 10); } export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; } export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } } export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; } export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }

Thêm thử nghiệm Jasmine

Để thêm Jasmine, hãy bắt đầu bằng cách chuyển đổi thư mục thành gói npm:

 $ npm init -y Wrote to …/package.json: …

Sau đó chúng ta có thể cài đặt gói Jasmine:

 $ npm install --save-dev jasmine added 42 packages, and audited 43 packages in 2s 13 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

Sau đó, chúng ta có thể tạo các thư mục và tệp được Jasmine sử dụng:

 $ npx jasmine init (no output)

Lệnh này tạo ra như sau:

• spec/ —một thư mục nơi chúng ta có thể đặt các tệp *.spec.js vào bài kiểm tra và

• spec/support/jasmine.json — một tệp có cấu hình Jasmine.

Kiểm tra đơn vị

Đối với các bài kiểm tra đơn vị sau đây, tôi chỉ tập trung vào đường dẫn hạnh phúc—tôi kiểm tra xem kết quả có như mong đợi đối với đầu vào hợp lý hay không. Bài kiểm tra sẽ tự giải thích, vì vậy chúng ta hãy xem chúng:

 import { greet, shortDate, ellipsis, translate, applyDiscount, calculatePrice, } from "../src/main.js"; describe("main", () => { describe("greet", () => { it("should greet by name and surname", () => { expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!"); }); }); describe("shortDate", () => { it("should format correclty date", () => { const date = new Date("2023-11-02"); expect(shortDate(date)).toEqual("2023-11-02"); }); }); describe("shortDate", () => { it("should shorten long text at 50 chars", () => { expect( ellipsis( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa." ) ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…"); }); it("should leave short text unchanged", () => { expect(ellipsis("Lorem ipsum sin dolor")).toEqual( "Lorem ipsum sin dolor" ); }); it("should shorten to custom length", () => { expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…"); }); }); describe("translate", () => { it("should translate to supported langauges", () => { expect(translate("hello", "en")).toEqual("Hello!"); expect(translate("hello", "pl")).toEqual("Cześć!"); }); }); describe("applyDiscount", () => { it("should lower the price accordingly", () => { expect(applyDiscount(120, 25)).toEqual(90); expect(applyDiscount(8, 50)).toEqual(4); }); }); describe("calculatePrice", () => { it("should find a price of many products", () => { expect(calculatePrice(4, 3)).toEqual(12); expect(calculatePrice(9, 0.5)).toEqual(4.5); }); }); });

(tệp spec/main.spec.js )

Chạy thử nghiệm

Để chạy thử nghiệm, chúng ta có thể thêm đoạn mã sau vào package.json :

 .. "scripts": { "test": "jasmine" }, …

Với điều này, npm run test sẽ chạy thử nghiệm của chúng tôi:

 $ npm run test > [email protected] test > jasmine Randomized with seed 76873 Started ........ 8 specs, 0 failures Finished in 0.004 seconds Randomized with seed 76873 (jasmine --random=true --seed=76873)

Bản tóm tắt

Trong bài đăng này, chúng ta đã xem xét một ví dụ đơn giản về mã JS và cách nó có thể được kiểm thử đơn vị. Bạn có thể tìm thấy ví dụ mã hoàn chỉnh trên GitHub .

Cũng được xuất bản ở đây