Separate offender analyze, parsing in the core, display in the front

This commit is contained in:
Gaël Métais
2015-01-26 11:34:38 +01:00
parent d829525ab8
commit 901116fde6
17 changed files with 1436 additions and 563 deletions
+395 -1
View File
@@ -4,10 +4,362 @@ var rulesChecker = require('../../lib/rulesChecker');
describe('rulesChecker', function() {
var policies = require('../../lib/metadata/policies.js');
var results;
it('should transform DOMelementMaxDepth offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"DOMelementMaxDepth": 3
},
"offenders": {
"DOMelementMaxDepth": [
"body > div#foo > span.bar"
]
}
}
}
}, policies);
results.should.have.a.property('DOMelementMaxDepth');
results.DOMelementMaxDepth.should.have.a.property('offendersObj').that.deep.equals({
"count": 1,
"tree": {
"body": {
"div#foo": {
"span.bar": 1
}
}
}
});
});
it('should transform DOMidDuplicated offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"DOMidDuplicated": 2
},
"offenders": {
"DOMidDuplicated": [
"colorswitch-30883-30865: 4 occurrences",
"foo: 1 occurrences"
]
}
}
}
}, policies);
results.should.have.a.property('DOMidDuplicated');
results.DOMidDuplicated.should.have.a.property('offendersObj').that.deep.equals({
"count": 2,
"list": [
{
"id": "colorswitch-30883-30865",
"occurrences": 4
},
{
"id": "foo",
"occurrences": 1
}
]
});
});
it('should transform DOMinserts offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"DOMinserts": 4
},
"offenders": {
"DOMinserts": [
"\"div\" appended to \"html\"",
"\"DocumentFragment > link[0]\" appended to \"head\"",
"\"div#Netaff-yh1XbS0vK3NaRGu\" appended to \"body > div#Global\"",
"\"img\" appended to \"body\""
]
}
}
}
}, policies);
results.should.have.a.property('DOMinserts');
results.DOMinserts.should.have.a.property('offendersObj').that.deep.equals({
"count": 4,
"list": [
{
"insertedElement": {
"type": "createdElement",
"element": "div"
},
"receiverElement": {
"type": "html"
}
},
{
"insertedElement": {
"type": "fragmentElement",
"element": "link[0]",
"tree": {
"DocumentFragment": {
"link[0]": 1
}
}
},
"receiverElement": {
"type": "head"
}
},
{
"insertedElement": {
"type": "createdElement",
"element": "div#Netaff-yh1XbS0vK3NaRGu"
},
"receiverElement": {
"type": "domElement",
"element": "div#Global",
"tree": {
"body": {
"div#Global": 1
}
}
}
},
{
"insertedElement": {
"type": "createdElement",
"element": "img"
},
"receiverElement": {
"type": "body"
}
}
]
});
});
it('should transform DOMqueriesWithoutResults offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"DOMqueriesWithoutResults": 2
},
"offenders": {
"DOMqueriesWithoutResults": [
"#SearchMenu (in #document) using getElementById",
".partnership-link (in body > div#Global > div#Header > ul#MainMenu) using getElementsByClassName"
]
}
}
}
}, policies);
results.should.have.a.property('DOMqueriesWithoutResults');
results.DOMqueriesWithoutResults.should.have.a.property('offendersObj').that.deep.equals({
"count": 2,
"list": [
{
"context": {
"type": "document"
},
"fn": "getElementById",
"query": "#SearchMenu "
},
{
"context": {
"element": "ul#MainMenu",
"tree": {
"body": {
"div#Global": {
"div#Header": {
"ul#MainMenu": 1
}
}
}
},
"type": "domElement"
},
"fn": "getElementsByClassName",
"query": ".partnership-link "
}
]
});
});
it('should transform DOMqueriesAvoidable offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"DOMqueriesAvoidable": 2
},
"offenders": {
"DOMqueriesDuplicated": [
"id \"#j2t-top-cart\" with getElementById (in context #document): 4 queries",
"class \".listingResult\" with getElementsByClassName (in context body > div#Global > div#Listing): 4 queries"
]
}
}
}
}, policies);
results.should.have.a.property('DOMqueriesAvoidable');
results.DOMqueriesAvoidable.should.have.a.property('offendersObj').that.deep.equals({
"count": 2,
"list": [
{
"query": "#j2t-top-cart",
"context": {
"type": "document"
},
"fn": "getElementById ",
"count": 4
},
{
"query": ".listingResult",
"context": {
"type": "domElement",
"element": "div#Listing",
"tree": {
"body": {
"div#Global": {
"div#Listing": 1
}
}
}
},
"fn": "getElementsByClassName ",
"count": 4
}
]
});
});
it('should transform eventsBound offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"eventsBound": 2
},
"offenders": {
"eventsBound": [
"\"DOMContentLoaded\" bound to \"#document\"",
"\"unload\" bound to \"window\"",
"\"submit\" bound to \"body > div#Global > div#Header > form#search_mini_form\""
]
}
}
}
}, policies);
results.should.have.a.property('eventsBound');
results.eventsBound.should.have.a.property('offendersObj').that.deep.equals({
"count": 3,
"list": [
{
"element": {
"type": "document"
},
"eventName": "DOMContentLoaded"
},
{
"element": {
"type": "window"
},
"eventName": "unload"
},
{
"element": {
"element": "form#search_mini_form",
"tree": {
"body": {
"div#Global": {
"div#Header": {
"form#search_mini_form": 1
}
}
}
},
"type": "domElement"
},
"eventName": "submit"
}
]
});
});
it('should transform jsErrors offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"jsErrors": 2
},
"offenders": {
"jsErrors": [
"TypeError: 'undefined' is not a function (evaluating 'this.successfullyCollected.bind(this)') - http://asset.easydmp.net/js/collect.js:1160 / callCollecte http://asset.easydmp.net/js/collect.js:1203 / callbackUpdateParams http://asset.easydmp.net/js/collect.js:1135 / http://asset.easydmp.net/js/collect.js:1191",
"TypeError: 'undefined' is not an object (evaluating 'd.readyState') - http://me.hunkal.com/p/:3"
]
}
}
}
}, policies);
results.should.have.a.property('jsErrors');
results.jsErrors.should.have.a.property('offendersObj').that.deep.equals({
"count": 2,
"list": [
{
"error": "TypeError: 'undefined' is not a function (evaluating 'this.successfullyCollected.bind(this)')",
"backtrace": [
{
"file": "http://asset.easydmp.net/js/collect.js",
"line": 1160
},
{
"file": "http://asset.easydmp.net/js/collect.js",
"line": 1203,
"functionName": "callCollecte"
},
{
"file": "http://asset.easydmp.net/js/collect.js",
"line": 1135,
"functionName": "callbackUpdateParams"
},
{
"file": "http://asset.easydmp.net/js/collect.js",
"line": 1191
}
]
},
{
"error": "TypeError: 'undefined' is not an object (evaluating 'd.readyState')",
"backtrace": [
{
"file": "http://me.hunkal.com/p/",
"line": 3
}
]
}
]
});
});
it('should grade correctly jQuery versions', function() {
var versions = {
'1.2.9': 0,
@@ -84,4 +436,46 @@ describe('rulesChecker', function() {
results.jQueryDifferentVersions.should.have.a.property('score').that.equals(0);
results.jQueryDifferentVersions.should.have.a.property('abnormal').that.equals(true);
});
it('should transform cssParsingErrors offenders', function() {
results = rulesChecker.check({
"toolsResults": {
"phantomas": {
"metrics": {
"cssParsingErrors": 2
},
"offenders": {
"cssParsingErrors": [
"<http://www.sudexpress.com/skin/frontend/sudexpress/default/css/styles.css> (Error: CSS parsing failed: missing '}' @ 4:1)",
"<http://www.sudexpress.com/skin/frontend/sudexpress/default/css/reset.css> (Empty CSS was provided)"
]
}
}
}
}, policies);
results.should.have.a.property('cssParsingErrors');
results.cssParsingErrors.should.have.a.property('offendersObj').that.deep.equals({
"count": 2,
"list": [
{
"error": "Error: CSS parsing failed: missing '}'",
"file": "http://www.sudexpress.com/skin/frontend/sudexpress/default/css/styles.css",
"line": 4,
"column": 1
},
{
"error": "Empty CSS was provided",
"file": "http://www.sudexpress.com/skin/frontend/sudexpress/default/css/reset.css",
"line": null,
"column": null
}
]
});
});
// Enough for the moment, to be complete...
});
+10 -3
View File
@@ -65,15 +65,22 @@ describe('index.js', function() {
"message": "<p>A deep DOM makes the CSS matching with DOM elements difficult.</p><p>It also slows down JavaScript modifications to the DOM because changing the dimensions of an element makes the browser re-calculate the dimensions of it's parents. Same thing for JavaScript events, that bubble up to the document root.</p>",
"isOkThreshold": 10,
"isBadThreshold": 20,
"isAbnormalThreshold": 28
"isAbnormalThreshold": 28,
"hasOffenders": true
},
"value": 1,
"bad": false,
"abnormal": false,
"score": 100,
"abnormalityScore": 0,
"offenders": "<div class=\"domTree\"><div><span>body</span><div><span>h1[1]</span></div></div></div>",
"offendersCount": 1
"offendersObj": {
"count": 1,
"tree": {
"body": {
"h1[1]": 1
}
}
}
});
// Test javascriptExecutionTree
+99 -99
View File
@@ -20,11 +20,15 @@ describe('offendersHelpers', function() {
describe('listOfDomArraysToTree', function() {
it('should transform a list of arrays into a tree', function() {
var result = offendersHelpers.listOfDomArraysToTree([
var input = [
['body', 'section#page', 'div.alternate-color', 'ul.retroGuide', 'li[0]', 'div.retro-chaine.france2'],
['body', 'section#page', 'div.alternate-color', 'ul.retroGuide', 'li[0]', 'div.retro-chaine.france2'],
['body', 'section#page', 'div.alternate-color', 'ul.retroGuide', 'li[1]', 'div.retro-chaine.france2']
]);
];
var inputClone = input.slice();
var result = offendersHelpers.listOfDomArraysToTree(input);
result.should.deep.equal({
'body': {
'section#page': {
@@ -41,95 +45,105 @@ describe('offendersHelpers', function() {
}
}
});
input.should.deep.equal(inputClone);
});
});
describe('domTreeToHTML', function() {
describe('domPathToDomElementObj', function() {
it('should transform a dom tree into HTML with the awaited format', function() {
var result = offendersHelpers.domTreeToHTML({
'body': {
'ul.retroGuide': {
'li[0]': {
'div.retro-chaine.france2': 2
},
'li[1]': {
'div.retro-chaine.france2': 1
it('should transform html', function() {
var result = offendersHelpers.domPathToDomElementObj('html');
result.should.deep.equal({
type: 'html'
});
});
it('should transform body', function() {
var result = offendersHelpers.domPathToDomElementObj('body');
result.should.deep.equal({
type: 'body'
});
});
it('should transform head', function() {
var result = offendersHelpers.domPathToDomElementObj('head');
result.should.deep.equal({
type: 'head'
});
});
it('should transform #document', function() {
var result = offendersHelpers.domPathToDomElementObj('#document');
result.should.deep.equal({
type: 'document'
});
});
it('should transform window', function() {
var result = offendersHelpers.domPathToDomElementObj('window');
result.should.deep.equal({
type: 'window'
});
});
it('should transform a standard in-body element', function() {
var result = offendersHelpers.domPathToDomElementObj('body > div#colorbox > div#cboxContent');
result.should.deep.equal({
type: 'domElement',
element: 'div#cboxContent',
tree: {
'body': {
'div#colorbox': {
'div#cboxContent': 1
}
}
}
});
result.should.equal('<div class="domTree"><div><span>body</span><div><span>ul.retroGuide</span><div><span>li[0]</span><div><span>div.retro-chaine.france2 <span>(x2)</span></span></div></div><div><span>li[1]</span><div><span>div.retro-chaine.france2</span></div></div></div></div></div>');
});
});
describe('listOfDomPathsToHTML', function() {
it('should transform a list of path strings into HTML', function() {
var result = offendersHelpers.listOfDomPathsToHTML([
'body > ul.retroGuide > li[0] > div.retro-chaine.france2',
'body > ul.retroGuide > li[1] > div.retro-chaine.france2',
'body > ul.retroGuide > li[0] > div.retro-chaine.france2',
]);
result.should.equal('<div class="domTree"><div><span>body</span><div><span>ul.retroGuide</span><div><span>li[0]</span><div><span>div.retro-chaine.france2 <span>(x2)</span></span></div></div><div><span>li[1]</span><div><span>div.retro-chaine.france2</span></div></div></div></div></div>');
});
});
describe('domPathToButton', function() {
it('should transform html', function() {
var result = offendersHelpers.domPathToButton('html');
result.should.equal('<div class="offenderButton"><b>html</b></div>');
});
it('should transform body', function() {
var result = offendersHelpers.domPathToButton('body');
result.should.equal('<div class="offenderButton"><b>body</b></div>');
});
it('should transform head', function() {
var result = offendersHelpers.domPathToButton('head');
result.should.equal('<div class="offenderButton"><b>head</b></div>');
});
it('should transform #document', function() {
var result = offendersHelpers.domPathToButton('#document');
result.should.equal('<div class="offenderButton"><b>document</b></div>');
});
it('should transform window', function() {
var result = offendersHelpers.domPathToButton('window');
result.should.equal('<div class="offenderButton"><b>window</b></div>');
});
it('should transform a standard in-body element', function() {
var result = offendersHelpers.domPathToButton('body > div#colorbox > div#cboxContent');
result.should.equal('<div class="offenderButton opens">DOM element <b>div#cboxContent</b><div class="domTree"><div><span>body</span><div><span>div#colorbox</span><div><span>div#cboxContent</span></div></div></div></div></div>');
});
it('should transform a domFragment element', function() {
var result = offendersHelpers.domPathToButton('DocumentFragment');
result.should.equal('<div class="offenderButton">Fragment</div>');
var result = offendersHelpers.domPathToDomElementObj('DocumentFragment');
result.should.deep.equal({
type: 'fragment'
});
});
it('should transform a domFragment element', function() {
var result = offendersHelpers.domPathToButton('DocumentFragment > div#colorbox > div#cboxContent');
result.should.equal('<div class="offenderButton opens">Fragment element <b>div#cboxContent</b><div class="domTree"><div><span>DocumentFragment</span><div><span>div#colorbox</span><div><span>div#cboxContent</span></div></div></div></div></div>');
var result = offendersHelpers.domPathToDomElementObj('DocumentFragment > div#colorbox > div#cboxContent');
result.should.deep.equal({
type: 'fragmentElement',
element: 'div#cboxContent',
tree: {
'DocumentFragment': {
'div#colorbox': {
'div#cboxContent': 1
}
}
}
});
});
it('should transform an not-attached element', function() {
var result = offendersHelpers.domPathToButton('div#sizcache');
result.should.equal('<div class="offenderButton">Created element <b>div#sizcache</b></div>');
var result = offendersHelpers.domPathToDomElementObj('div#sizcache');
result.should.deep.equal({
type: 'createdElement',
element: 'div#sizcache'
});
});
it('should transform an not-attached element path', function() {
var result = offendersHelpers.domPathToButton('div > div#sizcache');
result.should.equal('<div class="offenderButton opens">Created element <b>div#sizcache</b><div class="domTree"><div><span>div</span><div><span>div#sizcache</span></div></div></div></div>');
var result = offendersHelpers.domPathToDomElementObj('div > div#sizcache');
result.should.deep.equal({
type: 'createdElement',
element: 'div#sizcache',
tree: {
'div': {
'div#sizcache': 1
}
}
});
});
});
@@ -160,32 +174,6 @@ describe('offendersHelpers', function() {
});
describe('backtraceArrayToHtml', function() {
it('should create a button from a backtrace array', function() {
var result = offendersHelpers.backtraceArrayToHtml([
{
file: 'http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js',
line: 1
},
{
functionName: 'callback',
file: 'http://pouet.com/js/main.js',
line: 1
}
]);
result.should.equal('<div class="offenderButton opens">backtrace<div class="backtrace"><div><a href="http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js" target="_blank" title="http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js">http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js</a> line 1</div><div>callback() <a href="http://pouet.com/js/main.js" target="_blank" title="http://pouet.com/js/main.js">http://pouet.com/js/main.js</a> line 1</div></div></div>');
});
it('should display "no backtrace"', function() {
var result = offendersHelpers.backtraceArrayToHtml([]);
result.should.equal('<div class="offenderButton">no backtrace</div>');
});
});
describe('sortVarsLikeChromeDevTools', function() {
it('should sort in the same strange order', function() {
@@ -248,12 +236,24 @@ describe('offendersHelpers', function() {
describe('cssOffenderPattern', function() {
it('should transform a css offender into an object', function() {
var result = offendersHelpers.cssOffenderPattern('.pagination .plus ul li @ 30:31862');
var result = offendersHelpers.cssOffenderPattern('.pagination .plus ul li <http://www.pouet.com/css/main.css> @ 30:31862');
result.should.deep.equal({
offender: '.pagination .plus ul li',
css: '.pagination .plus ul li',
file: 'http://www.pouet.com/css/main.css',
line: 30,
character: 31862
column: 31862
});
});
it('should work with an inline css', function() {
var result = offendersHelpers.cssOffenderPattern('.pagination .plus ul li [inline CSS] @ 1:32');
result.should.deep.equal({
css: '.pagination .plus ul li',
file: null,
line: 1,
column: 32
});
});
+26 -10
View File
@@ -6,7 +6,8 @@
"message": "A great message",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": false
},
"value": 1236,
"bad": true,
@@ -22,11 +23,14 @@
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000,
"hasOffenders": true,
"takeOffendersFrom": "metric3"
},
"value": 222,
"offenders": "offender1 - offender2",
"offendersCount": 2,
"offendersObj": {
"count": 2,
"str": "offender1 - offender2"
},
"bad": false,
"abnormal": false,
"score": 100,
@@ -39,11 +43,14 @@
"message": "A great message",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": true
},
"value": 6666,
"offenders": "offender1/offender2",
"offendersCount": 2,
"offendersObj": {
"count": 2,
"test": "offender1/offender2"
},
"bad": true,
"abnormal": true,
"score": 0,
@@ -56,10 +63,14 @@
"message": "A great message",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": true
},
"value": 1000,
"offenders": ["offender3"],
"offendersObj": {
"count": 1,
"list": ["offender3"]
},
"bad": false,
"abnormal": false,
"score": 100,
@@ -73,10 +84,14 @@
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000,
"hasOffenders": true,
"takeOffendersFrom": ["metric3", "metric4"]
},
"value": 3000,
"offenders": ["offender1", "offender2", "offender3"],
"offendersObj": {
"count": 3,
"list": ["offender1", "offender2", "offender3"]
},
"bad": true,
"abnormal": false,
"score": 0,
@@ -120,7 +135,8 @@
"message": "<p>This is from another tool!</p>",
"isOkThreshold": 0,
"isBadThreshold": 3,
"isAbnormalThreshold": 11
"isAbnormalThreshold": 11,
"hasOffenders": false
},
"value": 22,
"bad": true,
+21 -7
View File
@@ -6,7 +6,8 @@ var policies = {
"message": "A great message",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": false
},
"metric2": {
"tool": "tool1",
@@ -16,8 +17,12 @@ var policies = {
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000,
"takeOffendersFrom": "metric3",
"hasOffenders": true,
"offendersTransformFn": function(offenders) {
return offenders.join(' - ');
return {
count: 2,
str: offenders.join(' - ')
};
}
},
"metric3": {
@@ -27,8 +32,12 @@ var policies = {
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000,
"hasOffenders": true,
"offendersTransformFn": function(offenders) {
return offenders.join('/');
return {
count: 2,
test: offenders.join('/')
};
}
},
"metric4": {
@@ -37,7 +46,8 @@ var policies = {
"message": "A great message",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": true,
},
"metric5": {
"tool": "tool1",
@@ -46,6 +56,7 @@ var policies = {
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000,
"hasOffenders": true,
"takeOffendersFrom": ["metric3", "metric4"]
},
"metric6": {
@@ -71,7 +82,8 @@ var policies = {
"message": "<p>This is from another tool!</p>",
"isOkThreshold": 0,
"isBadThreshold": 3,
"isAbnormalThreshold": 11
"isAbnormalThreshold": 11,
"hasOffenders": false,
},
"unexistantMetric": {
@@ -80,13 +92,15 @@ var policies = {
"message": "",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": true
},
"unexistantTool": {
"tool": "unexistant",
"isOkThreshold": 1000,
"isBadThreshold": 3000,
"isAbnormalThreshold": 5000
"isAbnormalThreshold": 5000,
"hasOffenders": false
}
};