82 lines
4.3 KiB
JavaScript
82 lines
4.3 KiB
JavaScript
import test from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import fs from 'node:fs/promises';
|
|
import path from 'node:path';
|
|
|
|
const ROOT = process.cwd();
|
|
|
|
async function read(relativePath) {
|
|
return fs.readFile(path.join(ROOT, relativePath), 'utf8');
|
|
}
|
|
|
|
test('graph page defines tabbed layout, epic chips, and mobile fallback', async () => {
|
|
const graphPage = await read('src/components/graph/dependency-graph-page.tsx');
|
|
|
|
// Tabbed layout: Tasks and Dependencies tabs
|
|
assert.match(graphPage, /WorkflowTabs/, 'should use WorkflowTabs component');
|
|
assert.match(graphPage, /activeTab/, 'should track active tab state');
|
|
|
|
// Epic chip strip replaces sidebar
|
|
assert.match(graphPage, /EpicChipStrip/, 'should use EpicChipStrip component');
|
|
|
|
// Mobile panel toggle preserved
|
|
assert.match(graphPage, /Switch to Graph/);
|
|
assert.match(graphPage, /Back to Selection/);
|
|
|
|
// Task card grid extracted
|
|
assert.match(graphPage, /TaskCardGrid/, 'should use TaskCardGrid component');
|
|
|
|
// Task details drawer
|
|
assert.match(graphPage, /TaskDetailsDrawer/, 'should use TaskDetailsDrawer drawer');
|
|
assert.match(graphPage, /projectRoot=\{projectRoot\}/, 'drawer should receive project root for edits');
|
|
assert.match(graphPage, /onIssueUpdated=\{.*refreshIssues\(\)\}/, 'drawer should trigger refresh after edits');
|
|
|
|
// Dependency flow strip
|
|
assert.match(graphPage, /DependencyFlowStrip/, 'should use DependencyFlowStrip component');
|
|
|
|
// Graph section with ReactFlow
|
|
assert.match(graphPage, /GraphSection/, 'should use GraphSection component');
|
|
assert.match(graphPage, /ReactFlowProvider/, 'should wrap graph in ReactFlowProvider');
|
|
|
|
// Edge options and node types still configured
|
|
assert.match(graphPage, /defaultEdgeOptions/);
|
|
assert.match(graphPage, /nodeTypes/);
|
|
|
|
// Actionable node detection
|
|
assert.match(graphPage, /actionableNodeIds/, 'should compute actionable (unblocked) nodes');
|
|
assert.match(graphPage, /ui-field/, 'graph filters should use shared dark field styling');
|
|
assert.match(graphPage, /ui-select/, 'graph select should use shared dark select styling');
|
|
});
|
|
|
|
test('extracted graph section has viewport and legend', async () => {
|
|
const graphSection = await read('src/components/graph/graph-section.tsx');
|
|
|
|
assert.match(graphSection, /className=\"workflow-graph-flow\"/, 'graph should have workflow-graph-flow class');
|
|
assert.match(graphSection, /workflow-graph-legend/, 'should have legend');
|
|
assert.match(graphSection, /translateExtent=\{\[/, 'should set translate extent');
|
|
assert.match(graphSection, /defaultEdgeOptions=\{/, 'should pass edge options');
|
|
assert.match(graphSection, /blockerAnalysis/, 'should show blocker stats');
|
|
assert.match(graphSection, /hideClosed/, 'should support hideClosed state in legend');
|
|
assert.match(graphSection, /!hideClosed/, 'done legend should be hidden when closed items are hidden');
|
|
assert.match(graphSection, /Read left to right/, 'legend should include plain directional hint');
|
|
assert.match(graphSection, /Left = blockers/, 'legend should include left/right dependency meaning');
|
|
assert.match(graphSection, /Right = work unblocked by this task/, 'legend should include downstream meaning');
|
|
assert.match(graphSection, /min-h-\[24rem\]/, 'graph container should enforce bounded minimum height');
|
|
assert.match(graphSection, /md:min-h-\[35rem\]/, 'graph container should scale minimum height on desktop');
|
|
});
|
|
|
|
test('graph node card supports tooltips and actionable glow', async () => {
|
|
const nodeCard = await read('src/components/graph/graph-node-card.tsx');
|
|
|
|
assert.match(nodeCard, /isActionable/, 'should check actionable state');
|
|
assert.match(nodeCard, /ring-emerald-400/, 'actionable nodes should have green glow');
|
|
assert.match(nodeCard, /node-select-pulse/, 'selected nodes should pulse');
|
|
assert.match(nodeCard, /blockerTooltipLines/, 'should display blocker tooltip');
|
|
assert.match(nodeCard, /isDimmed/, 'should support dimming non-chain nodes');
|
|
assert.match(nodeCard, /Ready to work/, 'actionable tooltip text');
|
|
});
|
|
|
|
test('graph edges expose explicit relation labels', async () => {
|
|
const graphPage = await read('src/components/graph/dependency-graph-page.tsx');
|
|
assert.match(graphPage, /label:\s*'BLOCKS'/, 'edges should include plain-language relation labels');
|
|
});
|