Add memory ranges e2e

tests/memory-range.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from "@playwright/test";
+import { openDebugger, openProgram, selectPVM, step } from "./utils/actions";
+
+test("Should modify memory ranges", async ({ page }) => {
+  await openDebugger(page);
+  await selectPVM(page, "@typeberry");
+  await openProgram(page, "storeU16");
+
+  await page.getByRole("tab", { name: "Ranges" }).click();
+  await page.getByLabel("Start").click();
+  await page.getByLabel("Start").fill("131072");
+  await page
+    .locator("div")
+    .filter({ hasText: /^StartLength$/ })
+    .getByRole("button")
+    .click();
+
+  await expect(page.locator("span > button").first()).toContainText("00");
+  await expect(page.locator("button:nth-child(2) > .relative > span > button").first()).toContainText("00");
+
+  await step(page);
+
+  await expect(page.locator("span > button").first()).toContainText("78", { timeout: 2000 });
+  await expect(page.locator("button:nth-child(2) > .relative > span > button").first()).toContainText("56", {
+    timeout: 20000,
+  });
+});
+
+test("Should show interpretations", async ({ page }) => {
+  await openDebugger(page);
+  await selectPVM(page, "@typeberry");
+  await openProgram(page, "storeU16");
+
+  await page.getByRole("tab", { name: "Ranges" }).click();
+  await page.getByLabel("Start").click();
+  await page.getByLabel("Start").fill("131072");
+  await page
+    .locator("div")
+    .filter({ hasText: /^StartLength$/ })
+    .getByRole("button")
+    .click();
+
+  await step(page);
+
+  await page.getByText("78", { exact: true }).click();
+
+  await expect(page.getByText("Open codec tooli8 : 0x78 0x56")).toBeVisible();
+});
+
+test("Should not show interpretations for longer memory chunks", async ({ page }) => {
+  await openDebugger(page);
+  await selectPVM(page, "@typeberry");
+  await openProgram(page, "storeU16");
+
+  await page.getByRole("tab", { name: "Ranges" }).click();
+  await page.getByLabel("Start").click();
+  await page.getByLabel("Start").fill("131072");
+  await page.getByLabel("Length").click();
+  await page.getByLabel("Length").fill("40");
+
+  await page
+    .locator("div")
+    .filter({ hasText: /^StartLength$/ })
+    .getByRole("button")
+    .click();
+
+  await step(page);
+
+  await page.getByText("78", { exact: true }).click();
+  await expect(page.getByRole("dialog")).toContainText("Max memory for interpretations is 32 bytes");
+});
+
+test("Should show diffs between PVMs", async ({ page }) => {
+  await openDebugger(page);
+  await selectPVM(page, "typeberry");
+  await openProgram(page, "storeU16");
+
+  await page.getByRole("tab", { name: "Ranges" }).click();
+  await page.getByLabel("Start").click();
+  await page.getByLabel("Start").fill("131072");
+  await page.getByLabel("Length").click();
+  await page.getByLabel("Length").fill("40");
+
+  await page
+    .locator("div")
+    .filter({ hasText: /^StartLength$/ })
+    .getByRole("button")
+    .click();
+
+  await step(page);
+
+  await page.getByText("78", { exact: true }).click();
+  await expect(page.getByRole("dialog")).toContainText("Max memory for interpretations is 32 bytes");
+});

tests/run-program.spec.ts

@@ -1,44 +1,10 @@
 import { test, expect, Page } from "@playwright/test";
+import { openDebugger, openProgram, selectPVM } from "./utils/actions";
 
 async function runProgramTest(page: Page, pvmType: string) {
-  // Navigate to your app
-  await page.goto("/");
-
-  await page.waitForSelector('button[test-id="pvm-select"]');
-  await page.click('button[test-id="pvm-select"]');
-
-  await page.waitForSelector(".text-popover-foreground");
-
-  // Locate all options in the multi-select
-  const allPvmOptions = page.locator('div[role="option"]');
-
-  // Check for selected options
-  const selectedPvmOptions = allPvmOptions.locator(".bg-primary"); // Adjust the class name as needed
-  const selectedPvmCount = await selectedPvmOptions.count();
-
-  for (let i = 0; i < selectedPvmCount; i++) {
-    const pvm = selectedPvmOptions.nth(i);
-    await pvm.click(); // Click to unselect the checkbox
-  }
-
-  const pvmOption = page.locator('div[role="option"]', { hasText: new RegExp(pvmType, "i") });
-  await pvmOption.waitFor({ state: "visible" });
-  await pvmOption.click();
-
-  // Note: Do not click now on load button as initial page shows options already
-
-  // Wait for the ProgramUpload component to be visible
-  // await page.waitForSelector('button:has-text("Load")');
-
-  // Click the Load Program button
-  // await page.click('button:has-text("Load")');
-
-  // Wait for the program to load
-  await page.waitForTimeout(1000);
-
-  await page.click('button[id="fibonacci"]');
-
-  await page.waitForTimeout(1000);
+  await openDebugger(page);
+  await selectPVM(page, pvmType);
+  await openProgram(page, "fibonacci");
 
   const jumpIndInstruction = page.locator('span:has-text("JUMP_IND")');
   await expect(jumpIndInstruction).toBeVisible();

tests/utils/actions.ts

@@ -0,0 +1,41 @@
+import { Page } from "@playwright/test";
+
+export const openDebugger = async (page: Page) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+};
+
+export const openProgram = async (page: Page, name: string) => {
+  await page.click(`button[id="${name}"]`);
+
+  await page.waitForTimeout(1000);
+};
+
+export const step = async (page: Page) => {
+  await page.getByRole("button", { name: "Step" }).click();
+};
+
+export const selectPVM = async (page: Page, pvmType: string) => {
+  await page.waitForSelector('button[test-id="pvm-select"]');
+  await page.click('button[test-id="pvm-select"]');
+
+  await page.waitForSelector(".text-popover-foreground");
+
+  // Locate all options in the multi-select
+  const allPvmOptions = page.locator('div[role="option"]');
+
+  // Check for selected options
+  const selectedPvmOptions = allPvmOptions.locator(".bg-primary"); // Adjust the class name as needed
+  const selectedPvmCount = await selectedPvmOptions.count();
+
+  for (let i = 0; i < selectedPvmCount; i++) {
+    const pvm = selectedPvmOptions.nth(i);
+    await pvm.click(); // Click to unselect the checkbox
+  }
+
+  const pvmOption = page.locator('div[role="option"]', { hasText: new RegExp(pvmType, "i") });
+  await pvmOption.waitFor({ state: "visible" });
+  await pvmOption.click();
+
+  await page.waitForTimeout(1000);
+  await page.locator("html").click();
+};