Add first e2e test

FluffyLabs · Sep 21, 2024 · 07d7404 · 07d7404
1 parent 6706e87
commit 07d7404
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 2 deletions.
diff --git a/src/components/Instructions/InstructionItem.tsx b/src/components/Instructions/InstructionItem.tsx
@@ -81,6 +81,7 @@ export const InstructionItem = ({
     <TableRow
       ref={ref}
       className={classNames("hover:bg-gray-300", { "opacity-50": isLast })}
+      test-id="instruction-item"
       style={{ backgroundColor: isHighlighted ? bgColor : "initial" }}
     >
       {instructionMode === InstructionMode.BYTECODE && (

diff --git a/src/components/ProgramUpload/index.tsx b/src/components/ProgramUpload/index.tsx
@@ -55,6 +55,7 @@ export const ProgramUpload = ({
         </Tabs>
         <DialogFooter>
           <Button
+            id="load-button"
             type="button"
             disabled={!file}
             onClick={() => {

diff --git a/src/components/PvmSelect/index.tsx b/src/components/PvmSelect/index.tsx
@@ -116,7 +116,7 @@ export const PvmSelect = ({
           }
         }}
       >
-        <SelectTrigger>
+        <SelectTrigger test-id="pvm-select">
           <SelectValue placeholder="Select a PVM" />
         </SelectTrigger>
         <SelectContent>

diff --git a/src/components/Registers/index.tsx b/src/components/Registers/index.tsx
@@ -55,7 +55,7 @@ export const Registers = ({
             </div>
             <div className="flex flex-row items-center justify-between w-full">
               <p className="flex-[2]">Status</p>
-              <p className="flex-[3]" style={{ color: getStatusColor(currentState.status) }}>
+              <p className="flex-[3]" style={{ color: getStatusColor(currentState.status) }} test-id="program-status">
                 {currentState.status !== undefined ? Status[currentState.status] : null}
               </p>
             </div>

diff --git a/tests/run-program.spec.ts b/tests/run-program.spec.ts
@@ -0,0 +1,53 @@
+import { test, expect, Page } from "@playwright/test";
+
+async function runProgramTest(page: Page, pvmType: string) {
+  // Navigate to your app
+  await page.goto("http://localhost:5173");
+
+  // Select the PVM type
+  await page.waitForSelector('button[test-id="pvm-select"]');
+
+  await page.click('button[test-id="pvm-select"]');
+
+  const pvmOption = page.locator('div[role="option"]', { hasText: new RegExp(pvmType, "i") });
+  await pvmOption.waitFor({ state: "visible" });
+  await pvmOption.click();
+
+  // 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:has-text("Examples")');
+  await page.click('button[id="option-fibonacci"]');
+  await page.click('button[id="load-button"]');
+
+  await page.waitForTimeout(1000);
+
+  const jumpIndInstruction = page.locator('span:has-text("JUMP_IND")');
+  await expect(jumpIndInstruction).toBeVisible();
+
+  // Test the "Run" button functionality
+  await page.click('button:has-text("Run")');
+
+  // Wait for execution to complete
+  await page.waitForTimeout(5000);
+
+  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"))');
+  // await expect(jumpIndInstructionParent).toHaveCSS('background-color', 'rgb(76, 175, 80)');
+}
+
+test("Run program with typeberry PVM", async ({ page }) => {
+  await runProgramTest(page, "@typeberry");
+});
+
+test("Run program with polkavm PVM", async ({ page }) => {
+  await runProgramTest(page, "polkavm");
+});