אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » מבוא ל-Jasmine SA

מבוא ל-Jasmine SA

רן בר-זיק ספטמבר 29, 2013 7:07 am אין תגובות

תמליל ההרצאה שלי שנערכה בכנס מפתחים ב-HP Software R&D ועוסקת בשימוש ב-Jasmine SA לבדיקות תוספים ל jQuery.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

סלניום היא יופי של פתיחה לעולם הבדיקות האוטומטיות. אפשר להשתמש בה כדי לבדוק סקריפטים שונים. למשל ללחוץ על כפתור, להמתין באמצעות פקודת wait ואז לראות אם יש פעולה מסוימת. אבל אם אני רוצה לבדוק JavaScript, יש כלים יותר מוצלחים מסלניום. סלניום למשל, בודק את האתר או האפליקציה בקונטקסט שלה והרבה פעמים אנחנו פשוט צריכים לעשות unit testing – מה זה unit testing? בגדול – בדיקת חלקי הסקריפט שלנו כחלקים מתוך המכלול ולא את המכלול. ואם זה נשמע לכם כמו סינית, אל דאגה – אני אפרט בהמשך.
יש בערך מיליון פריימוורקים של JavaScript שמיועדים לבדיקות. וכשאני אומר מיליון אני מתכוון בדיוק לזה. היתרון המרכזי מבחינתי של Jasmine והסיבה שאני מרצה עליו היא שמאד מאד קל להתקין אותו – במרכאות – כי אין ממש התקנה ולכתוב לו בדיקות.
אני הולך להסביר על jasmine באמצעות פרויקט קטן שלי בגיטהאב שפיתחתי במסגרת העבודה שלי ב-HP ושיחררתי באישור בשם moreorless – מדובר בפלאגין פשוט שיוצר כפתור שפותח או סוגר בלוקים. הנה דוגמה שלו.

את התוסף החמוד הזה ותוספים אחרים אני בודק באמצעות jasmine. אז קודם כל, בוא ונתחיל ליצור את סביבת הבדיקות. אני יודע שחלק מכם עכשיו יחווירו ויגידו 'מלח מים מלח מים' אבל לא להבהל. הדבר שאנחנו צריכים זה להתקין את Jasmine Stand alone שמאפשר לנו לבצע את הבדיקות מיד בלי להתבלבל ובקלות.ההתקנה היא פשוטה ביותר:

  1. מורידים את Jasmine Standalone מהקישור הבא
  2. מורידים את קובץ ה-zip למקום כלשהו – כמו שולחן העבודה למשל
  3. פותחים את קובץ ה-zip למקום כלשהו – כמו שולחן העבודה
  4. אחרי שפתחנו – פשוט נכנסים עם הדפדפן לקובץ 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 בלבד ושום דבר לא קורה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
בדיקות

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד