diff --git a/Gruntfile.js b/Gruntfile.js index 8b88cc7..3c3fb24 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -100,7 +100,10 @@ module.exports = function( grunt ) { 'consoleMessages' : 0, 'hiddenContentSize' : 65, 'jsErrors' : 0, - 'gzipRequests' : 8, + 'gzipRequests' : { + 'type' : '<', + 'value' : 8 + }, 'medianResponse' : 400, 'nodesWithInlineCSS' : 0, 'requests' : 30, diff --git a/README.md b/README.md index dfb3bba..5aeddf1 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ If you don't like the phantomas default styling and want to customize it, you ca Type: `Object` Default Value: `{}` -An object that represents possible assertions for your generated UI. Best way is to run `grunt-phantomas` once and setting these values afterwards for particular metrics. The UI will warn you whenever the `median` value of your defined runs of a specific metric will go over the specified value by highlighting depending graphs and showing warnings on top of the builded UI. Using this option you can easily keep track of getting worse values. Performance budget for the win. :) +An object that represents possible assertions for your generated UI. Best way is to run `grunt-phantomas` once and setting these values afterwards for particular metrics. The UI will warn you whenever the `median` value of your defined runs of a specific metric will go over the specified value by highlighting depending graphs and showing warnings on top of the built UI. Using this option you can easily keep track of getting worse values. Performance budget for the win. :) Example: @@ -69,9 +69,13 @@ phantomas : { grunt : { options : { assertions : { - 'assetsWithQueryString' : 3, // receive warning, when there are more than 3 assets with a query string - 'bodyHTMLSize' : 10500, // receive warning, when the bodyHTMLsize is bigger than 10500 - 'jsErrors' : 0 // receive warning, when JS errors appear + assetsWithQueryString : 3, // receive warning, when there are more than 3 assets with a query string + bodyHTMLSize : 10500, // receive warning, when the bodyHTMLsize is bigger than 10500 + jsErrors : 0, // receive warning, when more than 0 JS errors appear + gzipRequests : { // receive warning, when less compressed assets are loaded then 10 ( might be useful for checking server configurations ) + type : '<', + value : 10 + } } indexPath : './phantomas/', options : { diff --git a/tasks/assets/sass/_variables.scss b/tasks/assets/sass/_variables.scss index b15d985..ea41365 100644 --- a/tasks/assets/sass/_variables.scss +++ b/tasks/assets/sass/_variables.scss @@ -50,6 +50,7 @@ $d-baseWidth : 98%; */ $z-filmstrip-time : 5; $z-header : 6; +$z-loading : 5; /** diff --git a/tasks/assets/sass/components/_graphs.scss b/tasks/assets/sass/components/_graphs.scss index 636c5ed..4df424e 100644 --- a/tasks/assets/sass/components/_graphs.scss +++ b/tasks/assets/sass/components/_graphs.scss @@ -289,11 +289,6 @@ fill : none; } - > rect { - fill : $c-red; - stroke : none; - } - > text { stroke : $c-white; text-anchor : middle; @@ -302,6 +297,15 @@ } } +.p--lineChart--assertionBox { + fill : rgba( 255, 0, 0, 0.2 ); +} + +.p--lineChart--assertionTextBg { + fill : $c-red; + stroke : none; +} + .p--lineChart--areaLine { fill : none; stroke : $c-green; diff --git a/tasks/assets/scripts/phantomas.js b/tasks/assets/scripts/phantomas.js index 0876b28..38f642b 100644 --- a/tasks/assets/scripts/phantomas.js +++ b/tasks/assets/scripts/phantomas.js @@ -80,9 +80,19 @@ circleContainer.datum( datum ) .append( 'circle' ) .attr( 'class', function( d ) { - return ( assertionValue && d.value[ type ] > assertionValue ) ? - 'lineChart--circle failed' : - 'lineChart--circle'; + if ( assertionValue ) { + if ( assertionValue.type === '>' ) { + return ( d.value[ type ] > assertionValue.value ) ? + 'lineChart--circle failed' : + 'lineChart--circle'; + } else { + return ( d.value[ type ] < assertionValue.value ) ? + 'lineChart--circle failed' : + 'lineChart--circle'; + } + } + + return 'lineChart--circle'; } ) .attr( 'r', 4 ) .attr( @@ -144,9 +154,19 @@ .attr( 'class', function( d ) { - return ( assertionValue && d.value[ type ] > assertionValue ) ? - 'lineChart--circle highlighted failed' : - 'lineChart--circle highlighted'; + if ( assertionValue ) { + if ( assertionValue.type === '>' ) { + return ( assertionValue && d.value[ type ] > assertionValue.value ) ? + 'lineChart--circle highlighted failed' : + 'lineChart--circle highlighted'; + } else { + return ( assertionValue && d.value[ type ] < assertionValue.value ) ? + 'lineChart--circle highlighted failed' : + 'lineChart--circle highlighted'; + } + } + + return 'lineChart--circle highlighted'; } ) .attr( 'r', 6 ); @@ -156,9 +176,19 @@ .attr( 'class', function( d ) { - return ( assertionValue && d.value[ type ] > assertionValue ) ? - 'lineChart--circle failed' : - 'lineChart--circle'; + if ( assertionValue ) { + if ( assertionValue.type === '>' ) { + return ( d.value[ type ] > assertionValue.value ) ? + 'lineChart--circle failed' : + 'lineChart--circle'; + } else { + return ( d.value[ type ] < assertionValue.value ) ? + 'lineChart--circle failed' : + 'lineChart--circle'; + } + } + + return 'lineChart--circle'; } ) .attr( 'r', 4 ); @@ -237,7 +267,7 @@ var assertionValue = null; if ( data[ data.length - 1 ].assertions[ metric ] ) { - assertionValue = data[ data.length - 1 ].assertions[ metric ].value; + assertionValue = data[ data.length - 1 ].assertions[ metric ]; } // data manipulation first @@ -310,9 +340,9 @@ 0, d3.max( data, function( d ) { if ( d.value ) { - return ( d.value[ type ] > assertionValue ) ? + return ( !assertionValue || d.value[ type ] > assertionValue.value ) ? d.value[ type ] : - assertionValue; + assertionValue.value; } else { return 0; } @@ -347,9 +377,27 @@ // add assertion graphics if ( assertionValue !== null ) { assertionGroup = svg.append( 'g' ) - .attr( 'transform', 'translate( 0,' + y( assertionValue ) + ')' ) + .attr( 'transform', 'translate( 0,' + y( assertionValue.value ) + ')' ) .attr( 'class', 'p--lineChart--assertion' ); + if ( assertionValue.type === '>' ) { + assertionGroup.append( 'rect' ) + .attr( 'class', 'p--lineChart--assertionBox' ) + .attr( 'x', 0 ) + .attr( 'y', -y( assertionValue.value ) ) + .attr( 'width', width ) + .attr( 'height', y( assertionValue.value ) ) + .attr( 'fill', 'rgba( 255, 0, 0, 0.5 )' ); + } else { + assertionGroup.append( 'rect' ) + .attr( 'class', 'p--lineChart--assertionBox' ) + .attr( 'x', 0 ) + .attr( 'y', 0 ) + .attr( 'width', width ) + .attr( 'height', height - y( assertionValue.value ) ) + .attr( 'fill', 'rgba( 255, 0, 0, 0.5 )' ); + } + assertionGroup.append( 'line' ) .attr( 'x1', 0 ) .attr( 'y1', 0 ) @@ -358,6 +406,7 @@ .attr( 'class', 'p--lineChart--assertion' ); assertionGroup.append( 'rect' ) + .attr( 'class', 'p--lineChart--assertionTextBg' ) .attr( 'width', 50 ) .attr( 'height', 20 ) .attr( 'x', 0 ) @@ -366,7 +415,7 @@ assertionGroup.append( 'text' ) .attr( 'x', 25 ) .attr( 'y', 4 ) - .text( assertionValue ); + .text( assertionValue.type + ' ' + assertionValue.value ); } // Add the area path. diff --git a/tasks/lib/phantomas.js b/tasks/lib/phantomas.js index d0388ce..4af0520 100644 --- a/tasks/lib/phantomas.js +++ b/tasks/lib/phantomas.js @@ -52,7 +52,7 @@ var Phantomas = function( grunt, options, done ) { this.failedAssertions = []; this.grunt = grunt; this.imagePath = path.normalize( options.indexPath + 'images/' ); - this.options = options; + this.options = this.normalizeOptions( options ); this.timestamp = +new Date(); this.buildUi = options.buildUi; }; @@ -346,13 +346,7 @@ Phantomas.prototype.executePhantomas = function() { Phantomas.prototype.formResult = function( results ) { this.grunt.log.ok( this.options.numberOfRuns + ' Phantomas execution(s) done -> checking results:' ); return new Promise( function( resolve ) { - var assertions = _.reduce( this.options.assertions, function( result, num, key ) { - result[ key ] = { - value : num - }; - - return result; - }, {} ), + var assertions = this.options.assertions, entries = {}, offenders = {}, fulfilledPromise = _.filter( results, function( promise ) { @@ -462,11 +456,27 @@ Phantomas.prototype.formResult = function( results ) { // depending on median // to failedAssertions sum up if ( - typeof this.options.assertions[ metric ] === 'number' && - entry.median > this.options.assertions[ metric ] && - _.indexOf( this.failedAssertions, metric ) === -1 + typeof this.options.assertions[ metric ] !== 'undefined' && + _.indexOf( this.failedAssertions, metric ) === -1 && + ( + this.options.assertions[ metric ].type === '>' || + this.options.assertions[ metric ].type === '<' + ) && + typeof this.options.assertions[ metric ].value === 'number' ) { - this.failedAssertions.push( metric ); + if ( + this.options.assertions[ metric ].type === '>' && + entry.median > this.options.assertions[ metric ].value + ) { + this.failedAssertions.push( metric ); + } + + if ( + this.options.assertions[ metric ].type === '<' && + entry.median < this.options.assertions[ metric ].value + ) { + this.failedAssertions.push( metric ); + } } } @@ -548,6 +558,31 @@ Phantomas.prototype.kickOff = function() { }; +/** + * Normalize the handed in options object + * to deal with legacy configs and different + * allowed option settings + * + * @param {Object} options options + * @return {Object} normalized options + * + * @tested + */ +Phantomas.prototype.normalizeOptions = function( options ) { + + options.assertions = _.mapValues( options.assertions, function( assertion ) { + return ( typeof assertion === 'number' ) ? + { + type : '>', + value : assertion + } : + assertion; + } ); + + return options; +}; + + /** * Notify about not displayed metrics during * the build process diff --git a/tasks/public/scripts/phantomas.min.js b/tasks/public/scripts/phantomas.min.js index 1a3d514..50558b5 100644 --- a/tasks/public/scripts/phantomas.min.js +++ b/tasks/public/scripts/phantomas.min.js @@ -1 +1 @@ -!function(d3,window,document){function addEvent(obj,type,fn){obj.attachEvent?(obj["e"+type+fn]=fn,obj[type+fn]=function(){obj["e"+type+fn](window.event)},obj.attachEvent("on"+type,obj[type+fn])):obj.addEventListener(type,fn,!1)}function getParent(el,className){for(var parent=null,p=el.parentNode;null!==p;){var o=p;if(o.classList.contains(className)){parent=o;break}p=o.parentNode}return parent}function drawLineChart(data,metric,type){function drawCircle(datum){circleContainer.datum(datum).append("circle").attr("class",function(d){return assertionValue&&d.value[type]>assertionValue?"lineChart--circle failed":"lineChart--circle"}).attr("r",4).attr("cx",function(d){return x(d.date)+detailWidth/2}).attr("cy",function(d){return y(d.value[type])}).attr("data-average",function(d){return d.value.average}).attr("data-timestamp",function(d){return+d.date}).attr("data-max",function(d){return d.value.max}).attr("data-median",function(d){return d.value.median}).attr("data-metric",function(){return metric}).attr("data-min",function(d){return d.value.min}).attr("data-sum",function(d){return d.value.sum}).on("mouseenter",function(){d3.select(this).attr("class",function(d){return assertionValue&&d.value[type]>assertionValue?"lineChart--circle highlighted failed":"lineChart--circle highlighted"}).attr("r",6)}).on("mouseout",function(){d3.select(this).attr("class",function(d){return assertionValue&&d.value[type]>assertionValue?"lineChart--circle failed":"lineChart--circle"}).attr("r",4)})}function drawCircles(data){circleContainer||(circleContainer=svg.append("g")),circleContainer.selectAll("circle").remove(),data.forEach(drawCircle)}function redraw(){svg.select(".lineChart--xAxis").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.select(".lineChart--xAxisTicks").call(xAxisTicks),svg.select(".p--lineChart--area").attr("d",area),svg.select(".p--lineChart--areaLine").attr("d",line),drawCircles(data)}function zoomed(){redraw(),svg.select(".p--lineChart--reset").attr("class","p--lineChart--reset active"),svg.select(".p--lineChart--resetText").attr("class","p--lineChart--resetText active")}function unZoomed(){zoom.translate([0,0]).scale(1),redraw(),svg.select(".p--lineChart--reset").attr("class","p--lineChart--reset"),svg.select(".p--lineChart--resetText").attr("class","p--lineChart--resetText")}var assertionValue=null;data[data.length-1].assertions[metric]&&(assertionValue=data[data.length-1].assertions[metric].value),data=data.reduce(function(newData,datum){return datum.metrics[metric]&&newData.push({date:new Date(datum.timestamp),value:datum.metrics[metric]}),newData},[]);var assertionGroup,circleContainer,zoom,containerEl=document.getElementById("graph--"+metric),width=containerEl.clientWidth,height=.4*width,margin={top:20,bottom:60},detailWidth=115,container=d3.select(containerEl),svg=container.select(".p--graphs--svg").attr("width",width).attr("height",height+margin.top+margin.bottom).attr("class","p--graphs--svg is-initialized"),x=d3.time.scale().range([0,width-detailWidth]),xAxis=d3.svg.axis().scale(x).ticks(8).tickSize(-height),xAxisTicks=d3.svg.axis().scale(x).ticks(16).tickSize(-height).tickFormat(""),y=d3.scale.linear().range([height,margin.top]),yAxisTicks=d3.svg.axis().scale(y).ticks(12).tickSize(width).tickFormat("").orient("right"),area=d3.svg.area().interpolate("linear").x(function(d){return x(d.date)+detailWidth/2}).y0(height).y1(function(d){return y(d.value[type])}),line=d3.svg.line().interpolate("linear").x(function(d){return x(d.date)+detailWidth/2}).y(function(d){return y(d.value[type])}),loader=container.select(".p--graphs--loading");x.domain([data[0].date,data[data.length-1].date]),y.domain([0,d3.max(data,function(d){return d.value?d.value[type]>assertionValue?d.value[type]:assertionValue:0})]),loader.attr("class","p--graphs--loading"),svg.empty()||svg.selectAll("g, path, rect, text, line").remove(),svg.append("g").attr("class","lineChart--xAxisTicks").attr("transform","translate("+detailWidth/2+","+height+")").call(xAxisTicks),svg.append("g").attr("class","lineChart--xAxis").attr("transform","translate("+detailWidth/2+","+(height+5)+")").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.append("g").attr("class","lineChart--yAxisTicks").call(yAxisTicks),null!==assertionValue&&(assertionGroup=svg.append("g").attr("transform","translate( 0,"+y(assertionValue)+")").attr("class","p--lineChart--assertion"),assertionGroup.append("line").attr("x1",0).attr("y1",0).attr("x2",width).attr("y2",0).attr("class","p--lineChart--assertion"),assertionGroup.append("rect").attr("width",50).attr("height",20).attr("x",0).attr("y",-10),assertionGroup.append("text").attr("x",25).attr("y",4).text(assertionValue)),svg.append("path").datum(data).attr("class","p--lineChart--area").attr("d",area),svg.append("path").datum(data).attr("class","p--lineChart--areaLine").attr("d",line),zoom=d3.behavior.zoom().x(x).scaleExtent([1,100]).on("zoom",zoomed),svg.append("rect").attr("class","p--lineChart--pane").attr("width",width).attr("height",height).call(zoom),drawCircles(data),svg.append("rect").attr("class","p--lineChart--reset").attr("width",77).attr("height",23).attr("x",width-77).attr("y",2).on("click",unZoomed),svg.append("text").attr("class","p--lineChart--resetText").attr("x",width-38).attr("y",17).text("reset").on("click",unZoomed)}function appendDetailBoxForCircle(circle){removeDetailBoxForCircle(circle);var bBox=circle.getBBox(),detailBox=document.createElement("div"),listContainer=getParent(circle,"p--graphs--graph");detailBox.innerHTML="
Average:
"+circle.attributes.getNamedItem("data-average").value+"
Max:
"+circle.attributes.getNamedItem("data-max").value+"
Median:
"+circle.attributes.getNamedItem("data-median").value+"
Min:
"+circle.attributes.getNamedItem("data-min").value+"
Sum:
"+circle.attributes.getNamedItem("data-sum").value+"
",detailBox.style.left=bBox.x-71+"px",detailBox.style.top=bBox.y-75+"px",detailBox.classList.add("p--graphs--detailBox"),listContainer.appendChild(detailBox)}function removeDetailBoxForCircle(circle){var listContainer=getParent(circle,"p--graphs--graph"),detailBox=listContainer.querySelector(".p--graphs--detailBox");detailBox&&listContainer.removeChild(detailBox)}function attachCircleEvents(){var mainContainer=document.getElementsByTagName("main")[0];addEvent(mainContainer,"mouseover",function(event){"circle"===event.target.tagName&&(appendDetailBoxForCircle(event.target),highlightTableRow(event.target))}),addEvent(mainContainer,"mouseout",function(event){"circle"===event.target.tagName&&(removeDetailBoxForCircle(event.target),unhighlightTableRow(event.target))})}function attachClickEvents(){var body=document.querySelector("body"),headerHeight=document.getElementsByTagName("header")[0].getBoundingClientRect().height,overlay=document.getElementById("p--modal__overlay"),closeButton=document.getElementById("p--modal__close");addEvent(body,"click",function(event){if(event.target.classList.contains("js-expand")&&document.getElementById("p--table--container--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("expanded"),event.target.classList.contains("js-offenders")&&(overlay.style.display="block",overlay.style.opacity=.5,closeButton.style.display="block",document.getElementById("offender--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("in-modal")),(event.target===overlay||event.target===closeButton)&&(overlay.style.opacity=0,overlay.style.display="none",closeButton.style.display="none",document.querySelector(".in-modal").classList.toggle("in-modal")),event.target.classList.contains("js-scroll")){event.preventDefault();var yPosition=0,element=document.getElementById(event.target.href.split("#")[1]);if(element.offsetParent)do yPosition+=element.offsetTop;while(element=element.offsetParent);window.scrollTo(0,yPosition-headerHeight-20)}})}function attachDescriptionEvents(){var body=document.querySelector("body");addEvent(body,"mouseover",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.removeAttribute("hidden"),event.preventDefault()}}),addEvent(body,"mouseout",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.setAttribute("hidden","hidden"),event.preventDefault()}}),addEvent(body,"click",function(event){"A"===event.target.tagName&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))&&event.preventDefault()})}function attachHeaderEvents(){var body=document.querySelector("body"),container=document.getElementById("p--header--notification");addEvent(body,"mouseover",function(event){event.target.classList.contains("js-warning")&&(container.innerHTML=event.target.innerHTML)})}function attachMetricChangeEvent(){var switcher=document.getElementById("p--switcher--metrics");addEvent(switcher,"change",function(event){drawLineCharts(window.results,event.target.value)})}function attachEventListeners(){attachCircleEvents(),attachClickEvents(),attachDescriptionEvents(),attachHeaderEvents(),attachMetricChangeEvent()}function unhighlightTableRow(target){var row=document.querySelectorAll("#"+target.attributes.getNamedItem("data-metric").value+"--row--"+target.attributes.getNamedItem("data-timestamp").value);row.length&&row[0].classList.remove("active")}function highlightTableRow(target){var metric=target.attributes.getNamedItem("data-metric").value,row=document.getElementById(metric+"--row--"+target.attributes.getNamedItem("data-timestamp").value),scrollContainer=document.getElementById("p--table--container--"+metric);row&&scrollContainer&&(scrollContainer.scrollTop=row.offsetTop,row.classList.add("active"))}function drawLineCharts(data,type){for(var lastMetric=data[data.length-1],loaders=document.querySelectorAll(".p--graphs--loading"),i=0;i"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]"===assertionValue.type?assertionValue&&d.value[type]>assertionValue.value?"lineChart--circle highlighted failed":"lineChart--circle highlighted":assertionValue&&d.value[type]"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]assertionValue.value?d.value[type]:assertionValue.value:0})]),loader.attr("class","p--graphs--loading"),svg.empty()||svg.selectAll("g, path, rect, text, line").remove(),svg.append("g").attr("class","lineChart--xAxisTicks").attr("transform","translate("+detailWidth/2+","+height+")").call(xAxisTicks),svg.append("g").attr("class","lineChart--xAxis").attr("transform","translate("+detailWidth/2+","+(height+5)+")").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.append("g").attr("class","lineChart--yAxisTicks").call(yAxisTicks),null!==assertionValue&&(assertionGroup=svg.append("g").attr("transform","translate( 0,"+y(assertionValue.value)+")").attr("class","p--lineChart--assertion"),">"===assertionValue.type?assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",-y(assertionValue.value)).attr("width",width).attr("height",y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"):assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",0).attr("width",width).attr("height",height-y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"),assertionGroup.append("line").attr("x1",0).attr("y1",0).attr("x2",width).attr("y2",0).attr("class","p--lineChart--assertion"),assertionGroup.append("rect").attr("class","p--lineChart--assertionTextBg").attr("width",50).attr("height",20).attr("x",0).attr("y",-10),assertionGroup.append("text").attr("x",25).attr("y",4).text(assertionValue.type+" "+assertionValue.value)),svg.append("path").datum(data).attr("class","p--lineChart--area").attr("d",area),svg.append("path").datum(data).attr("class","p--lineChart--areaLine").attr("d",line),zoom=d3.behavior.zoom().x(x).scaleExtent([1,100]).on("zoom",zoomed),svg.append("rect").attr("class","p--lineChart--pane").attr("width",width).attr("height",height).call(zoom),drawCircles(data),svg.append("rect").attr("class","p--lineChart--reset").attr("width",77).attr("height",23).attr("x",width-77).attr("y",2).on("click",unZoomed),svg.append("text").attr("class","p--lineChart--resetText").attr("x",width-38).attr("y",17).text("reset").on("click",unZoomed)}function appendDetailBoxForCircle(circle){removeDetailBoxForCircle(circle);var bBox=circle.getBBox(),detailBox=document.createElement("div"),listContainer=getParent(circle,"p--graphs--graph");detailBox.innerHTML="
Average:
"+circle.attributes.getNamedItem("data-average").value+"
Max:
"+circle.attributes.getNamedItem("data-max").value+"
Median:
"+circle.attributes.getNamedItem("data-median").value+"
Min:
"+circle.attributes.getNamedItem("data-min").value+"
Sum:
"+circle.attributes.getNamedItem("data-sum").value+"
",detailBox.style.left=bBox.x-71+"px",detailBox.style.top=bBox.y-75+"px",detailBox.classList.add("p--graphs--detailBox"),listContainer.appendChild(detailBox)}function removeDetailBoxForCircle(circle){var listContainer=getParent(circle,"p--graphs--graph"),detailBox=listContainer.querySelector(".p--graphs--detailBox");detailBox&&listContainer.removeChild(detailBox)}function attachCircleEvents(){var mainContainer=document.getElementsByTagName("main")[0];addEvent(mainContainer,"mouseover",function(event){"circle"===event.target.tagName&&(appendDetailBoxForCircle(event.target),highlightTableRow(event.target))}),addEvent(mainContainer,"mouseout",function(event){"circle"===event.target.tagName&&(removeDetailBoxForCircle(event.target),unhighlightTableRow(event.target))})}function attachClickEvents(){var body=document.querySelector("body"),headerHeight=document.getElementsByTagName("header")[0].getBoundingClientRect().height,overlay=document.getElementById("p--modal__overlay"),closeButton=document.getElementById("p--modal__close");addEvent(body,"click",function(event){if(event.target.classList.contains("js-expand")&&document.getElementById("p--table--container--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("expanded"),event.target.classList.contains("js-offenders")&&(overlay.style.display="block",overlay.style.opacity=.5,closeButton.style.display="block",document.getElementById("offender--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("in-modal")),(event.target===overlay||event.target===closeButton)&&(overlay.style.opacity=0,overlay.style.display="none",closeButton.style.display="none",document.querySelector(".in-modal").classList.toggle("in-modal")),event.target.classList.contains("js-scroll")){event.preventDefault();var yPosition=0,element=document.getElementById(event.target.href.split("#")[1]);if(element.offsetParent)do yPosition+=element.offsetTop;while(element=element.offsetParent);window.scrollTo(0,yPosition-headerHeight-20)}})}function attachDescriptionEvents(){var body=document.querySelector("body");addEvent(body,"mouseover",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.removeAttribute("hidden"),event.preventDefault()}}),addEvent(body,"mouseout",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.setAttribute("hidden","hidden"),event.preventDefault()}}),addEvent(body,"click",function(event){"A"===event.target.tagName&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))&&event.preventDefault()})}function attachHeaderEvents(){var body=document.querySelector("body"),container=document.getElementById("p--header--notification");addEvent(body,"mouseover",function(event){event.target.classList.contains("js-warning")&&(container.innerHTML=event.target.innerHTML)})}function attachMetricChangeEvent(){var switcher=document.getElementById("p--switcher--metrics");addEvent(switcher,"change",function(event){drawLineCharts(window.results,event.target.value)})}function attachEventListeners(){attachCircleEvents(),attachClickEvents(),attachDescriptionEvents(),attachHeaderEvents(),attachMetricChangeEvent()}function unhighlightTableRow(target){var row=document.querySelectorAll("#"+target.attributes.getNamedItem("data-metric").value+"--row--"+target.attributes.getNamedItem("data-timestamp").value);row.length&&row[0].classList.remove("active")}function highlightTableRow(target){var metric=target.attributes.getNamedItem("data-metric").value,row=document.getElementById(metric+"--row--"+target.attributes.getNamedItem("data-timestamp").value),scrollContainer=document.getElementById("p--table--container--"+metric);row&&scrollContainer&&(scrollContainer.scrollTop=row.offsetTop,row.classList.add("active"))}function drawLineCharts(data,type){for(var lastMetric=data[data.length-1],loaders=document.querySelectorAll(".p--graphs--loading"),i=0;ia{position:relative;display:block;margin:0 0.25em;width:2em;height:0;padding-top:2em;overflow:hidden;background:#a33838;cursor:pointer}.p--header--warnings li>a:before{position:absolute;content:'!';top:0;left:0;bottom:0;right:0;line-height:1.5;text-align:center;font-size:1.5em;color:#fff}[class*="p--switcher"]{float:right;margin:0;padding:0}.p--filmstrip{list-style:none;margin:0;padding:0 1em}.p--filmstrip li{width:99%;position:relative;background:#fff;margin:0.5%;padding:0;display:inline-block;vertical-align:top}@media screen and (min-width: 700px){.p--filmstrip li{width:49%}}@media screen and (min-width: 1000px){.p--filmstrip li{width:24%}}.p--filmstrip img{width:100%}.p--filmstrip--time{position:relative;padding:0.5em;color:#fff;background:#45b5b3;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--filmstrip--time:before,.p--filmstrip--time:after{position:absolute;z-index:-1;content:'';right:0;top:100%;border-top:solid 0.5em transparent;border-left:solid 0.5em #45b5b3;border-bottom:solid 0.5em transparent;margin-top:-0.5em}.p--filmstrip--wrapper{position:absolute;z-index:5;top:1em;right:-0.5em}.p--footer{text-align:center}.p--graphs{position:relative;list-style:none;padding:0;margin:0}.p--graphs--button__expand,.p--graphs--button__offenders{position:absolute;height:2em;width:5.5em;top:0.25em;margin:0 0 1em 0;background-color:#45b5b3;border:none;color:#fff;text-align:center;-moz-transition:background-color 0.25s ease-in;-o-transition:background-color 0.25s ease-in;-webkit-transition:background-color 0.25s ease-in;transition:background-color 0.25s ease-in}.p--graphs--button__expand:hover,.p--graphs--button__offenders:hover{background-color:#68c5c4}.p--graphs--button__expand{left:0}.p--graphs--button__offenders{left:6em}.p--graphs--description,.p--graphs--warning{width:calc(80% - 5em );max-height:14em;position:absolute;top:0;right:7em;padding:1em 1em;overflow:hidden;color:#45b5b3;background-color:rgba(26,45,56,0.9)}.p--graphs--description[hidden],.p--graphs--warning[hidden]{display:none}.p--graphs--descriptionBtn,.p--graphs--warningBtn{position:absolute;top:0.25em;width:1.5em;height:0;padding:1.5em 0 0 0;overflow:hidden;cursor:default;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;-webkit-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.p--graphs--descriptionBtn.active,.p--graphs--warningBtn.active{cursor:pointer}.p--graphs--descriptionBtn:before,.p--graphs--warningBtn:before{position:absolute;content:'?';color:#fff;top:0;right:0;bottom:0;left:0;text-align:center;line-height:1.5em}.p--graphs--descriptionBtn{right:0;background-color:rgba(69,181,179,0.1)}.p--graphs--descriptionBtn.active{background-color:#45b5b3}.p--graphs--descriptionBtn.active:hover{background-color:#68c5c4}.p--graphs--descriptionBtn:before{content:'?'}.p--graphs--warningBtn{right:2em;background-color:rgba(155,142,180,0.1)}.p--graphs--warningBtn.active{background-color:#9b8eb4}.p--graphs--warningBtn.active:hover{background-color:#b6adc8}.p--graphs--warningBtn:before{content:'!'}.p--graphs--detailBox{position:absolute;width:150px;padding:0.5em;background-color:rgba(26,45,56,0.9);color:#45b5b3;text-align:center;border-radius:3px}.p--graphs--detailBox:before{position:absolute;content:'';width:0;height:0;top:100%;left:50%;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(26,45,56,0.9)}.p--graphs--detailBox dl{margin:0;padding:0}.p--graphs--detailBox dt,.p--graphs--detailBox dd{display:inline-block;width:calc(50% );margin:0;padding:0}.p--graphs--detailBox dt{text-align:left}.p--graphs--detailBox dd{text-align:right}.p--graphs--graph{position:relative;width:100%;min-height:250px;display:inline-block;vertical-align:top;border-bottom:1px solid #45b5b3;box-shadow:0 1px 0 #1a2d38;margin:0 2.5% 2.5em 2.5%}.p--graphs--graph.failed{box-shadow:0 0 0 3px #a33838,0 0 1px 4px #1a2d38}@media screen and (min-width: 700px){.p--graphs--graph{width:45%;margin:0 2.5% 2.5em 2.5%}}@media screen and (min-width: 1000px){.p--graphs--graph{width:31.333%;margin:0 1% 2.5em 1%}} -.p--graphs--loading{display:none;position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.25)}.p--graphs--loading .spinner{position:absolute;top:40%;left:50%;margin-left:-2em;height:4em;width:4em;border:0.5em solid #45b5b3;border-top:0.5em solid #8dd3d2;border-radius:100%;-moz-animation:rotator 2s infinite linear;-webkit-animation:rotator 2s infinite linear;animation:rotator 2s infinite linear}.p--graphs--loading.is-active{display:block}.p--graphs--svg{width:100%;height:0;padding-top:calc(40% + 80px )}.p--graphs--svg.is-initialized{height:auto;padding:0}.p--lineChart--area{fill:rgba(77,98,109,0.5)}.p--lineChart--assertion>line{stroke:rgba(163,56,56,0.85);stroke-width:2;fill:none}.p--lineChart--assertion>rect{fill:#a33838;stroke:none}.p--lineChart--assertion>text{stroke:#fff;text-anchor:middle;font-size:0.75em}.p--lineChart--areaLine{fill:none;stroke:#45b5b3;stroke-width:2}.p--lineChart--pane{cursor:move;fill:none;pointer-events:all}.p--lineChart--reset,.p--lineChart--resetText{display:none;cursor:pointer}.p--lineChart--reset.active,.p--lineChart--resetText.active{display:block}.p--lineChart--reset{fill:rgba(69,181,179,0.8)}.p--lineChart--reset:hover{fill:rgba(104,197,196,0.8)}.p--lineChart--resetText{fill:#fff;text-anchor:middle;font-size:0.8em}.lineChart--bubble--label{fill:none;font-style:italic}.lineChart--bubble--value{fill:#fff;stroke:#fff}.lineChart--circle{fill:#49a2dc;stroke:#fff;stroke-width:2;cursor:pointer}.lineChart--circle.failed{fill:#a33838}.lineChart--circle.failed.highlighted{fill:#a33838}.lineChart--circle.highlighted{fill:#9b8eb4;stroke:#fff}.lineChart--gradientBackgroundArea--top{stop-opacity:0.1}.lineChart--gradientBackgroundArea--bottom{stop-opacity:0.6}.lineChart--xAxisTicks .domain,.lineChart--xAxis .domain,.lineChart--yAxisTicks .domain{display:none}.lineChart--xAxis .tick line{display:none}.lineChart--xAxis .tick text{fill:#fff}.lineChart--xAxisTicks .tick line,.lineChart--yAxisTicks .tick line{fill:none;stroke:#4d626d;stroke-width:1}@-moz-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@-webkit-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.p--offenders{margin:0}.p--offenders:before,.p--offenders:after{content:" ";display:table}.p--offenders:after{clear:both}.p--offenders dt{position:relative;margin:0.75em 0 1em -0.5em;padding:0.5em;font-size:1.25em;font-weight:100;line-height:1.25em;color:#fff;background-color:#9b8eb4;display:inline-block;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--offenders dt:before{position:absolute;z-index:-1;left:0;top:100%;margin-top:-0.5em;content:'';border-top:solid 0.5em transparent;border-right:solid 0.5em #9b8eb4;border-bottom:solid 0.5em transparent}.p--offenders dd{margin:0 0 0.25em 1%;line-height:1.25em;font-size:0.9em;width:98%;display:block;overflow:auto;padding:0.75em}.p--offenders dd:nth-child(2n){background:#223a49}.p--offenders--headline{margin-left:-0.5em}#p--modal__overlay{opacity:0;position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;background:#000;display:none}.p--offenders__header{display:none}.p--offenders__container{display:none;opacity:0;transition:opacity 1s linear}.p--offenders__container.in-modal{display:block;opacity:1;position:fixed;left:5em;right:5em;top:3em;max-height:80vh;padding-bottom:2em;z-index:11000;background:#253f50}.p--offenders__terms{overflow-y:auto;max-height:65vh}#p--modal__close{position:fixed;right:6.4em;top:3.8em;z-index:12000;display:none;color:#fff;border:none;background:none;width:6em;height:0;margin:0;padding:6em 0 0 0;overflow:hidden}#p--modal__close:hover,#p--modal__close:focus{border-color:transparent #68c5c4 transparent transparent}#p--modal__close:active:before{border-color:transparent #37908e transparent transparent}#p--modal__close:before{position:absolute;top:0;left:0;content:'';border-style:solid;border-width:0 6em 6em 0;border-color:transparent #45b5b3 transparent transparent}#p--modal__close:after{content:'×';position:absolute;top:1em;left:2.8em;font-size:1.25em}.p--table{width:100%;color:#fff;font-size:11.2px;margin:0;border-top:1px solid #274354}.p--table--column,.p--table--column__highlight{width:12.5%;text-align:center}.p--table--column__highlight{color:#45b5b3;-moz-transition:color 0.1s ease-in;-o-transition:color 0.1s ease-in;-webkit-transition:color 0.1s ease-in;transition:color 0.1s ease-in}.p--table--container{max-height:0;margin:0;overflow:scroll;-moz-transition:max-height 1s;-o-transition:max-height 1s;-webkit-transition:max-height 1s;transition:max-height 1s}.p--table--container.expanded{max-height:500em}.p--table--head{color:#45b5b3;font-weight:100}.p--table--head th{padding:1em 0;border-bottom:1px solid #1a2d38;font-weight:100}.p--table--body .p--table--row{-moz-transition:background-color 0.1s ease-in;-o-transition:background-color 0.1s ease-in;-webkit-transition:background-color 0.1s ease-in;transition:background-color 0.1s ease-in}.p--table--body .p--table--row.active{background-color:#45b5b3 !important}.p--table--body .p--table--row.active .p--table--column__highlight{color:#fff}.p--table--body .p--table--row:nth-child(2n+1){background-color:#274354}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both} +.p--graphs--loading{display:none;position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.25)}.p--graphs--loading .spinner{position:absolute;top:40%;left:50%;margin-left:-2em;height:4em;width:4em;border:0.5em solid #45b5b3;border-top:0.5em solid #8dd3d2;border-radius:100%;-moz-animation:rotator 2s infinite linear;-webkit-animation:rotator 2s infinite linear;animation:rotator 2s infinite linear}.p--graphs--loading.is-active{display:block}.p--graphs--svg{width:100%;height:0;padding-top:calc(40% + 80px )}.p--graphs--svg.is-initialized{height:auto;padding:0}.p--lineChart--area{fill:rgba(77,98,109,0.5)}.p--lineChart--assertion>line{stroke:rgba(163,56,56,0.85);stroke-width:2;fill:none}.p--lineChart--assertion>text{stroke:#fff;text-anchor:middle;font-size:0.75em}.p--lineChart--assertionBox{fill:rgba(255,0,0,0.2)}.p--lineChart--assertionTextBg{fill:#a33838;stroke:none}.p--lineChart--areaLine{fill:none;stroke:#45b5b3;stroke-width:2}.p--lineChart--pane{cursor:move;fill:none;pointer-events:all}.p--lineChart--reset,.p--lineChart--resetText{display:none;cursor:pointer}.p--lineChart--reset.active,.p--lineChart--resetText.active{display:block}.p--lineChart--reset{fill:rgba(69,181,179,0.8)}.p--lineChart--reset:hover{fill:rgba(104,197,196,0.8)}.p--lineChart--resetText{fill:#fff;text-anchor:middle;font-size:0.8em}.lineChart--bubble--label{fill:none;font-style:italic}.lineChart--bubble--value{fill:#fff;stroke:#fff}.lineChart--circle{fill:#49a2dc;stroke:#fff;stroke-width:2;cursor:pointer}.lineChart--circle.failed{fill:#a33838}.lineChart--circle.failed.highlighted{fill:#a33838}.lineChart--circle.highlighted{fill:#9b8eb4;stroke:#fff}.lineChart--gradientBackgroundArea--top{stop-opacity:0.1}.lineChart--gradientBackgroundArea--bottom{stop-opacity:0.6}.lineChart--xAxisTicks .domain,.lineChart--xAxis .domain,.lineChart--yAxisTicks .domain{display:none}.lineChart--xAxis .tick line{display:none}.lineChart--xAxis .tick text{fill:#fff}.lineChart--xAxisTicks .tick line,.lineChart--yAxisTicks .tick line{fill:none;stroke:#4d626d;stroke-width:1}@-moz-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@-webkit-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.p--offenders{margin:0}.p--offenders:before,.p--offenders:after{content:" ";display:table}.p--offenders:after{clear:both}.p--offenders dt{position:relative;margin:0.75em 0 1em -0.5em;padding:0.5em;font-size:1.25em;font-weight:100;line-height:1.25em;color:#fff;background-color:#9b8eb4;display:inline-block;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--offenders dt:before{position:absolute;z-index:-1;left:0;top:100%;margin-top:-0.5em;content:'';border-top:solid 0.5em transparent;border-right:solid 0.5em #9b8eb4;border-bottom:solid 0.5em transparent}.p--offenders dd{margin:0 0 0.25em 1%;line-height:1.25em;font-size:0.9em;width:98%;display:block;overflow:auto;padding:0.75em}.p--offenders dd:nth-child(2n){background:#223a49}.p--offenders--headline{margin-left:-0.5em}#p--modal__overlay{opacity:0;position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;background:#000;display:none}.p--offenders__header{display:none}.p--offenders__container{display:none;opacity:0;transition:opacity 1s linear}.p--offenders__container.in-modal{display:block;opacity:1;position:fixed;left:5em;right:5em;top:3em;max-height:80vh;padding-bottom:2em;z-index:11000;background:#253f50}.p--offenders__terms{overflow-y:auto;max-height:65vh}#p--modal__close{position:fixed;right:6.4em;top:3.8em;z-index:12000;display:none;color:#fff;border:none;background:none;width:6em;height:0;margin:0;padding:6em 0 0 0;overflow:hidden}#p--modal__close:hover,#p--modal__close:focus{border-color:transparent #68c5c4 transparent transparent}#p--modal__close:active:before{border-color:transparent #37908e transparent transparent}#p--modal__close:before{position:absolute;top:0;left:0;content:'';border-style:solid;border-width:0 6em 6em 0;border-color:transparent #45b5b3 transparent transparent}#p--modal__close:after{content:'×';position:absolute;top:1em;left:2.8em;font-size:1.25em}.p--table{width:100%;color:#fff;font-size:11.2px;margin:0;border-top:1px solid #274354}.p--table--column,.p--table--column__highlight{width:12.5%;text-align:center}.p--table--column__highlight{color:#45b5b3;-moz-transition:color 0.1s ease-in;-o-transition:color 0.1s ease-in;-webkit-transition:color 0.1s ease-in;transition:color 0.1s ease-in}.p--table--container{max-height:0;margin:0;overflow:scroll;-moz-transition:max-height 1s;-o-transition:max-height 1s;-webkit-transition:max-height 1s;transition:max-height 1s}.p--table--container.expanded{max-height:500em}.p--table--head{color:#45b5b3;font-weight:100}.p--table--head th{padding:1em 0;border-bottom:1px solid #1a2d38;font-weight:100}.p--table--body .p--table--row{-moz-transition:background-color 0.1s ease-in;-o-transition:background-color 0.1s ease-in;-webkit-transition:background-color 0.1s ease-in;transition:background-color 0.1s ease-in}.p--table--body .p--table--row.active{background-color:#45b5b3 !important}.p--table--body .p--table--row.active .p--table--column__highlight{color:#fff}.p--table--body .p--table--row:nth-child(2n+1){background-color:#274354}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both} diff --git a/tasks/tpl/index.tpl b/tasks/tpl/index.tpl index 4261217..55d08bf 100644 --- a/tasks/tpl/index.tpl +++ b/tasks/tpl/index.tpl @@ -26,7 +26,7 @@ Frontend stats for <%= url %>
-

Stats for <%= url %>

+

Stats for <%= url %>

<% for ( var key in group ) { %> <% if ( group.hasOwnProperty( key ) ) { %>

<%= key %>

diff --git a/test/lib/phantomasTest.js b/test/lib/phantomasTest.js index 0157d15..7daa2e7 100644 --- a/test/lib/phantomasTest.js +++ b/test/lib/phantomasTest.js @@ -632,8 +632,22 @@ exports.phantomas = { var options = { url : 'http://test.com', assertions : { - metricA : 19, - metricB : 49 + metricA : { + type : '>', + value : 19 + }, + metricB : { + type : '>', + value : 49 + }, + metricC : { + type : '<', + value : 19 + }, + metricD : { + type : '<', + value : 49 + }, } }; var done = function() {}; @@ -649,6 +663,8 @@ exports.phantomas = { metrics : { metricA : 10, metricB : 40, + metricC : 10, + metricD : 40, jQueryVersion : '1.9.1' }, offenders : { @@ -668,6 +684,8 @@ exports.phantomas = { metrics : { metricA : 20, metricB : 50, + metricC : 20, + metricD : 50, jQueryVersion : '1.9.1' }, offenders : { @@ -687,6 +705,8 @@ exports.phantomas = { metrics : { metricA : 30, metricB : 60, + metricC : 14, + metricD : 40, jQueryVersion : '1.9.1' }, offenders : { @@ -724,6 +744,20 @@ exports.phantomas = { test.strictEqual( result.metrics.metricB.median, 50 ); test.strictEqual( result.metrics.metricB.average, 50 ); + test.strictEqual( typeof result.metrics.metricC, 'object' ); + test.strictEqual( result.metrics.metricC.sum, 44 ); + test.strictEqual( result.metrics.metricC.min, 10 ); + test.strictEqual( result.metrics.metricC.max, 20 ); + test.strictEqual( result.metrics.metricC.median, 14 ); + test.strictEqual( result.metrics.metricC.average, 14.67 ); + + test.strictEqual( typeof result.metrics.metricD, 'object' ); + test.strictEqual( result.metrics.metricD.sum, 130 ); + test.strictEqual( result.metrics.metricD.min, 40 ); + test.strictEqual( result.metrics.metricD.max, 50 ); + test.strictEqual( result.metrics.metricD.median, 40 ); + test.strictEqual( result.metrics.metricD.average, 43.33 ); + test.strictEqual( typeof result.offenders, 'object' ); test.strictEqual( result.offenders.foo instanceof Array, true ); test.strictEqual( result.offenders.foo.length, 2 ); @@ -732,7 +766,7 @@ exports.phantomas = { test.strictEqual( typeof result.jQueryVersion, 'undefined' ); - test.strictEqual( phantomas.failedAssertions.length, 2 ); + test.strictEqual( phantomas.failedAssertions.length, 4 ); test.notStrictEqual( _.indexOf( phantomas.failedAssertions, 'metricA' ), -1 @@ -741,12 +775,56 @@ exports.phantomas = { _.indexOf( phantomas.failedAssertions, 'metricB' ), -1 ); + test.notStrictEqual( + _.indexOf( phantomas.failedAssertions, 'metricC' ), + -1 + ); + test.notStrictEqual( + _.indexOf( phantomas.failedAssertions, 'metricD' ), + -1 + ); test.done(); } ); }, + normalizeOptions : function( test ) { + var options = { + foo : 'jojojo', + assertions : { + foo : 4, + bar : { + type : '>', + value : 12 + }, + baz : { + type : '<', + value : 14 + } + } + }; + + var done = function() {}; + var phantomas = new Phantomas( grunt, {}, done ); + + var normalizedOptions = phantomas.normalizeOptions( options ); + + test.strictEqual( normalizedOptions.foo, 'jojojo' ); + test.strictEqual( typeof normalizedOptions.assertions.foo, 'object' ); + test.strictEqual( normalizedOptions.assertions.foo.type, '>' ); + test.strictEqual( normalizedOptions.assertions.foo.value, 4 ); + test.strictEqual( typeof normalizedOptions.assertions.bar, 'object' ); + test.strictEqual( normalizedOptions.assertions.bar.type, '>' ); + test.strictEqual( normalizedOptions.assertions.bar.value, 12 ); + test.strictEqual( typeof normalizedOptions.assertions.baz, 'object' ); + test.strictEqual( normalizedOptions.assertions.baz.type, '<' ); + test.strictEqual( normalizedOptions.assertions.baz.value, 14 ); + + test.done(); + }, + + notifyAboutNotDisplayedMetrics : function( test ) { var options = { indexPath : TEMP_PATH,