JavaScript QA Tools

JAVASCRIPT-QA-TOOLS

Tuesday, October 16, 12

WER BIN ICH?

• Sebastian Springer

• 29

• Dipl. Inf. (FH)

• Teamleiter @ Mayﬂower


WAS ERZÄHLE ICH HEUTE?

• Was bringt mir eine hohe Qualität überhaupt?

• Welche Tools kann ich nutzen?

• Wie kann ich die QA automatisieren?


LET’S GO


WARUM
QUALITÄTSSICHERUNG?


JAVASCRIPT === QUICK & DIRTY



• Leichtgewichtig

• Schnelle Ergebnisse

• Direkt in HTML eingebettet

• (Fast) überall verfügbar


langfristig



UND WAS IST JETZT
QUALITÄT?


WAS IST QUALITÄT?

• Reliability

• Efﬁciency

• Security

• Maintainability

• Size


8 Qualitätssicherung als
kontinuierlicher Prozess


Continuous Inspection


Continuous Integration


QA IM KLEINEN - DIE IDE


IDE - EINSTELLUNGEN


QA IM GROßEN - JENKINS


JENKINS - KONFIGURATION

• Build Targets mit Apache Ant

• Build.xml

• Build Steps

• Visualisierung über Plugins


JENKINS KONFIGURATION


JENKINS - KONFIGURATION

• Projektkonfiguration
/var/lib/jenkins/jobs/<Projekt>/config.xml

• Ant-Konfiguration
/var/lib/jenkins/jobs/<Projekt>/workspace/build.xml


UND WOZU DAS GANZE?


Schnelle Rückmeldung


BEISPIEL: DATE CALC


BEISPIEL: DATE CALC
Datum eingeben


BEISPIEL: DATE CALC
Offfset eingeben


BEISPIEL: DATE CALC

Datum berechnen
lassen


BEISPIEL: DATE CALC

Feiertage beachten!


CODE-ANFORDERUNGEN

• JSLinted

• Kein Copy/Paste Code

• Unittests

• Akzeptanztests


WIE?


Toolunterstützung &
Automatisierung


JSLINT


JSLINT?
ANYONE?


IT WILL HURT YOUR FEELINGS


WAS TUT JSLINT?
• Codingstyle - Whitespaces

• == und != vs. === und !==

• Variablendeklaration zu Beginn einer Funktion

• “use strict”

• Keine Globale Variablen

• Deﬁnition vor Verwendung

• eval is EVIL

JSLINT IN DER IDE


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>


JSLINT IN JENKINS

• Plugin: Violations Plugin

• Post-build action: Report Violations


COPY AND PASTE
DETECTION


WAS MACHT CPD?

• Duplikate im Quellcode ﬁnden

• Tokens statt Strings


WARUM CPD?

• Verbesserungen an mehreren Stellen

• Bugﬁxes an mehreren Stellen


WARUM CPD?

• Verbesserungen an mehreren Stellen

• Bugﬁxes an mehreren Stellen

= erhöhter Wartungsaufwand

CPD IN DER IDE


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>


CPD IN JENKINS

• Plugin: Duplicate Code Scanner Plug-in

• Post-build action: Publish duplicate code analysis results


CPD IN JENKINS

• Plugin: Violations Plugin

• Post-build action: Report Violations


UNITTESTS


WARUM UNITTESTS?

• Stabilität

• Sicherheit für Developer

• Dokumentation

• Pro Bug ein Test


JASMINE

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


JSTESTDRIVER

• Testing Framework

• Browser Capturing

• Coverage

• Plugins für andere Frameworks (qUnit, Jasmine, etc.)


JASMINE IN JENKINS
java -jar JsTestDriver.jar --port 9876


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>


JASMINE IN JENKINS

• Plugin: xUnit Plugin

• Post-build action: Publish xUnit test result report


COVERAGE

• Voraussetzung #1: JsTestDriver Coverage Plugin

• Voraussetzung #2: Lcov to Cobertura Converter


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>


COVERAGE

• Plugin: Cobertura Plugin

• Post-build action: Publish Cobertura Coverage Report


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.CoverageM


JASMINE IN DER IDE


AKZEPTANZTESTS


WARUM AKZEPTANZTESTS?

• Tests gegen Akzeptanzkriterien

• Anforderungen vs. Umsetzung

• Nicht von Entwicklern


SELENIUM IDE


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>


SELENIUM IN JENKINS

• Plugin: Selenium HTML report Plugin

• Post-build action: Publish Selenium HTML Report


CHUCK NORRIS PLUGIN


FRAGEN?


KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de

Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland

@basti_springer

https://github.com/sspringer82


JavaScript QA Tools

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (8)

Similar to JavaScript QA Tools

Similar to JavaScript QA Tools (20)

More from Sebastian Springer

More from Sebastian Springer (20)

Recently uploaded

Recently uploaded (20)

JavaScript QA Tools