rspec-tracer 1.2.3 → 2.0.0.pre.2

data/lib/rspec_tracer/reporters/html/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "rspec-tracer-html-reporter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Frontend bundle for RSpec-Tracer's HTML reporter. Built output is committed to dist/; users never run npm.",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write ."
+  },
+  "dependencies": {
+    "preact": "10.29.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.4",
+    "@preact/preset-vite": "2.10.5",
+    "eslint": "9.39.4",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "globals": "17.5.0",
+    "prettier": "3.8.3",
+    "vite": "8.0.10"
+  }
+}

data/lib/rspec_tracer/reporters/html/src/app.jsx

@@ -0,0 +1,130 @@
+import { useMemo, useState } from 'preact/hooks';
+import { AllExamples } from './components/AllExamples.jsx';
+import { DuplicateExamples } from './components/DuplicateExamples.jsx';
+import { FlakyExamples } from './components/FlakyExamples.jsx';
+import { ExamplesDependency } from './components/ExamplesDependency.jsx';
+import { FilesDependency } from './components/FilesDependency.jsx';
+
+function buildTabs(payload) {
+  const reports = (payload && payload.reports) || {};
+  const tabs = [
+    {
+      id: 'all_examples',
+      label: 'All Examples',
+      count: (reports.all_examples || []).length,
+      render: () => <AllExamples items={reports.all_examples || []} />,
+    },
+  ];
+
+  if ((reports.duplicate_examples || []).length > 0) {
+    tabs.push({
+      id: 'duplicate_examples',
+      label: 'Duplicate Examples',
+      count: reports.duplicate_examples.length,
+      render: () => <DuplicateExamples items={reports.duplicate_examples} />,
+    });
+  }
+
+  if ((reports.flaky_examples || []).length > 0) {
+    tabs.push({
+      id: 'flaky_examples',
+      label: 'Flaky Examples',
+      count: reports.flaky_examples.length,
+      render: () => <FlakyExamples items={reports.flaky_examples} />,
+    });
+  }
+
+  tabs.push({
+    id: 'examples_dependency',
+    label: 'Examples Dependency',
+    count: (reports.examples_dependency || []).length,
+    render: () => <ExamplesDependency items={reports.examples_dependency || []} />,
+  });
+
+  tabs.push({
+    id: 'files_dependency',
+    label: 'Files Dependency',
+    count: (reports.files_dependency || []).length,
+    render: () => <FilesDependency items={reports.files_dependency || []} />,
+  });
+
+  return tabs;
+}
+
+export function App({ payload }) {
+  const tabs = useMemo(() => buildTabs(payload), [payload]);
+  const [activeId, setActiveId] = useState(tabs[0] ? tabs[0].id : null);
+  const summary = (payload && payload.summary) || {};
+  const generatedAt = (payload && payload.generated_at) || '';
+  const runId = (payload && payload.run_id) || '';
+  const active = tabs.find((t) => t.id === activeId) || tabs[0];
+
+  return (
+    <div class="report-root">
+      <header class="report-header">
+        <h1>RSpec Tracer Report</h1>
+        <dl class="summary">
+          <div class="summary-item">
+            <dt>Total</dt>
+            <dd>{summary.total_examples ?? 0}</dd>
+          </div>
+          <div class="summary-item summary-passed">
+            <dt>Passed</dt>
+            <dd>{summary.passed_examples ?? 0}</dd>
+          </div>
+          <div class="summary-item summary-failed">
+            <dt>Failed</dt>
+            <dd>{summary.failed_examples ?? 0}</dd>
+          </div>
+          <div class="summary-item summary-pending">
+            <dt>Pending</dt>
+            <dd>{summary.pending_examples ?? 0}</dd>
+          </div>
+          <div class="summary-item summary-skipped">
+            <dt>Skipped</dt>
+            <dd>{summary.skipped_examples ?? 0}</dd>
+          </div>
+          <div class="summary-item">
+            <dt>Flaky</dt>
+            <dd>{summary.flaky_examples ?? 0}</dd>
+          </div>
+        </dl>
+        <p class="report-meta">
+          <span>
+            Run <code>{runId}</code>
+          </span>
+          <span>Generated {generatedAt}</span>
+        </p>
+      </header>
+
+      <nav class="tab-bar" role="tablist" aria-label="Report sections">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            class={`tab-button${tab.id === (active && active.id) ? ' is-active' : ''}`}
+            aria-selected={tab.id === (active && active.id)}
+            aria-controls={`panel-${tab.id}`}
+            id={`tab-${tab.id}`}
+            onClick={() => setActiveId(tab.id)}
+          >
+            {tab.label}
+            <span class="tab-count">{tab.count}</span>
+          </button>
+        ))}
+      </nav>
+
+      {active && (
+        <section
+          class="report-panel"
+          role="tabpanel"
+          id={`panel-${active.id}`}
+          aria-labelledby={`tab-${active.id}`}
+        >
+          {active.render()}
+        </section>
+      )}
+    </div>
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/AllExamples.jsx

@@ -0,0 +1,86 @@
+import { ReportTable } from './ReportTable.jsx';
+
+const STATUS_CLASS = {
+  passed: 'status-passed',
+  failed: 'status-failed',
+  pending: 'status-pending',
+  skipped: 'status-skipped',
+  flaky: 'status-flaky',
+  interrupted: 'status-failed',
+};
+
+function statusClass(status) {
+  return STATUS_CLASS[status] || 'status-unknown';
+}
+
+function durationText(item) {
+  const result = item.execution_result || {};
+  const value = result.run_time;
+  if (typeof value !== 'number') return '';
+  if (value < 0.001) return `${(value * 1000000).toFixed(0)} \u00B5s`;
+  if (value < 1) return `${(value * 1000).toFixed(1)} ms`;
+  return `${value.toFixed(3)} s`;
+}
+
+const COLUMNS = [
+  {
+    key: 'description',
+    label: 'Description',
+    sortable: true,
+    render: (item) => <td class="cell-description">{item.description || ''}</td>,
+    searchValue: (item) => `${item.description || ''} ${item.id || ''}`,
+  },
+  {
+    key: 'location',
+    label: 'Location',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-location">
+        <code>{item.location || ''}</code>
+      </td>
+    ),
+    searchValue: (item) => item.location || '',
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-status">
+        <span class={`badge ${statusClass(item.status)}`}>{item.status || 'unknown'}</span>
+      </td>
+    ),
+    searchValue: (item) => item.status || '',
+  },
+  {
+    key: 'run_reason',
+    label: 'Run reason',
+    sortable: true,
+    render: (item) => <td class="cell-reason">{item.run_reason || ''}</td>,
+    searchValue: (item) => item.run_reason || '',
+  },
+  {
+    key: 'duration',
+    label: 'Duration',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => <td class="cell-duration is-numeric">{durationText(item)}</td>,
+    sortValue: (item) => {
+      const result = item.execution_result || {};
+      return typeof result.run_time === 'number' ? result.run_time : -1;
+    },
+    searchValue: (item) => durationText(item),
+  },
+];
+
+export function AllExamples({ items }) {
+  return (
+    <ReportTable
+      id="all-examples"
+      caption="All examples"
+      columns={COLUMNS}
+      items={items}
+      emptyMessage="No examples tracked in this run."
+    />
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/DuplicateExamples.jsx

@@ -0,0 +1,68 @@
+import { ReportTable } from './ReportTable.jsx';
+
+function flatten(items) {
+  const rows = [];
+  items.forEach((group) => {
+    (group.entries || []).forEach((entry, index) => {
+      rows.push({
+        id: `${group.id}-${index}`,
+        groupId: group.id,
+        count: group.count,
+        description: entry.description || '',
+        location: entry.location || '',
+      });
+    });
+  });
+  return rows;
+}
+
+const COLUMNS = [
+  {
+    key: 'groupId',
+    label: 'Example ID',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-id">
+        <code>{item.groupId}</code>
+      </td>
+    ),
+    searchValue: (item) => item.groupId || '',
+  },
+  {
+    key: 'count',
+    label: 'Occurrences',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => <td class="cell-count is-numeric">{item.count}</td>,
+    sortValue: (item) => item.count,
+  },
+  {
+    key: 'description',
+    label: 'Description',
+    sortable: true,
+    render: (item) => <td class="cell-description">{item.description}</td>,
+  },
+  {
+    key: 'location',
+    label: 'Location',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-location">
+        <code>{item.location}</code>
+      </td>
+    ),
+  },
+];
+
+export function DuplicateExamples({ items }) {
+  const rows = flatten(items || []);
+  return (
+    <ReportTable
+      id="duplicate-examples"
+      caption="Duplicate examples"
+      columns={COLUMNS}
+      items={rows}
+      emptyMessage="No duplicate examples detected."
+    />
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/ExamplesDependency.jsx

@@ -0,0 +1,78 @@
+import { ReportTable } from './ReportTable.jsx';
+
+const COLUMNS = [
+  {
+    key: 'example_id',
+    label: 'Example ID',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-id">
+        <code>{item.example_id}</code>
+      </td>
+    ),
+  },
+  {
+    key: 'files_count',
+    label: 'Files',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => <td class="cell-count is-numeric">{(item.files || []).length}</td>,
+    sortValue: (item) => (item.files || []).length,
+    searchValue: (item) => String((item.files || []).length),
+  },
+  {
+    key: 'env_keys_count',
+    label: 'Env keys',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => <td class="cell-count is-numeric">{(item.env_keys || []).length}</td>,
+    sortValue: (item) => (item.env_keys || []).length,
+    searchValue: (item) => (item.env_keys || []).join(' '),
+  },
+  {
+    key: 'files',
+    label: 'Dependencies',
+    sortable: false,
+    render: (item) => (
+      <td class="cell-deps">
+        {(item.files || []).length > 0 && (
+          <details class="deps-details">
+            <summary>{(item.files || []).length} files</summary>
+            <ul class="deps-list">
+              {(item.files || []).map((file) => (
+                <li key={file}>
+                  <code>{file}</code>
+                </li>
+              ))}
+            </ul>
+          </details>
+        )}
+        {(item.env_keys || []).length > 0 && (
+          <details class="deps-details deps-env">
+            <summary>{(item.env_keys || []).length} env keys</summary>
+            <ul class="deps-list">
+              {(item.env_keys || []).map((key) => (
+                <li key={key}>
+                  <code>{key}</code>
+                </li>
+              ))}
+            </ul>
+          </details>
+        )}
+      </td>
+    ),
+    searchValue: (item) => [...(item.files || []), ...(item.env_keys || [])].join(' '),
+  },
+];
+
+export function ExamplesDependency({ items }) {
+  return (
+    <ReportTable
+      id="examples-dependency"
+      caption="Examples dependency"
+      columns={COLUMNS}
+      items={items}
+      emptyMessage="No dependencies tracked."
+    />
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/FilesDependency.jsx

@@ -0,0 +1,72 @@
+import { ReportTable } from './ReportTable.jsx';
+
+const COLUMNS = [
+  {
+    key: 'file_name',
+    label: 'File',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-file">
+        <code>{item.file_name}</code>
+      </td>
+    ),
+  },
+  {
+    key: 'example_count',
+    label: 'Examples',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => <td class="cell-count is-numeric">{item.example_count || 0}</td>,
+    sortValue: (item) => item.example_count || 0,
+  },
+  {
+    key: 'spec_file_count',
+    label: 'Spec files',
+    sortable: true,
+    className: 'is-numeric',
+    render: (item) => (
+      <td class="cell-count is-numeric">{Object.keys(item.spec_files || {}).length}</td>
+    ),
+    sortValue: (item) => Object.keys(item.spec_files || {}).length,
+    searchValue: (item) => Object.keys(item.spec_files || {}).join(' '),
+  },
+  {
+    key: 'spec_files',
+    label: 'Dependent spec files',
+    sortable: false,
+    render: (item) => {
+      const entries = Object.entries(item.spec_files || {});
+      if (entries.length === 0) {
+        return <td class="cell-deps" />;
+      }
+      return (
+        <td class="cell-deps">
+          <details class="deps-details">
+            <summary>{entries.length} spec files</summary>
+            <ul class="deps-list">
+              {entries.map(([spec, count]) => (
+                <li key={spec}>
+                  <code>{spec}</code>
+                  <span class="dep-count">&times;{count}</span>
+                </li>
+              ))}
+            </ul>
+          </details>
+        </td>
+      );
+    },
+    searchValue: (item) => Object.keys(item.spec_files || {}).join(' '),
+  },
+];
+
+export function FilesDependency({ items }) {
+  return (
+    <ReportTable
+      id="files-dependency"
+      caption="Files dependency"
+      columns={COLUMNS}
+      items={items}
+      emptyMessage="No file dependencies tracked."
+    />
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/FlakyExamples.jsx

@@ -0,0 +1,42 @@
+import { ReportTable } from './ReportTable.jsx';
+
+const COLUMNS = [
+  {
+    key: 'id',
+    label: 'Example ID',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-id">
+        <code>{item.id}</code>
+      </td>
+    ),
+  },
+  {
+    key: 'description',
+    label: 'Description',
+    sortable: true,
+    render: (item) => <td class="cell-description">{item.description || ''}</td>,
+  },
+  {
+    key: 'location',
+    label: 'Location',
+    sortable: true,
+    render: (item) => (
+      <td class="cell-location">
+        <code>{item.location || ''}</code>
+      </td>
+    ),
+  },
+];
+
+export function FlakyExamples({ items }) {
+  return (
+    <ReportTable
+      id="flaky-examples"
+      caption="Flaky examples"
+      columns={COLUMNS}
+      items={items}
+      emptyMessage="No flaky examples detected."
+    />
+  );
+}

data/lib/rspec_tracer/reporters/html/src/components/ReportTable.jsx

@@ -0,0 +1,131 @@
+import { useMemo, useState } from 'preact/hooks';
+import { SearchBar } from './SearchBar.jsx';
+
+// Shared tabular primitive. Columns are declarative:
+//   { key, label, sortable?: bool, className?: string,
+//     render: (item) => <td>...</td>, sortValue?: (item) => Comparable,
+//     searchValue?: (item) => string }
+//
+// sortValue defaults to the cell's searchValue; searchValue defaults to
+// the string form of item[key]. Sort is ascending by default; clicking
+// an already-sorted column toggles descending, clicking again clears.
+export function ReportTable({ id, caption, columns, items, emptyMessage }) {
+  const [filter, setFilter] = useState('');
+  const [sort, setSort] = useState({ key: null, direction: 'asc' });
+
+  const searchableColumns = useMemo(
+    () => columns.map((col) => ({ ...col, searchValue: searchFn(col) })),
+    [columns]
+  );
+
+  const filtered = useMemo(() => {
+    if (!filter) return items;
+    const needle = filter.toLowerCase();
+    return items.filter((item) =>
+      searchableColumns.some((col) => {
+        const value = col.searchValue(item);
+        return value && value.toLowerCase().includes(needle);
+      })
+    );
+  }, [items, filter, searchableColumns]);
+
+  const sorted = useMemo(() => {
+    if (!sort.key) return filtered;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return filtered;
+    const extractor = col.sortValue || searchFn(col);
+    const direction = sort.direction === 'desc' ? -1 : 1;
+    return [...filtered].sort((a, b) => {
+      const av = extractor(a);
+      const bv = extractor(b);
+      if (av === bv) return 0;
+      if (av === null || av === undefined) return 1;
+      if (bv === null || bv === undefined) return -1;
+      return av > bv ? direction : -direction;
+    });
+  }, [filtered, sort, columns]);
+
+  const handleSort = (key, sortable) => {
+    if (!sortable) return;
+    if (sort.key !== key) {
+      setSort({ key, direction: 'asc' });
+    } else if (sort.direction === 'asc') {
+      setSort({ key, direction: 'desc' });
+    } else {
+      setSort({ key: null, direction: 'asc' });
+    }
+  };
+
+  return (
+    <div class="report-table">
+      <SearchBar
+        id={`${id}-search`}
+        value={filter}
+        onInput={setFilter}
+        placeholder={`Filter ${caption.toLowerCase()}...`}
+      />
+      <p class="report-table__counts" aria-live="polite">
+        Showing {sorted.length} of {items.length}
+      </p>
+      <table class="data-table" aria-describedby={`${id}-search`}>
+        <caption class="visually-hidden">{caption}</caption>
+        <thead>
+          <tr>
+            {columns.map((col) => {
+              const isSorted = sort.key === col.key;
+              const sortState = isSorted ? sort.direction : 'none';
+              return (
+                <th
+                  key={col.key}
+                  scope="col"
+                  class={`${col.className || ''} ${col.sortable ? 'is-sortable' : ''}`.trim()}
+                  aria-sort={
+                    isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none'
+                  }
+                >
+                  {col.sortable ? (
+                    <button
+                      type="button"
+                      class="sort-button"
+                      onClick={() => handleSort(col.key, col.sortable)}
+                      data-sort={sortState}
+                    >
+                      {col.label}
+                      <span class="sort-indicator" aria-hidden="true">
+                        {isSorted ? (sort.direction === 'asc' ? '\u25B2' : '\u25BC') : '\u2195'}
+                      </span>
+                    </button>
+                  ) : (
+                    col.label
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.length === 0 && (
+            <tr>
+              <td class="report-table__empty" colSpan={columns.length}>
+                {emptyMessage || 'No rows to display.'}
+              </td>
+            </tr>
+          )}
+          {sorted.map((item, index) => (
+            <tr key={item.id || item.example_id || item.file_name || index}>
+              {columns.map((col) => col.render(item))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function searchFn(col) {
+  if (col.searchValue) return col.searchValue;
+  return (item) => {
+    const value = item[col.key];
+    return value === null || value === undefined ? '' : String(value);
+  };
+}

data/lib/rspec_tracer/reporters/html/src/components/SearchBar.jsx

@@ -0,0 +1,19 @@
+export function SearchBar({ value, onInput, placeholder, id }) {
+  return (
+    <div class="search-bar">
+      <label class="search-label" htmlFor={id}>
+        Filter
+      </label>
+      <input
+        id={id}
+        class="search-input"
+        type="search"
+        value={value}
+        placeholder={placeholder || 'Type to filter rows...'}
+        autoComplete="off"
+        spellCheck={false}
+        onInput={(event) => onInput(event.currentTarget.value)}
+      />
+    </div>
+  );
+}

data/lib/rspec_tracer/reporters/html/src/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content="rspec-tracer" />
+    <title>RSpec Tracer Report</title>
+  </head>
+  <body>
+    <noscript>
+      <div class="noscript-banner">
+        JavaScript is disabled. Interactive search and sort are unavailable; the static tables below
+        contain the full run data.
+      </div>
+    </noscript>
+    <div id="app" data-hydrate="pending"></div>
+    <!-- RSPEC_TRACER_FALLBACK -->
+    <script id="report-data" type="application/json">
+      {}
+    </script>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>