Giới thiệu
Tôi đã khám phá đơn vị thử nghiệm và kiểm tra phạm vi bảo hiểm cho JavaScript như tôi làm việc trên một ứng dụng SharePoint mới cho SharePoint trực tuyến trong văn phòng 365 mật. Đường dẫn rõ ràng nghiên cứu đã dẫn tôi để Qunit.js và ngay sau đó, để Blanket.js.
QUnit Hãy để tôi thiết lập đơn vị xét nghiệm và nhóm chúng thành mô-đun. Một mô-đun là chỉ là một cách đơn giản để tổ chức liên quan đến các xét nghiệm. (Tôi không chắc chắn tôi đang sử dụng nó như dự định, nhưng nó làm việc cho tôi cho đến nay với các thiết lập nhỏ của tôi vậy, đến nay đã xác định các bài kiểm tra).
Blanket.js tích hợp với Qunit và nó sẽ chỉ cho tôi dòng JavaScript thực tế đã-và quan trọng hơn-đã không thực sự được thực hiện trong quá trình chạy các bài kiểm tra. Đây là "bảo hiểm"-dòng mà thực hiện được bao phủ bởi các thử nghiệm trong khi những người khác không phải.
Giữa thiết lập tốt trường hợp kiểm tra và xem phạm vi bảo hiểm, chúng tôi có thể làm giảm nguy cơ rằng mã của chúng tôi đã che Khuyết tật. Thời gian tốt đẹp.
Qunit
Giả sử bạn có Visual Studio của bạn dự án thiết lập, bắt đầu bằng cách tải về các gói dung JavaScript từ http://qunitjs.com. Thêm JavaScript và CSS tương ứng để giải pháp của bạn. Mỏ trông như thế này:
Con số 1
Như bạn có thể nhìn thấy, Tôi đã sử dụng 1.13.0 lúc đó tôi đã viết bài đăng blog. Đừng quên để tải về và thêm tập tin CSS.
Mà ra khỏi đường, bước tiếp theo là để tạo ra một số loại thử nghiệm khai thác và tham khảo các bit Qunit. Tôi đang thử nghiệm một loạt các chức năng trong một tập tin kịch bản được gọi là "QuizUtil.js" do đó tôi tạo ra một trang HTML được gọi là "QuizUtil_test.html" như thể hiện:
Con số 2
Đây là mã:
<!DOCTYPE HTML> <HTML xmlns= "http://www.w3.org/ 1999/xhtml"> <đầu> <tiêu đề>QuizUtil thử nghiệm với Qunit</tiêu đề> <liên kết rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" /> <kịch bản loại= text/javascript"" SRC="QuizUtil.js" dữ liệu-bao gồm></kịch bản> <kịch bản loại ="text/javascript" SRC ="qunit-1.13.0.js"></kịch bản> <kịch bản loại ="text/javascript" SRC ="blanket.min.js"></kịch bản> <kịch bản> Mô-đun("getIDFromLookup"); kiểm tra("QuizUtil getIDFromLookupField", chức năng () { var goodValue = "1;#Paul Galvin"; bình đẳng(getIDFromLookupField(goodValue) + 1, 2), "ID của [" + goodValue + "] + 1 nên là 2"; bình đẳng(getIDFromLookupField(undefined), undefined, "Không xác định đối số đầu vào sẽ trả về kết quả không xác định."); bình đẳng(getIDFromLookupField(""), undefined, "Đối số đầu vào sản phẩm nào nên trở về một giá trị không xác định."); bình đẳng(getIDFromLookupField("gobbledigood3-thq;DKVN ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), undefined,"Nên luôn luôn trở về một kết quả chuyển đổi một số nguyên"); bình đẳng(getIDFromLookupField("2;#một số người khác"), "2", "Kiểm tra [2;#một số người khác]."); bình đẳng(getIDFromLookupField("9834524;#giá trị dài"), "9834524", "Giá trị lớn thử nghiệm."); notEqual(getIDFromLookupField("5;#bất cứ ai", 6), 6, "Thử nghiệm một notEqual (5 không phải là tương đương với 6 Đối với các mẫu này: [5;#bất cứ ai]"); }); Mô-đun("htmlEscape"); kiểm tra("QuizUtil htmlEscape()", chức năng () { bình đẳng(htmlEscape("<"), "<", "Thoát một ít hơn nhà điều hành ('<')"); bình đẳng(htmlEscape("<div lớp = "someclass">Một số văn bản</div>"), "<div lớp ="SomeClass">Một số văn bản</div>", "Phức tạp hơn kiểm tra chuỗi."); }); Mô-đun("getDateAsCaml"); kiểm tra("QuizUtil getDateAsCaml()", chức năng () { bình đẳng(getDateAsCaml(mới Ngày("12/31/2013")), "NĂM 2013-12-31T:00:00:00", "Thử nghiệm cứng mã hoá ngày: [12/31/2013]"); bình đẳng(getDateAsCaml(mới Ngày("01/05/2014")), "2014-01-05T:00:00:00", "Thử nghiệm cứng mã hoá ngày: [01/05/2014]"); bình đẳng(getDateAsCaml(mới Ngày("01/31/2014")), "2014-01-31T:00:00:00", "Thử nghiệm cứng mã hoá ngày: [01/31/2014]"); bình đẳng(getTodayAsCaml(), getDateAsCaml(mới Ngày()), "getTodayAsCaml() nên bằng getDateAsCaml(Ngày mới())"); bình đẳng(getDateAsCaml("giá trị vô nghĩa"), undefined, "Cố gắng để có được ngày một giá trị vô nghĩa."); bình đẳng(getDateAsCaml(undefined), undefined, "Cố gắng để có được ngày của các [undefined] ngày."); }); Mô-đun("getParameterByName"); kiểm tra("QuizUtil getParameterByName (từ chuỗi truy vấn)", chức năng () { bình đẳng(getParameterByName(undefined), undefined, "Cố gắng để có được không xác định tham số nên trở về không xác định."); bình đẳng(getParameterByName("không tồn tại"), undefined, "Cố gắng để có được giá trị tham số khi chúng tôi biết các tham số không tồn tại."); }); Mô-đun("Cookie"); kiểm tra("QuizUtil chức năng cookie khác nhau.", chức năng () { bình đẳng(setCookie("kiểm tra", "1", -1), getCookieValue("kiểm tra"), "Nhận được một cookie tôi thiết lập nên làm việc."); bình đẳng(setCookie("anycookie", "1", -1), sự thật, "Thiết lập một nấu ăn hợp lệ nên trở về 'đúng'."); bình đẳng(setCookie("tên điên cookie !@#$%"%\^&*(()?/><.,", "1", -1), sự thật, "Thiết lập một tên xấu cookie nên trở về 'giả'."); bình đẳng(setCookie(undefined, "1", -1), undefined, "Đi qua không xác định tên cookie."); bình đẳng(getCookieValue("không tồn tại"), "", "Cookie không có thử nghiệm."); }); </kịch bản> </đầu> <cơ thể> <div ID= "qunit"></div> <div ID= "qunit-nhân vật"></div> </cơ thể> </HTML>
Có rất nhiều điều xảy ra ở đây:
- Tham khảo mã của tôi (QuizUtil.js)
- Tham khảo Qunity.js
- Xác định một số mô-đun (getIDFromLookup, Cookie, và những người khác)
- Đặt một <div> ID mà là "qunit".
Sau đó, Tôi chỉ kéo lên trang này và bạn nhận được một cái gì đó như thế này:
Con số 3
Nếu bạn nhìn trên đầu trang, bạn có một vài lựa chọn, hai trong số đó là thú vị:
- Ẩn thông qua các bài kiểm tra: Khá rõ ràng. Có thể giúp mắt của bạn chỉ nhìn thấy các khu vực vấn đề và không phải là nhiều lộn xộn.
- Mô-đun: (thả): Điều này sẽ lọc các bài kiểm tra xuống chỉ những nhóm thử nghiệm bạn muốn.
Đối với các bài kiểm tra chính mình-một vài ý kiến:
- Nó đi mà không nói rằng bạn cần phải viết mã của bạn như vậy mà nó là testable tại địa điểm đầu tiên. Sử dụng công cụ có thể giúp thi hành mà kỷ luật. Ví dụ, Tôi đã có một chức năng gọi là "getTodayAsCaml()”. Đây không phải là rất testable kể từ khi nó mất không có đối số đầu vào và để kiểm tra nó cho sự bình đẳng, chúng tôi sẽ cần phải liên tục cập nhật mã kiểm tra để phản ánh ngày hiện tại. Tôi refactored nó bằng cách thêm một tham số đầu vào dữ liệu, sau đó đi qua ngày hiện tại khi tôi muốn ngày hôm nay trong định dạng CAML.
- Tài liệu khuôn khổ Qunit thử nghiệm riêng của mình và có vẻ như khá mạnh mẽ. Nó có thể làm những việc đơn giản như thử nghiệm cho sự bình đẳng và cũng đã hỗ trợ cho các cuộc gọi ajax phong cách (cả "thực" hay chế giễu bằng cách sử dụng mocker yêu thích của bạn).
- Đi qua quá trình này cũng buộc bạn phải suy nghĩ thông qua cạnh trường hợp-những gì sẽ xảy ra với "không xác định" hoặc null được thông qua vào một chức năng. Nó làm cho nó chết đơn giản để kiểm tra các kịch bản trong. Công cụ tốt.
Bảo hiểm với Blanket.js
Blanket.js bổ sung cho Qunit bằng cách theo dõi các dòng mã thực tế thực hiện trong quá trình chạy thử nghiệm của bạn. Nó tích hợp bên phải vào Qunit vì vậy, mặc dù nó là một ứng dụng hoàn toàn riêng biệt, nó chơi độc đáo-nó thực sự trông giống như nó là một ứng dụng liền mạch.
Đây là blanket.js trong hành động:
Con số 4
Con số 5
(Bạn thực sự cần phải nhấp vào hộp kiểm "Bật bảo hiểm" ở phía trên [Xem hình 3] để cho phép điều này.)
Các dòng được đánh dấu trong hình 5 đã không được thực hiện bởi bất kỳ xét nghiệm của tôi, Vì vậy tôi cần phải đưa ra một thử nghiệm mà làm cho chúng để thực hiện nếu tôi muốn bảo hiểm đầy đủ.
Có được blanket.js làm việc bằng cách làm theo các bước sau:
- Tải xuống từ http://blanketjs.org/.
- Thêm nó vào dự án của bạn
- Cập nhật trang thử nghiệm khai thác (QuizUtil_test.html trong trường hợp của tôi) như sau:
- Tài liệu tham khảo mã
- Trang trí của bạn <kịch bản> tham khảo như thế này:
<kịch bản loại= text/javascript"" SRC="QuizUtil.js" dữ liệu-bao gồm></kịch bản>
Blanket.js chọn lên các thuộc tính "dữ liệu-bao gồm" và không kỳ diệu của nó. Nó móc vào Qunit, Cập Nhật giao diện người dùng để thêm tùy chọn "Bật bảo hiểm" và thì đấy!
Tóm tắt (TL; TIẾN SĨ)
Sử dụng Qunit để viết trường hợp thử nghiệm của bạn.
- Tải về nó
- Thêm nó vào dự án của bạn
- Viết một trang kiểm tra khai thác
- Tạo thử nghiệm của bạn
- Refactor một số mã của bạn để được testable
- Hãy sáng tạo! Hãy suy nghĩ của điên, không thể kịch bản và thử nghiệm chúng anyway.
Sử dụng blanket.js để đảm bảo vùng phủ sóng
- Đảm bảo rằng Qunit làm việc
- Tải về blanket.js và thêm nó vào dự án của bạn
- Thêm nó vào khai thác trang thử nghiệm:
- Thêm một tham chiếu đến blanket.js
- Thêm một thuộc tính "dữ liệu-bao gồm" của bạn <kịch bản> từ khóa
- Chạy thử nghiệm Qunit của bạn.
Tôi không bao giờ đã làm bất kỳ những điều này trước khi và có một số công cụ thô sơ làm việc trong một vài giờ.
Thử nghiệm hạnh phúc!
</kết thúc>
Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin