tallyweb_frontend/
tests.rs

1use 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}