feat(web-host): change logic/message from Loading to Loaded plugins/repl-logic to represent the reality + e2e tests

Author: topheman

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

@@ -26,7 +26,9 @@ export const ReplPage = ({ onBackToHome }: ReplPageProps) => {
       </div>
       {wasm.status === "loading" && <div>Loading...</div>}
       {wasm.status === "ready" && <Repl engine={wasm.engine} />}
-      {wasm.status === "error" && <div>Error</div>}
+      {wasm.status === "error" && (
+        <div>An error occurred, please try again.</div>
+      )}
     </div>
   );
 };

packages/web-host/src/wasm/engine.ts

@@ -40,25 +40,33 @@ async function loadPlugins({
     import("./generated/plugin_greet/transpiled/plugin_greet.js"),
     import("./generated/plugin_ls/transpiled/plugin_ls.js"),
     import("./generated/plugin_cat/transpiled/plugin_cat.js"),
-  ]).then((plugins) => plugins.map((plugin) => plugin.plugin));
-
-  // log the plugins names
-  const pluginsNames = plugins.map((plugin) => plugin.name());
-  for (const pluginName of pluginsNames) {
-    addReplHistoryEntry({
-      stdin: `[Host] Loading plugin: ${pluginName}`,
-    });
-  }
+  ]).then((plugins) =>
+    plugins.map((plugin) => {
+      addReplHistoryEntry({
+        stdin: `[Host] Loaded plugin: ${plugin.plugin.name()}`,
+      });
+      return plugin.plugin;
+    }),
+  );
 
   // set the plugins names in the host state
+  const pluginsNames = plugins.map((plugin) => plugin.name());
   hostStateSetPluginsNames(pluginsNames);
 
   // return the plugins instances
   return plugins;
 }
 
-async function loadReplLogicGuest(): Promise<HostApi> {
-  return import("./generated/repl_logic_guest/transpiled/repl_logic_guest.js");
+async function loadReplLogicGuest({
+  addReplHistoryEntry,
+}: AddReplHistoryEntryProp): Promise<HostApi> {
+  const replLogicGuest = await import(
+    "./generated/repl_logic_guest/transpiled/repl_logic_guest.js"
+  );
+  addReplHistoryEntry({
+    stdin: `[Host] Loaded REPL logic`,
+  });
+  return replLogicGuest;
 }
 
 export async function prepareEngine({
@@ -75,9 +83,8 @@ export async function prepareEngine({
     return;
   }
   addReplHistoryEntry({ stdin: `[Host] Starting REPL host...` });
-  addReplHistoryEntry({ stdin: `[Host] Loading REPL logic` });
   const [replLogicGuest, plugins] = await Promise.all([
-    loadReplLogicGuest(),
+    loadReplLogicGuest({ addReplHistoryEntry }),
     loadPlugins({ addReplHistoryEntry }),
   ]);
   const engine = makeEngine();

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

@@ -0,0 +1,21 @@
+import { expect, test } from "@playwright/test";
+
+test("wasm should load", async ({ page }) => {
+  await page.goto("/#repl");
+  await expect(page.getByText("[Host] Starting REPL host...")).toBeVisible();
+});
+
+test("repl logic should have loaded", async ({ page }) => {
+  await page.goto("/#repl");
+  await expect(page.getByText("[Host] Loaded REPL logic")).toBeVisible();
+});
+
+test("plugins should have loaded under their names", async ({ page }) => {
+  const pluginNames = ["echo", "weather", "greet", "ls", "cat"];
+  await page.goto("/#repl");
+  for (const pluginName of pluginNames) {
+    await expect(
+      page.getByText(`[Host] Loaded plugin: ${pluginName}`),
+    ).toBeVisible();
+  }
+});