Update MaxSizedBox.tsx (#2233)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
Co-authored-by: Scott Densmore <scottdensmore@mac.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
This commit is contained in:
Elvin
2025-07-15 19:35:03 -04:00
committed by GitHub
parent 222e362fc2
commit 615748657a
2 changed files with 162 additions and 2 deletions

View File

@@ -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>