סלניום היא יופי של פתיחה לעולם הבדיקות האוטומטיות. אפשר להשתמש בה כדי לבדוק סקריפטים שונים. למשל ללחוץ על כפתור, להמתין באמצעות פקודת wait ואז לראות אם יש פעולה מסוימת. אבל אם אני רוצה לבדוק JavaScript, יש כלים יותר מוצלחים מסלניום. סלניום למשל, בודק את האתר או האפליקציה בקונטקסט שלה והרבה פעמים אנחנו פשוט צריכים לעשות unit testing – מה זה unit testing? בגדול – בדיקת חלקי הסקריפט שלנו כחלקים מתוך המכלול ולא את המכלול. ואם זה נשמע לכם כמו סינית, אל דאגה – אני אפרט בהמשך.
יש בערך מיליון פריימוורקים של JavaScript שמיועדים לבדיקות. וכשאני אומר מיליון אני מתכוון בדיוק לזה. היתרון המרכזי מבחינתי של Jasmine והסיבה שאני מרצה עליו היא שמאד מאד קל להתקין אותו – במרכאות – כי אין ממש התקנה ולכתוב לו בדיקות.
אני הולך להסביר על jasmine באמצעות פרויקט קטן שלי בגיטהאב שפיתחתי במסגרת העבודה שלי ב-HP ושיחררתי באישור בשם moreorless – מדובר בפלאגין פשוט שיוצר כפתור שפותח או סוגר בלוקים. הנה דוגמה שלו.
את התוסף החמוד הזה ותוספים אחרים אני בודק באמצעות jasmine. אז קודם כל, בוא ונתחיל ליצור את סביבת הבדיקות. אני יודע שחלק מכם עכשיו יחווירו ויגידו ‘מלח מים מלח מים’ אבל לא להבהל. הדבר שאנחנו צריכים זה להתקין את Jasmine Stand alone שמאפשר לנו לבצע את הבדיקות מיד בלי להתבלבל ובקלות.ההתקנה היא פשוטה ביותר:
- מורידים את Jasmine Standalone מהקישור הבא
- מורידים את קובץ ה-zip למקום כלשהו – כמו שולחן העבודה למשל
- פותחים את קובץ ה-zip למקום כלשהו – כמו שולחן העבודה
- אחרי שפתחנו – פשוט נכנסים עם הדפדפן לקובץ specRunner.html – זה הכל! אם אנו רואים תוצאה של ‘בדיקות’ עם טקסט ירוק – אז ההתקנה הושלמה!
הנה סרטון קצרצר להמחשה שמראה את ‘ההתקנה’ כפי שהסברתי בארבעת הסעיפים האלו.
ברגע שהורדנו את Jasmine SA, אנחנו יכולים להתחיל לבדוק. הכלי עצמו מכיל בדיקה של אפליקצית דמו שאפשר להסתכל עליה והיא מאד ברורה, אבל במקום לעבור עליה, אני אכתוב בדיקה לאפליקציה שלי.
החלק החשוב הוא specRunner.html. הנה דוגמה חיה שלו ובהמשך הקוד:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- include source files here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="src/more_less_button.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/SpecHelper.js"></script> <!-- for general functions -->
<script type="text/javascript" src="spec/MoreLessSpec.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
זה בעצם הדף שאותו אני פותח כדי לראות את תוצאות הבדיקה. שני החלקים החשובים הוא החלק שבו אני מכניס את קבצי המקור של האפליקציה שלי – במקרה הזה more_less.js ו-jQuery שדרוש על מנת שהתוסף יעבוד והחלק שבו אני מכניס את הבדיקות. במקרה הזה more_less_spec.js – שם אני כותב את הבדיקות שלי לפי ה-API המאד מאד פשוט של jasmine. באופן עקרוני – בזה זה נגמר. סיימנו להתקין את סביבת העבודה. בכל פעם שאני רוצה להריץ את הבדיקות אני פותח את הקובץ בעזרת הדפדפן. הקובץ יכול להיות ב-local host או אפילו על שולחן העבודה כפי שאתם רואים.
בואו ונכתוב בדיקה! ה-spec, כלומר קובץ הבדיקה, זמין ב-github ואתם יכולים להעתיק או לבחון אותו כרצונכם.
describe("More or less", function() {
beforeEach(function() {
$('').appendTo('body');
$('lorem pixum').appendTo('#container');
$('#test').more_less_button();
});
it("Creating a button", function() {
expect($('.more').length).toEqual(1);
});
it("Collapsed by default", function() {
expect($('#test').css('display')).toEqual('none');
});
it("Clicking on button collapsing and expanding", function() {
$('.more').click();
expect($('#test').css('display')).toEqual('block');
expect($('.btn').text()).toEqual('Read Less');
});
afterEach(function () {
$("#container").remove();
});
});
ראשית, אני משתמש בפונקצית describe, שהיא הלב של Jasmine והיא מקבלת שני פרמטרים – שם סוויטת הבדיקות ופונקציה אנונימית שבה מוגדרות כל מתודות הבדיקה.
מתודת הבדיקה החשובה ביותר היא מתודת beforeEach – זו המתודה שרצה לפני כל בדיקה. מה אני שם שם? את כל מה שאני צריך. במקרה הזה, פשוט יוצר אלמנטים של HTML שהמתודות השונות יוכלו לעבוד עליהן ומפעיל את התוסף.
אחרי כן, באמצעות מתודת it אני מגדיר את הבדיקה. הן צריכות שני פרמטרים – הראשון הוא שם הבדיקה והשני הוא פונקציה אנונימית שמכילה את הבדיקה. בסוף כל בדיקה אני משתמש בפונקצית except, שהיא חלק מה-core של Jasmine – אם היא מחזירה true, הבדיקה עוברת. אם היא מחזירה false, הבדיקה נכשלת. מאד מאד פשוט. בתוך expect אפשר לראות שאני משתמש במתודות של Jasmine, אבל אני לא חייב כל עוד אני זוכר להחזיר true או false.
בסוף יש מתודת tear down שהיא רצה אחרי כל בדיקה והמטרה שלה היא להחזיר את המצב לקדמותה. במקרה שלי – פשוט למחוק את אלמנטי ה-HTML שנוצרו.
איך בודקים? מאד מאד פשוט – פשוט פותחים את קובץ ה-HTML עם הדפדפן – במידה והכל תקין – אנו נראה ירוק.
אם בדיקה נכשלת – אנו נראה את זה.
כמובן שהשימוש העיקרי ב-Jasmine הוא לא בגרסת ה-SA שלה – אבל הגרסה הזו היא דרך נהדרת להתחיל ובפרויקטים קטנים או משותפים זו דרך נהדרת לוודא שהתוספת שהוספתם לסקריפט לא שברה דברים אחרים. אני מכיר לא מעט מפתחים שמשתמשים ב-SA בלבד ושום דבר לא קורה.