feat: update tutorial to guide user to write mcp server tests

tutorial-cpp-ui-app.md

@@ -419,6 +419,51 @@ nix run . -- --load-modules calc_ui_cpp
 
 ---
 
+## Step 10: UI Integration Tests (Optional)
+
+Add automated UI tests using the [logos-qt-mcp](https://github.com/logos-co/logos-qt-mcp) test framework. Just create `.mjs` files in `tests/` and `logos-module-builder` auto-wires `nix build .#integration-test`.
+
+Create `tests/ui-tests.mjs`:
+
+```javascript
+import { resolve } from "node:path";
+
+// CI sets LOGOS_QT_MCP automatically; for interactive use: nix build .#test-framework -o result-mcp
+const root = process.env.LOGOS_QT_MCP || new URL("../result-mcp", import.meta.url).pathname;
+const { test, run } = await import(resolve(root, "test-framework/framework.mjs"));
+
+test("calc_ui_cpp: loads and shows title", async (app) => {
+  await app.waitFor(
+    async () => { await app.expectTexts(["UI Example (C++ backend)"]); },
+    { timeout: 15000, interval: 500, description: "UI to load" }
+  );
+});
+
+test("calc_ui_cpp: shows connection status", async (app) => {
+  await app.expectTexts(["Connecting to backend..."]);
+});
+
+test("calc_ui_cpp: add button visible", async (app) => {
+  await app.expectTexts(["Add"]);
+});
+
+run();
+```
+
+```bash
+git add tests/
+
+# Hermetic CI test
+nix build .#integration-test -L
+
+# Interactive
+nix build .#test-framework -o result-mcp
+nix run .                     # app with inspector on :3768
+node tests/ui-tests.mjs       # in another terminal
+```
+
+---
+
 ## Comparison: .rep Interface Patterns
 
 | Pattern | .rep declaration | Backend C++ | QML usage |