JavaScript QA Tools

  • 581 views
Uploaded on

Talk auf der Webtechcon 2012 in Mainz über Qualitätssicherung in JavaScript

Talk auf der Webtechcon 2012 in Mainz über Qualitätssicherung in JavaScript

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JAVASCRIPT-QA-TOOLSTuesday, October 16, 12
  • 2. Tuesday, October 16, 12
  • 3. WER BIN ICH? • Sebastian Springer • 29 • Dipl. Inf. (FH) • Teamleiter @ MayflowerTuesday, October 16, 12
  • 4. 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
  • 5. LET’S GOTuesday, October 16, 12
  • 6. WARUM QUALITÄTSSICHERUNG?Tuesday, October 16, 12
  • 7. JAVASCRIPT === QUICK & DIRTYTuesday, October 16, 12
  • 8. JAVASCRIPT === QUICK & DIRTY • Leichtgewichtig • Schnelle Ergebnisse • Direkt in HTML eingebettet • (Fast) überall verfügbarTuesday, October 16, 12
  • 9. langfristigJAVASCRIPT === QUICK & DIRTYTuesday, October 16, 12
  • 10. UND WAS IST JETZT QUALITÄT?Tuesday, October 16, 12
  • 11. WAS IST QUALITÄT? • Reliability • Efficiency • Security • Maintainability • SizeTuesday, October 16, 12
  • 12. 8 Qualitätssicherung als kontinuierlicher ProzessTuesday, October 16, 12
  • 13. Continuous InspectionTuesday, October 16, 12
  • 14. Continuous IntegrationTuesday, October 16, 12
  • 15. QA IM KLEINEN - DIE IDETuesday, October 16, 12
  • 16. IDE - EINSTELLUNGENTuesday, October 16, 12
  • 17. QA IM GROßEN - JENKINSTuesday, October 16, 12
  • 18. JENKINS - KONFIGURATION • Build Targets mit Apache Ant • Build.xml • Build Steps • Visualisierung über PluginsTuesday, October 16, 12
  • 19. JENKINS KONFIGURATIONTuesday, October 16, 12
  • 20. JENKINS - KONFIGURATION • Projektkonfiguration /var/lib/jenkins/jobs/<Projekt>/config.xml • Ant-Konfiguration /var/lib/jenkins/jobs/<Projekt>/workspace/build.xmlTuesday, October 16, 12
  • 21. UND WOZU DAS GANZE?Tuesday, October 16, 12
  • 22. Schnelle RückmeldungTuesday, October 16, 12
  • 23. BEISPIEL: DATE CALCTuesday, October 16, 12
  • 24. BEISPIEL: DATE CALCTuesday, October 16, 12
  • 25. BEISPIEL: DATE CALC Datum eingebenTuesday, October 16, 12
  • 26. BEISPIEL: DATE CALC Offfset eingebenTuesday, October 16, 12
  • 27. BEISPIEL: DATE CALC Datum berechnen lassenTuesday, October 16, 12
  • 28. BEISPIEL: DATE CALC Feiertage beachten!Tuesday, October 16, 12
  • 29. CODE-ANFORDERUNGEN • JSLinted • Kein Copy/Paste Code • Unittests • AkzeptanztestsTuesday, October 16, 12
  • 30. WIE?Tuesday, October 16, 12
  • 31. Toolunterstützung & AutomatisierungTuesday, October 16, 12
  • 32. CODE-ANFORDERUNGEN • JSLinted • Kein Copy/Paste Code • Unittests • AkzeptanztestsTuesday, October 16, 12
  • 33. JSLINTTuesday, October 16, 12
  • 34. JSLINT? ANYONE?Tuesday, October 16, 12
  • 35. IT WILL HURT YOUR FEELINGSTuesday, October 16, 12
  • 36. WAS TUT JSLINT? • Codingstyle - Whitespaces • == und != vs. === und !== • Variablendeklaration zu Beginn einer Funktion • “use strict” • Keine Globale Variablen • Definition vor Verwendung • eval is EVILTuesday, October 16, 12
  • 37. JSLINT IN DER IDETuesday, October 16, 12
  • 38. 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
  • 39. JSLINT IN JENKINS • Plugin: Violations Plugin • Post-build action: Report ViolationsTuesday, October 16, 12
  • 40. CODE-ANFORDERUNGEN • JSLinted • Kein Copy/Paste Code • Unittests • AkzeptanztestsTuesday, October 16, 12
  • 41. COPY AND PASTE DETECTIONTuesday, October 16, 12
  • 42. WAS MACHT CPD? • Duplikate im Quellcode finden • Tokens statt StringsTuesday, October 16, 12
  • 43. WARUM CPD? • Verbesserungen an mehreren Stellen • Bugfixes an mehreren StellenTuesday, October 16, 12
  • 44. WARUM CPD? • Verbesserungen an mehreren Stellen • Bugfixes an mehreren Stellen = erhöhter WartungsaufwandTuesday, October 16, 12
  • 45. CPD IN DER IDETuesday, October 16, 12
  • 46. CPD IN DER IDETuesday, October 16, 12
  • 47. 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
  • 48. CPD IN JENKINS • Plugin: Duplicate Code Scanner Plug-in • Post-build action: Publish duplicate code analysis resultsTuesday, October 16, 12
  • 49. CPD IN JENKINS • Plugin: Violations Plugin • Post-build action: Report ViolationsTuesday, October 16, 12
  • 50. CODE-ANFORDERUNGEN • JSLinted • Kein Copy/Paste Code • Unittests • AkzeptanztestsTuesday, October 16, 12
  • 51. UNITTESTSTuesday, October 16, 12
  • 52. WARUM UNITTESTS? • Stabilität • Sicherheit für Developer • Dokumentation • Pro Bug ein TestTuesday, October 16, 12
  • 53. JASMINE describe("DateCalc", function () { it("should return...", function () { var dateCalc = new DateCalc(), result = dateCalc.resolveDate(); expect(result).toBeFalsy(); }); });Tuesday, October 16, 12
  • 54. JSTESTDRIVER • Testing Framework • Browser Capturing • Coverage • Plugins für andere Frameworks (qUnit, Jasmine, etc.)Tuesday, October 16, 12
  • 55. JASMINE IN JENKINS java -jar JsTestDriver.jar --port 9876Tuesday, October 16, 12
  • 56. 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
  • 57. JASMINE IN JENKINS • Plugin: xUnit Plugin • Post-build action: Publish xUnit test result reportTuesday, October 16, 12
  • 58. COVERAGE • Voraussetzung #1: JsTestDriver Coverage Plugin • Voraussetzung #2: Lcov to Cobertura ConverterTuesday, October 16, 12
  • 59. 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
  • 60. COVERAGE • Plugin: Cobertura Plugin • Post-build action: Publish Cobertura Coverage ReportTuesday, October 16, 12
  • 61. CONFIG.JSTDserver: http://localhost:9876load: - 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.jsplugin: - name: "coverage" jar: "/opt/JsTestDriver/plugins/coverage.jar" module: "com.google.jstestdriver.coverage.CoverageMTuesday, October 16, 12
  • 62. JASMINE IN DER IDETuesday, October 16, 12
  • 63. JASMINE IN DER IDETuesday, October 16, 12
  • 64. JASMINE IN DER IDETuesday, October 16, 12
  • 65. CODE-ANFORDERUNGEN • JSLinted • Kein Copy/Paste Code • Unittests • AkzeptanztestsTuesday, October 16, 12
  • 66. AKZEPTANZTESTSTuesday, October 16, 12
  • 67. WARUM AKZEPTANZTESTS? • Tests gegen Akzeptanzkriterien • Anforderungen vs. Umsetzung • Nicht von EntwicklernTuesday, October 16, 12
  • 68. SELENIUM IDETuesday, October 16, 12
  • 69. 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
  • 70. SELENIUM IN JENKINS • Plugin: Selenium HTML report Plugin • Post-build action: Publish Selenium HTML ReportTuesday, October 16, 12
  • 71. CHUCK NORRIS PLUGINTuesday, October 16, 12
  • 72. FRAGEN?Tuesday, October 16, 12
  • 73. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82Tuesday, October 16, 12