JoshHeaps.Net/tests/holdem/seatSheet.test.js

// What the seat sheet shows before it is asked.
//
// The sheet is the second-most-used surface in the tool — every buy-in, every rename,
// every correction goes through it — and it was the least finished. Seven things were
// stacked flat at one weight and all open at once: a name, two status boxes, two
// hole-card slots, a stack, a five-box chip counter with an override and a total, and a
// list of custom fields. Measured on a 390px phone it came to 594px, and the three
// controls a dealer touches on nearly every visit were 132px of that — 22%. The chip
// counter alone was 174px, the tallest single thing in the sheet, and its five number
// boxes were told apart by five coloured dots and a `title` attribute, which is a
// tooltip, which is nothing at all on a phone.
//
// Two of these describe layout decisions and are checked as text — the markup for what
// sits in front of a dealer at rest, the stylesheet for the scrim and the order two
// bottom-anchored things stack in. The third describes behaviour and is run: which
// sections stand open is a question about the seat, and the answer is computed.
const test = require("node:test");
const { describe } = require("node:test");
const assert = require("node:assert");
const fs = require("fs");
const path = require("path");
const { Render, makeTable } = require("./load");

const PAGE = fs.readFileSync(
    path.join(__dirname, "..", "..", "JoshHeaps.Net", "Pages", "Casino", "TexasHoldem.cshtml"), "utf8");
const CSS = fs.readFileSync(
    path.join(__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "css", "casino", "holdem.css"), "utf8");

const template = id => {
    const at = PAGE.indexOf(`<template id="${id}">`);
    assert.ok(at >= 0, `there is no <template id="${id}">`);
    return PAGE.slice(at, PAGE.indexOf("</template>", at));
};

// ---------------------------------------------------------------------------

describe("what the sheet puts in front of a dealer at rest", () => {
    const seatForm = () => template("seatEditorTemplate");

    // Everything the form holds that is *not* inside one of the folded sections. The
    // <details> blocks are stripped whole, so what is left is the flat part.
    const alwaysVisible = () => seatForm().replace(/<details[\s\S]*?<\/details>/g, "");

    test("the flat part is the name, the two status boxes and the stack, and nothing else", () => {
        const flat = alwaysVisible();
        ["seatNameInput", "inHandCheckbox", "foldCheckbox", "stackInput", "seatBuyIns"]
            .forEach(cls => assert.ok(flat.includes(cls),
                `${cls} is what a dealer opens a seat for — it cannot be behind a disclosure`));

        // And the four that used to be up here with them. Each is a job most tables do
        // once a night or never, and between them they were two thirds of the sheet.
        ["cardSlot", "chipCounts", "amountOverrideInput", "customFields", "addFieldBtn"]
            .forEach(cls => assert.ok(!flat.includes(cls),
                `${cls} is open at rest again — it belongs inside a folded section`));
    });

    test("every folded section says what it holds and what is in it", () => {
        const sections = [...seatForm().matchAll(/<details class="([^"]*seatSubPanel[^"]*)">([\s\S]*?)<\/details>/g)];
        assert.equal(sections.length, 3, "the sheet folds cards, contribution and notes");

        sections.forEach(([, className, markup]) => {
            const summary = markup.match(/<summary>([\s\S]*?)<\/summary>/);
            assert.ok(summary, `${className} has no summary to press`);
            // A name a dealer would recognise, and a place for the one fact that says
            // whether opening it is worth the tap.
            assert.match(summary[1], /<span class="seatSubPanelName">[^<]+<\/span>/,
                `${className}'s summary has no name in it`);
            assert.match(summary[1], /class="seatGlance/,
                `${className} says nothing while it is shut`);
        });
    });

    test("the chip counter's values are text, not a tooltip", () => {
        // Five identical number boxes, each worth a different amount, told apart by a
        // coloured dot and a `title`. A title is a hover, and there is no hover here.
        // It also meant the wrapping <label> had no text in it, so the boxes had no
        // accessible name either — five unnamed spinbuttons in a row.
        assert.match(template("chipCountTemplate"), /class="chipCountValue"/,
            "the chip's value has to be in the row, where it can be read and announced");
    });
});

describe("the sheet is in front of the table, and says so", () => {
    test("there is a scrim, and it is furniture the desktop panel does not get", () => {
        assert.match(PAGE, /id="seatSheetScrim"/, "the sheet has nothing behind it");
        // Above 700px this element is not a scrim for anything — the seat form is a
        // panel in the sidebar column, with the whole page still live around it.
        const off = CSS.match(/\.seatSheetGrip,[\s\S]{0,120}?#seatSheetScrim\s*\{\s*display:\s*none/);
        assert.ok(off, "the scrim has to be off by default, with the sheet's other furniture");
    });

    test("and it is not called an Overlay, because Modal would adopt it", () => {
        // Modal.mount() watches every id ending in "Overlay" and makes a dialog of it.
        // This one is a sidebar panel two thirds of the time.
        assert.ok(!/id="seatSheet[A-Za-z]*Overlay"/.test(PAGE));
    });

    test("and it is put away with visibility, not with opacity", () => {
        // The same lesson the sheet above it already learned about transforms, and the
        // layout sweep caught it the same way: a fixed, full-window box at `opacity: 0`
        // is invisible and still entirely there. bottomFurniture() read it as furniture
        // standing 640px tall at the bottom of a 640px phone, in every state and on
        // every screen, and asked scroll-padding to reserve the whole window for it.
        const phone = CSS.slice(CSS.indexOf("@media (max-width: 700px)"));
        const rule = phone.match(/#seatSheetScrim\s*\{[^}]*\}/);
        assert.ok(rule, "the phone block should make a scrim of it");
        assert.match(rule[0], /visibility:\s*hidden/,
            "opacity alone leaves a full-window fixed element in the layout and the a11y tree");
    });

    test("the scrim stops where the sheet stops when a phone is on its side", () => {
        // Fold, Call and Raise are a rail down the right-hand edge in landscape, and the
        // sheet is deliberately kept clear of it. A scrim that reached across would dim
        // the one part of the screen the sheet was making room for — and swallow its
        // taps, which is worse.
        const landscape = CSS.slice(CSS.indexOf("@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px)"));
        const rule = landscape.match(/#seatSheetScrim\s*\{[^}]*\}/);
        assert.ok(rule, "the landscape block never tells the scrim about the rail");
        assert.match(rule[0], /right:\s*var\(--actionRailW\)/);
    });

    test("the toast steps over the sheet, and the rule that says so comes last", () => {
        // Two things are fixed to the bottom of a phone and the toast is the one that
        // gives way. `body.hasActionBar #toastHost` and `body.seatSheetOpen #toastHost`
        // have identical specificity, so this is decided by source order and by nothing
        // else — a copy written above the other would look right and do nothing.
        const bar = CSS.indexOf("body.hasActionBar #toastHost");
        const sheet = CSS.indexOf("body.seatSheetOpen #toastHost");
        assert.ok(bar > 0 && sheet > 0, "both rules should exist");
        assert.ok(sheet > bar,
            "at equal specificity the later rule wins, and the sheet is the taller of the two");
        // Measured, not assumed: the height changes the moment a section is unfolded.
        assert.match(CSS.slice(sheet, sheet + 240), /var\(--seatSheetHeight/);
    });
});

// ---------------------------------------------------------------------------

// The form the disclosures are rendered into, reduced to the two things
// renderSeatDisclosures asks of it: find a section, find its glance.
const fakeForm = () => {
    const sections = {};
    for (const name of ["cardsPanel", "contributionPanel", "notesPanel"]) {
        sections[`.${name}`] = {
            open: false,
            glance: null,
            querySelector(selector) {
                assert.equal(selector, ".seatGlance");
                return { set textContent(text) { sections[`.${name}`].glance = text; } };
            },
        };
    }
    return { querySelector: selector => sections[selector] || null, sections };
};

const disclose = (state, player) => {
    const form = fakeForm();
    Render.state = state;
    Render.renderSeatDisclosures(form, player);
    return form.sections;
};

describe("which sections stand open is a question about the seat", () => {
    test("a seat with nothing on it opens nothing", () => {
        const state = makeTable({ seatCount: 4, stack: 200 });
        const sections = disclose(state, state.seats[0]);
        assert.deepEqual(
            Object.values(sections).map(s => s.open), [false, false, false],
            "an empty seat's sheet is three lines and the three fields above them");
    });

    test("a seat holding cards opens its cards, and names them while shut", () => {
        const state = makeTable({ seatCount: 4 });
        state.seats[0].cards = ["as", "kd"];
        const sections = disclose(state, state.seats[0]);
        assert.equal(sections[".cardsPanel"].open, true);
        // Whatever formatCard makes of them — the point is that both are in it.
        assert.match(sections[".cardsPanel"].glance, /A/);
        assert.match(sections[".cardsPanel"].glance, /K/);
    });

    test("a table that asked to be shown the cards opens them before the first one", () => {
        // Every seat at such a table is about to have two. Opening the slots after the
        // cards arrive would be opening them one tap too late, every hand.
        const state = makeTable({ seatCount: 4 });
        state.trackBoard = true;
        assert.equal(disclose(state, state.seats[0])[".cardsPanel"].open, true);
    });

    test("a seat with chips counted opens the count, with the total on the row", () => {
        const state = makeTable({ seatCount: 4 });
        const fiver = state.chipLegend.find(chip => chip.value === 5);
        state.seats[0].chipCounts = { [fiver.id]: 4 };
        const sections = disclose(state, state.seats[0]);
        assert.equal(sections[".contributionPanel"].open, true);
        assert.equal(sections[".contributionPanel"].glance, "$20");
    });

    test("a typed amount counts as something on the seat too", () => {
        // Overriding the total is the other way of answering the same question, and a
        // dealer who typed a number has to be able to see it without hunting.
        const state = makeTable({ seatCount: 4 });
        state.seats[0].amountOverride = 60;
        assert.equal(disclose(state, state.seats[0])[".contributionPanel"].open, true);
    });

    test("and a zero someone actually typed is not the same as never having typed one", () => {
        const state = makeTable({ seatCount: 4 });
        state.seats[0].amountOverride = 0;
        assert.equal(disclose(state, state.seats[0])[".contributionPanel"].open, true,
            "0 is a value; only null means the field was left alone");
    });

    test("a seat with a note on it opens the notes and counts them", () => {
        const state = makeTable({ seatCount: 4 });
        state.seats[0].customFields = [{ label: "Owes", value: "$40" }, { label: "", value: "" }];
        const sections = disclose(state, state.seats[0]);
        assert.equal(sections[".notesPanel"].open, true);
        assert.equal(sections[".notesPanel"].glance, "1 note",
            "an empty row the dealer has not filled in yet is not a note");
    });

    test("a section is only ever pushed open, never pulled shut", () => {
        // This runs again after every keystroke in the sheet. A dealer who opened the
        // chip counter to start counting would have it shut under them on the first
        // digit if this ever wrote `open = false`.
        const state = makeTable({ seatCount: 4 });
        const form = fakeForm();
        form.sections[".notesPanel"].open = true;
        Render.state = state;
        Render.renderSeatDisclosures(form, state.seats[0]);
        assert.equal(form.sections[".notesPanel"].open, true);
    });
});