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    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ã: shortDate   export function shortDate(date) { return date.toISOString().substring(0, 10); }  dấu chấm lửng    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: ellipsis   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   và   . Đó 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. key lang   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:    —một thư mục nơi chúng ta có thể đặt các tệp   vào bài kiểm tra và spec/ *.spec.js    — một tệp có cấu hình Jasmine. spec/support/jasmine.json  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,   sẽ chạy thử nghiệm của chúng tôi: npm run test   $ npm run test > testing-example@1.0.0 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

2022 - HackerNoon Contributor of the Year - Beginners Guide

2022 - HackerNoon Contributor of the Year - Code Quality

2022 - HackerNoon Contributor of the Year - Learning

2022 - the Greatest Storyteller

Newsletter

Senior JS developer

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

94 Stories To Learn About John Locke

145 Stories To Learn About Book

72 Stories To Learn About Adam Smith

287 Stories To Learn About Blockchain Development

94 Stories To Learn About John Locke

145 Stories To Learn About Book

72 Stories To Learn About Adam Smith

287 Stories To Learn About Blockchain Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps