TDD UI+Backend on HyperShift

Fast iteration loop for Rossoctl UI and backend development on a live HyperShift cluster. Covers the full cycle: edit → commit → push → build → rollout → Playwright test.

When to Use

• Fixing UI rendering bugs (SandboxPage, ChatBubble, etc.)
• Fixing backend API issues (sandbox_deploy, chat streaming)
• Adding new UI features and testing on live cluster
• Iterating on Playwright E2E tests

Setup (once per session)

# Cluster config
export CLUSTER=sbox42
export MANAGED_BY_TAG=rossoctl-team
export KUBECONFIG=~/clusters/hcp/${MANAGED_BY_TAG}-${CLUSTER}/auth/kubeconfig
export LOG_DIR="${LOG_DIR:-/tmp/rossoctl/tdd/ui-${CLUSTER}}"
mkdir -p "$LOG_DIR"

# Keycloak password (stored in K8s secret, not hardcoded)
export KEYCLOAK_PASSWORD=$(kubectl -n keycloak get secret rossoctl-test-users \
  -o jsonpath='{.data.admin-password}' | base64 -d)

# UI URL from OpenShift route
export ROSSOCTL_UI_URL="https://$(kubectl get route rossoctl-ui -n rossoctl-system \
  -o jsonpath='{.spec.host}')"

# Working directory
cd "${WORKTREE_DIR:-.worktrees/sandbox-agent}"/rossoctl/ui-v2

Iteration Levels (fastest first)

Level 0: Test-only change (~30s)

Test file changed, no build needed:

KUBECONFIG=$KUBECONFIG ROSSOCTL_UI_URL=$ROSSOCTL_UI_URL \
  KEYCLOAK_USER=admin KEYCLOAK_PASSWORD=$KEYCLOAK_PASSWORD \
  npx playwright test e2e/<spec>.spec.ts --reporter=list \
  > $LOG_DIR/test.log 2>&1; echo "EXIT:$?"

Level 1: UI-only change (~2min)

Frontend code changed (components, pages, styles):

# 1. Commit + push
git add -u && git commit -s -m "fix(ui): <description>" && git push

# 2. Build UI image (~90s)
oc -n rossoctl-system start-build rossoctl-ui > $LOG_DIR/ui-build.log 2>&1
# Poll until complete:
while ! oc -n rossoctl-system get build rossoctl-ui-$(oc -n rossoctl-system get bc rossoctl-ui -o jsonpath='{.status.lastVersion}') -o jsonpath='{.status.phase}' 2>/dev/null | grep -qE 'Complete|Failed'; do sleep 10; done
echo "Build: $(oc -n rossoctl-system get build rossoctl-ui-$(oc -n rossoctl-system get bc rossoctl-ui -o jsonpath='{.status.lastVersion}') -o jsonpath='{.status.phase}')"

# 3. Rollout (~15s)
oc -n rossoctl-system rollout restart deploy/rossoctl-ui
oc -n rossoctl-system rollout status deploy/rossoctl-ui --timeout=60s

# 4. Test
npx playwright test e2e/<spec>.spec.ts --reporter=list > $LOG_DIR/test.log 2>&1; echo "EXIT:$?"

Level 2: Backend-only change (~90s)

Backend Python code changed (routers, services):

# 1. Commit + push
git add -u && git commit -s -m "fix(backend): <description>" && git push

# 2. Build backend image (~30s — Python, no npm)
oc -n rossoctl-system start-build rossoctl-backend > $LOG_DIR/be-build.log 2>&1
# Wait for completion (same polling pattern as UI)

# 3. Rollout
oc -n rossoctl-system rollout restart deploy/rossoctl-backend
oc -n rossoctl-system rollout status deploy/rossoctl-backend --timeout=90s

# 4. Test
npx playwright test e2e/<spec>.spec.ts --reporter=list > $LOG_DIR/test.log 2>&1; echo "EXIT:$?"

Level 3: Both UI + backend (~3min)

git add -u && git commit -s -m "fix: <description>" && git push

# Build both in parallel
oc -n rossoctl-system start-build rossoctl-backend &
oc -n rossoctl-system start-build rossoctl-ui &
wait
# Poll both until complete, then:

oc -n rossoctl-system rollout restart deploy/rossoctl-backend deploy/rossoctl-ui
oc -n rossoctl-system rollout status deploy/rossoctl-backend --timeout=90s
oc -n rossoctl-system rollout status deploy/rossoctl-ui --timeout=90s

# Test
npx playwright test e2e/<spec>.spec.ts --reporter=list > $LOG_DIR/test.log 2>&1; echo "EXIT:$?"

Common Patterns

Agent cleanup before test

oc -n team1 delete deploy ${AGENT_NAME} --ignore-not-found
oc -n team1 delete svc ${AGENT_NAME} --ignore-not-found

Check pod crash reason

oc -n rossoctl-system logs deploy/rossoctl-backend -c backend --tail=20
oc -n team1 describe pod -l app.kubernetes.io/name=${AGENT_NAME} | grep -A5 "Events\|Error"

Build failure diagnosis

oc -n rossoctl-system logs build/rossoctl-ui-$(oc -n rossoctl-system get bc rossoctl-ui -o jsonpath='{.status.lastVersion}') | tail -20

SPA routing for session reload (Keycloak redirect workaround)

In Playwright tests, navigating to /sandbox?session=<id> via page.goto() triggers Keycloak re-auth which redirects to /. Use SPA routing instead:

// Login first on /
await page.goto('/');
await loginIfNeeded(page);
// Then SPA-navigate (no full page reload, no Keycloak redirect)
await page.evaluate((sid) => {
  window.history.pushState({}, '', `/sandbox?session=${sid}`);
  window.dispatchEvent(new PopStateEvent('popstate'));
}, sessionId);

Checklist

Before each iteration:

• Changes committed and pushed (build configs pull from git)
• Correct KUBECONFIG exported
• KEYCLOAK_PASSWORD refreshed (passwords rotate)
• Previous test agent cleaned up (if applicable)

After green tests:

• Push final commit
• Run full suite: npx playwright test --reporter=list
• Check for regressions in other spec files

Related Skills

• test:ui — Playwright test writing patterns and selectors
• tdd:hypershift — Python E2E tests via hypershift-full-test.sh
• rossoctl:ui-debug — Debug 502s, proxy issues, auth problems
• k8s:live-debugging — Debug pods, logs, configs on live cluster