File size: 3,775 Bytes
52efc7b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | /**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from '../../../test-utils/render.js';
import { OverflowProvider } from '../../contexts/OverflowContext.js';
import { SlicingMaxSizedBox } from './SlicingMaxSizedBox.js';
import { Box, Text } from 'ink';
import { describe, it, expect } from 'vitest';
describe('<SlicingMaxSizedBox />', () => {
it('renders string data without slicing when it fits', async () => {
const { lastFrame, unmount } = await render(
<OverflowProvider>
<SlicingMaxSizedBox data="Hello World" maxWidth={80}>
{(truncatedData) => <Text>{truncatedData}</Text>}
</SlicingMaxSizedBox>
</OverflowProvider>,
);
expect(lastFrame()).toContain('Hello World');
unmount();
});
it('slices string data by characters when very long', async () => {
const veryLongString = 'A'.repeat(25000);
const { lastFrame, unmount } = await render(
<OverflowProvider>
<SlicingMaxSizedBox
data={veryLongString}
maxWidth={80}
overflowDirection="bottom"
>
{(truncatedData) => <Text>{truncatedData.length}</Text>}
</SlicingMaxSizedBox>
</OverflowProvider>,
);
// 20000 characters + 3 for '...'
expect(lastFrame()).toContain('20003');
unmount();
});
it('slices string data by lines when maxLines is provided', async () => {
const multilineString = 'Line 1\nLine 2\nLine 3\nLine 4\nLine 5';
const { lastFrame, unmount } = await render(
<OverflowProvider>
<SlicingMaxSizedBox
data={multilineString}
maxLines={3}
maxWidth={80}
maxHeight={10}
overflowDirection="bottom"
>
{(truncatedData) => <Text>{truncatedData}</Text>}
</SlicingMaxSizedBox>
</OverflowProvider>,
);
// maxLines=3, so it should keep 3-1 = 2 lines
expect(lastFrame()).toContain('Line 1');
expect(lastFrame()).toContain('Line 2');
expect(lastFrame()).not.toContain('Line 3');
expect(lastFrame()).toContain(
'... last 3 lines hidden (Ctrl+O to show) ...',
);
unmount();
});
it('slices array data when maxLines is provided', async () => {
const dataArray = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
const { lastFrame, unmount } = await render(
<OverflowProvider>
<SlicingMaxSizedBox
data={dataArray}
maxLines={3}
maxWidth={80}
maxHeight={10}
overflowDirection="bottom"
>
{(truncatedData) => (
<Box flexDirection="column">
{truncatedData.map((item, i) => (
<Text key={i}>{item}</Text>
))}
</Box>
)}
</SlicingMaxSizedBox>
</OverflowProvider>,
);
// maxLines=3, so it should keep 3-1 = 2 items
expect(lastFrame()).toContain('Item 1');
expect(lastFrame()).toContain('Item 2');
expect(lastFrame()).not.toContain('Item 3');
expect(lastFrame()).toContain(
'... last 3 lines hidden (Ctrl+O to show) ...',
);
unmount();
});
it('does not slice when isAlternateBuffer is true', async () => {
const multilineString = 'Line 1\nLine 2\nLine 3\nLine 4\nLine 5';
const { lastFrame, unmount } = await render(
<OverflowProvider>
<SlicingMaxSizedBox
data={multilineString}
maxLines={3}
maxWidth={80}
isAlternateBuffer={true}
>
{(truncatedData) => <Text>{truncatedData}</Text>}
</SlicingMaxSizedBox>
</OverflowProvider>,
);
expect(lastFrame()).toContain('Line 5');
expect(lastFrame()).not.toContain('hidden');
unmount();
});
});
|