Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aber eben lief das doch noch! HTML5 Testing mit Jasmine BDD

Aber eben lief das doch noch! HTML5 Testing mit Jasmine BDD

Mit einer HTML5-Anwendung können gleichzeitig verschiedenste klassische und mobile Plattformen erreicht werden. Doch wie testet man diese modularen Anwendungen mit hohem JavaScript-Anteil? Für den Test bietet sich Jasmine als JavaScript-basiertes Test-Framework an.

Alexander Schwartz

September 04, 2013
Tweet

More Decks by Alexander Schwartz

Other Decks in Technology

Transcript

  1. Aber eben lief das doch noch!
    HTML5 Testing mit Jasmine BDD
    Alexander Schwartz
    Herbstcampus 2013 / 3. September 2013
    2 © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz

    View full-size slide

  2. 3
    Was ich vorhabe
    1. Worum es geht
    2. Fachlicher Einstieg in das Beispiel
    3. Testen mit Jasmine
    4. Verwendung von Jasmine mit Sinon.JS
    5. Ausführung im Browser und in Continuous Integration
    6. Debugging von JavaScript-Tests
    7. Zusammenfassung
    © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz

    View full-size slide

  3. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    4
    Worum es hier geht
    • HTML als Seitenbeschreibung
    • CSS für ansprechendes (responsive) Design
    • Widget z. B. via jQueryUI + Plugins
    • Clientlogik via JavaScript
    • Strukturierung mit Javascript MV*-Frameworks
    (z. B. KnockoutJS)
    • Modularisierung und Nachladen von Resourcen
    (z. B. requireJS)
    • Kommunikation via REST/JSON ideal für JavaScript
    • Verschiedene Implementierungen möglich
    • JAX-RS 1.0 / JEE 6
    Browser als
    Client-Plattform
    REST für Backend
    Services
    Automatisiertes Testen der HTML+JavaScript Client-Plattform

    View full-size slide

  4. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    5
    Mein Sponsor und Arbeitgeber
    1980 gegründet
    mehr als 4000 Kollegen
    9 Branchen
    540 Mio € Umsatz 2012
    23 Länder
    in 13 Städten
    in Deutschland präsent
    msg systems ag

    View full-size slide

  5. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    6
    Wer ich bin
    Alexander Schwartz
    Lead IT Consultant im GB Travel und Logistics
    10 Jahre Java
    7 Jahre PL/SQL
    7 Jahre
    Absatzfinanzierung
    3,5 Jahre Direktbank
    1 Frau
    2 Kinder
    287 gefundene
    Geocaches

    View full-size slide

  6. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    7
    User Story:
    „Nutzer möchte die Sichtung eines Schiffes
    erfassen, um später sehen zu können, ob auch
    andere dieses Schiff gesehen haben.
    Hierzu erfasst er Schifftstyp, Datum,
    Zeitzone und eine Notiz.“
    Die heutige Aufgabe
    Online-Datenbank für Schiffsichtungen
    Garantiert kein
    Bezug zu
    einem
    Kundenprojekt!
    https://github.com/ahus1/rest-samples

    View full-size slide

  7. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    8
    Wie´s für den Kunden aussieht
    Ein erster Blick auf die Anwendung

    View full-size slide

  8. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    9
    Unser Wegweiser
    • Darstellung User-Interface
    • Interaktion mit dem Nutzer
    V
    View
    • Datenhaltung im Client
    • Bindung an den View
    M
    View Model
    • Kommunikation zwischen Server/Client
    • Besteht aus server- und clientseitigem Teil
    C
    Communication
    • Fachliche Business-Logik
    • Greift auf Persistenz zu
    B
    Business Services
    • Datenhaltung und Persistenz
    P
    Persistence
    Mit JavaScript den kompletten Client-Stack testen
    Client Server

    View full-size slide

  9. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    10
    Automatisiertes Testen
    Client Server
    Verschiedene Testframeworks decken verschiedene Bereiche ab
    V
    M
    C
    B
    P
    Jasmine,
    Sinon
    Selenium
    IDE
    Selenium
    RC
    Mock
    oder
    echt?
    Mock
    oder
    echt?
    geringe Komplexität
    hohe Komplexität

    View full-size slide

  10. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    11
    Jasmine Steckbrief
    Jasmine ist ein JavaScript Testframework
    http://pivotal.github.io/jasmine/
    describe("A suite", function() {
    it("contains spec with an expectation", function() {
    expect(true).toBe(true);
    });
    });
    Test Suite
    Test Case
    Test Code mit Matcher
    Behaviour Driven Development (BDD) Testing:
    Erstelle eine strukturierte Beschreibung des beobachtbaren Verhaltens der Software

    View full-size slide

  11. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    12
    Umgesetzt mit KnockoutJS
    Test – Model Only
    Client Server
    Prüfen, ob das Model sich wie beschrieben verhält
    V
    // menu.js
    var Menu = function() {
    // Data
    var self = this;
    self.folders = ko.observableArray([ {
    name : 'Schiffstypen',
    link : '#/vessel/main'
    }, {
    name : 'Sichtungen',
    link : '#/sighting/main'
    }, {
    name : 'Zeitzonen',
    link : '#/timezone/main'
    } ]);
    self.folder = ko.observable();



    data-bind="text: $data.name, attr: {href:
    $data.link}">

    M
    Demo &
    Live
    Coding

    View full-size slide

  12. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    13
    View-Model
    Client Server
    Ein Menü anzeigen – Trennung von View und View Model
    describe("Menu", function() {
    it("has three menu items", function() {
    expect(menu.folders().length).toBe(3);
    });
    it("has first item named 'Schiffstypen'", function() {
    expect(menu.folders()[0].name()).toBe("Schiffstypen");
    });
    it("can be switched to English", function() {
    // when
    runs(function() {
    menu.language("en");
    });
    // then
    waitsFor(function() {
    return menu.folders()[0].name();
    }, "translation to change to 'Vessels'", 750);
    });

    M

    View full-size slide

  13. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    14
    View-Model
    Client Server
    Interaktion des Models mit dem Browser
    describe("Link Interaction", function() {
    beforeEach(function() {
    // reset to start hash
    hasher.setHash("");
    });
    it("knowns the active entry", function() {
    // given
    var firstEntry = menu.folders()[0];
    var secondEntry = menu.folders()[1];
    expect(menu.isCurrentSubfolder(firstEntry.link)).toBe(false);
    // when
    hasher.setHash("vessel/main");
    // then
    expect(menu.isCurrentSubfolder(firstEntry.link)).toBeTruthy();
    expect(menu.isCurrentSubfolder(secondEntry.link)).toBeFalsy();
    });
    afterEach(function() {
    // reset to start hash
    hasher.setHash("");
    });
    });
    M

    View full-size slide

  14. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    15
    View - View-Model
    Client Server
    Interaktion mit dem View
    describe("Manage Timezones Real Backend", function() {
    it("shows a list of two timezones at the start",
    function() {
    expect($("#timezoneList")).toBeVisible();
    expect($("#timezoneList > tbody > tr")[0]).toContainHtml(
    "Europe/Berlin");
    });
    it("has the first menu item highlighted at the start", function() {
    expect($("#subfolder0")).toHaveClass('active');
    });

    M
    V
    • Zugriff via jQuery auf die aktuelle Seite
    • Werte kommen hier noch aus dem Backend
    C
    B
    P
    Demo &
    Live
    Coding

    View full-size slide

  15. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    16
    View - View-Model
    Client Server
    Interaktion mit dem View
    beforeEach(function() {
    expect($("#timezoneList > tbody > tr").length).toBe(1);
    expect($("a[name=edit]").length).toBe(1);
    $("a[name=edit]").first().click();
    waitsFor(function() {
    return $("#timezoneName").is(":visible");
    }, "the time zone name should appear", 5000);
    });
    it("show a timezone on editing", function() {
    expect($("#timezoneName")).toBeVisible();
    expect($("#timezoneName")).toHaveValue("Europe/Berlin");
    });
    M
    V
    • Benutzerinteraktionen werden via jQuery ausgelöst
    C
    B
    P

    View full-size slide

  16. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    17
    • Abfangen von JavaScript-Zugriffen auf den Server werden
    abgefangen
    • Antworten können simuliert werden
    Mocking des Backends
    Client Server
    Mit Sinon.JS das REST-Backend simulieren
    V
    M
    // create a fake server with some responses
    server = sinon.fakeServer.create();
    var timezoneList = ko.toJSON(getJSONFixture('timezoneList.json'));
    server.respondWith("GET", "rest/timezone", [ 200, {
    "Content-Type" : "application/json"
    }, timezoneList ]);
    server.respondWith("DELETE", "rest/timezone/1", [ 204, null, "" ]);
    C
    Demo &
    Live
    Coding

    View full-size slide

  17. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    18
    • Asynchrone Aufrufe werden eingefroren
    • Antworten und deren Verarbeitung werden zu einem definierten
    Zeitpunkt ausgelöst
    • Übersichtlicher und robuster Testfall, da Warteschleifen entfallen
    Mocking des Backends
    Client Server
    Mit Sinon.JS asynchrone Verarbeitung synchronisieren
    V
    M
    it("removes a timezone when clicking on delete",
    function() {
    // starting with two timezones
    expect($("#timezoneList > tbody > tr").length).toBe(2);
    // click on the first one
    $('#timezoneList a[name="delete"]').first().click();
    server.respond();
    // expect only the second to be left over
    expect($("#timezoneList > tbody > tr").length).toBe(1);
    expect($("#timezoneList > tbody > tr")[0]).toContainHtml(
    "Europe/London");
    });
    C

    View full-size slide

  18. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    19
    • 22 Tests
    • 2,6 s
    Gesamtlaufzeit
    • Cross-Browser
    • Unabhängig vom
    Backend
    • Dokumentation
    aus fachlicher
    Sicht
    • Beliebige
    Schachtelung
    • Chrome etwas
    schneller als
    Firefox
    Jasmine ist schnell und einfach
    Client Server
    Ein Browser-Reload lässt die Tests erneut laufen
    C
    V
    M

    View full-size slide

  19. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    20
    • Integration in CI
    Server möglich
    • Jasmine Tests erstellen
    XML entsprechend JUnit
    (für Jenkins, Eclipse et al)
    $ phantomjs phantomjs-testrunner.js \
    http://localhost:8080/rest-samples/?spec=
    Testen in der Dunkelverarbeitung
    Client Server
    Mit PhantomJS auf der Kommandozeile testen
    C
    V
    M

    View full-size slide

  20. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    21
    • Verbinden mit einer laufenden Browser-Instanz
    • Breakpoint setzen, Variablen sehen
    • Hot Code Replacement
    Debugging mit Chome
    Client Server
    Wie Java und ein bisschen mehr?
    V
    M

    View full-size slide

  21. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    22
    Debugging mit Chome

    View full-size slide

  22. © msg systems ag, 3. September 2013
    HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz
    23
    • Testfälle können genauso wie die Anwendung modular sein
    • Ausführung ist schnell
    • Turnaroundzeiten sind kurz
    • JavaScript Entwickler können brauchen keine neuen Technologien
    kennenzulernen
    • Tests sind automatisierbar, auch in Continuous Integration
    Zusammenfassung
    Strukturierte Tests in JavaScript sind möglich

    View full-size slide

  23. www.msg-systems.com
    Vielen Dank für Ihre Aufmerksamkeit
    msg systems ag
    Mergenthalerallee 73 - 75
    65760 Eschborn
    Telefon: +49 (171) 5 62 57 67
    E-Mail: [email protected]
    www.msg-systems.com
    24 HTML5 Testing mit Jasmine / Herbstcampus 2013 / A. Schwartz © msg systems ag, 3. September 2013

    View full-size slide