1. Qualitätssicherung in
Webprojekten
Sebastian Springer I 06.06.2012
© Mayflower GmbH 2012

2. HELLO
MY NAME
IS
@basti_springer

3. Womit verdiene ich mein Geld?
● Mayflower GmbH
● PHP
● Javascript
● Teamleiter

4. Projekte?

5. Was erzähle ich heute?
● Qualitätssicherung in Webprojekten
● Schwerpunkt: Javascript

6. ...und was nicht?
● Qualitätssicherung in PHP
● PHPCS, PHPUnit, phpcpd, pdepend,...
● http://jenkins-php.org/

7. Warum Qualitätssicherung?

8. Javascript === Quick & Dirty

9. Javascript === Quick & Dirty

10. Was ist Qualitätssicherung
?
● Standards
● Verlässlichkeit
● Erweiterbarkeit
● Stabilität

11. CI
∞

12. Continuous Inspection

13. Continuous Integration

14. Plattformen

15. CI im Großen - Jenkins

16. CI im Kleinen – die IDE

17. Und wozu das Ganze?

18. Schnelle Rückmeldung!

19. Das Beispiel

20. Ziel

21. Ziel
Datum eingeben

22. Ziel
Offset eingeben

23. Ziel
Datum berechnen

24. Ziel
Feiertage beachten!

25. Anforderungen an den Code
● JSLinted
● Kein Copy/Paste Code
● Unittests
● Akzeptanztests

26. Wie?

27. Mit Toolunterstützung und
Automatisierung!

28. Anforderungen an den Code
● JSLinted
● Kein Copy/Paste Code
● Unittests
● Akzeptanztests

29. It will hurt your feelings!

30. Was macht JSLint?
● Codingstyle – Whitespaces
● == & != vs. === & !==
● Variablendeklarationen zu Beginn einer
Funktion
● “use strict”
● Globale Variablen
● Verwendung vor der Definition
● eval is Evil

31. JSLint in Jenkins
● jslint4java
java -jar jslint4java.jar --report
xml /path/to/src/*.js > jslint.xml
● Violations Plugin

32. JSLint in PhpStorm

33. Anforderungen an den Code
● JSLinted
● Kein Copy/Paste Code
● Unittests
● Akzeptanztests

34. Was macht CPD?
● Duplikate im Quellcode finden
● Tokens statt Strings

35. Warum?
● Verbesserungen an mehreren Stellen
● Bugfixes an mehreren Stellen
= erhöhter Wartungsaufwand

36. CPD in Jenkins
● PMD CPD
/opt/PMD/bin/run.sh cpd --minimum-
tokens 12 --files /path/to/src
--language ecmascript --format xml
> cpd.xml
● Duplicate Code Scanner Plug-in

37. Anforderungen an den Code
● JSLinted
● Kein Copy/Paste Code
● Unittests
● Akzeptanztests

38. Warum Unittests?
● Stabilität
● Sicherheit
● Dokumentation
● Pro Bug ein Test

39. Jasmine
describe("DateCalc", function () {
it("should return false ...provided", function () {
var dateCalc = new DateCalc(),
result = dateCalc.resolveDate();
expect(result).toBeFalsy();
});
});

40. TDD

44. JsTestDriver
● Testing Framework
● Browser Capturing
● Coverage
● Plugins für Qunit und Jasmine

45. Jasmine in Jenkins
● JsTestDriver
java -jar JsTestDriver.jar --port
9876 --browser /usr/bin/firefox
java -jar JsTestDriver.jar --config
/path/to/config.jstd --tests all
--testOutput . --reset
● xUnit Plugin

46. config.jstd
server: http://localhost:9876
load:
- lib/jasmine-1.2.0.rc3/jasmine.js
- lib/jasmine-jstd-adapter/src/JasmineAdapter.js
- spec/DateCalc.js
- spec/Holiday.js
- src/DateCalc.js
- src/Holiday.js
plugin:
- name: "coverage"
jar: "/opt/JsTestDriver/plugins/coverage.jar"
module: "com.google.jstestdriver.coverage.CoverageModule"

47. Coverage in Jenkins
● JsTestDriver Coverage Plugin
● Converter
/opt/lcov-to-cobertura-xml.py
jsTestDriver.conf-coverage.dat -o
coverage/coverage.xml
● Cobertura Plugin

48. Jasmine in PHPStorm

49. Jasmine in PHPStorm

50. Jasmine in PHPStorm

51. Anforderungen an den Code
● JSLinted
● Kein Copy/Paste Code
● Unittests
● Akzeptanztests

52. Warum Akzeptanztests?
● Tests gegen Akzeptanzkriterien
● Anforderungen vs. Umsetzung
● Nicht von Entwicklern

53. Selenium IDE

54. Selenium in Jenkins
● Selenium Server
export DISPLAY=:5.0
java -jar /opt/selenium-server.jar
-htmlSuite *firefox
"http://dateCalc.basti.dev"
"/srv/www/vhosts/tests/suite.html"
"selenium/results.html"
● Selenium HTML report Plugin

55. Chuck Norris Plugin

56. Fragen?

57. http://joind.in/talk/view/6658

58. Vielen Dank für Ihre
Aufmerksamkeit!
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
Twitter: @basti_springer
June 11, 2012 Mayflower GmbH 58
https://github.com/sspringer82