feat(03-05): wire App.tsx step router and make App.test GREEN

- App.tsx: WizardShell routes to BackendSelectionStep/RemoteConfigStep/DeploymentStep
- App.tsx: StepIndicator renders above every step as persistent breadcrumb
- App.tsx: RemoteConfigStep keyed on backendType to force remount on backend change
- App.test.tsx: all 3 WIZD-02 tests GREEN (step 0, 1, 2 routing verified)
- Full suite: 87 tests GREEN across 11 test files
This commit is contained in:
2026-03-27 09:46:02 +01:00
parent b00305c9a0
commit 8674bb83b3
2 changed files with 69 additions and 38 deletions
+36 -3
View File
@@ -1,12 +1,45 @@
// src/App.tsx
// Step router — renders the correct step component based on currentStep.
// StepIndicator renders above each step as persistent breadcrumb navigation.
import { useWizard } from './store/context';
import { WizardProvider } from './store/context';
import { StepIndicator } from './components/wizard/StepIndicator';
import { BackendSelectionStep } from './components/wizard/BackendSelectionStep';
import { RemoteConfigStep } from './components/wizard/RemoteConfigStep';
import { DeploymentStep } from './components/wizard/DeploymentStep';
function WizardShell() {
const { state } = useWizard();
const steps = [
<BackendSelectionStep key="backend" />,
// Key on backendType to force remount when backend changes — prevents stale form values
<RemoteConfigStep key={state.remote.backendType ?? 'none'} />,
<DeploymentStep key="deployment" />,
];
// Guard: clamp to valid range (phase 4 will add step 3 for review/download)
const stepIndex = Math.min(state.currentStep, steps.length - 1);
const CurrentStep = steps[stepIndex];
return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center py-12 px-4">
<div className="w-full max-w-2xl">
<h1 className="text-3xl font-bold text-gray-900 mb-8 text-center">Ready2Blob</h1>
<StepIndicator />
<div className="mt-8">
{CurrentStep}
</div>
</div>
</div>
);
}
export default function App() {
return (
<WizardProvider>
<div className="p-4">
<h1 className="text-2xl font-bold">Ready2Blob</h1>
</div>
<WizardShell />
</WizardProvider>
);
}