fix: dark mode in useCDN case (#383)

Author: sven-seyfert

lib/generate-report.js

@@ -10,6 +10,7 @@ const { Duration } = require('luxon');
 const collectJSONS = require('./collect-jsons');
 
 const REPORT_STYLESHEET = 'style.css';
+const DARK_MODE_JS = './assets/js/darkmode.js';
 const GENERIC_JS = 'generic.js';
 const INDEX_HTML = 'index.html';
 const FEATURE_FOLDER = 'features';
@@ -612,6 +613,7 @@ function generateReport(options) {
         customStyle: _readTemplateFile(suite.customStyle),
         styles: _readTemplateFile(suite.style),
         useCDN: suite.useCDN,
+        darkmodeScript: _readTemplateFile(DARK_MODE_JS),
         genericScript: _readTemplateFile(GENERIC_JS),
         pageTitle: pageTitle,
         reportName: reportName,
@@ -664,6 +666,7 @@ function generateReport(options) {
           useCDN: suite.useCDN,
           customStyle: _readTemplateFile(suite.customStyle),
           styles: _readTemplateFile(suite.style),
+          darkmodeScript: _readTemplateFile(DARK_MODE_JS),
           genericScript: _readTemplateFile(GENERIC_JS),
           pageTitle: pageTitle,
           reportName: reportName,

templates/feature-overview.index.tmpl

@@ -23,6 +23,11 @@
             <![endif]-->
 
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+            <!-- Darkmode -->
+            <script>
+                <%= darkmodeScript %>
+            </script>
     <% } else { %>
             <!-- Bootstrap -->
             <link rel="stylesheet" href="../assets/css/bootstrap.min.css" >

templates/features-overview.index.tmpl

@@ -26,6 +26,10 @@
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css" />
             <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
 
+            <!-- Darkmode -->
+            <script>
+                <%= darkmodeScript %>
+            </script>
         <% } else { %>
                 <!-- Bootstrap -->
                 <link rel="stylesheet" href="assets/css/bootstrap.min.css" >
@@ -138,7 +142,7 @@
                     legend: false,
                     responsive: false
                 };
-                
+
                 var getColor = function(selector, defaultColor) {
                     if (document.querySelector(selector)) {
                         return getComputedStyle(document.querySelector(selector)).color

test/test.js

@@ -26,6 +26,30 @@ test.generate({
     }
 });
 
+/**
+ * Generate a report for browsers wit useCDN true
+ */
+test.generate({
+    saveCollectedJSON: true,
+    jsonDir: './test/unit/data/json/',
+    reportPath: './.tmp/browsers-with-cdn-usage/',
+    reportName: 'Report with CDN usage',
+    customMetadata: false,
+    displayDuration: true,
+    durationInMS: true,
+    useCDN: true,
+    customData: {
+        title: 'Run info',
+        data: [
+            {label: 'Project', value: 'Custom project'},
+            {label: 'Release', value: '1.2.3'},
+            {label: 'Cycle', value: 'B11221.34321'},
+            {label: 'Execution Start Time', value: 'Nov 19th 2017, 02:31 PM EST'},
+            {label: 'Execution End Time', value: 'Nov 19th 2017, 02:56 PM EST'}
+        ]
+    }
+});
+
 /**
  * Generate a report with array of embedded data
  */