test-ui

UI System Test

Run 5 test suites covering panel loading, ScreenSpace, system registration, component registration, and stability.

Configuration:

• EXAMPLE_DIR: $IWSDK_REPO_ROOT/examples/poke

Tool calls: every tool call is npx @iwsdk/cli <subcommand> [--input-json '<JSON>'] [--timeout <ms>], run from inside the example workspace (cwd $EXAMPLE_DIR). The CLI auto-discovers the IWSDK app root from cwd, so no path tricks are required. Run npx @iwsdk/cli mcp inspect from the example to discover available tools and their CLI subcommands.

• <JSON> is a JSON object string. Omit --input-json if no arguments are needed.
• Output is JSON on stdout: {ok, workspaceRoot, operation, result}. Parse it to check assertions.
• Use --timeout 20000 for operations that may take longer (reload, xr enter, screenshot).

IMPORTANT: Run each Bash command one at a time. Parse the JSON output and verify assertions before moving to the next command. Do NOT chain multiple CLI commands together.

IMPORTANT: When the instructions say "wait N seconds", use sleep N as a separate Bash command.

Step 1: Install Dependencies

cd $IWSDK_REPO_ROOT/examples/poke && npm run fresh:install

Wait for this to complete before proceeding.

Step 2: Start Dev Server

Start the dev server as a background task using the Bash tool's run_in_background: true parameter:

cd $IWSDK_REPO_ROOT/examples/poke && npm run dev

IMPORTANT: This command MUST be run with run_in_background: true on the Bash tool — do NOT append & to the command itself.

Once the background task is launched, poll the output for Vite's ready message (up to 60s). You can also run npx @iwsdk/cli dev status from the example directory until state.running becomes true. You do not need to extract or manage the port yourself; subsequent commands resolve the active runtime through the CLI automatically.

If the server fails to start within 60 seconds, report FAIL for all suites and skip to Step 5.

Step 3: Verify Connectivity

npx @iwsdk/cli ecs systems 2>/dev/null

This must return JSON with a list of systems. If it fails:

1. Check the dev server output for errors
2. Try killing and restarting the server (Step 2)
3. If it still fails, report FAIL for all suites and skip to Step 5

Step 4: Run Test Suites

Pre-test Setup

Run these commands in order:

1. npx @iwsdk/cli browser reload --timeout 20000 2>/dev/null Then: sleep 3

2. npx @iwsdk/cli xr enter --timeout 20000 2>/dev/null Then: sleep 2

3. npx @iwsdk/cli browser logs --input-json '{"count":20,"level":["error","warn"]}' 2>/dev/null Assert: No error-level logs.

Suite 1: Panel Loading

Test 1.1: Find Panel Entity

npx @iwsdk/cli ecs find --input-json '{"withComponents":["ScreenSpace"]}' 2>/dev/null

Assert: Exactly 1 entity. Save its entityIndex as <panel>.

Test 1.2: Manifest-backed Panel Entity

npx @iwsdk/cli ecs query --input-json '{"entityIndex":<panel>,"components":["ScreenSpace","RayInteractable","PokeInteractable"]}' 2>/dev/null

Assert:

• ScreenSpace, RayInteractable, and PokeInteractable are present.
• PanelUI and PanelDocument are absent; the UIKitML document is owned by the manifest-backed scene object.

Test 1.3: PanelUISystem Query Counts

npx @iwsdk/cli ecs systems 2>/dev/null

Assert:

• PanelUISystem is present and has no legacy configured/unconfigured panels.
• ScreenSpaceUISystem: panels: 1.

Suite 2: ScreenSpace

Test 2.1: ScreenSpace Values

npx @iwsdk/cli ecs query --input-json '{"entityIndex":<panel>,"components":["ScreenSpace"]}' 2>/dev/null

Assert:

• height = "50%" (CSS expression)
• width = "25vw"
• top = "20px"
• left = "20px"
• bottom = "auto"
• right = "auto"
• zOffset = 0.2 (distance in front of camera near plane)

Test 2.2: Panel Visible in Screenshot

npx @iwsdk/cli browser screenshot --timeout 20000 2>/dev/null

Assert: Returns a screenshotPath (PNG file saved to /tmp).

Test 2.3: ScreenSpaceUISystem Active

npx @iwsdk/cli ecs systems 2>/dev/null

Assert: ScreenSpaceUISystem: panels: 1

Suite 3: System Registration

npx @iwsdk/cli ecs systems 2>/dev/null

Assert:

• PanelUISystem at priority -3.8, config: kit, componentSets, preferredColorScheme
• ScreenSpaceUISystem at priority -3.75
• FollowSystem at priority 0

Suite 4: Component Registration

npx @iwsdk/cli ecs components 2>/dev/null

Assert:

• PanelUI: config (String) as a legacy raw-URL compatibility component
• PanelDocument: document (Object) as legacy runtime state
• ScreenSpace: height, width, top, bottom, left, right (all String), zOffset (Float32)

Suite 5: Stability

npx @iwsdk/cli browser logs --input-json '{"count":30,"level":["error","warn"]}' 2>/dev/null

Assert: No application-level errors or warnings. Pre-existing 404 resource errors from page load are acceptable.

Step 5: Cleanup & Results

Kill the dev server:

cd $IWSDK_REPO_ROOT/examples/poke && npx @iwsdk/cli dev down

Output a summary table:

| Suite                  | Result    |
|------------------------|-----------|
| 1. Panel Loading       | PASS/FAIL |
| 2. ScreenSpace         | PASS/FAIL |
| 3. System Registration | PASS/FAIL |
| 4. Component Reg.      | PASS/FAIL |
| 5. Stability           | PASS/FAIL |

If any suite fails, include which assertion failed and actual vs expected values.

Recovery

If at any point a transient error occurs (server crash, WebSocket timeout, connection refused, etc.) that is NOT caused by a source code bug:

1. Stop the dev server: cd $IWSDK_REPO_ROOT/examples/poke && npx @iwsdk/cli dev down
2. Restart: re-run Step 2 to start a fresh dev server
3. Re-run the Pre-test Setup (reload, accept session)
4. Retry the failed suite

Only give up after one retry attempt per suite. If the same suite fails twice, mark it FAIL and continue to the next suite.

Known Issues & Workarounds

UIKitML asset loading is async

World.create() resolves after manifest source preloading, and world.assets.instantiate() resolves after parsing and document creation. The poke example creates the entity only after that promise resolves.

ScreenSpace re-parenting in XR

When XR is presenting, ScreenSpaceUISystem re-parents the panel from the camera back to the entity's Object3D (world space). CSS positioning only applies outside XR.

Panel interaction

The panel entity also has RayInteractable + PokeInteractable, so it participates in ray/touch interaction. The panel's Hovered component may be present if the default controller ray is pointing at it.

Entity indices change on reload

Never cache entity indices across page reloads. Always re-discover via npx @iwsdk/cli ecs find.