test: Add picocolor test to check for ANSI format character problems

Author: Lms24

packages/clifty/package.json

@@ -29,6 +29,7 @@
     "@types/node": "^22.14.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.2",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.1",
+    "picocolors": "^1.1.1"
   }
 }

packages/clifty/test/picocolors.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { KEYS, withEnv } from "../src";
+
+describe("clifty with picocolors", () => {
+  it("handles colorized and ansi-formatted output", async () => {
+    const result = await withEnv({ debug: true })
+      .defineInteraction()
+      .expectOutput(
+        "This is a simple flow for testing output with colorized and formatted output"
+      )
+      .whenAsked("What is your name?")
+      .respondWith("H4cktor", KEYS.ENTER)
+      .expectOutput("Hello H4cktor (clack.log.success)")
+      .expectOutput("Hello H4cktor (clack.log.info)")
+      .expectOutput("Hello H4cktor (clack.log.error)")
+      .expectOutput("Hello H4cktor (clack.log.warn)")
+      .expectOutput("Hello H4cktor (red)")
+      .expectOutput("Hello H4cktor (red + bg)")
+      .expectOutput("Hello H4cktor (italic + bg)")
+      .expectOutput("greeting H4cktor in progress")
+      .expectOutput("greeting H4cktor in progress 50%")
+      .expectOutput("Greeted H4cktor")
+      .expectOutput("Goodbye")
+      .run("node test/testcli/bin.mjs picocolors");
+
+    expect(result).toBe(0);
+  });
+});

packages/clifty/test/testcli/bin.mjs

@@ -1,10 +1,14 @@
 import yargs from "yargs";
 import { execute as executeInOut } from "./inOut.mjs";
+import { execute as executePicocolors } from "./picocolors.mjs";
 
 yargs(process.argv.slice(2))
   .command("inOut", "test input and output", () => {
     executeInOut();
   })
+  .command("picocolors", "test picocolors", () => {
+    executePicocolors();
+  })
   .parse();
 
 // executeInOut();

packages/clifty/test/testcli/picocolors.mjs

@@ -0,0 +1,48 @@
+import * as clack from "@clack/prompts";
+import pc from "picocolors";
+
+export async function execute(args) {
+  clack.intro("picocolors");
+  clack.note(
+    "This is a simple flow for testing output with colorized and formatted output"
+  );
+
+  const name = await clack.text({
+    message: "What is your name?",
+    placeholder: "Enter your name",
+  });
+
+  if (clack.isCancel(name)) {
+    clack.cancel("Goodbye");
+  }
+
+  // clack prints some extra characters, let's just make sure these don't mess up output expectations
+  clack.log.success(`Hello ${pc.green(name)} (clack.log.success)`);
+  clack.log.info(`Hello ${pc.blue(name)} (clack.log.info)`);
+  clack.log.error(`Hello ${pc.red(name)} (clack.log.error)`);
+  clack.log.warn(`Hello ${pc.yellow(name)} (clack.log.warn)`);
+  clack.log.step(`Hello ${pc.cyan(name)} (clack.log.step)`);
+
+  console.log(pc.red(`\nHello ${name} (red)`));
+  console.log(
+    pc.green(`Hello ${pc.underline(name)} ${pc.dim(pc.bgRed("(red + bg)"))}`)
+  );
+
+  console.log(
+    pc.italic(pc.bgWhite(`Hello ${pc.cyanBright(name)} (italic + bg)`))
+  );
+
+  const spinner = clack.spinner({ indicator: "timer" });
+
+  spinner.start(`greeting ${pc.cyanBright(name)} in progress`);
+
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  spinner.message(`greeting ${pc.cyanBright(name)} in progress 50%`);
+
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  spinner.stop(`Greeted ${pc.cyanBright(name)}`);
+
+  clack.outro("Goodbye");
+}