viz browser tests (#10626)

* viz browser tests

* expect failure if js/ isn't included

* back green

.github/workflows/test.yml

@@ -53,11 +53,6 @@ jobs:
         source venv/bin/activate
         pip install $GITHUB_WORKSPACE
         python -c "from tinygrad.tensor import Tensor; print(Tensor([1,2,3,4,5]))"
-        # Test using VIZ=1 after package installation
-        VIZ=1 python -c "from tinygrad.tensor import Tensor; Tensor([1,2,3,4,5]).realize()" & VIZ_PID=$!
-        echo "started VIZ server at: $(ps -p "$VIZ_PID" -o pid=)"
-        i=0; while ((i++ < 10)); do curl -sSf localhost:8000 > /dev/null && break || { echo "VIZ verification attempt $i/10"; sleep 1; }; done; ((i > 10)) && echo "Could not verify VIZ server" && exit 1
-        kill $VIZ_PID
         pip install mypy
         mypy -c "from tinygrad.tensor import Tensor; print(Tensor([1,2,3,4,5]))"
     - name: Run beautiful_mnist with tinygrad only
@@ -784,6 +779,15 @@ jobs:
       run: npm install puppeteer
     - name: Run WEBGPU Efficientnet
       run: node test/web/test_webgpu.js
+    - name: Run VIZ tests as external package
+      run: |
+        mkdir $GITHUB_WORKSPACE/test_dir
+        cd $GITHUB_WORKSPACE/test_dir
+        python -m venv venv
+        source venv/bin/activate
+        pip install $GITHUB_WORKSPACE
+        cp $GITHUB_WORKSPACE/test/web/test_viz.js .
+        node test_viz.js
 
   osxremote:
     name: MacOS (remote metal)

test/web/test_viz.js

@@ -0,0 +1,34 @@
+const { spawn } = require("child_process");
+const puppeteer = require("puppeteer");
+
+async function main() {
+  // ** start viz server
+  const proc = spawn("python", ["-u", "-c", "from tinygrad import Tensor; Tensor.arange(4).realize()"], { env: { ...process.env, VIZ:"1" },
+                      stdio: ["inherit", "pipe", "inherit"]});
+  await new Promise(resolve => proc.stdout.on("data", r => {
+    if (r.includes("ready")) resolve();
+  }));
+
+  // ** run browser tests
+  let browser;
+  try {
+    browser = await puppeteer.launch({ headless: true });
+    const page = await browser.newPage();
+    const res = await page.goto("http://localhost:8000");
+    if (res.status() !== 200) throw new Error("Failed to load page");
+    const scheduleSelector = await page.waitForSelector("ul");
+    scheduleSelector.click();
+    await page.waitForSelector("rect");
+    const nodes = await page.evaluate(() => document.querySelectorAll("#nodes > g").length);
+    const edges = await page.evaluate(() => document.querySelectorAll("#edges > path").length);
+    if (!nodes || !edges) {
+      throw new Error("VIZ didn't render a graph")
+    }
+  } finally {
+    // ** cleanups
+    if (browser) await browser.close();
+    proc.kill();
+  }
+}
+
+main();

tinygrad/viz/serve.py

@@ -208,7 +208,7 @@ if __name__ == "__main__":
   reloader_thread = threading.Thread(target=reloader)
   reloader_thread.start()
   print(f"*** started viz on {HOST}:{PORT}")
-  print(colored(f"*** ready in {(time.perf_counter()-st)*1e3:4.2f}ms", "green"))
+  print(colored(f"*** ready in {(time.perf_counter()-st)*1e3:4.2f}ms", "green"), flush=True)
   if len(getenv("BROWSER", "")) > 0: webbrowser.open(f"{HOST}:{PORT}{'/profiler' if contexts is None else ''}")
   try: server.serve_forever()
   except KeyboardInterrupt: