WRNexusJS/editors/vscode/test/formatter.test.js

"use strict";

const assert = require("node:assert");
const { test } = require("node:test");
const { formatWrn } = require("../src/formatter");

test("formats compact props blocks with one prop per line", () => {
  const source = `component Header {\nprops { eyebrow = "" title = "" description = "" align = "start" class = "" }\nview { <header>{title}</header> }\n}\n`;
  const expected = `component Header {\n  props {\n    eyebrow = ""\n    title = ""\n    description = ""\n    align = "start"\n    class = ""\n  }\n  view { <header>{title}</header> }\n}\n`;

  assert.equal(formatWrn(source, { insertSpaces: true, tabSize: 2 }), expected);
});

test("preserves nested prop defaults while formatting", () => {
  const source = `component Grid {\nprops { items = [{ label: "A" }, { label: "B" }] options = { gap: 4, dense: false } class = "" }\nview { <div/> }\n}\n`;
  const formatted = formatWrn(source, { insertSpaces: true, tabSize: 2 });

  assert.match(formatted, /items = \[\{ label: "A" \}, \{ label: "B" \}\]/);
  assert.match(formatted, /options = \{ gap: 4, dense: false \}/);
  assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted);
});

test("formats public event declarations as individual props members", () => {
  const source = `component Search {\nprops { value = "" @event search = function @event clear = function }\nview { <input/> }\n}\n`;
  const formatted = formatWrn(source, { insertSpaces: true, tabSize: 2 });

  assert.match(formatted, / {4}@event search = function/);
  assert.match(formatted, / {4}@event clear = function/);
  assert.equal(formatWrn(formatted, { insertSpaces: true, tabSize: 2 }), formatted);
});

test("keeps long inline-closing tags idempotent after multiline expansion", () => {
  const source = `component Status {
  view {
    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)]">
      <span class="inline-flex items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold">
        <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
      </span>
    </section>
  }
}
`;
  const options = { insertSpaces: true, tabSize: 2, printWidth: 100 };
  const formatted = formatWrn(source, options);

  assert.equal(formatWrn(formatted, options), formatted);
  assert.match(formatted, /<\/span>Loading/);
});

test("formats inline elements with one attribute per line", () => {
  const source = `component Button {
  view {
    <button type="button" class="primary" @click='save()'>Save</button>
  }
}
`;

  const expected = `component Button {
  view {
    <button
      type="button"
      class="primary"
      @click='save()'
    >
      Save
    </button>
  }
}
`;

  const options = {
    insertSpaces: true,
    tabSize: 2,
    printWidth: 100,
    multilineAttributes: true,
  };

  assert.equal(formatWrn(source, options), expected);

  assert.equal(formatWrn(expected, options), expected);
});

test("formats self-closing component props", () => {
  const source = `component Demo {
  view {
    <FeatureList items='{[{ label: "A" }]}' emptyLabel="No items" />
  }
}
`;

  const formatted = formatWrn(source, {
    insertSpaces: true,
    tabSize: 2,
    printWidth: 100,
    multilineAttributes: true,
  });

  assert.match(formatted, /<FeatureList\n/);

  assert.match(formatted, /items='\{\[\{ label: "A" \}\]\}'/);

  assert.match(formatted, /^\s*\/>$/m);
});

test("indents if and each blocks", () => {
  const source = `page Demo {
  view {
    {#if open}
    {#each items as item}
    <span>{item.label}</span>
    {:empty}
    <p>Empty</p>
    {/each}
    {:else}
    <p>Closed</p>
    {/if}
  }
}
`;

  const formatted = formatWrn(source, {
    insertSpaces: true,
    tabSize: 2,
    multilineAttributes: true,
  });

  assert.match(formatted, /^ {6}\{#each items as item\}$/m);

  assert.match(formatted, /^ {8}<span>/m);

  assert.equal(
    formatWrn(formatted, {
      insertSpaces: true,
      tabSize: 2,
      multilineAttributes: true,
    }),
    formatted,
  );
});

test("expands inline if blocks around HTML", () => {
  const source = `component Button {
  view {
    <button>
      {#if loading}<span class="wire-spinner wire-spinner--inline" aria-hidden="true"></span>{/if}
      {#if icon}<span class="{icon}"></span>{:else}<span>Fallback</span>{/if}
    </button>
  }
}
`;

  const expected = `component Button {
  view {
    <button>
      {#if loading}
        <span
          class="wire-spinner wire-spinner--inline"
          aria-hidden="true"
        >
        </span>
      {/if}
      {#if icon}
        <span
          class="{icon}"
        >
        </span>
      {:else}
        <span>Fallback</span>
      {/if}
    </button>
  }
}
`;

  const options = {
    insertSpaces: true,
    tabSize: 2,
    printWidth: 100,
    multilineAttributes: true,
  };

  assert.equal(formatWrn(source, options), expected);
  assert.equal(formatWrn(expected, options), expected);
});