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

package/lib/pipe/html.js

@@ -135,11 +135,13 @@ class HtmlPipe {
         test.title = 'Unknown test title';
       }
 
-      if (!test.files || test.files.length === 0) {
-        test.files = 'This test has no files';
+      if ('files' in test) {
+        if (test.files.length === 0) {
+          test.files = 'This test has no files';
+        }
       }
 
-      if (test.steps) {
+      if ('steps' in test) {
         if (!test.steps || test.steps.trim() === '') {
           test.steps = "This test has no 'steps' code";
         } else {
@@ -147,6 +149,15 @@ class HtmlPipe {
         }
       }
 
+      // TODO: future-proof: currently there is no need to display Artifacts and Metadata in HTML
+      if ('artifacts' in test) {
+        test.artifacts = [];
+      }
+
+      if ('meta' in test) {
+        test.meta = {};
+      }
+
       // TODO: u can added an additional test values to this checks in the future
     });
 
@@ -198,9 +209,8 @@ class HtmlPipe {
       const template = handlebars.compile(templateSource);
 
       return template(data);
-    } 
-    catch (e) {
-      console.log(chalk.red("❌ Oops! An unknown error occurred when generating an HTML report"));
+    } catch (e) {
+      console.log(chalk.red('❌ Oops! An unknown error occurred when generating an HTML report'));
       console.log(chalk.red(e));
     }
   }
@@ -213,82 +223,75 @@ class HtmlPipe {
 
     handlebars.registerHelper(
       'selectComponent',
-      () =>  new handlebars.SafeString(
-        `<select style="width: 70px;height: 38px;" class="form-select" aria-label="Tests counter on page">
+      () =>
+        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>`
-      )    
+        </select>`,
+        ),
     );
 
     handlebars.registerHelper(
       'emptyDataComponent',
-      () =>  new handlebars.SafeString(
-        `<div class="noData m-0">
+      () =>
+        new handlebars.SafeString(
+          `<div class="noData m-0">
           NO MATCHING TESTS
-        </div>`
-      )
+        </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;
+    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,
+      };
+
+      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);
+            }
 
-        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);
-                }
-                
-                pageItemGroups[status][option] = paginateItems(filteredItems, pageSize);
-              }
+            pageItemGroups[status][option] = paginateItems(filteredItems, pageSize);
           }
-        });
-        
-        pageItemGroups.totalTests = totalTests; 
+        }
+      });
 
-        return JSON.stringify(pageItemGroups);
-      }
-    );
+      pageItemGroups.totalTests = totalTests;
+
+      return JSON.stringify(pageItemGroups);
+    });
   }
 
   toString() {
@@ -304,7 +307,7 @@ class HtmlPipe {
  */
 function testExecutionSumTime(tests) {
   const totalMilliseconds = tests.reduce((sum, test) => {
-    if (typeof test.run_time === 'number') {
+    if (typeof test.run_time === 'number' && !Number.isNaN(test.run_time)) {
       return sum + test.run_time;
     }
     return sum;

package/lib/template/testomatio.hbs

@@ -654,7 +654,7 @@
                 content_files = content.querySelector('div[type="files"]').querySelector('span');
 
             content_error.innerHTML = steps;
-            content_status.innerHTML = category;
+            content_status.innerHTML = category.toUpperCase();
             content_message.innerHTML = message;
             //if no file - empty message, else - files
             (files.includes("This test has no files"))
@@ -688,10 +688,11 @@
 
         function createFileItemContainer(file) {
             let fileIcon;
-            const fileName = createFileName(file),
-                fileItemContainer = document.createElement('div');
 
-            const fileExtension = file.path.split('.').pop().toLowerCase();
+            const filepath = file?.path || file;
+            const fileName = createFileName(file);
+            const fileItemContainer = document.createElement('div');
+            const fileExtension = filepath.split('.').pop().toLowerCase();
 
             fileItemContainer.classList.add('d-flex', 'flex-column', 'align-items-center', 'mr-3');
 
@@ -782,22 +783,26 @@
         }
 
         function createImagePreview(file) {
+            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
+            const filepath = file?.path || `../${file}`;
             const imagePreview = document.createElement('img');
             // component styles
-            imagePreview.src = file.path;
+            imagePreview.src = filepath;
             imagePreview.alt = 'Image Preview';
-            imagePreview.style.maxWidth = '150px';
-            imagePreview.style.height = '200px';
+            imagePreview.style.maxWidth = '200px';
+            imagePreview.style.height = '150px';
             imagePreview.style.cursor = 'pointer';
 
             imagePreview.addEventListener('click', () => {
-                window.open(file.path, '_blank');
+                window.open(filepath, '_blank');
             });
 
             return imagePreview;
         }
 
         function createFileIcon(file, svg) {
+            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
+            const filepath = file?.path || `../${file}`;
             const fileIcon = document.createElement('div');
             // component styles
             fileIcon.innerHTML = svg;
@@ -806,23 +811,25 @@
             fileIcon.style.cursor = 'pointer';
 
             fileIcon.addEventListener('click', () => {
-                window.open(file.path, '_blank');
+                window.open(filepath, '_blank');
             });
 
             return fileIcon;
         }
 
         function createFileName(file) {
+            //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
+            const filepath = file?.path || `../${file}`;
             const fileName = document.createElement('div');
             // component styles
             fileName.style.fontSize = '14px';
             fileName.style.marginTop = '10px';
             fileName.style.cursor = 'pointer';
 
-            fileName.textContent = file.path.split('/').pop().split('.').slice(0, -1).join('.');
+            fileName.textContent = filepath.split('/').pop();
 
             fileName.addEventListener('click', () => {
-                window.open(file.path, '_blank');
+                window.open(filepath, '_blank');
             });
 
             return fileName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testomatio/reporter",
-  "version": "1.2.2-beta-html-pagination-feature",
+  "version": "1.2.2-beta-html-pagination-feature-v2",
   "description": "Testomatio Reporter Client",
   "main": "./lib/reporter.js",
   "typings": "typings/index.d.ts",