@testomatio/reporter 1.2.1 → 1.2.2-beta-html-pagination-feature

package/lib/pipe/html.js

@@ -91,7 +91,7 @@ class HtmlPipe {
       // GENERATE HTML reports based on the results data
       this.buildReport({
         runParams,
-        // TODO: this.tests=[] in case of Mocha
+        // TODO: this.tests=[] in case of Mocha, need retest by Vitalii
         tests: this.tests,
         outputPath: this.htmlOutputPath,
         templatePath: this.templateHtmlPath,
@@ -198,8 +198,10 @@ class HtmlPipe {
       const template = handlebars.compile(templateSource);
 
       return template(data);
-    } catch (e) {
-      console.log('Unknown HTML report generation error: ', e);
+    } 
+    catch (e) {
+      console.log(chalk.red("❌ Oops! An unknown error occurred when generating an HTML report"));
+      console.log(chalk.red(e));
     }
   }
 
@@ -209,43 +211,84 @@ class HtmlPipe {
       (tests, status) => tests.filter(test => test.status.toLowerCase() === status.toLowerCase()).length,
     );
 
-    handlebars.registerHelper('json', tests => {
-      // TODO: please refactor the code below, add meaningful variable names, separate into functions
-      function replaceScriptTagsInArray(array) {
-        return array.map(obj => {
-          const keysToCheck = ['steps', 'stack', 'title', 'suite_title', 'message', 'code'];
-          const newObj = {};
-
-          for (const key in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, key)) {
-              if (key === 'example') {
-                newObj[key] = {};
-                for (const subKey in obj[key]) {
-                  if (Object.prototype.hasOwnProperty.call(obj[key], subKey)) {
-                    newObj[key][subKey] =
-                      typeof obj[key][subKey] === 'string'
-                        ? obj[key][subKey].replace(/<script>/g, '<$cript>').replace(/<\/script>/g, '</$cript>')
-                        : obj[key][subKey];
-                  }
+    handlebars.registerHelper(
+      'selectComponent',
+      () =>  new handlebars.SafeString(
+        `<select style="width: 70px;height: 38px;" class="form-select" aria-label="Tests counter on page">
+          <option value="0">10</option>
+          <option value="1">25</option>
+          <option value="2">50</option>
+        </select>`
+      )    
+    );
+
+    handlebars.registerHelper(
+      'emptyDataComponent',
+      () =>  new handlebars.SafeString(
+        `<div class="noData m-0">
+          NO MATCHING TESTS
+        </div>`
+      )
+    );
+
+    handlebars.registerHelper(
+      'pageDispleyElements',
+      tests => {
+        // We wrapp the lines to the HTML format we need
+        const totalTests = 
+          JSON.parse(
+            JSON.stringify(tests)
+            .replace(/<script>/g, '&lt;script&gt;')
+            .replace(/<\/script>/g, '&lt;\/script&gt;') // eslint-disable-line
+          );
+
+        const paginationOptions = {
+          '0': 10,
+          '1': 25,
+          '2': 50
+        };
+        const statuses = [
+          'all',
+          'passed',
+          'failed',
+          'skipped'
+        ];
+        const pageItemGroups = {
+          'all': {},
+          'passed': {},
+          'failed': {},
+          'skipped': {},
+          'totalTests': totalTests
+        };
+
+        function paginateItems(items, pageSize) {
+          const paginatedItems = [];
+          for (let i = 0; i < items.length; i += pageSize) {
+            paginatedItems.push(items.slice(i, i + pageSize));
+          }
+          return paginatedItems;
+        }
+
+        statuses.forEach(status => {
+          for (const option in paginationOptions) {
+              if (Object.hasOwnProperty.call(paginationOptions, option)) {
+                const pageSize = paginationOptions[option];
+                let filteredItems = totalTests;
+
+                if (status !== 'all') {
+                  filteredItems = totalTests.filter(item => item.status === status);
                 }
-              } else if (keysToCheck.includes(key)) {
-                newObj[key] =
-                  typeof obj[key] === 'string'
-                    ? obj[key].replace(/<script>/g, '<$cript>').replace(/<\/script>/g, '</$cript>')
-                    : obj[key];
-              } else {
-                newObj[key] = obj[key];
+                
+                pageItemGroups[status][option] = paginateItems(filteredItems, pageSize);
               }
-            }
           }
-
-          return newObj;
         });
-      }
+        
+        pageItemGroups.totalTests = totalTests; 
 
-      // Remove ANSI escape codes
-      return JSON.stringify(replaceScriptTagsInArray(tests));
-    });
+        return JSON.stringify(pageItemGroups);
+      }
+    );
   }
 
   toString() {