• Save
Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefan Scheidt
 

Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefan Scheidt

on

  • 2,050 views

JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag von Tobias Bosch und Stefan ...

JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag von Tobias Bosch und Stefan Scheidt (OPITZ CONSULTING) zeigt, wie Cross-Browser-Tests für JavaScript entwickelt werden können.

Statistics

Views

Total Views
2,050
Slideshare-icon Views on SlideShare
2,045
Embed Views
5

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 5

https://twitter.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Test-driven JavaScript Development - OPITZ CONSULTING -  Tobias Bosch - Stefan Scheidt Test-driven JavaScript Development - OPITZ CONSULTING - Tobias Bosch - Stefan Scheidt Presentation Transcript

    • Tobias Bosch &
      Stefan Scheidt/ OPITZ CONSULTING GmbH
      Test-Driven JavaScript Development
    • Wer sind wir?
      tobias.bosch@opitz-consulting.com
      (@tigbro)
      stefan.scheidt@opitz-consulting.com
      (@beezlebug)
    • Wer sind Sie?
    • In diesem Vortrag geht‘s um...
      ...automatisiertes Testen
      ...durch Entwickler
    • Warum testen?
    • Warum JavaScript-Code testen?
    • Laufzeitumgebungen für JavaScript
      ...
    • In diesem Vortrag:
      Icon Set by Paul Irish (http://paulirish.com/2010/high-res-browser-icons/)
    • Tests formulieren
    • „Klassisch“ mit xUnit-Asserts
      „BDD-Style“ à la RSpec
    • Demo: BDD mit Jasmine
    • describe("parseFloat", function() {
      it("shouldreturnundefinedforundefined", function () {
      expect(util.parseFloat(undefined)).toBeUndefined();
      });
      it("shouldreturn 0 foremptystring", function () {
      expect(util.parseFloat('')).toEqual(0);
      });
      it("shouldreturnnumberfornumberstrings", function () {
      expect(util.parseFloat('1.5')).toEqual(1.5);
      });
      // ...
      });
      Hello Jasmine!
    • describe("parseFloat", function() {
      it("shouldreturnundefinedforundefined", function () {
      expect(util.parseFloat(undefined)).toBeUndefined();
      });
      it("shouldreturn 0 foremptystring", function () {
      expect(util.parseFloat('')).toEqual(0);
      });
      it("shouldreturnnumberfornumberstrings", function () {
      expect(util.parseFloat('1.5')).toEqual(1.5);
      });
      // ...
      });
      Hello Jasmine!
      Suite
    • describe("parseFloat", function() {
      it("shouldreturnundefinedforundefined", function () {
      expect(util.parseFloat(undefined)).toBeUndefined();
      });
      it("shouldreturn 0 foremptystring", function () {
      expect(util.parseFloat('')).toEqual(0);
      });
      it("shouldreturnnumberfornumberstrings", function () {
      expect(util.parseFloat('1.5')).toEqual(1.5);
      });
      // ...
      });
      Hello Jasmine!
      Specs
    • describe("parseFloat", function() {
      it("shouldreturnundefinedforundefined", function () {
      expect(util.parseFloat(undefined)).toBeUndefined();
      });
      it("shouldreturn 0 foremptystring", function () {
      expect(util.parseFloat('')).toEqual(0);
      });
      it("shouldreturnnumberfornumberstrings", function () {
      expect(util.parseFloat('1.5')).toEqual(1.5);
      });
      // ...
      });
      Hello Jasmine!
      Matcher
    • Hello Jasmine!
      expect(x).toEqual(y);
      expect(x).toBe(y);
      expect(x).toBeDefined();
      expect(x).toBeUndefined();
      expect(x).toBeTruthy();
      expect(x).toBeFalsy();
      ...
      Matcher
    • Hello Jasmine!
      Spec Runner
    • Fortgeschrittene Konzepte
    • Spies
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Arrange
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Arrange
      // waitsfor 'delay' seconds
      // thencallscallback
      window.setTimeout = function (callback, delay) {
      ...
      };
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Arrange
      // setopacityof 'element' to 'opacity'
      util.opacity = function (element, opacity) {
      ...
      };
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Act
    • Spies
      describe("execute fadein", function() {
      it("should eventually set opacity to 1", function () {
      varelement = document.createElement("div");
      spyOn(window, 'setTimeout').andCallFake(
      function(callback) {
      callback();
      });
      spyOn(util, 'opacity');
      fadein.execute(element);
      expect(util.opacity.mostRecentCall.args[1]).toEqual(1);
      });
      });
      // setopacityof 'element' to 'opacity'
      util.opacity = function (element, opacity) {
      ...
      };
      Assert
    • Funktionen von Spies
    • Matcher für Spies
      Eigenschaften von Spies
    • Asynchrone Tests
    • it("should eventually set opacity to 1", function() {
      var element = document.createElement("div");
      spyOn(util, 'opacity');
      runs(function() {
      fadein.execute(element);
      });
      waitsFor(function () {
      return opacitySpy.mostRecentCall.args[1] === 1;
      });
      runs(function() {
      // some other expectations
      expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Asynchrone Tests
    • it("should eventually set opacity to 1", function() {
      var element = document.createElement("div");
      spyOn(util, 'opacity');
      runs(function() {
      fadein.execute(element);
      });
      waitsFor(function () {
      return opacitySpy.mostRecentCall.args[1] === 1;
      });
      runs(function() {
      // some other expectations
      expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Asynchrone Tests
      Arrange
    • it("should eventually set opacity to 1", function() {
      var element = document.createElement("div");
      spyOn(util, 'opacity');
      runs(function() {
      fadein.execute(element);
      });
      waitsFor(function () {
      return opacitySpy.mostRecentCall.args[1] === 1;
      });
      runs(function() {
      // some other expectations
      expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Asynchrone Tests
      Act
    • it("should eventually set opacity to 1", function() {
      var element = document.createElement("div");
      spyOn(util, 'opacity');
      runs(function() {
      fadein.execute(element);
      });
      waitsFor(function () {
      return opacitySpy.mostRecentCall.args[1] === 1;
      });
      runs(function() {
      // some other expectations
      expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Asynchrone Tests
      Wait...
      // setopacityof 'element' to 'opacity'
      util.opacity = function (element, opacity) {
      ...
      };
    • it("should eventually set opacity to 1", function() {
      var element = document.createElement("div");
      spyOn(util, 'opacity');
      runs(function() {
      fadein.execute(element);
      });
      waitsFor(function () {
      return opacitySpy.mostRecentCall.args[1] === 1;
      });
      runs(function() {
      // some other expectations
      expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
      });
      });
      Asynchrone Tests
      Assert
    • UI-Tests
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      The indexpage...
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      Arrange, Part 1
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      Arrange, Part 2
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      Act
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      Wait...
      UI-Test mit Jasmine-UI
    • it("should fade in hello div on buttonclick", function () {
      varwin, field, button;
      loadHtml("/js-fadein/index.html");
      runs(function() {
      win = testwindow();
      field = win.document.getElementById('hello');
      button = win.document.getElementById('fadein');
      });
      runs(function () {
      expect(win.util.opacity(field)).toEqual(0);
      jasmine.ui.simulate(button, 'click');
      });
      waitsForAsync();
      runs(function () {
      expect(win.util.opacity(field)).toEqual(1);
      });
      });
      Assert
      UI-Test mit Jasmine-UI
    • Testausführung automatisieren
    • Browser fernsteuern
    • JsTestDriver
      http://code.google.com/p/js-test-driver/
    • Demo: JsTestDriver
    • Fazit
      Es gibt ein umfangreiches Toolset zum Testen von JavaScript-Code.
      Testen Sie Ihren Code!
      Testen Sie insbesondere Ihren JavaScript-Code!
      Sie haben keine Ausrede...
    • Links
    • saturatedwriting
      (ByEduordo, http://www.flickr.com/photos/tnarik/366393127/)
      Smiley Keyboard
      (By~Prescott, http://www.flickr.com/photos/ppym1/93571524/)
      Spyhole, Paris
      (Bysmithofsmiths, http://www.flickr.com/photos/hesketh/232015302/)
      Sortasynchroniseddiving
      (By Aaron Retz, http://www.flickr.com/photos/aretz/309469339/)
    • StampCollector
      (ByC. Castillo, http://www.flickr.com/photos/carolinedecastillo/2750577684/)
      bios[bible]
      (ByGastev, http://www.flickr.com/photos/gastev/2174505811/)
      Day 276/365: in hotpursuit
      (By Tina Vega, http://www.flickr.com/photos/tinavega/3066602429/)
    • Vielen Dankfür Ihr Interesse!@tigbro@beezlebug