WRNexusJS/packages/syntax/test/syntax.test.ts

import { expect, test } from "bun:test";
import { diagnose, formatDiagnostic, parse } from "../src/index.ts";

test("parses native array and object literals in state and component props", () => {
  const ast = parse(`
component Navigation {
  state items = [{"label":"Home","href":"/"}]
  state options = {"dense":true,"nested":{"label":"A {brace}"}}
  view {
    <Navbar items={items} />
    <Sidebar items={[{"label":"Cases","href":"/cases"}]} options={{"dense":true}} />
  }
}
`);

  expect(ast.states[0]?.expr).toBe('[{"label":"Home","href":"/"}]');
  expect(ast.states[1]?.expr).toBe('{"dense":true,"nested":{"label":"A {brace}"}}');

  const elements = ast.view.filter((node) => node.type === "element");
  const navbar = elements[0];
  const sidebar = elements[1];
  expect(navbar?.type).toBe("element");
  expect(sidebar?.type).toBe("element");
  if (navbar?.type !== "element" || sidebar?.type !== "element") return;

  expect(navbar.attrs.find((attr) => attr.name === "items")?.value).toBe("{items}");
  expect(sidebar.attrs.find((attr) => attr.name === "items")?.value).toBe(
    '{[{"label":"Cases","href":"/cases"}]}',
  );
  expect(sidebar.attrs.find((attr) => attr.name === "options")?.value).toBe('{{"dense":true}}');
});

test("parses formatted multiline arrays and objects in state", () => {
  const ast = parse(`component Navigation {
    state items = [
      {
        "label": "Home",
        "href": "/"
      },
      {
        "label": "Services",
        "children": [
          { "label": "Reports", "href": "/reports" }
        ]
      }
    ]
    state options = {
      "dense": true,
      "columns": 4
    }
    view { <nav></nav> }
  }`);

  expect(ast.states[0]?.expr).toContain('"Services"');
  expect(ast.states[0]?.expr).toContain('"Reports"');
  expect(ast.states[1]?.expr).toContain('"columns": 4');
});

test("parses WRN 0.3 execution, data, security, and reactivity blocks", () => {
  const ast = parse(`page Dashboard {
    runtime = "universal"
    hydrate = "visible"
    state count = 1
    computed {
      doubled = count * 2
    }
    effect {
      console.log(doubled)
    }
    security {
      auth = "required"
      csrf = "true"
    }
    load server {
      return { count: 1 }
    }
    load client {
      return { refreshed: true }
    }
    action save(input) {
      return input
    }
    view { <button @click="count++">{doubled}</button> }
  }`);

  expect(ast.runtime).toBe("universal");
  expect(ast.hydrate).toBe("visible");
  expect(ast.computed).toEqual([{ name: "doubled", expr: "count * 2" }]);
  expect(ast.effects).toHaveLength(1);
  expect(ast.security).toEqual({ auth: "required", csrf: "true" });
  expect(ast.loads.map((load) => load.mode)).toEqual(["server", "client"]);
  expect(ast.actions).toEqual([expect.objectContaining({ name: "save", args: ["input"] })]);
});

test("diagnoses server-only interactive roots and accessibility issues", () => {
  const diagnostics = diagnose(
    `component AvatarButton {
      runtime = "server"
      state open = false
      view {
        <button @click="open = true"><img src="/avatar.png"></button>
      }
    }`,
    { file: "AvatarButton.wrn", accessibility: true },
  );

  expect(diagnostics.map((diagnostic) => diagnostic.code)).toContain(
    "WRN-RUNTIME-SERVER-INTERACTIVE",
  );
  expect(diagnostics.map((diagnostic) => diagnostic.code)).toContain("WRN-A11Y-001");
});

test("formats parser diagnostics with stable codes and source locations", () => {
  const source = `page Broken { runtime = "worker"\n view { <main></main> } }`;
  const [diagnostic] = diagnose(source, { file: "Broken.wrn" });

  expect(diagnostic?.code).toBe("WRN-RUNTIME-TARGET");
  expect(formatDiagnostic(source, diagnostic!)).toContain("Broken.wrn");
});

test("parses keyed each blocks without changing legacy loop syntax", () => {
  const keyed = parse(`component Rows {
    props { rows = [] }
    view {
      {#each rows as row, index key row.id}
        <p>{index}: {row.name}</p>
      {/each}
    }
  }`);

  const loop = keyed.view.find((node) => node.type === "each");
  expect(loop).toEqual(
    expect.objectContaining({
      type: "each",
      list: "rows",
      item: "row",
      index: "index",
      key: "row.id",
    }),
  );

  const legacy = parse(`component Rows {
    props { rows = [] }
    view { {#each rows as row}<p>{row.name}</p>{/each} }
  }`);
  expect(legacy.view.find((node) => node.type === "each")).toEqual(
    expect.objectContaining({ type: "each", key: undefined }),
  );
});

test("parses public component event declarations inside props", () => {
  const ast = parse(`component SearchBox {
    props {
      value = ""
      @event search = function
      @event clear = function
    }
    view { <input value="{value}" /> }
  }`);

  expect(ast.props.map((prop) => prop.name)).toEqual(["value"]);
  expect(ast.events).toEqual([{ name: "search" }, { name: "clear" }]);
});