test(web-host): check history kept while navigating + wand button

Author: topheman

packages/web-host/tests/navigation.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { clickWandButton } from "./utils";
 
 test("start REPL link", async ({ page }) => {
   await page.goto("/");
@@ -51,3 +52,31 @@ test("back button", async ({ page }) => {
     }),
   ).toBeVisible();
 });
+
+test("history should be preserved + wand button", async ({ page }) => {
+  await page.goto("/");
+  await page
+    .getByRole("button", { name: "✨ Start REPL ✨" })
+    .click({ force: true });
+  await expect(page).toHaveURL(
+    "/webassembly-component-model-experiments/#repl",
+  );
+  await clickWandButton(page, "echo foo", { expectStdout: "foo" });
+  await clickWandButton(page, "echo bar", { expectStdout: "bar" });
+  await clickWandButton(page, "echo baz", { expectStdout: "baz" });
+  await page.goBack();
+  await expect(
+    page.getByRole("heading", {
+      name: "WebAssembly Component Model Experiments",
+    }),
+  ).toBeVisible();
+  await page
+    .getByRole("button", { name: "✨ Start REPL ✨" })
+    .click({ force: true });
+  await expect(page).toHaveURL(
+    "/webassembly-component-model-experiments/#repl",
+  );
+  await expect(
+    page.getByText("echo foofooecho barbarecho bazbaz"),
+  ).toBeVisible();
+});

packages/web-host/tests/utils.ts

@@ -1,12 +1,19 @@
 import { expect, type Page } from "@playwright/test";
 
+/**
+ * Get the last std output of the given type
+ */
 export async function getLastStd(
   page: Page,
   type: "stdin" | "stdout" | "stderr",
 ) {
   return await page.locator(`[data-stdtype='${type}']`).last();
 }
 
+/**
+ * Fill the input with the command and submit it
+ * Pass the expected stdin, stdout and stderr to check the results
+ */
 export async function fillAndSubmitCommand(
   page: Page,
   command: string,
@@ -34,3 +41,37 @@ export async function fillAndSubmitCommand(
     await expect(stderr).toHaveText(expectStderr);
   }
 }
+
+/**
+ * Click the wand button and check the results
+ * Pass the expected stdin, stdout and stderr to check the results
+ */
+export async function clickWandButton(
+  page: Page,
+  command: string,
+  {
+    expectStdin = command,
+    expectStdout,
+    expectStderr,
+  }: {
+    expectStdin?: string;
+    expectStdout?: string;
+    expectStderr?: string;
+  } = {},
+) {
+  await page
+    .getByRole("button", { name: "Run example command" })
+    .click({ force: true });
+  const input = await page.getByPlaceholder("Type a command...");
+  await expect(input).toHaveValue(expectStdin);
+  const stdin = await getLastStd(page, "stdin");
+  await expect(stdin).toHaveText(expectStdin);
+  if (expectStdout) {
+    const stdout = await getLastStd(page, "stdout");
+    await expect(stdout).toHaveText(expectStdout);
+  }
+  if (expectStderr) {
+    const stderr = await getLastStd(page, "stderr");
+    await expect(stderr).toHaveText(expectStderr);
+  }
+}