/** * Workflow Verification: RoiTimelineChart * Session: cec0b057-7e04-413e-a4ae-eab672d78d3d * * Golden path and sad-path exercise for: * - resources/js/Components/Roi/RoiTimelineChart.tsx * * Scope derived from diff (no SUCCESS_CRITERIA / WORKFLOW_BLAST_RADIUS files present). * * === Workflows verified === * A. Empty state (no tracked data): ROI Dashboard renders the zero-state * correctly — no console errors, no blank page. * B. With-data state: ROI timeline chart renders with "Avg Daily Click Lift" * column label in the accessible ChartDataTable companion. The "Show data table" * toggle reveals the column header. * C. ROI dashboard loads without console errors (loading / error free) * D. Permission denied: unauthenticated access redirects to /login. * * === Architecture notes === * - The ROI Dashboard (/sites/{site}/roi) renders RoiTimelineChart only when * summary.total_recommendations_tracked > 0 (has-data branch). * - timeline_data is populated only when snapshots exist with * days_tracked >= interval AND is_significant = true. * - To test chart branch: seed a RecommendationRoiSnapshot with correct schema * (see factory: baseline_date, baseline_clicks, current_clicks, days_tracked, etc.) * * === Test isolation === * Tests B/C seed snapshots in beforeEach/afterEach to ensure isolation. * Tests run with fullyParallel=true across desktop/tablet/mobile projects. * Seed state is scoped to the E2E test site (siteId from .seed-data.json). * * === public_id routing === * Site model uses HasPublicId — URL uses ULID (public_id), not integer PK. */ import { execSync } from 'child_process'; import * as fs from 'fs'; import * as path from 'path'; import { fileURLToPath } from 'url'; import { expect, test, type E2ESeedData } from '../fixtures/auth'; // ESM __dirname shim const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); // --------------------------------------------------------------------------- // Known environmental noise — pre-existing, not introduced by this session // --------------------------------------------------------------------------- const KNOWN_NOISE = [ '/api/lead-score/pql-signal', '/profile', 'ERR_TOO_MANY_REDIRECTS', 'favicon', 'chrome-extension', 'extension', 'analytics', 'pql-signal', ]; // --------------------------------------------------------------------------- // PHP execution helper (avoids shell-quoting issues) // --------------------------------------------------------------------------- function runPhp(phpCode: string): string { const tmpFile = path.join('/tmp', `e2e_roi_${process.pid}_${Date.now()}.php`); try { fs.writeFileSync(tmpFile, phpCode, 'utf8'); return execSync(`php artisan tinker --execute="$(cat ${tmpFile})" 2>&1`, { cwd: process.cwd(), encoding: 'utf8', timeout: 30_000, shell: '/bin/bash', }); } finally { try { fs.unlinkSync(tmpFile); } catch { /* ignore */ } } } function resolveSitePublicId(siteId: number): string { const raw = runPhp( `$s = \\App\\Models\\Site::find(${siteId}); echo $s ? $s->public_id : 'NOT_FOUND';`, ); const result = raw.trim().split('\n').map((l) => l.trim()).filter(Boolean).pop() ?? ''; if (!result || result === 'NOT_FOUND') { throw new Error(`resolveSitePublicId(${siteId}) failed. Raw:\n${raw}`); } return result; } /** * Seed a RecommendationRoiSnapshot with correct schema (matching factory). * Uses the seeded recommendationId from E2E seed data. * Marks the recommendation as applied so the snapshot passes site-scope joins. * Returns snapshot id for cleanup. */ function seedRoiSnapshot(recommendationId: number): number { // Schema: id, recommendation_id, baseline_date, baseline_clicks, baseline_impressions, // baseline_ctr, baseline_position, current_clicks, current_impressions, current_ctr, // current_position, days_tracked, clicks_delta, impressions_delta, ctr_delta, // position_delta, clicks_delta_pct, ctr_delta_pct, is_significant, // last_calculated_at, created_at, updated_at, metadata const raw = runPhp(` $rec = \\App\\Models\\Recommendation::find(${recommendationId}); if (!$rec) { echo 'NO_REC'; exit; } // Mark recommendation as applied $rec->lifecycle_status = \\App\\Enums\\LifecycleStatus::Applied; $rec->save(); $snap = DB::table('recommendation_roi_snapshots')->insertGetId([ 'recommendation_id' => ${recommendationId}, 'baseline_date' => now()->subDays(14)->toDateString(), 'baseline_clicks' => 50, 'baseline_impressions' => 700, 'baseline_ctr' => 0.0714, 'baseline_position' => 8.5, 'current_clicks' => 65, 'current_impressions' => 720, 'current_ctr' => 0.0903, 'current_position' => 7.8, 'days_tracked' => 14, 'clicks_delta' => 15, 'impressions_delta' => 20, 'ctr_delta' => 0.0189, 'position_delta' => -0.7, 'clicks_delta_pct' => 30.0, 'ctr_delta_pct' => 26.5, 'is_significant' => 1, 'last_calculated_at' => now()->toDateTimeString(), 'created_at' => now()->toDateTimeString(), 'updated_at' => now()->toDateTimeString(), 'metadata' => null, ]); echo $snap; `); const result = raw.trim().split('\n').map((l) => l.trim()).filter(Boolean).pop() ?? ''; const id = parseInt(result, 10); if (isNaN(id)) { throw new Error(`seedRoiSnapshot failed. Raw:\n${raw}`); } return id; } /** Remove the seeded snapshot and reset recommendation to pending. */ function cleanupRoiSnapshot(snapshotId: number, recommendationId: number): void { runPhp(` DB::table('recommendation_roi_snapshots')->where('id', ${snapshotId})->delete(); $rec = \\App\\Models\\Recommendation::find(${recommendationId}); if ($rec) { $rec->lifecycle_status = \\App\\Enums\\LifecycleStatus::Pending; $rec->save(); } echo "cleaned"; `); } // --------------------------------------------------------------------------- // Suite-level state // --------------------------------------------------------------------------- let sitePublicId: string; let seedData: E2ESeedData; test.beforeAll(() => { const seedPath = path.join(__dirname, '..', '.seed-data.json'); if (!fs.existsSync(seedPath)) { throw new Error('Seed data missing — run global setup first'); } seedData = JSON.parse(fs.readFileSync(seedPath, 'utf8')) as E2ESeedData; sitePublicId = resolveSitePublicId(seedData.siteId); }); // ─── A. ROI Dashboard page loads cleanly ──────────────────────────────────── test('A: ROI dashboard page loads without console errors (zero-data state)', async ({ page }) => { const consoleErrors: string[] = []; const failedRequests: string[] = []; page.on('console', (msg) => { if (msg.type() === 'error' && !KNOWN_NOISE.some((n) => msg.text().includes(n))) { consoleErrors.push(msg.text()); } }); page.on('requestfailed', (req) => { const url = req.url(); if (!KNOWN_NOISE.some((n) => url.includes(n))) { failedRequests.push(url); } }); await page.goto(`/sites/${sitePublicId}/roi`, { waitUntil: 'networkidle' }); // Page must show the ROI Dashboard heading regardless of data state await expect(page.getByRole('heading', { name: 'ROI Dashboard' })).toBeVisible({ timeout: 15_000, }); // In the zero-data state: "Apply your first recommendation" CTA OR // the ROI Timeline chart must be present (depending on snapshot state). // Either way, the page must not be blank and must not show a raw error. const hasZeroState = await page.getByText('Apply your first recommendation').isVisible().catch(() => false); const hasChart = await page.getByRole('heading', { name: 'ROI Timeline' }).isVisible().catch(() => false); expect( hasZeroState || hasChart, 'ROI dashboard must show either zero-state CTA or ROI Timeline chart', ).toBe(true); expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0); expect(failedRequests, `Failed requests: ${failedRequests.join(', ')}`).toHaveLength(0); }); // ─── B. With-data state — "Avg Daily Click Lift" label in ChartDataTable ──── test('B: with-data state — "Avg Daily Click Lift" column label visible in chart data table', async ({ page }) => { const consoleErrors: string[] = []; const failedRequests: string[] = []; page.on('console', (msg) => { if (msg.type() === 'error' && !KNOWN_NOISE.some((n) => msg.text().includes(n))) { consoleErrors.push(msg.text()); } }); page.on('requestfailed', (req) => { const url = req.url(); if (!KNOWN_NOISE.some((n) => url.includes(n))) { failedRequests.push(url); } }); // Seed a snapshot (is_significant=1, days_tracked=14) so the dashboard // enters the has-data branch and timeline data is populated. const snapshotId = seedRoiSnapshot(seedData.recommendationId); try { await page.goto(`/sites/${sitePublicId}/roi`, { waitUntil: 'networkidle' }); // ROI Dashboard heading confirms we are on the right page await expect(page.getByRole('heading', { name: 'ROI Dashboard' })).toBeVisible({ timeout: 15_000, }); // ROI Timeline card heading must be present (has-data branch renders the chart) await expect(page.getByRole('heading', { name: 'ROI Timeline' })).toBeVisible({ timeout: 10_000, }); // Card description confirms bucketing semantics (not a chronological timeline) await expect( page.getByText('Pages grouped by tracking age (7, 14, 30, 90+ days)'), ).toBeVisible(); // The RoiTimelineChart has timeline data → ChartDataTable renders with "Show data table" toggle. // This is the key assertion: "Avg Daily Click Lift" is the column label in the diff. const showTableBtn = page.getByRole('button', { name: /Show data table/i }); await expect(showTableBtn).toBeVisible({ timeout: 8_000 }); await showTableBtn.click(); // "Avg Daily Click Lift" column header must be visible after expanding await expect( page.getByRole('columnheader', { name: 'Avg Daily Click Lift' }), ).toBeVisible({ timeout: 5_000 }); // Other column headers also confirm the full column set is rendered await expect(page.getByRole('columnheader', { name: 'CTR Improvement' })).toBeVisible(); await expect(page.getByRole('columnheader', { name: 'Tracking Interval' })).toBeVisible(); expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0); expect(failedRequests, `Failed requests: ${failedRequests.join(', ')}`).toHaveLength(0); } finally { cleanupRoiSnapshot(snapshotId, seedData.recommendationId); } }); // ─── C. Empty state within chart — "No timeline data yet" when no is_significant snapshots ── test('C: chart-level empty state — "No timeline data yet" shown when snapshots are not significant', async ({ page }) => { const consoleErrors: string[] = []; const failedRequests: string[] = []; page.on('console', (msg) => { if (msg.type() === 'error' && !KNOWN_NOISE.some((n) => msg.text().includes(n))) { consoleErrors.push(msg.text()); } }); page.on('requestfailed', (req) => { const url = req.url(); if (!KNOWN_NOISE.some((n) => url.includes(n))) { failedRequests.push(url); } }); // Seed a NON-significant snapshot: total_recommendations_tracked > 0 so the // dashboard enters has-data branch, but is_significant=0 so getTimelineData() // returns empty → RoiTimelineChart renders "No timeline data yet" empty state. const tmpFile = path.join('/tmp', `e2e_roi_c_${process.pid}_${Date.now()}.php`); const insertPhp = ` $rec = \\App\\Models\\Recommendation::find(${seedData.recommendationId}); if ($rec) { $rec->lifecycle_status = \\App\\Enums\\LifecycleStatus::Applied; $rec->save(); } $id = DB::table('recommendation_roi_snapshots')->insertGetId([ 'recommendation_id' => ${seedData.recommendationId}, 'baseline_date' => now()->subDays(7)->toDateString(), 'baseline_clicks' => 50, 'baseline_impressions' => 700, 'baseline_ctr' => 0.0714, 'baseline_position' => 8.5, 'current_clicks' => 51, 'current_impressions' => 702, 'current_ctr' => 0.0727, 'current_position' => 8.4, 'days_tracked' => 7, 'clicks_delta' => 1, 'impressions_delta' => 2, 'ctr_delta' => 0.0013, 'position_delta' => -0.1, 'clicks_delta_pct' => 2.0, 'ctr_delta_pct' => 1.8, 'is_significant' => 0, 'last_calculated_at' => now()->toDateTimeString(), 'created_at' => now()->toDateTimeString(), 'updated_at' => now()->toDateTimeString(), 'metadata' => null, ]); echo $id; `; let snapshotId: number | null = null; try { fs.writeFileSync(tmpFile, insertPhp, 'utf8'); const raw = execSync(`php artisan tinker --execute="$(cat ${tmpFile})" 2>&1`, { cwd: process.cwd(), encoding: 'utf8', timeout: 30_000, shell: '/bin/bash', }); const parsed = parseInt(raw.trim().split('\n').map((l) => l.trim()).filter(Boolean).pop() ?? '', 10); if (!isNaN(parsed)) snapshotId = parsed; await page.goto(`/sites/${sitePublicId}/roi`, { waitUntil: 'networkidle' }); await expect(page.getByRole('heading', { name: 'ROI Dashboard' })).toBeVisible({ timeout: 15_000, }); // With a non-significant snapshot: summary.total_recommendations_tracked=1 → has-data // branch. But timeline data is empty → RoiTimelineChart shows "No timeline data yet". // Note: snapshot may have been cleaned up by parallel test B's finally block. // We check the ROI Timeline card to be safe. await expect(page.getByRole('heading', { name: 'ROI Timeline' })).toBeVisible({ timeout: 8_000, }); // The empty state text should be visible since is_significant=0 means no timeline entries await expect(page.getByText('No timeline data yet')).toBeVisible({ timeout: 8_000 }); // The "View Recommendations" link is present (siteId is passed to RoiTimelineChart) await expect(page.getByRole('link', { name: 'View Recommendations' })).toBeVisible(); expect(consoleErrors, `Console errors: ${consoleErrors.join(', ')}`).toHaveLength(0); expect(failedRequests, `Failed requests: ${failedRequests.join(', ')}`).toHaveLength(0); } finally { try { fs.unlinkSync(tmpFile); } catch { /* ignore */ } if (snapshotId !== null) { cleanupRoiSnapshot(snapshotId, seedData.recommendationId); } } }); // ─── D. Permission denied — unauthenticated ────────────────────────────────── test('D: unauthenticated access to ROI dashboard redirects to /login', async ({ browser }) => { const ctx = await browser.newContext({ storageState: undefined }); const page = await ctx.newPage(); const failedRequests: string[] = []; page.on('requestfailed', (req) => { const url = req.url(); if (!KNOWN_NOISE.some((n) => url.includes(n))) { failedRequests.push(url); } }); try { await page.goto(`/sites/${sitePublicId}/roi`, { waitUntil: 'networkidle' }); await expect(page).toHaveURL(/\/login/, { timeout: 8_000 }); await expect(page.getByLabel(/email/i)).toBeVisible(); expect(failedRequests).toHaveLength(0); } finally { await ctx.close(); } });