test: support tests that include color information (#20220)

packages/cli/src/ui/components/shared/__snapshots__/EnumSelector.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<EnumSelector /> > renders with numeric options and matches snapshot 1`
 `;
 
 exports[`<EnumSelector /> > renders with single option and matches snapshot 1`] = `
-"  Only Option
+"  Only Option  
 "
 `;
 

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-creates-centered-window-around-match-when-collapsed.snap.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="54" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="621" lengthAdjust="spacingAndGlyphs">...ry/long/path/that/keeps/going/cd_/very/long/path/that/keeps/going/</text>
+    <rect x="621" y="0" width="99" height="17" fill="#e5e5e5" />
+    <text x="621" y="2" fill="#000000" textLength="99" lengthAdjust="spacingAndGlyphs">search-here</text>
+    <text x="720" y="2" fill="#e5e5e5" textLength="180" lengthAdjust="spacingAndGlyphs">/and/then/some/more/</text>
+    <text x="0" y="19" fill="#e5e5e5" textLength="450" lengthAdjust="spacingAndGlyphs">components//and/then/some/more/components//and/...</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-highlights-matched-substring-when-expanded-text-only-visible-.snap.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="37" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="81" lengthAdjust="spacingAndGlyphs">run: git </text>
+    <rect x="81" y="0" width="54" height="17" fill="#e5e5e5" />
+    <text x="81" y="2" fill="#000000" textLength="54" lengthAdjust="spacingAndGlyphs">commit</text>
+    <text x="135" y="2" fill="#e5e5e5" textLength="198" lengthAdjust="spacingAndGlyphs"> -m &quot;feat: add search&quot;</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-renders-plain-label-when-no-match-short-label-.snap.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="37" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="126" lengthAdjust="spacingAndGlyphs">simple command</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-respects-custom-maxWidth.snap.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="37" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="477" lengthAdjust="spacingAndGlyphs">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz...</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-shows-full-long-label-when-expanded-and-no-match.snap.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="54" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="900" lengthAdjust="spacingAndGlyphs">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</text>
+    <text x="0" y="19" fill="#e5e5e5" textLength="675" lengthAdjust="spacingAndGlyphs">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-truncates-long-label-when-collapsed-and-no-match.snap.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="54" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="2" fill="#e5e5e5" textLength="900" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text>
+    <text x="0" y="19" fill="#e5e5e5" textLength="477" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-truncates-match-itself-when-match-is-very-long.snap.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="54" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <rect x="0" y="0" width="900" height="17" fill="#e5e5e5" />
+    <text x="0" y="2" fill="#000000" textLength="900" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text>
+    <rect x="0" y="17" width="468" height="17" fill="#e5e5e5" />
+    <text x="0" y="19" fill="#000000" textLength="468" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</text>
+  </g>
+</svg>

packages/cli/src/ui/components/shared/__snapshots__/ExpandableText.test.tsx.snap

@@ -2,39 +2,26 @@
 
 exports[`ExpandableText > creates centered window around match when collapsed 1`] = `
 "...ry/long/path/that/keeps/going/cd_/very/long/path/that/keeps/going/search-here/and/then/some/more/
-components//and/then/some/more/components//and/...
-"
+components//and/then/some/more/components//and/..."
 `;
 
-exports[`ExpandableText > highlights matched substring when expanded (text only visible) 1`] = `
-"run: git commit -m "feat: add search"
-"
-`;
+exports[`ExpandableText > highlights matched substring when expanded (text only visible) 1`] = `"run: git commit -m "feat: add search""`;
 
-exports[`ExpandableText > renders plain label when no match (short label) 1`] = `
-"simple command
-"
-`;
+exports[`ExpandableText > renders plain label when no match (short label) 1`] = `"simple command"`;
 
-exports[`ExpandableText > respects custom maxWidth 1`] = `
-"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz...
-"
-`;
+exports[`ExpandableText > respects custom maxWidth 1`] = `"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz..."`;
 
 exports[`ExpandableText > shows full long label when expanded and no match 1`] = `
 "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
-yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
-"
+yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
 `;
 
 exports[`ExpandableText > truncates long label when collapsed and no match 1`] = `
 "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
-"
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
 `;
 
 exports[`ExpandableText > truncates match itself when match is very long 1`] = `
 "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
-"
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
 `;

packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<HalfLinePaddedBox /> > renders iTerm2-specific blocks when iTerm2 is detected 1`] = `
 "▄▄▄▄▄▄▄▄▄▄
-Content
+Content   
 ▀▀▀▀▀▀▀▀▀▀
 "
 `;
@@ -19,7 +19,7 @@ exports[`<HalfLinePaddedBox /> > renders nothing when useBackgroundColor is fals
 
 exports[`<HalfLinePaddedBox /> > renders standard background and blocks when not iTerm2 1`] = `
 "▀▀▀▀▀▀▀▀▀▀
-Content
+Content   
 ▄▄▄▄▄▄▄▄▄▄
 "
 `;

packages/cli/src/ui/components/shared/__snapshots__/SearchableList.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`SearchableList > should match snapshot 1`] = `
  │ Search...                                                                                      │
  ╰────────────────────────────────────────────────────────────────────────────────────────────────╯
 
-  ● Item One
+  ● Item One  
     Description for item one
 
     Item Two
@@ -28,7 +28,7 @@ exports[`SearchableList > should reset selection to top when items change if res
     Item One
     Description for item one
 
-  ● Item Two
+  ● Item Two  
     Description for item two
 
     Item Three
@@ -43,7 +43,7 @@ exports[`SearchableList > should reset selection to top when items change if res
  │ One                                                                                            │
  ╰────────────────────────────────────────────────────────────────────────────────────────────────╯
 
-  ● Item One
+  ● Item One  
     Description for item one
 "
 `;
@@ -55,7 +55,7 @@ exports[`SearchableList > should reset selection to top when items change if res
  │ Search...                                                                                      │
  ╰────────────────────────────────────────────────────────────────────────────────────────────────╯
 
-  ● Item One
+  ● Item One  
     Description for item one
 
     Item Two