fix(cli): align table columns by display width

.changeset/table-display-width.md

@@ -0,0 +1,5 @@
+---
+"@qawolf/cli": patch
+---
+
+Align table columns by terminal display width for Unicode and styled values.

package.json

@@ -78,6 +78,7 @@
     "@qawolf/testkit": "1.2.1",
     "commander": "14.0.3",
     "env-paths": "4.0.0",
+    "fast-string-width": "3.0.2",
     "picomatch": "4.0.4",
     "pino": "10.3.1",
     "playwright": "1.62.0",

src/core/displayWidth.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "bun:test";
+
+import { displayWidth, padColumns } from "./displayWidth.js";
+
+describe("display columns", () => {
+  it.each([
+    ["plain", 5],
+    ["登录", 4],
+    ["café", 4],
+    ["👩🏽‍💻", 2],
+    ["🇬🇧", 2],
+    ["☕", 2],
+    ["✈️", 2],
+    ["\x1b[2m登录\x1b[22m", 4],
+  ])("measures %s as %i columns", (text, width) => {
+    expect(displayWidth(text)).toBe(width);
+  });
+
+  it("pads by display columns", () => {
+    expect(padColumns("登录", 6)).toBe("登录  ");
+  });
+});

src/core/displayWidth.ts

@@ -0,0 +1,6 @@
+import stringWidth from "fast-string-width";
+
+export const displayWidth = (text: string): number => stringWidth(text);
+
+export const padColumns = (text: string, width: number): string =>
+  `${text}${" ".repeat(Math.max(0, width - displayWidth(text)))}`;

src/core/renderTable.test.ts

@@ -10,6 +10,28 @@ const columns: readonly TableColumn<Runner>[] = [
 ];
 
 describe("renderTable", () => {
+  it("aligns columns containing wide and combining characters", () => {
+    const table = renderTable({
+      boldHeader: false,
+      columns,
+      rows: [
+        { family: "wide", id: "登录" },
+        { family: "accent", id: "e\u0301" },
+        { family: "emoji", id: "👩‍💻" },
+      ],
+    });
+
+    expect(table).toBe(
+      [
+        "id    family",
+        "登录  wide",
+        "e\u0301     accent",
+        "👩‍💻    emoji",
+        "",
+      ].join("\n"),
+    );
+  });
+
   it("pads every column to its widest cell and trims the last one", () => {
     const table = renderTable({
       boldHeader: false,

src/core/renderTable.ts

@@ -1,3 +1,5 @@
+import { displayWidth, padColumns } from "./displayWidth.js";
+
 export type TableColumn<Row> = {
   readonly header: string;
   readonly value: (row: Row) => string;
@@ -15,14 +17,14 @@ export function renderTable<Row>(options: {
   const measured = columns.map((column) => ({
     column,
     width: Math.max(
-      column.header.length,
-      ...rows.map((row) => column.value(row).length),
+      displayWidth(column.header),
+      ...rows.map((row) => displayWidth(column.value(row))),
     ),
   }));
 
   const renderRow = (cell: (column: TableColumn<Row>) => string): string =>
     measured
-      .map(({ column, width }) => cell(column).padEnd(width))
+      .map(({ column, width }) => padColumns(cell(column), width))
       .join("  ")
       .trimEnd();