© Mayflower GmbH 2012

Qualitätssicherung in Webprojekten

Sebastian Springer I 06.06.2012

@basti_springer

MY NAME IS

HELLO

Womit verdiene ich mein Geld?

● Mayflower GmbH

● PHP

● Javascript

● Teamleiter

Projekte?

Was erzähle ich heute?

● Qualitätssicherung in Webprojekten

● Schwerpunkt: Javascript

...und was nicht?

● Qualitätssicherung in PHP

● PHPCS, PHPUnit, phpcpd, pdepend,...

● http://jenkins-php.org/

Warum Qualitätssicherung?

Javascript === Quick & Dirty

Javascript === Quick & Dirty

Was ist Qualitätssicherung

● Standards

● Verlässlichkeit

● Erweiterbarkeit

● Stabilität?

CI

∞

Continuous Inspection

Continuous Integration

Plattformen

CI im Großen - Jenkins

CI im Kleinen – die IDE

Und wozu das Ganze?

Schnelle Rückmeldung!

Das Beispiel

Ziel

Ziel

Datum eingeben

Ziel

Offset eingeben

Ziel

Datum berechnen

Ziel

Feiertage beachten!

Anforderungen an den Code

● JSLinted

● Kein Copy/Paste Code

● Unittests

● Akzeptanztests

Wie?

Mit Toolunterstützung und Automatisierung!

Anforderungen an den Code

● JSLinted

● Kein Copy/Paste Code

● Unittests

● Akzeptanztests

It will hurt your feelings!

Was macht JSLint?

● Codingstyle – Whitespaces● == & != vs. === & !==● Variablendeklarationen zu Beginn einer

Funktion● “use strict”● Globale Variablen● Verwendung vor der Definition● eval is Evil

JSLint in Jenkins

● jslint4java

java -jar jslint4java.jar --report xml /path/to/src/*.js > jslint.xml

● Violations Plugin

JSLint in PhpStorm

Anforderungen an den CodeAnforderungen an den Code

● JSLinted

● Kein Copy/Paste Code

● Unittests

● Akzeptanztests

Was macht CPD?

● Duplikate im Quellcode finden

● Tokens statt Strings

Warum?

● Verbesserungen an mehreren Stellen

● Bugfixes an mehreren Stellen

= erhöhter Wartungsaufwand

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

Anforderungen an den Code

● JSLinted

● Kein Copy/Paste Code

● Unittests

● Akzeptanztests

Warum Unittests?

● Stabilität

● Sicherheit

● Dokumentation

● Pro Bug ein Test

Jasmine

describe("DateCalc", function () {

it("should return false ...provided", function () {

var dateCalc = new DateCalc(),

result = dateCalc.resolveDate();

expect(result).toBeFalsy();

});

});

TDD

JsTestDriver

● Testing Framework

● Browser Capturing

● Coverage

● Plugins für Qunit und Jasmine

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

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"

Coverage in Jenkins

● JsTestDriver Coverage Plugin

● Converter

/opt/lcov-to-cobertura-xml.py jsTestDriver.conf-coverage.dat -o coverage/coverage.xml

● Cobertura Plugin

Jasmine in PHPStorm

Jasmine in PHPStorm

Jasmine in PHPStorm

Anforderungen an den Code

● JSLinted

● Kein Copy/Paste Code

● Unittests

● Akzeptanztests

Warum Akzeptanztests?

● Tests gegen Akzeptanzkriterien

● Anforderungen vs. Umsetzung

● Nicht von Entwicklern

Selenium IDE

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

Chuck Norris Plugin

Fragen?

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

June 11, 2012 Mayflower GmbH 58

Vielen Dank für Ihre Aufmerksamkeit!

Sebastian Springer

sebastian.springer@mayflower.de

Mayflower GmbH

Mannhardtstr. 6

80538 München

Deutschland

Twitter: @basti_springer

https://github.com/sspringer82