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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (8)

Similaire à JavaScript QA Tools

Similaire à JavaScript QA Tools (20)

Plus de Sebastian Springer

Plus de Sebastian Springer (20)

Dernier

Dernier (20)

JavaScript QA Tools