Skip to content

Commit 59eb594

Browse files
committed
Add more tests
1 parent 19a888d commit 59eb594

File tree

6 files changed

+433
-0
lines changed

6 files changed

+433
-0
lines changed
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
from shiny import App, reactive, ui
2+
3+
# Define the UI
4+
app_ui = ui.page_fillable(
5+
# Add Font Awesome for icons
6+
ui.tags.head(
7+
ui.tags.link(
8+
rel="stylesheet",
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
10+
),
11+
),
12+
# Create a container card
13+
ui.card(
14+
ui.card_header("Tooltip Demo"),
15+
# Control buttons in a row
16+
ui.layout_column_wrap(
17+
ui.input_action_button(
18+
"btn_show",
19+
"Show tooltip",
20+
class_="btn btn-info",
21+
icon=ui.tags.i(class_="fa-solid fa-eye"),
22+
),
23+
ui.input_action_button(
24+
"btn_close",
25+
"Close tooltip",
26+
class_="btn btn-warning",
27+
icon=ui.tags.i(class_="fa-solid fa-eye-slash"),
28+
),
29+
ui.input_action_button(
30+
"btn_update",
31+
"Update tooltip",
32+
class_="btn btn-success",
33+
icon=ui.tags.i(class_="fa-solid fa-sync"),
34+
),
35+
width=1 / 3,
36+
),
37+
ui.hr(),
38+
# Center the tooltip button
39+
ui.div(
40+
ui.tooltip(
41+
ui.input_action_button(
42+
"btn_w_tooltip",
43+
"Hover over me!",
44+
class_="btn btn-primary btn-lg",
45+
icon=ui.tags.i(class_="fa-solid fa-info-circle"),
46+
),
47+
"Initial tooltip message - try the buttons above!",
48+
id="tooltip_id",
49+
placement="right",
50+
),
51+
class_="d-flex justify-content-center align-items-center",
52+
style="height: 200px;",
53+
),
54+
),
55+
)
56+
57+
58+
# Define the server
59+
def server(input, output, session):
60+
# Effect to show tooltip
61+
@reactive.effect
62+
@reactive.event(input.btn_show)
63+
def _():
64+
ui.update_tooltip("tooltip_id", show=True)
65+
66+
# Effect to close tooltip
67+
@reactive.effect
68+
@reactive.event(input.btn_close)
69+
def _():
70+
ui.update_tooltip("tooltip_id", show=False)
71+
72+
# Effect to update tooltip content and show it
73+
@reactive.effect
74+
@reactive.event(input.btn_update)
75+
def _():
76+
# Create dynamic content based on number of clicks
77+
count = input.btn_update()
78+
content = f"Tooltip updated {count} time{'s' if count > 1 else ''}!"
79+
# Update tooltip with new content and show it
80+
ui.update_tooltip("tooltip_id", content, show=True)
81+
82+
# Show notification when button with tooltip is clicked
83+
@reactive.effect
84+
@reactive.event(input.btn_w_tooltip)
85+
def _():
86+
ui.notification_show(
87+
"Button clicked!", duration=2, type="message", close_button=True
88+
)
89+
90+
91+
# Create and return the app
92+
app = App(app_ui, server)
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
from shiny import reactive
2+
from shiny.express import input, render, ui
3+
4+
# Page options
5+
ui.page_opts(
6+
title="Update Tooltip Demo",
7+
fillable=True,
8+
# Add Font Awesome for icons
9+
)
10+
11+
# Add Font Awesome CSS in the head section first
12+
ui.head_content(
13+
ui.tags.link(
14+
rel="stylesheet",
15+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
16+
)
17+
)
18+
19+
# Create a container card for better organization
20+
with ui.card():
21+
ui.card_header("Tooltip Demo")
22+
23+
# Control buttons in a row
24+
with ui.layout_column_wrap(width=1 / 3):
25+
ui.input_action_button(
26+
"btn_show",
27+
"Show tooltip",
28+
class_="btn btn-info",
29+
icon=ui.tags.i(class_="fa-solid fa-eye"),
30+
)
31+
32+
ui.input_action_button(
33+
"btn_close",
34+
"Close tooltip",
35+
class_="btn btn-warning",
36+
icon=ui.tags.i(class_="fa-solid fa-eye-slash"),
37+
)
38+
39+
ui.input_action_button(
40+
"btn_update",
41+
"Update tooltip",
42+
class_="btn btn-success",
43+
icon=ui.tags.i(class_="fa-solid fa-sync"),
44+
)
45+
46+
# Spacer
47+
ui.hr()
48+
49+
# Center the tooltip button
50+
with ui.div(
51+
class_="d-flex justify-content-center align-items-center",
52+
style="height: 200px;",
53+
):
54+
with ui.tooltip(id="tooltip_id", placement="right"):
55+
ui.input_action_button(
56+
"btn_w_tooltip",
57+
"Hover over me!",
58+
class_="btn btn-primary btn-lg",
59+
icon=ui.tags.i(class_="fa-solid fa-info-circle"),
60+
)
61+
"Initial tooltip message - try the buttons above!"
62+
63+
64+
# Effect to show tooltip
65+
@reactive.effect
66+
@reactive.event(input.btn_show)
67+
def _():
68+
ui.update_tooltip("tooltip_id", show=True)
69+
70+
71+
# Effect to close tooltip
72+
@reactive.effect
73+
@reactive.event(input.btn_close)
74+
def _():
75+
ui.update_tooltip("tooltip_id", show=False)
76+
77+
78+
# Effect to update tooltip content and show it
79+
@reactive.effect
80+
@reactive.event(input.btn_update)
81+
def _():
82+
# Create dynamic content based on number of clicks
83+
count = input.btn_update()
84+
content = f"Tooltip updated {count} time{'s' if count > 1 else ''}!"
85+
# Update tooltip with new content and show it
86+
ui.update_tooltip("tooltip_id", content, show=True)
87+
88+
89+
# Show notification when button with tooltip is clicked
90+
@reactive.effect
91+
@reactive.event(input.btn_w_tooltip)
92+
def _():
93+
ui.notification_show(
94+
"Button clicked!", duration=2, type="message", close_button=True
95+
)
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
from playwright.sync_api import Page
2+
from shiny.playwright import controller
3+
from shiny.pytest import create_app_fixture
4+
from shiny.run import ShinyAppProc
5+
6+
app = create_app_fixture(["app-core.py", "app-express.py"])
7+
8+
def test_tooltip_demo(page: Page, app: ShinyAppProc) -> None:
9+
page.goto(app.url)
10+
11+
# Get tooltip controller
12+
tooltip = controller.Tooltip(page, "tooltip_id")
13+
14+
# Get button controllers
15+
show_btn = controller.InputActionButton(page, "btn_show")
16+
close_btn = controller.InputActionButton(page, "btn_close")
17+
update_btn = controller.InputActionButton(page, "btn_update")
18+
tooltip_btn = controller.InputActionButton(page, "btn_w_tooltip")
19+
20+
# Test initial button labels
21+
show_btn.expect_label("Show tooltip")
22+
close_btn.expect_label("Close tooltip")
23+
update_btn.expect_label("Update tooltip")
24+
tooltip_btn.expect_label("Hover over me!")
25+
26+
# Test initial tooltip state and content
27+
tooltip.expect_active(False)
28+
show_btn.click()
29+
tooltip.expect_body("Initial tooltip message - try the buttons above!")
30+
tooltip.expect_placement("right")
31+
32+
# Test showing tooltip
33+
tooltip.expect_active(True)
34+
35+
# Test closing tooltip
36+
close_btn.click()
37+
tooltip.expect_active(False)
38+
39+
# Test updating tooltip content
40+
update_btn.click()
41+
tooltip.expect_active(True)
42+
tooltip.expect_body("Tooltip updated 1 time!")
43+
44+
close_btn.click()
45+
tooltip.expect_active(False)
46+
47+
# Click update button again and verify content changes
48+
update_btn.click()
49+
tooltip.expect_active(True)
50+
tooltip.expect_body("Tooltip updated 2 times!")
51+
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
from shiny import App, ui
2+
3+
# Create a custom icon for the showcase using Font Awesome
4+
icon = ui.tags.i(class_="fa-solid fa-chart-simple", style="font-size: 2rem;")
5+
6+
app_ui = ui.page_fillable(
7+
# Add Font Awesome CSS to the app
8+
ui.head_content(
9+
ui.HTML(
10+
'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">'
11+
)
12+
),
13+
ui.layout_column_wrap(
14+
# 1. Basic value box with left-center showcase layout (default)
15+
ui.value_box(
16+
"Revenue",
17+
"$5.2M",
18+
"Up 12% from last month",
19+
id="left_center_value_box",
20+
showcase=icon,
21+
theme="primary",
22+
height="200px",
23+
),
24+
# 2. Value box with top-right showcase layout
25+
ui.value_box(
26+
"Active Users",
27+
"2.4K",
28+
"Daily active users",
29+
id="top_right_value_box",
30+
showcase=icon,
31+
showcase_layout="top right",
32+
theme="bg-gradient-purple-red",
33+
height="200px",
34+
),
35+
# 3. Value box with bottom showcase layout
36+
ui.value_box(
37+
"Conversion Rate",
38+
"3.8%",
39+
"Increased by 0.5%",
40+
id="bottom_value_box",
41+
showcase=icon,
42+
showcase_layout="bottom",
43+
theme="text-success",
44+
height="200px",
45+
),
46+
# 4. Value box with full screen capability and custom theme
47+
ui.value_box(
48+
"Total Sales",
49+
"8,742",
50+
"Year to date performance",
51+
id="full_screen_value_box",
52+
showcase=icon,
53+
full_screen=True,
54+
theme="bg-gradient-orange-red",
55+
height="600px",
56+
min_height="150px",
57+
max_height="300px",
58+
fill=True,
59+
),
60+
# 5. Value box with custom background color using class_
61+
ui.value_box(
62+
"Pending Orders",
63+
"156",
64+
"Requires attention",
65+
id="custom_bg_value_box",
66+
showcase=icon,
67+
theme=None,
68+
height="200px",
69+
class_="bg-warning text-dark",
70+
),
71+
width="400px",
72+
),
73+
)
74+
75+
76+
def server(input, output, session):
77+
pass
78+
79+
80+
app = App(app_ui, server)
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
from shiny import reactive
2+
from shiny.express import input, ui, render
3+
4+
ui.page_opts(fillable=True)
5+
6+
# Create a custom icon for the showcase using Font Awesome
7+
icon = ui.tags.i(class_="fa-solid fa-chart-simple", style="font-size: 2rem;")
8+
9+
# Add Font Awesome CSS to the app
10+
ui.head_content(
11+
ui.HTML(
12+
'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">'
13+
)
14+
)
15+
16+
with ui.layout_column_wrap(width="400px"):
17+
# 1. Basic value box with left-center showcase layout (default)
18+
with ui.value_box(
19+
id="left_center_value_box", showcase=icon, theme="primary", height="200px"
20+
):
21+
"Revenue"
22+
"$5.2M"
23+
"Up 12% from last month"
24+
25+
# 2. Value box with top-right showcase layout
26+
with ui.value_box(
27+
id="top_right_value_box",
28+
showcase=icon,
29+
showcase_layout="top right",
30+
theme="bg-gradient-purple-red",
31+
height="200px",
32+
):
33+
"Active Users"
34+
"2.4K"
35+
"Daily active users"
36+
37+
# 3. Value box with bottom showcase layout
38+
with ui.value_box(
39+
id="bottom_value_box",
40+
showcase=icon,
41+
showcase_layout="bottom",
42+
theme="text-success",
43+
height="200px",
44+
):
45+
"Conversion Rate"
46+
"3.8%"
47+
"Increased by 0.5%"
48+
49+
# 4. Value box with full screen capability and custom theme
50+
with ui.value_box(
51+
id="full_screen_value_box",
52+
showcase=icon,
53+
full_screen=True,
54+
theme="bg-gradient-orange-red",
55+
height="600px",
56+
min_height="150px",
57+
max_height="300px",
58+
fill=True,
59+
):
60+
"Total Sales"
61+
"8,742"
62+
"Year to date performance"
63+
64+
# 5. Value box with custom background color using class_
65+
with ui.value_box(
66+
id="custom_bg_value_box",
67+
showcase=icon,
68+
theme=None,
69+
height="200px",
70+
class_="bg-warning text-dark",
71+
):
72+
"Pending Orders"
73+
"156"
74+
"Requires attention"

0 commit comments

Comments
 (0)