tallyweb_frontend/
tests.rs1use super::*;
2use components::{self, MessageJar, ShowSidebar, Sidebar, SidebarLayout};
3use leptos::*;
4use leptos_router::{Outlet, Route, A};
5
6stylance::import_style!(style, "tests.module.scss");
7
8#[server]
9async fn failing_server_fn() -> Result<(), ServerFnError> {
10 use super::AppError;
11 return Err(AppError::Internal)?;
12}
13
14#[component(transparent)]
15pub fn TestRoutes() -> impl IntoView {
16 view! {
17 <Route path="/test" view=ShowTests>
18 <Route path="" view=|| () />
19 <Route path="message" view=Message />
20 <Route path="slider" view=Slider />
21 </Route>
22 }
23}
24
25#[component]
26pub fn ShowTests() -> impl IntoView {
27 let show_sidebar = create_rw_signal(ShowSidebar(true));
28 provide_context(show_sidebar);
29
30 let test_list = vec![("Messages", "message"), ("Slider", "slider")]
31 .into_iter()
32 .map(|(key, href)| {
33 view! {
34 <A href>
35 <div class=style::entry>
36 <span>{key}</span>
37 </div>
38 </A>
39 }
40 })
41 .collect_view();
42
43 view! {
44 <div style:display="flex">
45 <Sidebar display=show_sidebar layout=SidebarLayout::Landscape>
46 <test-list>{test_list.clone()}</test-list>
47 </Sidebar>
48 <Outlet />
49 </div>
50 }
51}
52
53#[component]
54fn Message() -> impl IntoView {
55 expect_context::<RwSignal<ShowSidebar>>();
56 let msg = expect_context::<MessageJar>();
57
58 let failed_action = create_server_action::<FailingServerFn>();
59 failed_action.dispatch(FailingServerFn {});
60
61 create_effect(move |_| {
62 if let Some(Err(err)) = failed_action.value().get() {
63 msg.without_timeout().set_err(AppError::from(err))
64 }
65 });
66
67 create_effect(move |_| {
68 msg.without_timeout().set_msg("message 1");
69 msg.without_timeout()
70 .set_msg("message 2 which is a longer message");
71 msg.without_timeout()
72 .set_msg("message 3\nwith one more line");
73 msg.with_timeout(chrono::Duration::seconds(3))
74 .set_msg("message 4\nthis one dissappears");
75 msg.without_timeout().set_err("An error occurred")
76 });
77}
78
79#[component]
80fn Slider() -> impl IntoView {
81 expect_context::<RwSignal<ShowSidebar>>().set(ShowSidebar(false));
82 let checked_signal = create_rw_signal(false);
83 let disable_signal = create_rw_signal(false);
84 let background = create_rw_signal(false);
85
86 view! {
87 <div>
88 <div class=style::test_case>
89 <components::Slider attr:id="test-background" checked=true></components::Slider>
90 </div>
91 <div class=style::test_case>
92 <button data-testid="toggle" on:click=move |_| checked_signal.update(|s| *s = !*s)>
93 Toggle
94 </button>
95 <components::Slider
96 attr:id="test-managed"
97 checked=checked_signal
98 ></components::Slider>
99 </div>
100 <div class=style::test_case>
101 <input
102 type="checkbox"
103 id="check-disable"
104 data-testid="check-disable"
105 prop:checked=move || !disable_signal()
106 checked=move || !disable_signal()
107 on:change=move |_| disable_signal.update(|s| *s = !*s)
108 />
109 <components::Slider
110 attr:id="test-disable"
111 attr:data-testid="disable"
112 checked=true
113 attr:disabled=disable_signal
114 ></components::Slider>
115 </div>
116
117 <div class=style::test_case>
118 <components::Slider
119 attr:id="test-on_checked"
120 attr:data-testid="on_checked"
121 checked=false
122 on:change=move |_: ev::Event| background.update(|s| *s = !*s)
123 ></components::Slider>
124 <div
125 attr:data-testid="colored_div"
126 style:width="32px"
127 style:height="32px"
128 style:background=move || if !background() { "#FF0000" } else { "#00FF00" }
129 ></div>
130
131 </div>
132 </div>
133 }
134}