0
JAVASCRIPT-QA-TOOLSTuesday, October 16, 12
Tuesday, October 16, 12
WER BIN ICH?    • Sebastian           Springer    • 29    • Dipl. Inf. (FH)    • Teamleiter           @ MayflowerTuesday, O...
WAS ERZÄHLE ICH HEUTE?    • Was            bringt mir eine hohe Qualität überhaupt?    • Welche Tools           kann ich n...
LET’S GOTuesday, October 16, 12
WARUM                    QUALITÄTSSICHERUNG?Tuesday, October 16, 12
JAVASCRIPT === QUICK & DIRTYTuesday, October 16, 12
JAVASCRIPT === QUICK & DIRTY    • Leichtgewichtig    • Schnelle              Ergebnisse    • Direkt              in HTML e...
langfristigJAVASCRIPT === QUICK & DIRTYTuesday, October 16, 12
UND WAS IST JETZT                             QUALITÄT?Tuesday, October 16, 12
WAS IST QUALITÄT?    • Reliability    • Efficiency    • Security    • Maintainability    • SizeTuesday, October 16, 12
8                 Qualitätssicherung als                kontinuierlicher ProzessTuesday, October 16, 12
Continuous InspectionTuesday, October 16, 12
Continuous IntegrationTuesday, October 16, 12
QA IM KLEINEN - DIE IDETuesday, October 16, 12
IDE - EINSTELLUNGENTuesday, October 16, 12
QA IM GROßEN - JENKINSTuesday, October 16, 12
JENKINS - KONFIGURATION    • Build Targets           mit Apache Ant    • Build.xml    • Build           Steps    • Visuali...
JENKINS KONFIGURATIONTuesday, October 16, 12
JENKINS - KONFIGURATION    • Projektkonfiguration        /var/lib/jenkins/jobs/<Projekt>/config.xml    • Ant-Konfiguration   ...
UND WOZU DAS GANZE?Tuesday, October 16, 12
Schnelle RückmeldungTuesday, October 16, 12
BEISPIEL: DATE CALCTuesday, October 16, 12
BEISPIEL: DATE CALCTuesday, October 16, 12
BEISPIEL: DATE CALC                                         Datum eingebenTuesday, October 16, 12
BEISPIEL: DATE CALC                                         Offfset eingebenTuesday, October 16, 12
BEISPIEL: DATE CALC                                       Datum berechnen                                            lasse...
BEISPIEL: DATE CALC                              Feiertage beachten!Tuesday, October 16, 12
CODE-ANFORDERUNGEN    • JSLinted    • Kein           Copy/Paste Code    • Unittests    • AkzeptanztestsTuesday, October 16...
WIE?Tuesday, October 16, 12
Toolunterstützung &                            AutomatisierungTuesday, October 16, 12
CODE-ANFORDERUNGEN    • JSLinted    • Kein           Copy/Paste Code    • Unittests    • AkzeptanztestsTuesday, October 16...
JSLINTTuesday, October 16, 12
JSLINT?                          ANYONE?Tuesday, October 16, 12
IT WILL HURT YOUR FEELINGSTuesday, October 16, 12
WAS TUT JSLINT?    • Codingstyle               - Whitespaces    • ==          und != vs. === und !==    • Variablendeklara...
JSLINT IN DER IDETuesday, October 16, 12
JSLINT IN JENKINS<target name="jslint">    <apply executable="java" output="${basedir}/build/                             ...
JSLINT IN JENKINS    • Plugin: Violations        Plugin    • Post-build          action: Report ViolationsTuesday, October...
CODE-ANFORDERUNGEN    • JSLinted    • Kein           Copy/Paste Code    • Unittests    • AkzeptanztestsTuesday, October 16...
COPY AND PASTE                            DETECTIONTuesday, October 16, 12
WAS MACHT CPD?    • Duplikate             im Quellcode finden    • Tokens              statt StringsTuesday, October 16, 12
WARUM CPD?    • Verbesserungen             an mehreren Stellen    • Bugfixes             an mehreren StellenTuesday, Octobe...
WARUM CPD?    • Verbesserungen             an mehreren Stellen    • Bugfixes             an mehreren Stellen               ...
CPD IN DER IDETuesday, October 16, 12
CPD IN DER IDETuesday, October 16, 12
CPD IN JENKINS  <target name="jscpd">      <exec executable="/opt/PMD/pmd-bin-5.0.0/bin/run.sh">          <arg value="cpd"...
CPD IN JENKINS    • Plugin: Duplicate         Code Scanner Plug-in    • Post-build          action: Publish duplicate code...
CPD IN JENKINS    • Plugin: Violations        Plugin    • Post-build          action: Report ViolationsTuesday, October 16...
CODE-ANFORDERUNGEN    • JSLinted    • Kein           Copy/Paste Code    • Unittests    • AkzeptanztestsTuesday, October 16...
UNITTESTSTuesday, October 16, 12
WARUM UNITTESTS?    • Stabilität    • Sicherheit          für Developer    • Dokumentation    • Pro          Bug ein TestT...
JASMINE         describe("DateCalc", function () {             it("should return...", function () {                 var da...
JSTESTDRIVER    • Testing             Framework    • Browser              Capturing    • Coverage    • Plugins            ...
JASMINE IN JENKINS                          java -jar JsTestDriver.jar --port 9876Tuesday, October 16, 12
JASMINE IN JENKINS       <target name="jasmine">         <exec executable="java">           <arg value="-jar" />          ...
JASMINE IN JENKINS    • Plugin: xUnit         Plugin    • Post-build          action: Publish xUnit test result reportTues...
COVERAGE    • Voraussetzung       #1: JsTestDriver Coverage Plugin    • Voraussetzung       #2: Lcov to Cobertura Converte...
COVERAGE<target name="coverage">  <exec executable="/opt/jstestdriver/lcov_cobertura.py">    <arg value="${basedir}/build/...
COVERAGE    • Plugin: Cobertura          Plugin    • Post-build          action: Publish Cobertura Coverage ReportTuesday,...
CONFIG.JSTDserver: http://localhost:9876load:  - lib/jasmine-1.2.0.rc3/jasmine.js  - lib/jasmine-jstd-adapter/src/JasmineA...
JASMINE IN DER IDETuesday, October 16, 12
JASMINE IN DER IDETuesday, October 16, 12
JASMINE IN DER IDETuesday, October 16, 12
CODE-ANFORDERUNGEN    • JSLinted    • Kein           Copy/Paste Code    • Unittests    • AkzeptanztestsTuesday, October 16...
AKZEPTANZTESTSTuesday, October 16, 12
WARUM AKZEPTANZTESTS?    • Tests               gegen Akzeptanzkriterien    • Anforderungen                vs. Umsetzung   ...
SELENIUM IDETuesday, October 16, 12
SELENIUM IN JENKINS<target name=”selenium”>  <exec executable=”java” output=”${basedir}/build/selenium/results.html>    <a...
SELENIUM IN JENKINS    • Plugin: Selenium          HTML report Plugin    • Post-build           action: Publish Selenium H...
CHUCK NORRIS PLUGINTuesday, October 16, 12
FRAGEN?Tuesday, October 16, 12
KONTAKT                          Sebastian Springer                          sebastian.springer@mayflower.de              ...
Upcoming SlideShare
Loading in...5
×

JavaScript QA Tools

718

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript QA Tools"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×