22
33pytest .importorskip ('playwright' )
44
5- from panel_material_ui .template import Page
6-
7- from playwright .sync_api import expect
5+ import panel as pn
86from panel .tests .util import serve_component
7+ from playwright .sync_api import expect
8+
9+ from panel_material_ui .template import Page
910
1011pytestmark = pytest .mark .ui
1112
@@ -26,3 +27,160 @@ def test_page_theme_config_header_color(page):
2627 }
2728 }
2829 expect (header ).to_have_css ("background-color" , "rgb(0, 0, 0)" )
30+
31+
32+ def test_page_sidebar_resizable_handle_present (page ):
33+ """Test that the resize handle is present when sidebar has content."""
34+ pg = Page (sidebar = [pn .pane .Markdown ("# Sidebar Content" )])
35+
36+ serve_component (page , pg )
37+
38+ # Check that sidebar is present
39+ sidebar = page .locator (".sidebar" )
40+ expect (sidebar ).to_be_visible ()
41+
42+ # Check that resize handle is present
43+ resize_handle = page .locator ('[aria-label="Resize sidebar"]' )
44+ expect (resize_handle ).to_be_visible ()
45+ expect (resize_handle ).to_have_attribute ("title" , "Drag to resize sidebar" )
46+
47+
48+ def test_page_sidebar_default_width (page ):
49+ """Test that sidebar has the default width of 320px."""
50+ pg = Page (sidebar = [pn .pane .Markdown ("# Sidebar Content" )])
51+
52+ serve_component (page , pg )
53+
54+ sidebar_paper = page .locator (".MuiDrawer-paper.sidebar" )
55+ expect (sidebar_paper ).to_have_css ("width" , "320px" )
56+
57+
58+ def test_page_sidebar_custom_width (page ):
59+ """Test that sidebar respects custom width setting."""
60+ pg = Page (
61+ sidebar = [pn .pane .Markdown ("# Sidebar Content" )],
62+ sidebar_width = 400
63+ )
64+
65+ serve_component (page , pg )
66+
67+ sidebar_paper = page .locator (".MuiDrawer-paper.sidebar" )
68+ expect (sidebar_paper ).to_have_css ("width" , "400px" )
69+
70+
71+ def test_page_sidebar_resize_drag (page ):
72+ """Test that dragging the resize handle changes sidebar width."""
73+ pg = Page (sidebar = [pn .pane .Markdown ("# Sidebar Content" )])
74+
75+ serve_component (page , pg )
76+
77+ # Get initial sidebar width
78+ sidebar_paper = page .locator (".MuiDrawer-paper.sidebar" )
79+ expect (sidebar_paper ).to_have_css ("width" , "320px" )
80+
81+ # Get resize handle
82+ resize_handle = page .locator ('[aria-label="Resize sidebar"]' )
83+ expect (resize_handle ).to_be_visible ()
84+
85+ # Get the bounding box for drag calculation
86+ handle_box = resize_handle .bounding_box ()
87+ assert handle_box is not None
88+
89+ # Drag the handle to the right to increase width
90+ page .mouse .move (handle_box ["x" ] + handle_box ["width" ] / 2 , handle_box ["y" ] + handle_box ["height" ] / 2 )
91+ page .mouse .down ()
92+ page .mouse .move (handle_box ["x" ] + 100 , handle_box ["y" ] + handle_box ["height" ] / 2 )
93+ page .mouse .up ()
94+
95+ # Wait for the change to be applied
96+ page .wait_for_timeout (100 )
97+
98+ # Check that the width has increased (should be around 420px)
99+ # Using a range check since exact pixel values can vary
100+ assert pg .sidebar_width > 380 , f"Expected sidebar_width > 380, got { pg .sidebar_width }
101+ assert pg .sidebar_width < 440 , f"Expected sidebar_width < 440, got { pg .sidebar_width }
102+
103+
104+ def test_page_sidebar_collapse_on_small_drag (page ):
105+ """Test that dragging sidebar to very small width collapses it."""
106+ pg = Page (
107+ sidebar = [pn .pane .Markdown ("# Sidebar Content" )],
108+ sidebar_width = 200 # Start with smaller width for easier testing
109+ )
110+
111+ serve_component (page , pg )
112+
113+ # Verify sidebar is initially open
114+ assert pg .sidebar_open is True
115+ sidebar_paper = page .locator (".MuiDrawer-paper.sidebar" )
116+ expect (sidebar_paper ).to_be_visible ()
117+
118+ # Get resize handle
119+ resize_handle = page .locator ('[aria-label="Resize sidebar"]' )
120+ expect (resize_handle ).to_be_visible ()
121+
122+ # Get the bounding box for drag calculation
123+ handle_box = resize_handle .bounding_box ()
124+ assert handle_box is not None
125+
126+ # Drag the handle far to the left to trigger collapse (more than 150px to get below 50px threshold)
127+ page .mouse .move (handle_box ["x" ] + handle_box ["width" ] / 2 , handle_box ["y" ] + handle_box ["height" ] / 2 )
128+ page .mouse .down ()
129+ page .mouse .move (handle_box ["x" ] - 180 , handle_box ["y" ] + handle_box ["height" ] / 2 )
130+ page .mouse .up ()
131+
132+ # Wait for the change to be applied
133+ page .wait_for_timeout (200 )
134+
135+ # Check that sidebar is now collapsed
136+ assert pg .sidebar_open is False , "Sidebar should be collapsed when dragged to small width"
137+
138+
139+ def test_page_sidebar_no_handle_when_empty (page ):
140+ """Test that no resize handle is present when sidebar is empty."""
141+ pg = Page () # No sidebar content
142+
143+ serve_component (page , pg )
144+
145+ # Check that resize handle is not present
146+ resize_handle = page .locator ('[aria-label="Resize sidebar"]' )
147+ expect (resize_handle ).not_to_be_visible ()
148+
149+
150+ def test_page_sidebar_handle_styling (page ):
151+ """Test that the resize handle has proper styling and hover effects."""
152+ pg = Page (sidebar = [pn .pane .Markdown ("# Sidebar Content" )])
153+
154+ serve_component (page , pg )
155+
156+ resize_handle = page .locator ('[aria-label="Resize sidebar"]' )
157+ expect (resize_handle ).to_be_visible ()
158+
159+ # Check that handle has col-resize cursor
160+ expect (resize_handle ).to_have_css ("cursor" , "col-resize" )
161+
162+ # Check that handle is positioned at the right edge
163+ expect (resize_handle ).to_have_css ("position" , "absolute" )
164+ expect (resize_handle ).to_have_css ("right" , "0px" )
165+ expect (resize_handle ).to_have_css ("top" , "0px" )
166+
167+
168+ def test_page_sidebar_width_persistence (page ):
169+ """Test that sidebar width changes are reflected in the model."""
170+ pg = Page (sidebar = [pn .pane .Markdown ("# Sidebar Content" )])
171+
172+ serve_component (page , pg )
173+
174+ # Get initial width from model
175+ initial_width = pg .sidebar_width
176+ assert initial_width == 320
177+
178+ # Simulate a programmatic width change
179+ pg .sidebar_width = 450
180+
181+ # Wait for change to be applied
182+ page .wait_for_timeout (100 )
183+
184+ # Check that the CSS reflects the new width
185+ sidebar_paper = page .locator (".MuiDrawer-paper.sidebar" )
186+ expect (sidebar_paper ).to_have_css ("width" , "450px" )
0 commit comments