Post on 20-Jan-2015
description
JAVASCRIPT-QA-TOOLS
Tuesday, October 16, 12
Tuesday, October 16, 12
WER BIN ICH?
• Sebastian Springer
• 29
•Dipl. Inf. (FH)
• Teamleiter @ Mayflower
Tuesday, October 16, 12
WAS ERZÄHLE ICH HEUTE?
•Was bringt mir eine hohe Qualität überhaupt?
•Welche Tools kann ich nutzen?
•Wie kann ich die QA automatisieren?
Tuesday, October 16, 12
LET’S GO
Tuesday, October 16, 12
WARUM QUALITÄTSSICHERUNG?
Tuesday, October 16, 12
JAVASCRIPT === QUICK & DIRTY
Tuesday, October 16, 12
JAVASCRIPT === QUICK & DIRTY
• Leichtgewichtig
• Schnelle Ergebnisse
•Direkt in HTML eingebettet
• (Fast) überall verfügbar
Tuesday, October 16, 12
JAVASCRIPT === QUICK & DIRTY
langfristig
Tuesday, October 16, 12
UND WAS IST JETZT QUALITÄT?
Tuesday, October 16, 12
WAS IST QUALITÄT?
• Reliability
• Efficiency
• Security
•Maintainability
• Size
Tuesday, October 16, 12
8Qualitätssicherung als
kontinuierlicher Prozess
Tuesday, October 16, 12
Continuous Inspection
Tuesday, October 16, 12
Continuous Integration
Tuesday, October 16, 12
QA IM KLEINEN - DIE IDE
Tuesday, October 16, 12
IDE - EINSTELLUNGEN
Tuesday, October 16, 12
QA IM GROßEN - JENKINS
Tuesday, October 16, 12
JENKINS - KONFIGURATION
• Build Targets mit Apache Ant
• Build.xml
• Build Steps
• Visualisierung über Plugins
Tuesday, October 16, 12
JENKINS KONFIGURATION
Tuesday, October 16, 12
JENKINS - KONFIGURATION
• Projektkonfiguration/var/lib/jenkins/jobs/<Projekt>/config.xml
•Ant-Konfiguration/var/lib/jenkins/jobs/<Projekt>/workspace/build.xml
Tuesday, October 16, 12
UND WOZU DAS GANZE?
Tuesday, October 16, 12
Schnelle Rückmeldung
Tuesday, October 16, 12
BEISPIEL: DATE CALC
Tuesday, October 16, 12
BEISPIEL: DATE CALC
Tuesday, October 16, 12
BEISPIEL: DATE CALCDatum eingeben
Tuesday, October 16, 12
BEISPIEL: DATE CALCOfffset eingeben
Tuesday, October 16, 12
BEISPIEL: DATE CALC
Datum berechnen lassen
Tuesday, October 16, 12
BEISPIEL: DATE CALC
Feiertage beachten!
Tuesday, October 16, 12
CODE-ANFORDERUNGEN
• JSLinted
• Kein Copy/Paste Code
• Unittests
• Akzeptanztests
Tuesday, October 16, 12
WIE?
Tuesday, October 16, 12
Toolunterstützung &Automatisierung
Tuesday, October 16, 12
CODE-ANFORDERUNGEN
• JSLinted
• Kein Copy/Paste Code
• Unittests
• Akzeptanztests
Tuesday, October 16, 12
JSLINT
Tuesday, October 16, 12
JSLINT?ANYONE?
Tuesday, October 16, 12
IT WILL HURT YOUR FEELINGS
Tuesday, October 16, 12
WAS TUT JSLINT?• Codingstyle - Whitespaces
• == und != vs. === und !==
• Variablendeklaration zu Beginn einer Funktion
• “use strict”
• Keine Globale Variablen
•Definition vor Verwendung
• eval is EVIL
Tuesday, October 16, 12
JSLINT IN DER IDE
Tuesday, October 16, 12
JSLINT IN JENKINS
<target name="jslint"> <apply executable="java" output="${basedir}/build/ jslint/jslint.xml"> <arg value="-jar" /> <arg value="/opt/jslint4java/jslint4java.jar" /> <arg value="--report" /> <arg value="xml" /> <fileset dir="${basedir}/source"> <patternset> <include name="**/*.js" /> </patternset> </fileset> </apply></target>
Tuesday, October 16, 12
JSLINT IN JENKINS
• Plugin: Violations Plugin
• Post-build action: Report Violations
Tuesday, October 16, 12
CODE-ANFORDERUNGEN
• JSLinted
• Kein Copy/Paste Code
• Unittests
• Akzeptanztests
Tuesday, October 16, 12
COPY AND PASTE DETECTION
Tuesday, October 16, 12
WAS MACHT CPD?
•Duplikate im Quellcode finden
• Tokens statt Strings
Tuesday, October 16, 12
WARUM CPD?
• Verbesserungen an mehreren Stellen
• Bugfixes an mehreren Stellen
Tuesday, October 16, 12
WARUM CPD?
• Verbesserungen an mehreren Stellen
• Bugfixes an mehreren Stellen
= erhöhter Wartungsaufwand
Tuesday, October 16, 12
CPD IN DER IDE
Tuesday, October 16, 12
CPD IN DER IDE
Tuesday, October 16, 12
CPD IN JENKINS<target name="jscpd"> <exec executable="/opt/PMD/pmd-bin-5.0.0/bin/run.sh"> <arg value="cpd" /> <arg value="--minimum-tokens" /> <arg value="5" /> <arg value="--files" /> <arg value="source" /> <arg value="--language" /> <arg value="ecmascript" /> <arg value="--format" /> <arg value="xmls" /> <arg value="build/jscpd/jscpd.xml" /> </exec></target>
Tuesday, October 16, 12
CPD IN JENKINS
• Plugin: Duplicate Code Scanner Plug-in
• Post-build action: Publish duplicate code analysis results
Tuesday, October 16, 12
CPD IN JENKINS
• Plugin: Violations Plugin
• Post-build action: Report Violations
Tuesday, October 16, 12
CODE-ANFORDERUNGEN
• JSLinted
• Kein Copy/Paste Code
• Unittests
• Akzeptanztests
Tuesday, October 16, 12
UNITTESTS
Tuesday, October 16, 12
WARUM UNITTESTS?
• Stabilität
• Sicherheit für Developer
•Dokumentation
• Pro Bug ein Test
Tuesday, October 16, 12
JASMINE
describe("DateCalc", function () { it("should return...", function () { var dateCalc = new DateCalc(), result = dateCalc.resolveDate(); expect(result).toBeFalsy(); });});
Tuesday, October 16, 12
JSTESTDRIVER
• Testing Framework
• Browser Capturing
• Coverage
• Plugins für andere Frameworks (qUnit, Jasmine, etc.)
Tuesday, October 16, 12
JASMINE IN JENKINS
java -jar JsTestDriver.jar --port 9876
Tuesday, October 16, 12
JASMINE IN JENKINS<target name="jasmine"><exec executable="java">
<arg value="-jar" /> <arg value="/opt/jstestdriver/JsTestDriver-1.3.5.jar" /> <arg value="--config" /> <arg value="${basedir}/source/DateCalcJenkins.jstd" /> <arg value="--tests" /> <arg value="all" /> <arg value="--testOutput" /> <arg value="${basedir}/build/jstestdriver" /></exec>
</target>
Tuesday, October 16, 12
JASMINE IN JENKINS
• Plugin: xUnit Plugin
• Post-build action: Publish xUnit test result report
Tuesday, October 16, 12
COVERAGE
• Voraussetzung #1: JsTestDriver Coverage Plugin
• Voraussetzung #2: Lcov to Cobertura Converter
Tuesday, October 16, 12
COVERAGE
<target name="coverage"> <exec executable="/opt/jstestdriver/lcov_cobertura.py"> <arg value="${basedir}/build/jstestdriver/
jsTestDriver.conf-coverage.dat" /> <arg value="-o" /> <arg value="${basedir}/build/jstestdriver/coverage.xml" /> </exec></target>
Tuesday, October 16, 12
COVERAGE
• Plugin: Cobertura Plugin
• Post-build action: Publish Cobertura Coverage Report
Tuesday, October 16, 12
CONFIG.JSTDserver: 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"
Tuesday, October 16, 12
JASMINE IN DER IDE
Tuesday, October 16, 12
JASMINE IN DER IDE
Tuesday, October 16, 12
JASMINE IN DER IDE
Tuesday, October 16, 12
CODE-ANFORDERUNGEN
• JSLinted
• Kein Copy/Paste Code
• Unittests
• Akzeptanztests
Tuesday, October 16, 12
AKZEPTANZTESTS
Tuesday, October 16, 12
WARUM AKZEPTANZTESTS?
• Tests gegen Akzeptanzkriterien
• Anforderungen vs. Umsetzung
•Nicht von Entwicklern
Tuesday, October 16, 12
SELENIUM IDE
Tuesday, October 16, 12
SELENIUM IN JENKINS<target name=”selenium”> <exec executable=”java” output=”${basedir}/build/selenium/results.html> <arg value=”-jar” /> <arg value=”/opt/selenium/selenium-server.jar” /> <arg value=”-htmlSuite” /> <arg value=”*firefox” /> <arg value=”http://datecalc.basti.dev” /> <arg value=”/srv/www/vhosts/datecalc/tests/suite.html” /> </exec></target>
Tuesday, October 16, 12
SELENIUM IN JENKINS
• Plugin: Selenium HTML report Plugin
• Post-build action: Publish Selenium HTML Report
Tuesday, October 16, 12
CHUCK NORRIS PLUGIN
Tuesday, October 16, 12
FRAGEN?
Tuesday, October 16, 12
KONTAKT
Sebastian Springersebastian.springer@mayflower.de
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Tuesday, October 16, 12