Update Integration page (#2612)

* Show boolean value of complex tests also on the integration test page

* Fix formatting for video tests

* Cleanup integration page layout

* Update dependencies

package.json

@@ -50,22 +50,22 @@
     "doctrine": "^3.0.0",
     "file": "^0.2.2",
     "lodash": "^4.17.20",
-    "markdown-it": "^11.0.1",
+    "markdown-it": "^12.0.2",
     "mkdirp": "1.0.4",
     "requirejs": "^2.3.6",
-    "yargs": "^15.4.1"
+    "yargs": "^16.1.0"
   },
   "devDependencies": {
     "@alrra/travis-scripts": "^3.0.1",
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/register": "^7.11.5",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/register": "^7.12.1",
     "auto-changelog": "^2.2.1",
     "chai": "^4.2.0",
-    "codecov": "^3.7.2",
-    "del": "^5.1.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-jsdoc": "^24.0.1",
+    "codecov": "^3.8.0",
+    "del": "^6.0.0",
+    "eslint": "^7.12.1",
+    "eslint-plugin-jsdoc": "^30.7.3",
     "find-parent-dir": "^0.3.0",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
@@ -73,15 +73,15 @@
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
     "gulp-pug": "^4.0.1",
-    "joi": "^14.3.1",
+    "joi": "^17.3.0",
     "jquery": "^3.5.1",
     "json3": "^3.3.3",
-    "mocha": "^7.1.2",
-    "mocha-headless-chrome": "^2.0.3",
+    "mocha": "^8.2.0",
+    "mocha-headless-chrome": "^3.1.0",
     "nyc": "^15.1.0",
     "proxyquire": "^2.1.3",
     "serve-static": "^1.14.1",
-    "sinon": "^9.0.3",
+    "sinon": "^9.2.1",
     "ua-parser-js": "^0.7.22"
   },
   "scripts": {

src/generate.js

@@ -5,9 +5,9 @@ define(['lodash'], function(_) {
    *
    * @access private
    * @function generate
-   * @param {object} [config] - A configuration object
-   * @param {Array} [config.options] - An array of options to include in the build
-   * @param {Array} [config.feature-detects] - An array of the feature detects to include
+   * @param {object} [config] - A configuration object consisting of:
+   *                 [config.options] - An array of options to include in the build
+   *                 [config.feature-detects] - An array of the feature detects to include
    * @returns {string} A string of the require.js build
    */
   return function generate(config) {

test/browser/integration.css

@@ -5,33 +5,33 @@
 }
 
 body {
-  margin:50px 0 150px
+  margin:20px 0;
 }
 
-#rawResults {
-  margin-top:50px
+section {
+  padding:20px;
 }
 
 #mocha-stats {
   background:#fff;
-  background:rgba(255,255,255,0.8)
+  background:rgba(255,255,255,0.8);
 }
 
 .output,#mocha,label {
-  padding:20px;
+  font-family:Inconsolata,Consolas,monospace;
   margin:0;
-  font-family:Inconsolata,Consolas,monospace
 }
 
 .output ul {
-  margin:0
+  margin:0;
 }
 
 .output li {
   color:#854747
 }
 
-.output li.pass {
+.output li.pass,
+.output span.pass {
   color:#090
 }
 
@@ -47,7 +47,8 @@ body {
 }
 
 .output {
-  border-bottom:3px solid #ccc
+  border-bottom:3px solid #ccc;
+  padding-bottom:20px;
 }
 
 .section {

test/browser/integration.pug

@@ -7,13 +7,19 @@ html
     link(rel='stylesheet', media='all', href='../node_modules/mocha/mocha.css')
     link(rel='stylesheet', media='all', href='../test/browser/integration.css')
   body
-    #modernizrResults
-    textarea#rawResults
-    input(type="checkbox", id="prettyprint", checked)
-    label(for="prettyprint") pretty print raw output
-    #mocha
-    #messages
-    #fixtures
+    section
+      h2 Modernizr results
+      ul#modernizrResults.output
+    section
+      h2 Raw results
+      textarea#rawResults
+      input(type="checkbox", id="prettyprint", checked)
+      label(for="prettyprint") pretty print raw output
+    section
+      h2 Mocha results
+      #mocha
+      #messages
+      #fixtures
     script(src='../dist/modernizr-build.js')
     script(src='../node_modules/jquery/dist/jquery.js')
     script(src='../node_modules/lodash/lodash.js')
@@ -49,11 +55,15 @@ html
           _.forEach(obj, function(result, name) {
             if (dumpModernizr.old[name]) return;
             if (_.isObject(result)) {
-              output += '<li class="section"><b>' + name + '{}</b><ul>';
+              output += '<li class="section"><b>' + name +'</b>';
+              if (_.isBoolean(result)) {
+                output += '<span class="' + (Boolean(result)  ? 'pass' : 'fail') + '">: ' + formatResult(result) + '</span>'
+              }
+              output += '<ul>'
               templatize(result);
               output += '</ul></li>'
             } else {
-              output += '<li id="' + name + '" class="' + (result ? 'pass' : 'fail') + '">' + name + ': ' + result + '</li>';
+              output += '<li id="' + name + '" class="' + (Boolean(result) ? 'pass' : 'fail') + '">' + name + ': ' + formatResult(result) + '</li>';
             }
             dumpModernizr.old[name] = true;
           });
@@ -64,6 +74,12 @@ html
         return output;
       }
 
+      function formatResult(result) {
+        if (result==="")
+          return false;
+        return result;
+      }
+
       function stringify(obj, minified) {
         var replacer = function(key, value) {
           return value;
@@ -81,14 +97,8 @@ html
         var output = dumpModernizr(Modernizr);
 
         if (output) {
-          var modOutput = $('<ul>')
-            .attr('class',  'output')
-            .html(output);
-
-          $('#modernizrResults').append(modOutput);
-
-          // Modernizr object as text
-          updateRawOutput()
+          $('#modernizrResults').append(output);
+          updateRawOutput();
         }
       }
 

test/node/lib/metadata.js

@@ -224,7 +224,7 @@ describe('cli/metadata', function() {
       data.forEach(function(obj) {
         var err = schema.validate(obj).error;
         it('for ' + obj.name, function() {
-          expect(err).to.be.equal(null);
+          expect(err).to.be.equal(undefined);
         });
       });
     });

test/node/lib/options.js

@@ -17,14 +17,14 @@ describe('cli/options', function() {
   it('should return an array of objects in a callback', function(done) {
     options(function(opts) {
       var err = schema.validate(opts).error;
-      expect(err).to.be.equal(null);
+      expect(err).to.be.equal(undefined);
       done(err);
     });
   });
 
   it('should return the array of objects immediately after the first run', function() {
     var err = schema.validate(options()).error;
-    expect(err).to.be.equal(null);
+    expect(err).to.be.equal(undefined);
   });
 
   it('should return all jsdoc info when the second arg is true', function() {