ratatui-kit 0.9.0

A framework for building interactive terminal user interfaces with ratatui
Documentation
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
// 组件渲染测试 harness:把一个元素的组件树**单次离屏渲染**到 ratatui `TestBackend` 的
// `Buffer`,用于断言组件输出。
//
// 关键:`update` 经对象安全的 `&mut dyn UpdaterTerminal` 驱动,故可用 no-op 终端(无真实
// TTY)跑 update;draw 则用 `ratatui::Terminal<TestBackend>` 取 `Frame`。只覆盖一次渲染的
// 静态输出,不轮询 future/事件。

use crate::{
    AnyElement, ComponentDrawer, ElementRepr, render::tree::Tree, terminal::UpdaterTerminal,
};
use ratatui::buffer::Buffer;
use std::io;

// no-op 终端:`insert_before` 空操作。仅供驱动 update。事件不再经终端订阅(改由 `InputRuntime`),
// harness 跑 `update_once`(含 `begin_frame`)建注册表但永不 `dispatch`。
struct NoopTerminal;

impl UpdaterTerminal for NoopTerminal {
    fn insert_before(
        &mut self,
        _height: u16,
        _draw_fn: Box<dyn FnOnce(&mut Buffer)>,
    ) -> io::Result<()> {
        Ok(())
    }
}

// 单次离屏渲染:建树 → no-op 跑 update → `TestBackend` 跑 draw → 返回 `Buffer` 克隆。
fn render_to_buffer(el: impl Into<AnyElement<'static>>, width: u16, height: u16) -> Buffer {
    render_to_buffer_frames(el, width, height, 1)
}

// 多帧离屏渲染:用于依赖上一帧布局信息的组件,例如 `Input::use_previous_size`。
fn render_to_buffer_frames(
    el: impl Into<AnyElement<'static>>,
    width: u16,
    height: u16,
    frames: usize,
) -> Buffer {
    let mut el = el.into();
    let helper = el.helper();
    let mut tree = Tree::new(el.props_mut(), helper);

    let mut noop = NoopTerminal;
    let mut terminal =
        ratatui::Terminal::new(ratatui::backend::TestBackend::new(width, height)).unwrap();

    for _ in 0..frames.max(1) {
        tree.update_once(&mut noop);
        terminal
            .draw(|frame| {
                let area = frame.area();
                let mut drawer = ComponentDrawer::new(frame, area);
                tree.draw_root(&mut drawer);
            })
            .unwrap();
    }

    terminal.backend().buffer().clone()
}

// 把 Buffer 第 `y` 行拼成字符串,便于断言。
fn row(buf: &Buffer, y: u16) -> String {
    (0..buf.area.width).map(|x| buf[(x, y)].symbol()).collect()
}

// 在整个 Buffer 里找某字符的首个位置(列, 行)。
fn find(buf: &Buffer, ch: &str) -> Option<(u16, u16)> {
    (0..buf.area.height)
        .flat_map(|y| (0..buf.area.width).map(move |x| (x, y)))
        .find(|&(x, y)| buf[(x, y)].symbol() == ch)
}

#[test]
fn text_renders_content() {
    use crate::components::Text;
    let buf = render_to_buffer(crate::element!(Text(text: "hi")), 6, 1);
    assert!(row(&buf, 0).starts_with("hi"), "实际: {:?}", row(&buf, 0));
}

#[test]
fn wrapped_text_renders_hard_wrapped_lines() {
    use crate::components::WrappedText;
    let buf = render_to_buffer(
        crate::element!(WrappedText(
            text: "alpha beta gamma",
            wrap_width: 5,
        )),
        5,
        3,
    );

    assert!(
        row(&buf, 0).starts_with("alpha"),
        "第 1 行应渲染 alpha, 实际: {:?}",
        row(&buf, 0)
    );
    assert!(
        row(&buf, 1).starts_with("beta"),
        "第 2 行应渲染 beta, 实际: {:?}",
        row(&buf, 1)
    );
    assert!(
        row(&buf, 2).starts_with("gamma"),
        "第 3 行应渲染 gamma, 实际: {:?}",
        row(&buf, 2)
    );
}

#[test]
fn border_draws_box_around_child() {
    use crate::components::{Border, Text};
    let buf = render_to_buffer(crate::element!(Border { Text(text: "x") }), 5, 3);
    // 左上角为边框字符(非空格)。
    assert_ne!(buf[(0, 0)].symbol(), " ", "左上角应是边框字符");
    // 内容落在边框内(第 1 行)。
    assert!(
        row(&buf, 1).contains('x'),
        "内容应在边框内: {:?}",
        row(&buf, 1)
    );
}

#[test]
fn view_renders_children() {
    use crate::components::{Text, View};
    let buf = render_to_buffer(crate::element!(View { Text(text: "ab") }), 6, 1);
    assert!(row(&buf, 0).contains("ab"), "实际: {:?}", row(&buf, 0));
}

#[test]
fn hidden_cursor_input_starts_from_value_prefix() {
    use crate::components::{Border, Input};
    use ratatui::layout::Constraint;

    let buf = render_to_buffer_frames(
        crate::element!(Border(width: Constraint::Length(8), height: Constraint::Length(3)) {
            Input(
                input: tui_input::Input::new("dep".to_string()),
                hide_cursor: true,
            )
        }),
        8,
        3,
        2,
    );

    assert!(
        row(&buf, 1).contains("dep"),
        "隐藏光标的输入框应从值开头展示, 实际: {:?}",
        row(&buf, 1)
    );
}

#[test]
fn center_offsets_content_from_origin() {
    use crate::components::{Center, Text};
    use ratatui::layout::Constraint;
    // Center 需显式尺寸界定居中区域。
    let buf = render_to_buffer(
        crate::element!(Center(width: Constraint::Length(1), height: Constraint::Length(1)) {
            Text(text: "x")
        }),
        9,
        3,
    );
    let (x, _y) = find(&buf, "x").expect("应渲染 x");
    // 居中 → 不在左上原点列。
    assert!(x > 0, "居中后 x 应不在第 0 列, 实际列 {x}");
}

#[test]
fn handwritten_component_can_use_terminal_size_without_context_upgrade() {
    use crate::{Component, ComponentUpdater, Hooks, NoProps, UseTerminalSize};

    struct ManualSize;

    impl Component for ManualSize {
        type Props<'a> = NoProps;

        fn new(_props: &Self::Props<'_>) -> Self {
            Self
        }

        fn update(
            &mut self,
            _props: &mut Self::Props<'_>,
            mut hooks: Hooks,
            _updater: &mut ComponentUpdater,
        ) {
            let _ = hooks.use_terminal_size();
        }
    }

    let _ = render_to_buffer(crate::element!(ManualSize), 4, 1);
}

mod scroll_view_tests {
    use super::{render_to_buffer, row};
    use crate::prelude::*;
    use ratatui::{
        layout::{Constraint, Direction},
        widgets::Block,
    };

    #[test]
    fn large_fill_weight_does_not_panic() {
        let buf = render_to_buffer(
            element!(ScrollView(flex_direction: Direction::Horizontal) {
                View(width: Constraint::Fill(820)) {
                    Text(text: "wide")
                }
            }),
            20,
            3,
        );

        assert!(
            row(&buf, 0).contains("wide"),
            "应渲染内容, 实际: {:?}",
            row(&buf, 0)
        );
    }

    #[test]
    fn boundary_sized_content_remains_visible() {
        let buf = render_to_buffer(
            element!(ScrollView(flex_direction: Direction::Vertical) {
                View(height: Constraint::Length(2)) {
                    Text(text: "fit")
                }
            }),
            12,
            3,
        );

        assert!(
            row(&buf, 0).contains("fit"),
            "临界尺寸内容应可见, 实际: {:?}",
            row(&buf, 0)
        );
    }

    #[component]
    fn ControlledScroll(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
        let scroll_state = hooks.use_state(ScrollViewState::default);

        element!(ScrollView(
            state: scroll_state,
            block: Block::bordered(),
        ) {
            Text(text: "boxed")
        })
    }

    #[test]
    fn controlled_state_with_block_renders() {
        let buf = render_to_buffer(element!(ControlledScroll), 12, 3);

        assert_ne!(buf[(0, 0)].symbol(), " ", "应渲染边框");
        assert!(
            row(&buf, 1).contains("boxed"),
            "应渲染受控内容, 实际: {:?}",
            row(&buf, 1)
        );
    }

    // D1:内区收敛为 block.inner() 后,内容不再盖掉右边框。短内容(无滚动条)时
    // 左右边框都应完整保留(旧的 width-1 会让内容 blit 到右边框列上)。
    #[test]
    fn bordered_scrollview_preserves_both_side_borders() {
        let buf = render_to_buffer(
            element!(ScrollView(block: Block::bordered()) {
                Text(text: "hi")
            }),
            10,
            3,
        );

        assert_eq!(buf[(0, 1)].symbol(), "", "左边框应保留");
        assert_eq!(buf[(9, 1)].symbol(), "", "右边框不应被内容覆盖");
    }

    // D4:ScrollView 嵌套 ScrollView 不应 panic(共享 scroll buffer 栈的 save/restore)。
    #[component]
    fn NestedScroll(_hooks: Hooks) -> impl Into<AnyElement<'static>> {
        element!(ScrollView(flex_direction: Direction::Vertical) {
            ScrollView(flex_direction: Direction::Vertical) {
                Text(text: "deep")
            }
        })
    }

    #[test]
    fn nested_scrollview_does_not_panic() {
        let buf = render_to_buffer(element!(NestedScroll), 12, 4);
        assert!(
            row(&buf, 0).contains("deep"),
            "嵌套 ScrollView 应渲染内层内容, 实际: {:?}",
            row(&buf, 0)
        );
    }

    // D3:显示横向滚动条会占掉一行视口;偏移须按视口(而非原始区)裁剪,否则最后一行滚不到。
    #[component]
    fn TallScroll(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
        let scroll_state = hooks.use_state(|| {
            let mut state = ScrollViewState::default();
            state.scroll_to_bottom();
            state
        });

        element!(ScrollView(
            flex_direction: Direction::Vertical,
            state: scroll_state,
            scrollbars: Scrollbars {
                horizontal_scrollbar_visibility: ScrollbarVisibility::Always,
                ..Default::default()
            },
        ) {
            View(height: Constraint::Length(1)) { Text(text: "r0") }
            View(height: Constraint::Length(1)) { Text(text: "r1") }
            View(height: Constraint::Length(1)) { Text(text: "r2") }
            View(height: Constraint::Length(1)) { Text(text: "r3") }
            View(height: Constraint::Length(1)) { Text(text: "r4") }
        })
    }

    #[test]
    fn last_row_reachable_when_horizontal_scrollbar_shown() {
        // 视口高 3,底部横向滚动条占 1 行 → 内容视口 2 行;5 行内容滚到底后末行 r4 应可见。
        let buf = render_to_buffer(element!(TallScroll), 8, 3);
        let text = (0..3).map(|y| row(&buf, y)).collect::<Vec<_>>().join("|");
        assert!(text.contains("r4"), "末行应可滚到, 实际: {text:?}");
    }
}

// 路由渲染链路集成测试:验证 `RouterProvider` + `Outlet` 按 `index_path` 选中并
// 渲染正确组件,以及嵌套 `Outlet` 消费剩余 path。仅在 `router` 特性下编译。
#[cfg(feature = "router")]
mod router_tests {
    use super::{render_to_buffer, row};
    use crate::prelude::*;

    // 零状态测试页面,各渲染可辨识文本。
    #[component]
    fn HomePage(_hooks: Hooks) -> impl Into<AnyElement<'static>> {
        element!(Text(text: "HOME"))
    }

    #[component]
    fn AboutPage(_hooks: Hooks) -> impl Into<AnyElement<'static>> {
        element!(Text(text: "ABOUT"))
    }

    // 父布局:仅渲染 Outlet,用于验证嵌套消费剩余 path。
    #[component]
    fn LayoutPage(_hooks: Hooks) -> impl Into<AnyElement<'static>> {
        element!(Outlet)
    }

    fn two_pages() -> Routes {
        routes! {
            "/home" => HomePage,
            "/about" => AboutPage,
        }
        .into()
    }

    #[test]
    fn renders_index_route() {
        let buf = render_to_buffer(
            element!(RouterProvider(routes: two_pages(), index_path: "/home")),
            8,
            1,
        );
        assert!(row(&buf, 0).contains("HOME"), "实际: {:?}", row(&buf, 0));
    }

    #[test]
    fn renders_sibling_route_by_index_path() {
        let buf = render_to_buffer(
            element!(RouterProvider(routes: two_pages(), index_path: "/about")),
            8,
            1,
        );
        assert!(row(&buf, 0).contains("ABOUT"), "实际: {:?}", row(&buf, 0));
    }

    #[test]
    fn nested_outlet_consumes_remaining_path() {
        let routes: Routes = routes! {
            "/" => LayoutPage {
                "/home" => HomePage,
            },
        }
        .into();
        let buf = render_to_buffer(
            element!(RouterProvider(routes: routes, index_path: "/home")),
            8,
            1,
        );
        assert!(
            row(&buf, 0).contains("HOME"),
            "嵌套应渲染 HOME, 实际: {:?}",
            row(&buf, 0)
        );
    }
}