kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated Panel implementation

Browse Source
This commit is contained in:
Kodjo Sossouvi
2025-12-20 19:21:30 +01:00
parent 81a80a47b6
commit 9f69a6bc5b
5 changed files with 125 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
tests/controls/test_panel.py
View File

@@ -233,13 +233,14 @@ class TestPanelRender:
- id: Required for HTMX targeting during toggle/resize operations
- cls Contains "mf-panel-left": CSS class for left panel styling
"""
left_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_left"))
left_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("left")))
# Step 1: Validate left panel global structure
expected = Div(
Div(id=f"{panel._id}_content_left"), # content div, tested in detail later
TestIcon("subtract20_regular"),
Div(id=panel.get_ids().left), # content div, tested in detail later
Div(cls=Contains("mf-resizer-left")), # resizer
id=f"{panel._id}_panel_left",
id=panel.get_ids().panel("left"),
cls=Contains("mf-panel-left")
)
@@ -252,7 +253,7 @@ class TestPanelRender:
- cls Contains "mf-hidden": CSS class required for width animation
"""
panel._state.left_visible = False
left_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_left"))
left_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("left")))
expected = Div(cls=Contains("mf-hidden"))
@@ -268,7 +269,7 @@ class TestPanelRender:
rendered = panel.render()
# Verify left panel is not present
left_panels = find(rendered, Div(id=f"{panel._id}_panel_left"))
left_panels = find(rendered, Div(id=panel.get_ids().panel("left")))
assert len(left_panels) == 0, "Left panel should not be present when conf.left=False"
# 3. Right panel
@@ -277,17 +278,18 @@ class TestPanelRender:
"""Test that right panel has resizer before content div.
Why these elements matter:
- Order (resizer then content): Critical for positioning resizer on the left side
- Order (resizer then hide icon then content): Critical for positioning resizer on the left side
- id: Required for HTMX targeting during toggle/resize operations
- cls Contains "mf-panel-right": CSS class for right panel styling
"""
right_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_right"))
right_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("right")))
# Step 1: Validate right panel global structure
expected = Div(
Div(cls=Contains("mf-resizer-right")), # resizer
Div(id=f"{panel._id}_content_right"), # content div, tested in detail later
id=f"{panel._id}_panel_right",
TestIcon("subtract20_regular"), # hide icon
Div(id=panel.get_ids().right), # content div, tested in detail later
id=panel.get_ids().panel("right"),
cls=Contains("mf-panel-right")
)
@@ -300,7 +302,7 @@ class TestPanelRender:
- cls Contains "mf-hidden": CSS class required for width animation
"""
panel._state.right_visible = False
right_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_right"))
right_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("right")))
expected = Div(cls=Contains("mf-hidden"))
@@ -316,7 +318,7 @@ class TestPanelRender:
rendered = panel.render()
# Verify right panel is not present
right_panels = find(rendered, Div(id=f"{panel._id}_panel_right"))
right_panels = find(rendered, Div(id=panel.get_ids().panel("right")))
assert len(right_panels) == 0, "Right panel should not be present when conf.right=False"
# 4. Resizers
@@ -330,7 +332,7 @@ class TestPanelRender:
- cls Contains "mf-resizer": Base CSS class for resizer styling
- cls Contains "mf-resizer-left": Left-specific CSS class for positioning
"""
left_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_left"))
left_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("left")))
resizer = find_one(left_panel, Div(cls=Contains("mf-resizer-left")))
expected = Div(
@@ -351,7 +353,7 @@ class TestPanelRender:
- cls Contains "mf-resizer": Base CSS class for resizer styling
- cls Contains "mf-resizer-right": Right-specific CSS class for positioning
"""
right_panel = find_one(panel.render(), Div(id=f"{panel._id}_panel_right"))
right_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("right")))
resizer = find_one(right_panel, Div(cls=Contains("mf-resizer-right")))
expected = Div(
@@ -372,10 +374,10 @@ class TestPanelRender:
- TestIconNotStr("subtract20_regular"): Verify correct icon is used for hiding
- cls Contains "mf-panel-hide-icon": CSS class for hide icon positioning
"""
left_content = find_one(panel.render(), Div(id=f"{panel._id}_content_left"))
left_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("left")))
# Find the hide icon (should be wrapped by mk.icon)
hide_icons = find(left_content, Div(cls=Contains("mf-panel-hide-icon")))
hide_icons = find(left_panel, Div(cls=Contains("mf-panel-hide-icon")))
assert len(hide_icons) == 1, "Left panel should contain exactly one hide icon"
# Verify it contains the subtract icon
@@ -392,10 +394,10 @@ class TestPanelRender:
- TestIconNotStr("subtract20_regular"): Verify correct icon is used for hiding
- cls Contains "mf-panel-hide-icon": CSS class for hide icon positioning
"""
right_content = find_one(panel.render(), Div(id=f"{panel._id}_content_right"))
right_panel = find_one(panel.render(), Div(id=panel.get_ids().panel("right")))
# Find the hide icon (should be wrapped by mk.icon)
hide_icons = find(right_content, Div(cls=Contains("mf-panel-hide-icon")))
hide_icons = find(right_panel, Div(cls=Contains("mf-panel-hide-icon")))
assert len(hide_icons) == 1, "Right panel should contain exactly one hide icon"
# Verify it contains the subtract icon
@@ -412,8 +414,7 @@ class TestPanelRender:
- cls Contains "hidden": Tailwind class to hide icon when panel is visible
- id: Required for HTMX swap-oob targeting
"""
main_panel = find_one(panel.render(), Div(cls=Contains("mf-panel-main")))
show_icon = find_one(main_panel, Div(id=f"{panel._id}_show_left"))
show_icon = find_one(panel.render(), Div(id=f"{panel._id}_show_left"))
expected = Div(
cls=Contains("hidden"),
@@ -430,8 +431,7 @@ class TestPanelRender:
- TestIconNotStr("more_horizontal20_regular"): Verify correct icon is used for showing
"""
panel._state.left_visible = False
main_panel = find_one(panel.render(), Div(cls=Contains("mf-panel-main")))
show_icon = find_one(main_panel, Div(id=f"{panel._id}_show_left"))
show_icon = find_one(panel.render(), Div(id=f"{panel._id}_show_left"))
expected = Div(
TestIconNotStr("more_horizontal20_regular"),
@@ -449,8 +449,7 @@ class TestPanelRender:
- TestIconNotStr("more_horizontal20_regular"): Verify correct icon is used for showing
"""
panel._state.right_visible = False
main_panel = find_one(panel.render(), Div(cls=Contains("mf-panel-main")))
show_icon = find_one(main_panel, Div(id=f"{panel._id}_show_right"))
show_icon = find_one(panel.render(), Div(id=f"{panel._id}_show_right"))
expected = Div(
TestIconNotStr("more_horizontal20_regular"),
@@ -466,16 +465,22 @@ class TestPanelRender:
"""Test that main panel contains show icons and content in correct order.
Why these elements matter:
- 3 children: show_icon_left + content + show_icon_right
- 3 children: show_icon_left + inner main div + show_icon_right
- Order: Show icons must be positioned correctly (left then right)
- cls="mf-panel-main": CSS class for main panel styling
- Inner div with id: Main content wrapper for HTMX targeting
"""
main_panel = find_one(panel.render(), Div(cls=Contains("mf-panel-main")))
# Find all Divs with cls="mf-panel-main" (there are 2: outer wrapper and inner content)
main_panels = find(panel.render(), Div(cls=Contains("mf-panel-main")))
assert len(main_panels) == 2, "Should find outer wrapper and inner content div"
# The outer wrapper is the first one (depth-first search)
main_panel = main_panels[0]
# Step 1: Validate main panel structure
expected = Div(
Div(id=f"{panel._id}_show_left"), # show icon left
Div("Main content"), # actual content
Div(id=panel.get_ids().main), # inner main content wrapper
Div(id=f"{panel._id}_show_right"), # show icon right
cls="mf-panel-main"
)