אין ל JavaScript דרך סטנדרטית לניהול בדיקות יחידה, ולפער זה נכנסו ספריות וכלים רבים שכתבו מפתחים עצמאיים. בקורס זה נלמד על ספריית הבדיקות Jasmine ועל כלי הרצת הבדיקות שנקרא Karma, את שניהם נתקין ונגדיר בשעור זה.

1. מבנה פרויקט הכולל בדיקות

יש המון דרכים להוסיף בדיקות יחידה לפרויקט, הכל לפי הכלים והספריות שאתם בוחרים להשתמש בהם. שפת JavaScript עצמה לא מציעה דרך סטנדרטית או אפילו מספר דרכים מומלצות לכתיבת בדיקות יחידה.

בקורס נשתמש בספריית בדיקות בשם Jasmine ובכלי הרצת בדיקות שנקרא Karma. תפקידה של ספריית בדיקות להכתיב את הדרך בה נכתוב את בדיקות היחידה. הספריה Jasmine מוסיפה מספר פונקציות לשפה ובעיקר תדרוש מכם להריץ את הבדיקות דרך קובץ HTML נפרד וייעודי עבור הבדיקות.

עץ התיקיות של שלד פרויקט הכולל בדיקות נראה כך (ואפשר להוריד אותו מתיקיית הדוגמאות):

.
├── index.html
├── karma.conf.js
├── package.json
├── spec
│   ├── hello-world-spec.js
│   └── tests.bundle.js
├── src
│   ├── hello-world.js
│   └── main.js
└── webpack.config.js

הקוד מחולק כעת לשתי תיקיות מרכזיות: התיקיה src והתיקיה spec. בתיקיה src נכתוב את קוד היישום שלנו, ובתיקיה spec יכתב קוד הבדיקה. קובץ ה JS הסופי שנייצר לשרת לא יכלול את הקבצים מתיקיית spec.

הרצת הבדיקות מבוצעת דרך כלי הרצת בדיקות שנקרא karma. תפקיד כלי זה לתווך בין ספרית הבדיקות לבין סביבת הפרויקט שלנו. קארמה מייצר באופן אוטומטי קובץ HTML הכולל טעינה של קבצי הבדיקה, פותח אותו בדפדפן ומריץ את הבדיקות. קארמה יודע גם להתממשק לסביבת הפיתוח (למשל Webstorm או Visual Studio) וכך להציג את תוצאות הבדיקה ישירות ב IDE.

הקובץ main.js שנמצא בתיקיית src מגדיר איזה קבצים רלוונטים לפרויקט ומהווה את נקודת הכניסה שלנו לקוד היישום.

הקובץ tests.bundle.js שנמצא בתיקיית spec מגדיר איזה קבצים הם קבצי בדיקה ומהווה את נקודת הכניסה שלנו לקובץ הבדיקות.

כדי להריץ את הבדיקות נוכל להשתמש בפקודה:

node node_modules/karma/bin/karma start

לאחר הפעלת הפקודה התוכנית karma תמשיך לעקוב אחר שינויים במערכת הקבצים שלכם ובכל פעם שתעדכנו קובץ קוד או קובץ בדיקה תריץ מחדש את הבדיקה ותציג את התוצאות במסוף. כך נראית הרצת הדוגמא בפרויקט:

10 08 2016 23:28:26.677:WARN [karma]: No captured browser, open http://localhost:9876/
10 08 2016 23:28:26.695:INFO [karma]: Karma v1.1.2 server started at http://localhost:9876/
10 08 2016 23:28:26.696:INFO [launcher]: Launching browser Chrome with unlimited concurrency
10 08 2016 23:28:26.706:INFO [launcher]: Starting browser Chrome
10 08 2016 23:28:29.608:INFO [Chrome 52.0.2743 (Mac OS X 10.11.6)]: Connected on socket /#HHWEECmSbRk2hCdEAAAA with id 60688151
Chrome 52.0.2743 (Mac OS X 10.11.6): Executed 1 of 1 SUCCESS (0 secs / 0.003 secChrome 52.0.2743 (Mac OS X 10.11.6): Executed 1 of 1 SUCCESS (0.01 secs / 0.003 secs)

תוך כדי ההפעלה ומלבד הפלט למסוף, קארמה גם הפעילה את דפדפן כרום על שרת מיוחד שפתחה לצורך הבדיקות. שרת זה מגיש קובץ HTML ייעודי בו מורצות הבדיקות. בהמשך נראה איך להשתמש בקובץ ובעמוד שנפתח כדי לחפש שגיאות בקוד.

2. ספרית הבדיקה Jasmine

בחלוקה גסה אפשר לחלק את הספריות לבדיקות יחידה לשני סוגים מרכזיים, שזכו לכינויים Test Driven ו Behaviour Driven. ההבדל המרכזי בין הסוגים הוא בשפה. הסוג הראשון שנקרא Test Driven מאופיין בשימוש במילה assert. אולי נתקלתם בכתיב כזה מ JUnit, QUnit או ספריות בדיקות דומות.

בדיקה פשוטה מאוד ב QUnit נראית למשל כך:

QUnit.test( "hello test", function( assert ) {
  const x = ident(10);

  assert.equal(x, 10, "ident returns the same thing");
});

ניכר ציון שם הבדיקה, ומה אנו רוצים לבדוק בצורה של הצהרה. אני מצהיר בסוף הבדיקה שערך ההחזר של הפונקציה אמור להיות 10, שכן זה ערך הפרמטר שהועבר.

הסוג השני נקרא Behaviour Driven ועל פניו השינוי קטן מאוד: במקום המילה assert יש לנו שפה אחרת המורכבת מציפיה, ובמקום המילה test יש לנו שפה תיאורית. ג'סמין, אותה נלמד בקורס, שייכת לסוג השני. כך נראית אותה הבדיקה שם:

describe('Identity function', function() {
    it('should return the same value', function() {
        const x = ident(10);

        expect(x).toEqual(10);
    });
});

מבחינה פונקציונאלית אין כל הבדל בין שני הסגנונות. מבחינת שפה וקריאות יש פה שני עולמות שונים. ספריות בדיקות מודרניות נוטות יותר לכיוון Behaviour Driven ולכן זה מה שנלמד בקורס זה.

3. סיכום

קישור לפרויקט לדוגמא מתיקיית הדוגמאות הכולל בדיקות יחידה: https://github.com/tocodeil/javascript-testing-course-examples/tree/master/02-architecture

תוכנית node.js אתה נריץ את כל הכלים שנראה בקורס זמינה להורדה מהקישור: https://nodejs.org/en/download/

התקנת המודולים הדרושים לצורך הרצת הבדיקות (פעם אחת לפרויקט בלבד):

npm install

הרצת הבדיקות:

npm test