Update MaxSizedBox.tsx (#2233)

Co-authored-by: Jacob Richman <[email protected]>
Co-authored-by: Scott Densmore <[email protected]>
Co-authored-by: Pascal Birchler <[email protected]>

1 files changed, 83 insertions, 0 deletions

diff --git a/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx b/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
index 50951b4f..92147d3c 100644
--- a/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
+++ b/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
@@ -248,6 +248,89 @@ Line 3`);
 🐶`);
   });
 
+  it('falls back to an ellipsis when width is extremely small', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={2} maxHeight={2}>
+          <Box>
+            <Text>No</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals('N…');
+  });
+
+  it('truncates long non-wrapping text with ellipsis', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>ABCDE</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals('AB…');
+  });
+
+  it('truncates non-wrapping text containing line breaks', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>{'A\nBCDE'}</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`A\n…`);
+  });
+
+  it('truncates emoji characters correctly with ellipsis', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>🐶🐶🐶</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`🐶…`);
+  });
+
+  it('shows ellipsis for multiple rows with long non-wrapping text', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={3}>
+          <Box>
+            <Text>AAA</Text>
+            <Text wrap="wrap">first</Text>
+          </Box>
+          <Box>
+            <Text>BBB</Text>
+            <Text wrap="wrap">second</Text>
+          </Box>
+          <Box>
+            <Text>CCC</Text>
+            <Text wrap="wrap">third</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`AA…\nBB…\nCC…`);
+  });
+
   it('accounts for additionalHiddenLinesCount', () => {
     const { lastFrame } = render(
       <OverflowProvider>