JavaScript Qualitätssicherung

transcript

Werkzeuge zur Qualitätssicherung in JavaScript

Tuesday 5 November 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

JAVASCRIPT?

QUALITÄT?

Unter Softwarequalität versteht man die Gesamtheit der Merkmale und Merkmalswerte eines

Softwareprodukts, die sich auf dessen Eignung beziehen, festgelegte oder vorausgesetzte Erfordernisse zu

erfüllen.(Balzert)

DOKUMENTATION?

README.MD

API DOC

npm install -g git://github.com/jsdoc3/jsdoc.git

STATISCHE VS. DYNAMISCHE CODEANALYSE

STATISCHE CODEANALYSE

TOKENIZER?

var answer = 6 * 7;

SYNTAX{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "answer" }, "init": { "type": "BinaryExpression", "operator": "*", "left": { "type": "Literal", "value": 6, "raw": "6" }, "right": { "type": "Literal", "value": 7, "raw": "7" } } } ], "kind": "var" } ]}

TOKENS[ { "type": "Keyword", "value": "var" }, { "type": "Identifier", "value": "answer" }, { "type": "Punctuator", "value": "=" }, { "type": "Numeric", "value": "6" }, { "type": "Punctuator", "value": "*" }, { "type": "Numeric", "value": "7" }, { "type": "Punctuator", "value": ";" }]

VALIDATOR VS. LINTER

by Douglas Crockford

Warning: JSLint will hurt your feelings

sudo npm install -g jslint

var Calculator = function () {};

Calculator.prototype.add = function(a, b) {

if('number' !== typeof a ||'number' !== typeof b) throw new Error('Can add only numbers');

return a+b;

#1 Missing 'use strict' statement. var Calculator = function () {}; // Line 1, Pos 31 #2 Empty block. var Calculator = function () {}; // Line 1, Pos 30 #3 Expected exactly one space between 'function' and '('. Calculator.prototype.add = function(a, b) { // Line 3, Pos 36 #4 Missing 'use strict' statement. if('number' !== typeof a ||'number' !== typeof b) // Line 5, Pos 5 #5 Expected exactly one space between 'if' and '('. if('number' !== typeof a ||'number' !== typeof b) // Line 5, Pos 7 #6 Missing space between '||' and 'number'. if('number' !== typeof a ||'number' !== typeof b) // Line 5, Pos 32 #7 Expected exactly one space between ')' and 'throw'. throw new Error('Can add only numbers'); // Line 6, Pos 9 #8 Expected '{' and instead saw 'throw'. throw new Error('Can add only numbers'); // Line 6, Pos 9 #9 Stopping. (54% scanned). // Line 6, Pos 9

ESVALIDATEby http://esprima.org/

sudo npm install -g esvalidate

return 42; // Return statement not inside a function

function f() { 'use strict';

// No more octal var x = 042;

// Duplicate property var y = { x: 1, x: 2 };

// With statement can't be used with (z) {}}

validate.js:1: Illegal return statementvalidate.js:7: Octal literals are not allowed in strict mode.validate.js:10: Duplicate data property in object literal not allowed in strict modevalidate.js:10: Strict mode code may not include a with statement

KOMPLEXITÄT

Maintainability

Estimated Errors in Implementation

Lint Errors

https://sourceforge.net/projects/pmd/files/pmd/5.0.5/pmd-bin-5.0.5.zip/download

run.sh pmd -d ./pmd -rulesets ecmascript-basic

pmd/example.js:3:!Avoid assignments in operandspmd/example.js:3:!Avoid using global variablespmd/example.js:3:!Use ===/!== to compare with true/false or Numbers

AssignmentInOperand

UnreachableCode

InaccurateNumericLiteral

ConsistentReturn

ScopeForInVariable

EqualComparison

GlobalVariable AvoidTrailingComma

UseBaseWithParseInt

run.sh cpd --minimum-tokens 12 --files /path/to/src --language ecmascript --

format xml > cpd.xml

FRAMEWORKS

FRAMEWORKSSinon.js

FRAMEWORKS

jsunit

Sinon.js

FRAMEWORKS

jsunit

Sinon.js

FRAMEWORKS

jsunit

dohJS Test Driver

Sinon.js

FRAMEWORKS

jsunit

dohJS Test Driver

Sinon.js

FRAMEWORKS

jsunit

dohJasmine JS Test Driver

Sinon.js

FRAMEWORKS

jsunit

Sinon.js Siesta

FRAMEWORKS

jsunit

Sinon.js Siesta

SERVERSIDE VS. CLIENTSIDE

COVERAGE

ENTWICKLUNGSUMGEBUNG(IDE)

SERVERSIDE

https://code.google.com/p/js-test-driver/Tuesday 5 November 13

AUTOMATISIERUNG

JENKINS

Tasks per Ant ausführen

Visualisierung über Plugins

FRAGEN?

Sebastian Springersebastian.springer@mayflower.de

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82

Kontakt

JavaScript Qualitätssicherung

Technology