fix tests on localhost (#469)

Author: tomusdrw

playwright.config.ts

@@ -71,9 +71,10 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: "npm run build && npx vite preview --port 5173",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
 });

src/components/Instructions/InstructionItem.tsx

@@ -128,7 +128,7 @@ export const InstructionItem = forwardRef(
         <TableRow
           ref={ref}
           className={classNames({ "opacity-50": isLast }, "overflow-hidden")}
-          test-id="instruction-item"
+          data-testid="instruction-item"
           style={{
             backgroundColor,
             color,

src/components/MemoryPreview/MemoryInfinite.tsx

@@ -73,7 +73,7 @@ export const MemoryCell = ({
     >
       {isEqualAcrossWorkers ? (
         <Tooltip delayDuration={100} open={isPageTooltipDisabled ? false : undefined}>
-          <TooltipTrigger data-test-id="memory-cell">
+          <TooltipTrigger data-testid="memory-cell">
             {valueToNumeralSystem(value, numeralSystem, numeralSystem ? 2 : 3, false)}
           </TooltipTrigger>
 
@@ -89,7 +89,7 @@ export const MemoryCell = ({
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
             <span
-              data-test-id="memory-cell"
+              data-testid="memory-cell"
               className="font-inconsolata"
               dangerouslySetInnerHTML={{
                 __html: numeralSystem ? "&quest;&#8288;&quest;&#8288;" : "&quest;&#8288;&quest;&#8288;&quest;&#8288;",

src/components/Registers/index.tsx

@@ -185,7 +185,7 @@ export const Registers = ({
                             "text-xs whitespace-nowrap": statusValue === Status.HOST,
                           })}
                           style={getStatusStyles(isDarkMode, statusValue)}
-                          test-id="program-status"
+                          data-testid="program-status"
                         >
                           {displayText}
                         </span>

tests/memory-range.spec.ts

@@ -6,25 +6,31 @@ test("Should modify memory ranges", async ({ page }) => {
   await selectPVM(page, "@typeberry");
   await openProgram(page, "storeU16");
 
+  // Wait for program to load and initialize
+  await page.waitForTimeout(2000);
+
   await page.getByRole("tab", { name: "Ranges" }).click();
   await page.getByLabel("Start").click();
   await page.getByLabel("Start").fill("131072");
   await page.getByRole("button", { name: "Add" }).click();
 
-  await expect(page.locator("[data-test-id='memory-cell']").first()).toContainText("00", { timeout: 2000 });
-  await expect(page.locator("[data-test-id='memory-cell']").nth(1)).toContainText("00", { timeout: 2000 });
+  await expect(page.getByTestId("memory-cell").first()).toContainText("00", { timeout: 2000 });
+  await expect(page.getByTestId("memory-cell").nth(1)).toContainText("00", { timeout: 2000 });
 
   await step(page);
 
-  await expect(page.locator("[data-test-id='memory-cell']").first()).toContainText("78", { timeout: 2000 });
-  await expect(page.locator("[data-test-id='memory-cell']").nth(1)).toContainText("56", { timeout: 2000 });
+  await expect(page.getByTestId("memory-cell").first()).toContainText("78", { timeout: 2000 });
+  await expect(page.getByTestId("memory-cell").nth(1)).toContainText("56", { timeout: 2000 });
 });
 
 test("Should show interpretations", async ({ page }) => {
   await openDebugger(page);
   await selectPVM(page, "@typeberry");
   await openProgram(page, "storeU16");
 
+  // Wait for program to load and initialize
+  await page.waitForTimeout(2000);
+
   await page.getByRole("tab", { name: "Ranges" }).click();
   await page.getByLabel("Start").click();
   await page.getByLabel("Start").fill("131072");
@@ -42,6 +48,9 @@ test("Should not show interpretations for longer memory chunks", async ({ page }
   await selectPVM(page, "@typeberry");
   await openProgram(page, "storeU16");
 
+  // Wait for program to load and initialize
+  await page.waitForTimeout(2000);
+
   await page.getByRole("tab", { name: "Ranges" }).click();
   await page.getByLabel("Start").click();
   await page.getByLabel("Start").fill("131072");
@@ -61,6 +70,9 @@ test("Should show diffs between PVMs", async ({ page }) => {
   await selectPVM(page, "typeberry");
   await openProgram(page, "storeU16");
 
+  // Wait for program to load and initialize
+  await page.waitForTimeout(2000);
+
   await page.getByRole("tab", { name: "Ranges" }).click();
   await page.getByLabel("Start").click();
   await page.getByLabel("Start").fill("131072");

tests/run-program.spec.ts

@@ -12,13 +12,11 @@ async function runProgramTest(page: Page, pvmType: string) {
   // Test the "Run" button functionality
   await page.click('button:has-text("Run")');
 
-  // Wait for execution to complete
-  await page.waitForTimeout(5000);
+  // Wait for execution to complete (increased timeout for local environment)
+  const programStatus = page.getByTestId("program-status");
+  await expect(programStatus).toHaveText("HALT", { timeout: 15000 });
 
-  const programStatus = page.locator('[test-id="program-status"]');
-  await expect(programStatus).toHaveText("HALT");
-
-  // const jumpIndInstructionParent = page.locator('div[test-id="instruction-item"]:has(span:has-text("JUMP_IND"))');
+  // const jumpIndInstructionParent = page.locator('div[data-testid="instruction-item"]:has(span:has-text("JUMP_IND"))');
   // await expect(jumpIndInstructionParent).toHaveCSS('background-color', 'rgb(76, 175, 80)');
 }