tests(web-host): e2e test echo foo

Author: topheman

packages/web-host/src/components/Repl.tsx

@@ -92,6 +92,7 @@ export function Repl({
                 className="border border-gray-300 rounded-md p-2 w-full pr-10"
                 onFocus={() => setInputFocus(true)}
                 onBlur={() => setInputFocus(false)}
+                placeholder="Type a command..."
               />
             </div>
             <button

packages/web-host/src/components/ReplHistory.tsx

@@ -1,3 +1,5 @@
+import { Fragment } from "react";
+
 import type { ReplHistoryEntry } from "../types";
 import { cn } from "../utils/css";
 
@@ -16,7 +18,7 @@ export function ReplHistory({
     <div ref={ref} className={cn(className)} {...props}>
       {history.map((entry, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: no unique key
-        <div key={index}>
+        <Fragment key={index}>
           {"stdin" in entry && entry.stdin && (
             <pre
               className="bg-gray-50 whitespace-pre-wrap word-break-word"
@@ -43,7 +45,7 @@ export function ReplHistory({
               {entry.stderr}
             </pre>
           )}
-        </div>
+        </Fragment>
       ))}
     </div>
   );

packages/web-host/tests/repl-plugins.spec.ts

@@ -0,0 +1,27 @@
+import { expect, type Page, test } from "@playwright/test";
+
+async function getLastStd(page: Page, type: "stdin" | "stdout" | "stderr") {
+  return await page.locator(`[data-stdtype='${type}']`).last();
+}
+
+test("echo foo - enter", async ({ page }) => {
+  await page.goto("/#repl");
+  const input = await page.getByPlaceholder("Type a command...");
+  await input.fill("echo foo");
+  await input.press("Enter");
+  const stdin = await getLastStd(page, "stdin");
+  await expect(stdin).toHaveText("echo foo");
+  const stdout = await getLastStd(page, "stdout");
+  await expect(stdout).toHaveText("foo");
+});
+
+test("echo foo - run", async ({ page }) => {
+  await page.goto("/#repl");
+  const input = await page.getByPlaceholder("Type a command...");
+  await input.fill("echo foo");
+  await page.getByRole("button", { name: "Run", exact: true }).click();
+  const stdin = await getLastStd(page, "stdin");
+  await expect(stdin).toHaveText("echo foo");
+  const stdout = await getLastStd(page, "stdout");
+  await expect(stdout).toHaveText("foo");
+});