@arghajit/dummy 0.3.7 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://playwright-pulse-report.netlify.app/",
   "keywords": [

package/scripts/config-reader.mjs

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 import * as fs from "fs";
 import * as path from "path";
 import { pathToFileURL } from "url";
@@ -24,9 +23,61 @@ async function findPlaywrightConfig() {
 }
 
 async function extractOutputDirFromConfig(configPath) {
+  let fileContent = "";
   try {
-    let config;
+    fileContent = fs.readFileSync(configPath, "utf-8");
+  } catch (e) {
+    // If we can't read the file, we can't parse or import it.
+    return null;
+  }
+
+  // 1. Strategy: Text Parsing (Safe & Fast)
+  // We try to read the file as text first. This finds the outputDir without
+  // triggering any Node.js warnings or errors.
+  try {
+    // Regex matches: outputDir: "value" or outputDir: 'value'
+    const match = fileContent.match(/outputDir:\s*["']([^"']+)["']/);
+
+    if (match && match[1]) {
+      return path.resolve(process.cwd(), match[1]);
+    }
+  } catch (e) {
+    // Ignore text reading errors
+  }
 
+  // 2. Safety Check: Detect ESM in CJS to Prevent Node Warnings
+  // The warning "To load an ES module..." happens when we try to import()
+  // a .js file containing ESM syntax (import/export) in a CJS package.
+  // We explicitly check for this and ABORT the import if found.
+  if (configPath.endsWith(".js")) {
+    let isModulePackage = false;
+    try {
+      const pkgPath = path.resolve(process.cwd(), "package.json");
+      if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+        isModulePackage = pkg.type === "module";
+      }
+    } catch (e) {}
+
+    if (!isModulePackage) {
+      // Heuristic: Check for ESM syntax (import/export at start of lines)
+      const hasEsmSyntax =
+        /^\s*import\s+/m.test(fileContent) ||
+        /^\s*export\s+/m.test(fileContent);
+
+      if (hasEsmSyntax) {
+        // We found ESM syntax in a .js file within a CJS project.
+        // Attempting to import this WILL trigger the Node.js warning.
+        // Since regex failed to find outputDir, and we can't import safely, we abort now.
+        return null;
+      }
+    }
+  }
+
+  // 3. Strategy: Dynamic Import
+  // If we passed the safety check, we try to import the config.
+  try {
+    let config;
     const configDir = dirname(configPath);
     const originalDirname = global.__dirname;
     const originalFilename = global.__filename;
@@ -39,73 +90,70 @@ async function extractOutputDirFromConfig(configPath) {
         try {
           const { register } = await import("node:module");
           const { pathToFileURL } = await import("node:url");
-
           register("ts-node/esm", pathToFileURL("./"));
-
           config = await import(pathToFileURL(configPath).href);
         } catch (tsError) {
-          try {
-            const tsNode = await import("ts-node");
-            tsNode.register({
-              transpileOnly: true,
-              compilerOptions: {
-                module: "ESNext",
-              },
-            });
-            config = await import(pathToFileURL(configPath).href);
-          } catch (fallbackError) {
-            console.error("Failed to load TypeScript config:", fallbackError);
-            return null;
-          }
+          const tsNode = await import("ts-node");
+          tsNode.register({
+            transpileOnly: true,
+            compilerOptions: { module: "commonjs" },
+          });
+          config = require(configPath);
         }
       } else {
+        // Try dynamic import for JS/MJS
         config = await import(pathToFileURL(configPath).href);
       }
-    } finally {
-      if (originalDirname !== undefined) {
-        global.__dirname = originalDirname;
-      } else {
-        delete global.__dirname;
-      }
-      if (originalFilename !== undefined) {
-        global.__filename = originalFilename;
-      } else {
-        delete global.__filename;
+
+      // Handle Default Export
+      if (config && config.default) {
+        config = config.default;
       }
-    }
 
-    const playwrightConfig = config.default || config;
-
-    if (playwrightConfig && Array.isArray(playwrightConfig.reporter)) {
-      for (const reporterConfig of playwrightConfig.reporter) {
-        if (Array.isArray(reporterConfig)) {
-          const [reporterPath, options] = reporterConfig;
-
-          if (
-            typeof reporterPath === "string" &&
-            (reporterPath.includes("playwright-pulse-report") ||
-              reporterPath.includes("@arghajit/playwright-pulse-report") ||
-              reporterPath.includes("@arghajit/dummy"))
-          ) {
-            if (options && options.outputDir) {
-              const resolvedPath =
-                typeof options.outputDir === "string"
-                  ? options.outputDir
-                  : options.outputDir;
-              console.log(`Found outputDir in config: ${resolvedPath}`);
-              return path.resolve(process.cwd(), resolvedPath);
+      if (config) {
+        // Check for Reporter Config
+        if (config.reporter) {
+          const reporters = Array.isArray(config.reporter)
+            ? config.reporter
+            : [config.reporter];
+
+          for (const reporter of reporters) {
+            const reporterName = Array.isArray(reporter)
+              ? reporter[0]
+              : reporter;
+            const reporterOptions = Array.isArray(reporter)
+              ? reporter[1]
+              : null;
+
+            if (
+              typeof reporterName === "string" &&
+              (reporterName.includes("playwright-pulse-report") ||
+                reporterName.includes("@arghajit/playwright-pulse-report") ||
+                reporterName.includes("@arghajit/dummy"))
+            ) {
+              if (reporterOptions && reporterOptions.outputDir) {
+                return path.resolve(process.cwd(), reporterOptions.outputDir);
+              }
             }
           }
         }
+
+        // Check for Global outputDir
+        if (config.outputDir) {
+          return path.resolve(process.cwd(), config.outputDir);
+        }
       }
+    } finally {
+      // Clean up globals
+      global.__dirname = originalDirname;
+      global.__filename = originalFilename;
     }
-
-    console.log("No matching reporter config found with outputDir");
-    return null;
   } catch (error) {
-    console.error("Error extracting outputDir from config:", error);
+    // SILENT CATCH: Do NOT log anything here.
     return null;
   }
+
+  return null;
 }
 
 export async function getOutputDir(customOutputDirFromArgs = null) {

package/scripts/generate-report.mjs

@@ -350,6 +350,7 @@ function generateTestTrendsChart(trendData) {
       </script>
   `;
 }
+const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
 function generateDurationTrendChart(trendData) {
   if (!trendData || !trendData.overall || trendData.overall.length === 0) {
     return '<div class="no-data">No overall trend data available for durations.</div>';
@@ -363,8 +364,6 @@ function generateDurationTrendChart(trendData) {
   )}`;
   const runs = trendData.overall;
 
-  const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
-
   const chartDataString = JSON.stringify(runs.map((run) => run.duration));
   const categoriesString = JSON.stringify(runs.map((run, i) => `Run ${i + 1}`));
   const runsForTooltip = runs.map((r) => ({
@@ -1644,28 +1643,28 @@ function generateAIFailureAnalyzerTab(results) {
     </div>
   `;
 }
-// --- NEW CHARTS HELPER FUNCTIONS (Style: Line Chart + Enhanced Tooltips) ---
-
+/**
+ * Generates a area chart showing the total duration per spec file.
+ * The chart is lazy-loaded and rendered with Highcharts when scrolled into view.
+ *
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
 function generateSpecDurationChart(results) {
   if (!results || results.length === 0)
     return '<div class="no-data">No results available.</div>';
 
   const specDurations = {};
   results.forEach((test) => {
-    let fileName = "Unknown";
-    if (test.location && test.location.file) {
-      fileName = test.location.file.split(path.sep).pop();
-    } else {
-      const parts = test.name.split(" > ");
-      fileName = parts[0];
-    }
+    // Use the dedicated 'spec_file' key
+    const fileName = test.spec_file || "Unknown File";
 
     if (!specDurations[fileName]) specDurations[fileName] = 0;
     specDurations[fileName] += test.duration;
   });
 
   const categories = Object.keys(specDurations);
-  // Map data to objects to pass metadata if needed, though categories usually handle this.
+  // We map 'name' here, which we will use in the tooltip later
   const data = categories.map((cat) => ({
     y: specDurations[cat],
     name: cat,
@@ -1694,24 +1693,21 @@ function generateSpecDurationChart(results) {
                 try {
                     chartContainer.innerHTML = '';
                     Highcharts.chart('${chartId}', {
-                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        chart: { type: 'area', height: 350, backgroundColor: 'transparent' },
                         title: { text: null },
                         xAxis: { 
                             categories: ${categoriesStr}, 
+                            visible: false, // 1. HIDE THE X-AXIS
                             title: { text: null },
-                            crosshair: true,
-                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                            crosshair: true
                         },
                         yAxis: { 
                             min: 0, 
                             title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
                             labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
                         },
-                        legend: { enabled: false },
-                        plotOptions: { 
-                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
-                            line: { lineWidth: 2.5 }
-                        },
+                        legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemStyle: { fontSize: '12px', color: 'var(--text-color)' }},
+                          plotOptions: { area: { lineWidth: 2.5, states: { hover: { lineWidthPlus: 0 } }, threshold: null }},
                         tooltip: {
                             shared: true,
                             useHTML: true,
@@ -1719,19 +1715,22 @@ function generateSpecDurationChart(results) {
                             borderColor: 'rgba(10,10,10,0.92)',
                             style: { color: '#f5f5f5' },
                             formatter: function() {
-                                // 'this.x' is the File Name (category)
                                 const point = this.points ? this.points[0].point : this.point;
                                 const color = point.color || point.series.color;
                                 
-                            return '<span style="color:' + color + '">●</span> <b>File: ' + this.x + '</b><br/>' + 
-                              'Duration: <b>' + formatDuration(this.y) + '</b>';
-                          }
+                                // 2. FIX: Use 'point.name' instead of 'this.x' to get the actual filename
+                                return '<span style="color:' + color + '">●</span> <b>File: ' + point.name + '</b><br/>' + 
+                                       'Duration: <b>' + formatDuration(this.y) + '</b>';
+                            }
                         },
                         series: [{
                             name: 'Duration',
                             data: ${dataStr},
-                            color: 'var(--accent-color-alt)', // Orange theme
-                            marker: { symbol: 'circle' }
+                            color: 'var(--accent-color-alt)',
+                            type: 'area',
+                            marker: { symbol: 'circle', enabled: true, radius: 4, states: { hover: { radius: 6, lineWidthPlus: 0 } } },
+                            fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, 'rgba(${accentColorAltRGB}, 0.4)'], [1, 'rgba(${accentColorAltRGB}, 0.05)']] },
+                            lineWidth: 2.5
                         }],
                         credits: { enabled: false }
                     });
@@ -1741,31 +1740,33 @@ function generateSpecDurationChart(results) {
     </script>
   `;
 }
-
+/**
+ * Generates a vertical bar chart showing the total duration of each test describe block.
+ * Tests without a describe block or with "n/a" / empty describe names are ignored.
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
 function generateDescribeDurationChart(results) {
   if (!results || results.length === 0)
     return '<div class="no-data">No results available.</div>';
 
-  // We need to group by (File + Describe) to handle same-named describes in different files
   const describeMap = new Map();
   let foundAnyDescribe = false;
 
   results.forEach((test) => {
-    const parts = test.name.split(" > ");
-    if (parts.length > 2) {
-      foundAnyDescribe = true;
-
-      // Extract Filename
-      let fileName = "Unknown";
-      if (test.location && test.location.file) {
-        fileName = test.location.file.split(path.sep).pop();
-      } else {
-        fileName = parts[0];
+    if (test.describe) {
+      const describeName = test.describe;
+      // Filter out invalid describe blocks
+      if (
+        !describeName ||
+        describeName.trim().toLowerCase() === "n/a" ||
+        describeName.trim() === ""
+      ) {
+        return;
       }
 
-      const describeName = parts.slice(1, parts.length - 1).join(" > ");
-
-      // Create a unique key for the map
+      foundAnyDescribe = true;
+      const fileName = test.spec_file || "Unknown File";
       const key = fileName + "::" + describeName;
 
       if (!describeMap.has(key)) {
@@ -1780,16 +1781,17 @@ function generateDescribeDurationChart(results) {
   });
 
   if (!foundAnyDescribe) {
-    return '<div class="no-data">No test describe block found through out the executed test suite</div>';
+    return '<div class="no-data">No valid test describe blocks found.</div>';
   }
 
   const categories = [];
   const data = [];
 
   for (const [key, val] of describeMap.entries()) {
-    categories.push(val.describe); // X-Axis label
+    categories.push(val.describe);
     data.push({
       y: val.duration,
+      name: val.describe,
       custom: {
         fileName: val.file,
         describeName: val.describe,
@@ -1817,13 +1819,17 @@ function generateDescribeDurationChart(results) {
                 try {
                     chartContainer.innerHTML = '';
                     Highcharts.chart('${chartId}', {
-                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        chart: { 
+                            type: 'column', // 1. CHANGED: 'bar' -> 'column' for vertical bars
+                            height: 400,    // 2. CHANGED: Fixed height works better for vertical charts
+                            backgroundColor: 'transparent' 
+                        },
                         title: { text: null },
                         xAxis: { 
                             categories: ${categoriesStr}, 
+                            visible: false, // Hidden as requested
                             title: { text: null },
-                            crosshair: true,
-                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                            crosshair: true
                         },
                         yAxis: { 
                             min: 0, 
@@ -1832,8 +1838,12 @@ function generateDescribeDurationChart(results) {
                         },
                         legend: { enabled: false },
                         plotOptions: { 
-                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
-                            line: { lineWidth: 2.5 }
+                            series: { 
+                                borderRadius: 4, 
+                                borderWidth: 0,
+                                states: { hover: { brightness: 0.1 }} 
+                            },
+                            column: { pointPadding: 0.2, groupPadding: 0.1 } // Adjust spacing for columns
                         },
                         tooltip: {
                             shared: true, 
@@ -1842,24 +1852,20 @@ function generateDescribeDurationChart(results) {
                             borderColor: 'rgba(10,10,10,0.92)', 
                             style: { color: '#f5f5f5' },
                             formatter: function() {
-                                // Retrieve custom data stored in the point
                                 const point = this.points ? this.points[0].point : this.point;
-                                
-                                // Safety check for your custom data
                                 const file = (point.custom && point.custom.fileName) ? point.custom.fileName : 'Unknown';
-                                const desc = (point.custom && point.custom.describeName) ? point.custom.describeName : this.x;
+                                const desc = point.name || 'Unknown'; 
                                 const color = point.color || point.series.color;
                                 
                                 return '<span style="color:' + color + '">●</span> <b>Describe: ' + desc + '</b><br/>' +
                                   '<span style="opacity: 0.8; font-size: 0.9em; color: #ddd;">File: ' + file + '</span><br/>' +
                                   'Duration: <b>' + formatDuration(point.y) + '</b>';
-                                }
+                            }
                         },
                         series: [{
                             name: 'Duration',
                             data: ${dataStr},
-                            color: 'var(--accent-color-alt)', // Orange theme
-                            marker: { symbol: 'circle' }
+                            color: 'var(--accent-color-alt)', 
                         }],
                         credits: { enabled: false }
                     });
@@ -1869,7 +1875,12 @@ function generateDescribeDurationChart(results) {
     </script>
   `;
 }
-// --- END NEW CHARTS HELPER FUNCTIONS ---
+/**
+ * Generates the HTML content for the report.
+ * @param {object} reportData - The report data object containing run and results.
+ * @param {object} trendData - Optional trend data object for additional trends.
+ * @returns {string} HTML string for the report.
+ */
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);

package/scripts/generate-static-report.mjs

@@ -394,6 +394,7 @@ function generateTestTrendsChart(trendData) {
       </script>
   `;
 }
+const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
 /**
  * Generates HTML and JavaScript for a Highcharts area chart to display test duration trends.
  * @param {object} trendData Data for duration trends.
@@ -413,8 +414,6 @@ function generateDurationTrendChart(trendData) {
   )}`;
   const runs = trendData.overall;
 
-  const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
-
   const chartDataString = JSON.stringify(runs.map((run) => run.duration));
   const categoriesString = JSON.stringify(runs.map((run, i) => `Run ${i + 1}`));
   const runsForTooltip = runs.map((r) => ({
@@ -1781,35 +1780,39 @@ function generateAIFailureAnalyzerTab(results) {
     </div>
   `;
 }
-// --- NEW CHARTS HELPER FUNCTIONS (Style: Line Chart + Enhanced Tooltips) ---
-
+/**
+ * Generates a area chart showing the total duration per spec file.
+ * The chart is lazy-loaded and rendered with Highcharts when scrolled into view.
+ *
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
 function generateSpecDurationChart(results) {
-  if (!results || results.length === 0) return '<div class="no-data">No results available.</div>';
+  if (!results || results.length === 0)
+    return '<div class="no-data">No results available.</div>';
 
   const specDurations = {};
-  results.forEach(test => {
-    let fileName = 'Unknown';
-    if (test.location && test.location.file) {
-      fileName = test.location.file.split(path.sep).pop();
-    } else {
-      const parts = test.name.split(' > ');
-      fileName = parts[0]; 
-    }
-    
+  results.forEach((test) => {
+    // Use the dedicated 'spec_file' key
+    const fileName = test.spec_file || "Unknown File";
+
     if (!specDurations[fileName]) specDurations[fileName] = 0;
     specDurations[fileName] += test.duration;
   });
 
   const categories = Object.keys(specDurations);
-  // Map data to objects to pass metadata if needed, though categories usually handle this.
-  const data = categories.map(cat => ({
-      y: specDurations[cat],
-      name: cat 
+  // We map 'name' here, which we will use in the tooltip later
+  const data = categories.map((cat) => ({
+    y: specDurations[cat],
+    name: cat,
   }));
 
-  if (categories.length === 0) return '<div class="no-data">No spec data found.</div>';
+  if (categories.length === 0)
+    return '<div class="no-data">No spec data found.</div>';
 
-  const chartId = `specDurChart-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+  const chartId = `specDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
   const renderFunctionName = `renderSpecDurChart_${chartId.replace(/-/g, "_")}`;
 
   const categoriesStr = JSON.stringify(categories);
@@ -1827,36 +1830,44 @@ function generateSpecDurationChart(results) {
                 try {
                     chartContainer.innerHTML = '';
                     Highcharts.chart('${chartId}', {
-                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        chart: { type: 'area', height: 350, backgroundColor: 'transparent' },
                         title: { text: null },
                         xAxis: { 
                             categories: ${categoriesStr}, 
+                            visible: false, // 1. HIDE THE X-AXIS
                             title: { text: null },
-                            crosshair: true,
-                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                            crosshair: true
                         },
                         yAxis: { 
                             min: 0, 
                             title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
                             labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
                         },
-                        legend: { enabled: false },
-                        plotOptions: { 
-                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
-                            line: { lineWidth: 2.5 }
-                        },
+                        legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemStyle: { fontSize: '12px', color: 'var(--text-color)' }},
+                          plotOptions: { area: { lineWidth: 2.5, states: { hover: { lineWidthPlus: 0 } }, threshold: null }},
                         tooltip: {
-                            shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                            shared: true,
+                            useHTML: true,
+                            backgroundColor: 'rgba(10,10,10,0.92)',
+                            borderColor: 'rgba(10,10,10,0.92)',
+                            style: { color: '#f5f5f5' },
                             formatter: function() {
-                                // Use 'this.x' which contains the category name (File Name)
-                                return '<b>File: ' + this.x + '</b><br/>Duration: ' + formatDuration(this.y);
+                                const point = this.points ? this.points[0].point : this.point;
+                                const color = point.color || point.series.color;
+                                
+                                // 2. FIX: Use 'point.name' instead of 'this.x' to get the actual filename
+                                return '<span style="color:' + color + '">●</span> <b>File: ' + point.name + '</b><br/>' + 
+                                       'Duration: <b>' + formatDuration(this.y) + '</b>';
                             }
                         },
                         series: [{
                             name: 'Duration',
                             data: ${dataStr},
-                            color: 'var(--accent-color-alt)', // Orange theme
-                            marker: { symbol: 'circle' }
+                            color: 'var(--accent-color-alt)',
+                            type: 'area',
+                            marker: { symbol: 'circle', enabled: true, radius: 4, states: { hover: { radius: 6, lineWidthPlus: 0 } } },
+                            fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, 'rgba(${accentColorAltRGB}, 0.4)'], [1, 'rgba(${accentColorAltRGB}, 0.05)']] },
+                            lineWidth: 2.5
                         }],
                         credits: { enabled: false }
                     });
@@ -1866,60 +1877,70 @@ function generateSpecDurationChart(results) {
     </script>
   `;
 }
-
+/**
+ * Generates a vertical bar chart showing the total duration of each test describe block.
+ * Tests without a describe block or with "n/a" / empty describe names are ignored.
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
 function generateDescribeDurationChart(results) {
-  if (!results || results.length === 0) return '<div class="no-data">No results available.</div>';
+  if (!results || results.length === 0)
+    return '<div class="no-data">No results available.</div>';
 
-  // We need to group by (File + Describe) to handle same-named describes in different files
   const describeMap = new Map();
   let foundAnyDescribe = false;
 
-  results.forEach(test => {
-    const parts = test.name.split(' > ');
-    if (parts.length > 2) {
-      foundAnyDescribe = true;
-      
-      // Extract Filename
-      let fileName = 'Unknown';
-      if (test.location && test.location.file) {
-          fileName = test.location.file.split(path.sep).pop();
-      } else {
-          fileName = parts[0]; 
+  results.forEach((test) => {
+    if (test.describe) {
+      const describeName = test.describe;
+      // Filter out invalid describe blocks
+      if (
+        !describeName ||
+        describeName.trim().toLowerCase() === "n/a" ||
+        describeName.trim() === ""
+      ) {
+        return;
       }
-      
-      const describeName = parts.slice(1, parts.length - 1).join(' > ');
-      
-      // Create a unique key for the map
-      const key = fileName + '::' + describeName;
-      
+
+      foundAnyDescribe = true;
+      const fileName = test.spec_file || "Unknown File";
+      const key = fileName + "::" + describeName;
+
       if (!describeMap.has(key)) {
-          describeMap.set(key, { duration: 0, file: fileName, describe: describeName });
+        describeMap.set(key, {
+          duration: 0,
+          file: fileName,
+          describe: describeName,
+        });
       }
       describeMap.get(key).duration += test.duration;
     }
   });
 
   if (!foundAnyDescribe) {
-    return '<div class="no-data">No test describe block found through out the executed test suite</div>';
+    return '<div class="no-data">No valid test describe blocks found.</div>';
   }
 
   const categories = [];
   const data = [];
 
   for (const [key, val] of describeMap.entries()) {
-      categories.push(val.describe); // X-Axis label
-      data.push({
-          y: val.duration,
-          custom: {
-              fileName: val.file,
-              describeName: val.describe
-          }
-      });
+    categories.push(val.describe);
+    data.push({
+      y: val.duration,
+      name: val.describe,
+      custom: {
+        fileName: val.file,
+        describeName: val.describe,
+      },
+    });
   }
 
-  const chartId = `descDurChart-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+  const chartId = `descDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
   const renderFunctionName = `renderDescDurChart_${chartId.replace(/-/g, "_")}`;
-  
+
   const categoriesStr = JSON.stringify(categories);
   const dataStr = JSON.stringify(data);
 
@@ -1935,13 +1956,17 @@ function generateDescribeDurationChart(results) {
                 try {
                     chartContainer.innerHTML = '';
                     Highcharts.chart('${chartId}', {
-                        chart: { type: 'line', height: 350, backgroundColor: 'transparent' },
+                        chart: { 
+                            type: 'column', // 1. CHANGED: 'bar' -> 'column' for vertical bars
+                            height: 400,    // 2. CHANGED: Fixed height works better for vertical charts
+                            backgroundColor: 'transparent' 
+                        },
                         title: { text: null },
                         xAxis: { 
                             categories: ${categoriesStr}, 
+                            visible: false, // Hidden as requested
                             title: { text: null },
-                            crosshair: true,
-                            labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } } 
+                            crosshair: true
                         },
                         yAxis: { 
                             min: 0, 
@@ -1950,27 +1975,34 @@ function generateDescribeDurationChart(results) {
                         },
                         legend: { enabled: false },
                         plotOptions: { 
-                            series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, 
-                            line: { lineWidth: 2.5 }
+                            series: { 
+                                borderRadius: 4, 
+                                borderWidth: 0,
+                                states: { hover: { brightness: 0.1 }} 
+                            },
+                            column: { pointPadding: 0.2, groupPadding: 0.1 } // Adjust spacing for columns
                         },
                         tooltip: {
-                            shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                            shared: true, 
+                            useHTML: true, 
+                            backgroundColor: 'rgba(10,10,10,0.92)', 
+                            borderColor: 'rgba(10,10,10,0.92)', 
+                            style: { color: '#f5f5f5' },
                             formatter: function() {
-                                // Retrieve custom data stored in the point
                                 const point = this.points ? this.points[0].point : this.point;
                                 const file = (point.custom && point.custom.fileName) ? point.custom.fileName : 'Unknown';
-                                const desc = (point.custom && point.custom.describeName) ? point.custom.describeName : this.x;
+                                const desc = point.name || 'Unknown'; 
+                                const color = point.color || point.series.color;
                                 
-                                return '<b>File:</b> ' + file + '<br/>' +
-                                       '<b>Describe:</b> ' + desc + '<br/>' +
-                                       'Duration: ' + formatDuration(point.y);
+                                return '<span style="color:' + color + '">●</span> <b>Describe: ' + desc + '</b><br/>' +
+                                  '<span style="opacity: 0.8; font-size: 0.9em; color: #ddd;">File: ' + file + '</span><br/>' +
+                                  'Duration: <b>' + formatDuration(point.y) + '</b>';
                             }
                         },
                         series: [{
                             name: 'Duration',
                             data: ${dataStr},
-                            color: 'var(--accent-color-alt)', // Orange theme
-                            marker: { symbol: 'circle' }
+                            color: 'var(--accent-color-alt)', 
                         }],
                         credits: { enabled: false }
                     });
@@ -1980,7 +2012,6 @@ function generateDescribeDurationChart(results) {
     </script>
   `;
 }
-// --- END NEW CHARTS HELPER FUNCTIONS ---
 /**
  * Generates the HTML report.
  * @param {object} reportData - The data for the report.