reporting-labs 0.2.0 → 0.2.1

package/README.md

@@ -224,7 +224,7 @@ Every option is optional. `npx reporting-labs init` writes them all, with commen
 | Option | Default | What it does |
 |---|---|---|
 | `title` | `'Test report'` | Title in the header |
-| `logo` | – | Path, URL or data URI of your logo |
+| `logo` | – | Your logo next to the title: `'logo.png'` (a file next to the config, embedded in the report) or an https URL |
 | `project` | – | `{ name, version, team, url }` shown under the title |
 | `metadata` | `{}` | Chips in the header, e.g. `{ env: 'staging', build: '#1842' }`. `build` labels the run in the trend; in CI the run number is used when it is not set |
 | `env` | – | Extra rows on the Environment card |
@@ -232,7 +232,7 @@ Every option is optional. `npx reporting-labs init` writes them all, with commen
 | `maskKeys` | `[]` | Extra keys to mask as `****` |
 | `dimensions` | `['priority','severity','feature','owner']` | Meta keys that get charts and filters |
 | `dimensionOrder` | P0…P4, blocker…trivial | Sort order per dimension |
-| `widgets` | all on | Hide cards: `{ tags: false, timeline: false, ... }` |
+| `widgets` | all on | Hide cards: `{ tags: false, timeline: false, ... }`. Failure clusters and the Trend chart are always shown |
 | `sections` | `[]` | Extra HTML below the summary, e.g. release notes |
 | `history` | `{ enabled: true, keep: 30 }` | Run history file; `file` sets a custom path |
 | `palette` | `'lab'` | `'lab'` (blue), `'ocean'`, `'ember'`, `'mono'` |

package/bin/config-template.txt

@@ -9,7 +9,7 @@ const config: ReportingLabsOptions = {
 
   // ── Look ─────────────────────────────────────────────────────────────────────
   title: 'My app – regression',                       // shown in the header
-  // logo: 'https://example.com/logo.svg',            // path, URL or data URI; shown next to the title
+  // logo: 'logo.png',                               // your logo next to the title: a file next to this config (embedded), or an https URL
   // palette: 'lab',                                  // 'lab' (blue, default) | 'ocean' | 'ember' | 'mono'; viewers can switch
   // accent: '#7C3AED',                               // your brand color instead of the palette accent
   // theme: 'auto',                                   // 'auto' (follows OS, default) | 'light' | 'dark'
@@ -54,6 +54,7 @@ const config: ReportingLabsOptions = {
   // },
 
   // ── Widgets on the overview (hide what you do not need) ──────────────────────
+  // Failure clusters and the Trend chart are always shown.
   // widgets: {
   //   runStrip: true,        // pass/fail strip under the header
   //   outcome: true,         // outcome ring

package/dist/reporter.d.ts

@@ -31,6 +31,8 @@ export default class ReportingLabsReporter implements Reporter {
     private metaKeys;
     /** Pull meta values (priority, owner, story, epic...) from annotations and tags. */
     private extractMeta;
+    /** A local image file (path relative to the config) is embedded as a data URI so the report stays self-contained. URLs and data URIs pass through. */
+    private resolveLogo;
     private rel;
     private serializeError;
     private outcome;

package/dist/reporter.js

@@ -167,7 +167,7 @@ class ReportingLabsReporter {
             globalOutput: this.globalOutput,
             shard: this.config.shard ? { current: this.config.shard.current, total: this.config.shard.total } : undefined,
             options: {
-                logo: this.options.logo,
+                logo: this.resolveLogo(this.options.logo),
                 accent: this.options.accent,
                 theme: this.options.theme ?? 'auto',
                 palette: this.options.palette ?? 'lab',
@@ -329,6 +329,24 @@ class ReportingLabsReporter {
         }
         return meta;
     }
+    /** A local image file (path relative to the config) is embedded as a data URI so the report stays self-contained. URLs and data URIs pass through. */
+    resolveLogo(logo) {
+        if (!logo || /^(https?:|data:)/i.test(logo))
+            return logo;
+        const base = this.config.configFile ? path.dirname(this.config.configFile) : this.config.rootDir;
+        const file = path.resolve(base, logo);
+        if (!fs.existsSync(file)) {
+            console.warn(`reporting-labs: logo not found at ${file}`);
+            return undefined;
+        }
+        const mime = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.svg': 'image/svg+xml', '.gif': 'image/gif', '.webp': 'image/webp', '.ico': 'image/x-icon' };
+        const type = mime[path.extname(file).toLowerCase()];
+        if (!type) {
+            console.warn(`reporting-labs: logo ${logo} is not a png, jpg, svg, gif or webp file`);
+            return undefined;
+        }
+        return `data:${type};base64,${fs.readFileSync(file).toString('base64')}`;
+    }
     rel(file) {
         const base = this.config.configFile ? path.dirname(this.config.configFile) : this.config.rootDir;
         return path.relative(base, file).split(path.sep).join('/');

package/dist/template.js

@@ -473,6 +473,7 @@ html,body{-webkit-font-smoothing:antialiased}
 .hdr h1,.hdr .proj-blk h1{color:#fff;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
 .hdr .proj-blk .sub,.hdr .proj-blk .sub a,.hdr .when{color:rgba(255,255,255,.78)}
 .hdr .logo{width:42px;height:42px;border-radius:11px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 6px 16px -6px rgba(0,0,0,.45)} .hdr .logo svg{width:42px;height:42px;display:block;border-radius:11px}
+.hdr img.logo.brand{width:auto;max-width:180px;height:42px;object-fit:contain;border-radius:8px;background:#fff;padding:4px;box-sizing:border-box}
 .hdr img{height:32px;border-radius:6px}
 .hdr .chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);border-radius:999px;padding:4px 9px}
 .hdr .chip b{color:#fff}
@@ -725,7 +726,7 @@ app.append(h('div',{class:'band'}, stripe(), header(), nav()),
   h('div',{class:'view','data-view':'tests'}, main()),
   h('div',{class:'view','data-view':'failures'}, h('div',{class:'view-pad'}, failuresView())),
   h('div',{class:'view','data-view':'api'}, h('div',{class:'view-pad'}, apiView())),
-  h('div',{class:'view','data-view':'timeline'}, h('div',{class:'view-pad'}, timelineView())));
+  hasTimelineView()? h('div',{class:'view','data-view':'timeline'}, h('div',{class:'view-pad'}, timelineView())) : null);
 select(state.selected || firstInteresting(), true);
 showView(state.view);
 window.addEventListener('keydown', e=>{
@@ -740,13 +741,14 @@ window.addEventListener('keydown', e=>{
 /* ---------- header ---------- */
 function setHash(){ const p=new URLSearchParams(); if(state.view!=='overview') p.set('view',state.view); if(state.selected&&state.view==='tests') p.set('t',state.selected); const hs=p.toString(); history.replaceState(null,'',hs?'#'+hs:location.pathname+location.search); }
 function showView(v){
+  if(!document.querySelector('.view[data-view='+v+']')) v='overview';
   state.view=v; document.querySelectorAll('.view').forEach(el=>el.classList.toggle('on',el.dataset.view===v));
   document.querySelectorAll('.nav button[data-view]').forEach(b=>b.setAttribute('aria-selected',b.dataset.view===v));
   setHash(); try{window.scrollTo(0,0);}catch(e){}
 }
 function nav(){
   const s=data.stats, f=s.failed+s.timedOut+s.interrupted, apiN=data.tests.reduce((a,t)=>a+t.results.reduce((b,r)=>b+r.api.length,0),0);
-  const tabs=[['overview','Overview',null],['tests','Tests',s.total],['failures','Failures',f+s.flaky,f>0],['api','API',apiN],['timeline','Timeline',null]].filter(t=>t[0]!=='api'||apiN>0);
+  const tabs=[['overview','Overview',null],['tests','Tests',s.total],['failures','Failures',f+s.flaky,f>0],['api','API',apiN],['timeline','Timeline',null]].filter(t=>(t[0]!=='api'||apiN>0)&&(t[0]!=='timeline'||hasTimelineView()));
   return h('nav',{class:'nav'}, h('div',{}, tabs.map(([v,l,n,bad])=>h('button',{'data-view':v,'aria-selected':state.view===v,onclick:()=>showView(v)}, l, n!=null?h('span',{class:'cnt'+(bad?' bad':'')},n):null))));
 }
 function failuresView(){
@@ -780,8 +782,12 @@ function apiView(){
         h('td',{class:'u',title:c.url},c.url), h('td',{}, h('span',{class:'sc '+cls,style:'font:12px var(--mono);font-weight:600;color:'+(cls==='bad'?'var(--fail)':cls==='warn'?'var(--flaky-ink)':'var(--pass)')},st||'—')), h('td',{class:'t'},c.duration!=null?ms(c.duration):'—'), h('td',{class:'t',title:t.title},t.title)); })))));
 }
 function timelineView(){
-  return h('div',{class:'grid'}, h('div',{class:'card w12'}, h('h2',{},'Timeline by worker'), timeline()), h('div',{class:'card w6'}, h('h2',{},'Workers'), workers()), h('div',{class:'card w6'}, h('h2',{},'Duration spread'), histogram()));
+  const W=data.options.widgets, cards=[];
+  if(W.timeline!==false) cards.push(h('div',{class:'card w12'}, h('h2',{},'Timeline by worker'), timeline()), h('div',{class:'card w6'}, h('h2',{},'Workers'), workers()));
+  if(W.durations!==false) cards.push(h('div',{class:W.timeline!==false?'card w6':'card w12'}, h('h2',{},'Duration spread'), histogram()));
+  return h('div',{class:'grid'}, cards);
 }
+function hasTimelineView(){ return data.options.widgets.timeline!==false || data.options.widgets.durations!==false; }
 function stripe(){
   const s=data.stats, f=s.failed+s.timedOut+s.interrupted, tot=s.total||1;
   return h('div',{class:'stripe','aria-hidden':'true'}, [['passed',s.passed],['flaky',s.flaky],['failed',f],['skipped',s.skipped]].filter(x=>x[1]).map(([k,n])=>h('i',{style:'width:'+(n/tot*100)+'%;background:'+colorOf(k)})));
@@ -808,10 +814,11 @@ function header(){
     [['lab','Blue'],['ocean','Ocean'],['ember','Ember'],['mono','Mono']].map(([v,l])=>h('option',{value:v,selected:html.getAttribute('data-palette')===v},l)));
   const copy = h('button',{class:'btn',onclick:e=>copyText(summaryMarkdown(),e.currentTarget,'Copied for Slack')}, 'Copy summary');
   return h('header',{class:'hdr'},
-    data.options.logo ? h('img',{src:data.options.logo,alt:''}) : h('div',{class:'logo',title:'Generated by reportingLabs','aria-label':'reportingLabs'}, document.getElementById('rl-logo').content.cloneNode(true)),
+    data.options.logo ? h('img',{class:'logo brand',src:data.options.logo,alt:''}) : h('div',{class:'logo',title:'Generated by reportingLabs','aria-label':'reportingLabs'}, document.getElementById('rl-logo').content.cloneNode(true)),
     data.options.project ? h('div',{class:'proj-blk'}, h('h1',{}, data.title),
       h('div',{class:'sub'}, [data.options.project.name, data.options.project.version?'v'+data.options.project.version:null, data.options.project.team].filter(Boolean).join(' · '),
-        data.options.project.url? [' · ', h('a',{href:data.options.project.url,target:'_blank',rel:'noopener'}, data.options.project.url.replace(/^https?:\/\//,''))] : null))
+        data.options.project.url? [' · ', h('a',{href:data.options.project.url,target:'_blank',rel:'noopener'}, data.options.project.url.replace(/^https?:\/\//,''))] : null),
+      data.options.project.description? h('div',{class:'sub desc'}, data.options.project.description) : null)
     : h('h1',{}, data.title),
     h('div',{class:'hmeta'}, Object.entries(data.metadata).map(([k,v])=>h('span',{class:'chip'}, k+' ', h('b',{},v)))),
     h('div',{class:'spacer'}),
@@ -1041,7 +1048,7 @@ function hero(){
   else delta=ok? 'Nothing to worry about.' : failed+' failed'+(s.flaky?', '+s.flaky+' flaky':'')+(s.skipped?', '+s.skipped+' skipped':'');
   return h('button',{class:'pill kpi hero','aria-pressed':state.status==='all','data-k':'all',title:'Show all tests',onclick:()=>{state.status='all';refresh();showView('tests');}},
     spark(hseries(e=>{ const rn=e.total-e.skipped; return rn?Math.round(e.passed/rn*100):0; }),'#fff'),
-    ring,
+    data.options.widgets.outcome!==false? ring : null,
     h('div',{class:'body'},
       h('div',{class:'l'}, ok? 'All passed' : 'Pass rate'),
       h('div',{class:'v'}, s.passed, h('small',{}, 'of '+ran+' ran')),

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 export interface ReportingLabsOptions {
     /** Report title shown in the header. Default: "Test report" */
     title?: string;
-    /** Path or data-URI of a logo image. Optional. */
+    /** Your logo: a file path relative to the config (e.g. 'logo.png', embedded into the report), an https URL, or a data URI. */
     logo?: string;
     /** Override the palette accent with your brand color, e.g. '#7C3AED'. Default: the palette's own accent (royal blue for `lab`). */
     accent?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reporting-labs",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "reportingLabs – beautiful, customizable single-file HTML test reports. One line of config. Playwright adapter included, more runners on the way.",
   "keywords": [
     "test-report",