|
1 | | -import { close, fixed, open, type OpenElement, rgba } from "../ops.ts"; |
| 1 | +import { |
| 2 | + close, |
| 3 | + fixed, |
| 4 | + grow, |
| 5 | + open, |
| 6 | + type OpenElement, |
| 7 | + rgba, |
| 8 | + text, |
| 9 | +} from "../ops.ts"; |
2 | 10 | import { createTerm } from "../term.ts"; |
3 | 11 | import { describe, expect, it } from "./suite.ts"; |
| 12 | +import { print } from "./print.ts"; |
4 | 13 |
|
5 | 14 | const decode = (b: Uint8Array) => new TextDecoder().decode(b); |
6 | 15 |
|
@@ -477,3 +486,164 @@ describe("instances", () => { |
477 | 486 | expect(again).not.toContain(FG.cyan); |
478 | 487 | }); |
479 | 488 | }); |
| 489 | + |
| 490 | +const trim = (s: string) => s.split("\n").map((l) => l.trimEnd()).join("\n"); |
| 491 | + |
| 492 | +describe("box model", () => { |
| 493 | + it("full border with no padding reserves space: children visible, box is 3 rows", async () => { |
| 494 | + let term = await createTerm({ width: 20, height: 10 }); |
| 495 | + let result = term.render([ |
| 496 | + open("root", { |
| 497 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 498 | + }), |
| 499 | + open("box", { |
| 500 | + layout: { width: fixed(14), direction: "ttb" }, |
| 501 | + border: { color: WHITE, top: 1, right: 1, bottom: 1, left: 1 }, |
| 502 | + }), |
| 503 | + text("CASE A"), |
| 504 | + close(), |
| 505 | + close(), |
| 506 | + ]); |
| 507 | + |
| 508 | + expect(result.info.get("box")?.bounds.height).toBe(3); |
| 509 | + expect(decode(result.output)).toContain("CASE A"); |
| 510 | + }); |
| 511 | + |
| 512 | + it("partial borders (top+left) reserve only their sides", async () => { |
| 513 | + let term = await createTerm({ width: 20, height: 10 }); |
| 514 | + let result = term.render([ |
| 515 | + open("root", { |
| 516 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 517 | + }), |
| 518 | + open("box", { |
| 519 | + layout: { width: fixed(14), direction: "ttb" }, |
| 520 | + border: { color: WHITE, top: 1, left: 1 }, |
| 521 | + }), |
| 522 | + text("CASE B"), |
| 523 | + close(), |
| 524 | + close(), |
| 525 | + ]); |
| 526 | + |
| 527 | + // top border reserves 1 row, no bottom border so no bottom reservation |
| 528 | + expect(result.info.get("box")?.bounds.height).toBe(2); |
| 529 | + expect(decode(result.output)).toContain("CASE B"); |
| 530 | + }); |
| 531 | + |
| 532 | + it("padding is additive: border=1 alone gives height 3; border=1 plus padding=1 gives height 5", async () => { |
| 533 | + let nopad = await createTerm({ width: 20, height: 10 }); |
| 534 | + let r1 = nopad.render([ |
| 535 | + open("root", { |
| 536 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 537 | + }), |
| 538 | + open("box", { |
| 539 | + layout: { width: fixed(14), direction: "ttb" }, |
| 540 | + border: { color: WHITE, top: 1, right: 1, bottom: 1, left: 1 }, |
| 541 | + }), |
| 542 | + text("CONTENT"), |
| 543 | + close(), |
| 544 | + close(), |
| 545 | + ]); |
| 546 | + |
| 547 | + let withpad = await createTerm({ width: 20, height: 10 }); |
| 548 | + let r2 = withpad.render([ |
| 549 | + open("root", { |
| 550 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 551 | + }), |
| 552 | + open("box", { |
| 553 | + layout: { |
| 554 | + width: fixed(14), |
| 555 | + direction: "ttb", |
| 556 | + padding: { top: 1, right: 1, bottom: 1, left: 1 }, |
| 557 | + }, |
| 558 | + border: { color: WHITE, top: 1, right: 1, bottom: 1, left: 1 }, |
| 559 | + }), |
| 560 | + text("CONTENT"), |
| 561 | + close(), |
| 562 | + close(), |
| 563 | + ]); |
| 564 | + |
| 565 | + // border=1, no padding: effective = 0+1 = 1 per side → height = 1+text+1 = 3 |
| 566 | + expect(r1.info.get("box")?.bounds.height).toBe(3); |
| 567 | + // border=1, padding=1: effective = 1+1 = 2 per side → height = 2+text+2 = 5 |
| 568 | + expect(r2.info.get("box")?.bounds.height).toBe(5); |
| 569 | + }); |
| 570 | + |
| 571 | + it("explicit padding > border width adds breathing room inside the border", async () => { |
| 572 | + let term = await createTerm({ width: 20, height: 10 }); |
| 573 | + let result = term.render([ |
| 574 | + open("root", { |
| 575 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 576 | + }), |
| 577 | + open("box", { |
| 578 | + layout: { |
| 579 | + width: fixed(14), |
| 580 | + direction: "ttb", |
| 581 | + padding: { top: 2, bottom: 2 }, |
| 582 | + }, |
| 583 | + border: { color: WHITE, top: 1, bottom: 1 }, |
| 584 | + }), |
| 585 | + text("CONTENT"), |
| 586 | + close(), |
| 587 | + close(), |
| 588 | + ]); |
| 589 | + |
| 590 | + // effective_top = 2+1 = 3, effective_bottom = 2+1 = 3 |
| 591 | + // height = 3 + 1 text + 3 = 7 |
| 592 | + expect(result.info.get("box")?.bounds.height).toBe(7); |
| 593 | + }); |
| 594 | + |
| 595 | + it("nested two-tone bevel lays out without manual padding compensation", async () => { |
| 596 | + let term = await createTerm({ width: 20, height: 10 }); |
| 597 | + let result = term.render([ |
| 598 | + open("root", { |
| 599 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 600 | + }), |
| 601 | + open("outer", { |
| 602 | + layout: { width: fixed(16), direction: "ttb" }, |
| 603 | + border: { color: WHITE, top: 1, left: 1 }, |
| 604 | + }), |
| 605 | + open("inner", { |
| 606 | + layout: { width: grow(), direction: "ttb" }, |
| 607 | + border: { color: WHITE, bottom: 1, right: 1 }, |
| 608 | + }), |
| 609 | + text("NESTED"), |
| 610 | + close(), |
| 611 | + close(), |
| 612 | + close(), |
| 613 | + ]); |
| 614 | + |
| 615 | + // inner: effective_bottom=1, effective_right=1 → height = 0 + text(1) + 1 = 2 |
| 616 | + // outer: effective_top=1, effective_left=1 → height = 1 + inner(2) + 0 = 3 |
| 617 | + expect(result.info.get("outer")?.bounds.height).toBe(3); |
| 618 | + expect(decode(result.output)).toContain("NESTED"); |
| 619 | + }); |
| 620 | + |
| 621 | + it("visual: full border renders border glyphs around content", async () => { |
| 622 | + let term = await createTerm({ width: 20, height: 10 }); |
| 623 | + let out = trim( |
| 624 | + print( |
| 625 | + decode( |
| 626 | + term.render([ |
| 627 | + open("root", { |
| 628 | + layout: { width: grow(), height: grow(), direction: "ttb" }, |
| 629 | + }), |
| 630 | + open("box", { |
| 631 | + layout: { width: fixed(14), direction: "ttb" }, |
| 632 | + border: { color: WHITE, top: 1, right: 1, bottom: 1, left: 1 }, |
| 633 | + }), |
| 634 | + text("CASE A"), |
| 635 | + close(), |
| 636 | + close(), |
| 637 | + ]).output, |
| 638 | + ), |
| 639 | + 20, |
| 640 | + 10, |
| 641 | + ), |
| 642 | + ); |
| 643 | + |
| 644 | + let lines = out.split("\n"); |
| 645 | + expect(lines[0]).toBe("┌────────────┐"); |
| 646 | + expect(lines[1]).toBe("│CASE A │"); |
| 647 | + expect(lines[2]).toBe("└────────────┘"); |
| 648 | + }); |
| 649 | +}); |
0 commit comments