improvise/harness/tests/grouped.spec.js

// The grid paths no shipped document reaches: two categories on an axis, a
// group spanning its members, a collapsed one, and the inline group row that
// carries no cells. This is the first test anywhere that runs improvise-anr9's
// header-level code in a browser (improvise-plcx).

import { test, expect } from "@playwright/test";

/// `harness/fixtures/grouped.improv`, served beside the shipped demo by
/// `harness/build.sh`. A seed that 404s is NOT an error -- `web/worker.js`
/// answers a missing seed with an EMPTY model -- so everything below asserts
/// labels the fixture really carries. "A grid is drawn" would pass on the
/// empty document a typo in the filename produces.
async function openGrouped(page, doc) {
  await page.goto(`/app/index.html?doc=${doc}&seed=grouped.improv`);
  await expect(page.locator("#grid table")).toBeVisible({ timeout: 20_000 });
  await expect(page.locator("#view-name")).toHaveText("Grouped");
  await page.locator("#grid").focus();
}

/// The head as lines of text, group line included: `thead > tr` in order, each
/// as the labels it draws with the corner dropped. Read in one pass, because
/// what these tests are about is the RELATION between the lines.
const headLines = (page) =>
  page.locator("#grid thead").evaluate((head) =>
    [...head.rows].map((tr) => ({
      group: tr.cells[0].className === "group" || tr.cells[1]?.className === "group",
      cells: [...tr.cells].slice(1).map((th) => ({
        text: th.textContent,
        span: th.colSpan,
      })),
      cornerSpan: tr.cells[0].colSpan,
    })),
  );

test.describe("a grouped, multi-level document", () => {
  // The defect this is aimed at is the one improvise-anr9 fixed: a label tuple
  // slash-joined into one string. That draws the RIGHT number of columns with
  // the right words in them, so only the SHAPE of the head can see it.
  test("two categories on an axis are two header lines, not one slash-joined one", async ({
    page,
  }) => {
    await openGrouped(page, "grouped-levels.improv");
    const lines = await headLines(page);

    // One group line and one line per column level: Month over Channel.
    expect(lines.length).toBe(3);
    expect(lines.map((l) => l.group)).toEqual([true, false, false]);

    // Two row categories, so the corner spans two — and the row headers below
    // must agree with it, or the table is ragged.
    expect(lines.every((l) => l.cornerSpan === 2)).toBe(true);
    await expect(page.locator("#grid tbody tr").first().locator("th")).toHaveCount(2);

    // The level lines. The blanks are repeat suppression, decided in Rust by
    // `AxisFrame::header_labels` — NOT an absent label, and not the page's
    // idea. A slash-join would put "Jan/Web" on ONE line and none of this
    // would hold; so would a page that drew only the innermost level.
    expect(lines[1].cells.map((c) => c.text)).toEqual(["Jan", "", "Feb", "", "Mar", ""]);
    expect(lines[2].cells.map((c) => c.text)).toEqual([
      "Web",
      "Shop",
      "Web",
      "Shop",
      "Web",
      "Shop",
    ]);
    // Stated as well as implied: a joined label would satisfy a length check.
    expect(lines.flatMap((l) => l.cells).every((c) => !c.text.includes("/"))).toBe(true);

    // The row labels are the same rule on the other axis: North is drawn
    // once and its second store's line is blank.
    const rowHeads = await page
      .locator("#grid tbody tr")
      .evaluateAll((rows) =>
        rows
          .filter((tr) => tr.cells[0].className !== "group")
          .map((tr) => [...tr.cells].filter((c) => c.tagName === "TH").map((c) => c.textContent)),
      );
    expect(rowHeads.slice(0, 4)).toEqual([
      ["North", "Main"],
      ["", "Annex"],
      ["South", "Main"],
      ["", "Annex"],
    ]);
  });

  // A column group header spans exactly the columns under it. The span is
  // `col_groups`' run length, and a wrong one is not a wrong word: it is a
  // table whose header sits over the wrong data.
  test("a column group spans its members, and the spans tile the columns", async ({
    page,
  }) => {
    await openGrouped(page, "grouped-spans.improv");
    const lines = await headLines(page);
    const groups = lines[0].cells;

    // Q1 holds Jan and Feb, each split by Channel: 2 x 2. Q2 holds Mar: 1 x 2.
    expect(groups.map((c) => c.text)).toEqual(["▼ Q1", "▼ Q2"]);
    expect(groups.map((c) => c.span)).toEqual([4, 2]);

    // And they tile: every column is under exactly one group header. A span
    // that were merely "big enough" passes the pair above and fails here.
    const columns = lines[2].cells.length;
    expect(groups.reduce((n, c) => n + c.span, 0)).toBe(columns);
    await expect(page.locator("#grid tbody tr").first().locator("td")).toHaveCount(columns);
  });

  // `RenderRow::Group` carries no cells, so the page CANNOT draw one with
  // cells — which is worth asserting from outside, because the DOM is where
  // that guarantee is cashed and the table goes ragged if it is lost.
  test("an inline group row is a header alone, and its indicator reports the collapse", async ({
    page,
  }) => {
    await openGrouped(page, "grouped-collapse.improv");

    const groupRows = page.locator("#grid tbody tr", {
      has: page.locator("th.group"),
    });
    // Two, not three: `Coastal` is the frame's FIRST entry and a leading group
    // header is dropped before it reaches the page — improvise-0o6x, open. If
    // this count becomes 3, that bug is fixed and this line is the record of
    // when. It is not an endorsement.
    await expect(groupRows).toHaveCount(2);
    await expect(groupRows).toHaveText(["▼ Inland", "▶ Upland"]);
    // The glyph is `indicator(collapsed)`: a page that hard-coded either one
    // passes on one of these rows and fails on the other.
    expect(await groupRows.locator("td").count()).toBe(0);
    await expect(groupRows.first().locator("th")).toHaveCount(1);

    // The collapse is the document's, and it must have REMOVED rows: Upland's
    // two regions are absent while Inland's two are here. Without this, a
    // page that drew the indicator and ignored the frame would pass.
    const labels = await page.locator("#grid tbody tr th[scope=row]").allTextContents();
    expect(labels).toContain("East");
    expect(labels).toContain("West");
    expect(labels).not.toContain("Ridge");
    expect(labels).not.toContain("Valley");
    // 4 regions visible x 2 stores. Stated as a count as well, because a row
    // drawn with empty labels would satisfy the four assertions above.
    await expect(page.locator("#grid tbody tr").filter({ hasNot: page.locator("th.group") })).toHaveCount(
      8,
    );
  });
});