test: move state panel locating logic to page objects; add simple checks for values

I implemented it like this: returning a mapping of all such values, as it was
easier than finding the neighbour/parent elements of a name with a certain text.
My initial idea was to have `expression(expr)` and to work with each of those.

TODO(in the longterm future): eventually ensure state-panel-0 used or
parametrize
TODO: what about non atom/non expanded values?
  currently limited to simple cases

Author: alehander92

src/frontend/ui/state.nim

@@ -188,4 +188,3 @@ method onCompleteMove*(self: StateComponent, response: MoveState) {.async.} =
 
   self.completeMoveIndex += 1
   self.data.redraw()
-

src/frontend/ui/value.nim

@@ -673,8 +673,8 @@ proc atomValueView(self: ValueComponent, valueText: string, expression: cstring,
     if not self.uiExpanded(value, expression) or not self.charts.hasKey(expression):
       span(class = "value-expanded-text"):
         text htmlText
-        span(class = "value-type"):
-          text(value.typ.langType)
+      span(class = "value-type"):
+        text(value.typ.langType)
     else:
       switchChartKindView(self.charts[expression])
 

ui-tests/tests/noir/state.spec.ts

@@ -4,6 +4,7 @@ import {
   readyOnEntryTest as readyOnEntry,
   ctRun,
 } from "../lib/ct_helpers";
+import { StatePanel } from "../page_objects/state";
 
 ctRun("noir_example/");
 
@@ -14,7 +15,18 @@ ctRun("noir_example/");
 
 test("state panel loaded initially", async () => {
   await readyOnEntry();
-  await expect(page.locator("#code-state-line-0")).toContainText(
-    "17 | println(",
-  );
+  const statePanel = new StatePanel(page);
+  await expect(statePanel.codeStateLine()).toContainText("17 | println(");
+});
+
+test("state panel supports integer values", async () => {
+  // await readyOnEntry();
+  const statePanel = new StatePanel(page);
+
+  const values = await statePanel.values();
+  expect(values.x.text).toBe("0");
+  expect(values.x.typeText).toBe("Field");
+
+  expect(values.y.text).toBe("1");
+  expect(values.y.typeText).toBe("Field");
 });

ui-tests/tests/page_objects/state.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import type { Locator, Page } from "@playwright/test";
+// import { wait, CodetracerTestError } from "../lib/ct_helpers";
+
+export interface StatePanelNamedValue {
+  text: string;
+  typeText: string;
+}
+
+// TODO: work with specific state panel?
+// for now this is assuming a single state panel and
+// using global locators
+export class StatePanel {
+  readonly page: Page;
+
+  public constructor(page: Page) {
+    this.page = page;
+  }
+
+  codeStateLine(): Locator {
+    // TODO: specific state panel? this is a global selector
+    return this.page.locator("#code-state-line-0");
+  }
+
+  async values(name: string): Promise<Record<string, StatePanelNamedValue>> {
+    // TODO: what about non-atom/non-expanded?
+    const valueLocators = await this.page
+      .locator(".value-expanded-atom-parent")
+      .all();
+
+    const values = {};
+    for (const valueLocator of valueLocators) {
+      const rawExpr =
+        (await valueLocator.locator(".value-name").textContent()) ?? "";
+
+      const expr = rawExpr.endsWith(": ")
+        ? rawExpr.slice(0, rawExpr.length - 2)
+        : "";
+
+      if (expr.length > 0) {
+        values[expr] = {
+          text: await valueLocator
+            .locator(".value-expanded-text")
+            .textContent(),
+          typeText: await valueLocator.locator(".value-type").textContent(),
+        };
+      }
+    }
+
+    return values;
+  }
+}