Added Controls testing + documentation
This commit is contained in:
@@ -6,7 +6,8 @@ from fasthtml.components import *
|
||||
|
||||
from myfasthtml.controls.Keyboard import Keyboard
|
||||
from myfasthtml.controls.TreeView import TreeView, TreeNode
|
||||
from myfasthtml.test.matcher import matches, TestObject, TestCommand
|
||||
from myfasthtml.test.matcher import matches, TestObject, TestCommand, TestIcon, find_one, find, Contains, \
|
||||
DoesNotContain
|
||||
from .conftest import root_instance
|
||||
|
||||
|
||||
@@ -376,14 +377,37 @@ class TestTreeviewBehaviour:
|
||||
# Try to add sibling to node that doesn't exist
|
||||
with pytest.raises(ValueError, match="Node.*does not exist"):
|
||||
tree_view._add_sibling("nonexistent_id")
|
||||
|
||||
def test_i_can_initialize_with_items_dict(self, root_instance):
|
||||
"""Test that TreeView can be initialized with a dictionary of items."""
|
||||
node1 = TreeNode(label="Node 1", type="folder")
|
||||
node2 = TreeNode(label="Node 2", type="file")
|
||||
|
||||
items = {node1.id: node1, node2.id: node2}
|
||||
tree_view = TreeView(root_instance, items=items)
|
||||
|
||||
assert len(tree_view._state.items) == 2
|
||||
assert tree_view._state.items[node1.id].label == "Node 1"
|
||||
assert tree_view._state.items[node1.id].type == "folder"
|
||||
assert tree_view._state.items[node2.id].label == "Node 2"
|
||||
assert tree_view._state.items[node2.id].type == "file"
|
||||
|
||||
|
||||
class TestTreeViewRender:
|
||||
"""Tests for TreeView HTML rendering."""
|
||||
|
||||
def test_i_can_render_empty_treeview(self, root_instance):
|
||||
"""Test that TreeView generates correct HTML structure."""
|
||||
tree_view = TreeView(root_instance)
|
||||
@pytest.fixture
|
||||
def tree_view(self, root_instance):
|
||||
return TreeView(root_instance)
|
||||
|
||||
def test_empty_treeview_is_rendered(self, tree_view):
|
||||
"""Test that empty TreeView generates correct HTML structure.
|
||||
|
||||
Why these elements matter:
|
||||
- TestObject Keyboard: Essential for keyboard shortcuts (Escape to cancel rename)
|
||||
- _id: Required for HTMX targeting and component identification
|
||||
- cls "mf-treeview": Root CSS class for TreeView styling
|
||||
"""
|
||||
expected = Div(
|
||||
TestObject(Keyboard, combinations={"esc": TestCommand("CancelRename")}),
|
||||
_id=tree_view.get_id(),
|
||||
@@ -392,7 +416,445 @@ class TestTreeViewRender:
|
||||
|
||||
assert matches(tree_view.__ft__(), expected)
|
||||
|
||||
def test_node_action_buttons_are_rendered(self):
|
||||
"""Test that action buttons are present in rendered HTML."""
|
||||
# Signature only - implementation later
|
||||
pass
|
||||
def test_node_with_children_collapsed_is_rendered(self, tree_view):
|
||||
"""Test that a collapsed node with children renders correctly.
|
||||
|
||||
Why these elements matter:
|
||||
- TestIcon chevron_right: Indicates visually that the node is collapsed
|
||||
- Span with label: Displays the node's text content
|
||||
- Action buttons (add_child, edit, delete): Enable user interactions
|
||||
- cls "mf-treenode": Required CSS class for node styling
|
||||
- data_node_id: Essential for identifying the node in DOM operations
|
||||
- No children in container: Verifies children are hidden when collapsed
|
||||
"""
|
||||
parent = TreeNode(label="Parent", type="folder")
|
||||
child = TreeNode(label="Child", type="file")
|
||||
|
||||
tree_view.add_node(parent)
|
||||
tree_view.add_node(child, parent_id=parent.id)
|
||||
|
||||
# Step 1: Extract the node element to test
|
||||
rendered = tree_view.render()
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(
|
||||
TestIcon("chevron_right20_regular"), # Collapsed toggle icon
|
||||
Span("Parent"), # Label
|
||||
Div( # Action buttons
|
||||
TestIcon("add_circle20_regular"),
|
||||
TestIcon("edit20_regular"),
|
||||
TestIcon("delete20_regular"),
|
||||
cls=Contains("mf-treenode-actions")
|
||||
),
|
||||
cls=Contains("mf-treenode"),
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=parent.id
|
||||
),
|
||||
id=tree_view.get_id()
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(rendered, expected)
|
||||
|
||||
# Verify no children are rendered (collapsed)
|
||||
child_containers = find(rendered, Div(data_node_id=parent.id))
|
||||
assert len(child_containers) == 1, "Children should not be rendered when node is collapsed"
|
||||
|
||||
def test_node_with_children_expanded_is_rendered(self, tree_view):
|
||||
"""Test that an expanded node with children renders correctly.
|
||||
|
||||
Why these elements matter:
|
||||
- TestIcon chevron_down: Indicates visually that the node is expanded
|
||||
- Children rendered: Verifies that child nodes are visible when parent is expanded
|
||||
- Child has its own node structure: Ensures recursive rendering works correctly
|
||||
|
||||
Rendered Structure :
|
||||
Div (node_container with data_node_id)
|
||||
├─ Div (information on current node - icon, label, actions)
|
||||
└─ Div* (children - recursive containers, only if expanded)
|
||||
"""
|
||||
parent = TreeNode(label="Parent", type="folder")
|
||||
child1 = TreeNode(label="Child1", type="file")
|
||||
child2 = TreeNode(label="Child2", type="file")
|
||||
|
||||
tree_view.add_node(parent)
|
||||
tree_view.add_node(child1, parent_id=parent.id)
|
||||
tree_view.add_node(child2, parent_id=parent.id)
|
||||
tree_view._toggle_node(parent.id) # Expand the parent
|
||||
|
||||
# Step 1: Extract the parent node element to test
|
||||
rendered = tree_view.render()
|
||||
parent_container = find_one(rendered, Div(data_node_id=parent.id))
|
||||
|
||||
expected = Div(
|
||||
Div(), # parent info (see test_node_with_children_collapsed_is_rendered)
|
||||
Div(data_node_id=child1.id),
|
||||
Div(data_node_id=child2.id),
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(parent_container, expected)
|
||||
|
||||
# now check the child node structure
|
||||
child_container = find_one(rendered, Div(data_node_id=child1.id))
|
||||
expected_child_container = Div(
|
||||
Div(
|
||||
Div(None), # No icon, the div is empty
|
||||
Span("Child1"),
|
||||
Div(), # action buttons
|
||||
cls=Contains("mf-treenode")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=child1.id,
|
||||
)
|
||||
assert matches(child_container, expected_child_container)
|
||||
|
||||
def test_leaf_node_is_rendered(self, tree_view):
|
||||
"""Test that a leaf node (no children) renders without toggle icon.
|
||||
|
||||
Why these elements matter:
|
||||
- No toggle icon (or empty space): Leaf nodes don't need expand/collapse functionality
|
||||
- Span with label: Displays the node's text content
|
||||
- Action buttons present: Even leaf nodes can be edited, deleted, or receive children
|
||||
"""
|
||||
leaf = TreeNode(label="Leaf Node", type="file")
|
||||
tree_view.add_node(leaf)
|
||||
|
||||
# Step 1: Extract the leaf node element to test
|
||||
rendered = tree_view.render()
|
||||
leaf_container = find_one(rendered, Div(data_node_id=leaf.id))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(None), # No icon, the div is empty
|
||||
Span("Leaf Node"), # Label
|
||||
Div(), # Action buttons still present
|
||||
),
|
||||
cls=Contains("mf-treenode"),
|
||||
data_node_id=leaf.id
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(leaf_container, expected)
|
||||
|
||||
def test_selected_node_has_selected_class(self, tree_view):
|
||||
"""Test that a selected node has the 'selected' CSS class.
|
||||
|
||||
Why these elements matter:
|
||||
- cls Contains "selected": Enables visual highlighting of the selected node
|
||||
- Div with mf-treenode: The node information container with selected class
|
||||
- data_node_id: Required for identifying which node is selected
|
||||
"""
|
||||
node = TreeNode(label="Selected Node", type="file")
|
||||
tree_view.add_node(node)
|
||||
tree_view._select_node(node.id)
|
||||
|
||||
rendered = tree_view.render()
|
||||
selected_container = find_one(rendered, Div(data_node_id=node.id))
|
||||
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(None), # No icon, leaf node
|
||||
Span("Selected Node"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode", "selected")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=node.id
|
||||
)
|
||||
|
||||
assert matches(selected_container, expected)
|
||||
|
||||
def test_node_in_editing_mode_shows_input(self, tree_view):
|
||||
"""Test that a node in editing mode renders an Input instead of Span.
|
||||
|
||||
Why these elements matter:
|
||||
- Input element: Enables user to modify the node label inline
|
||||
- cls "mf-treenode-input": Required CSS class for input field styling
|
||||
- name "node_label": Essential for form data submission
|
||||
- value with current label: Pre-fills the input with existing text
|
||||
- cls does NOT contain "selected": Avoids double highlighting during editing
|
||||
"""
|
||||
node = TreeNode(label="Edit Me", type="file")
|
||||
tree_view.add_node(node)
|
||||
tree_view._start_rename(node.id)
|
||||
|
||||
rendered = tree_view.render()
|
||||
editing_container = find_one(rendered, Div(data_node_id=node.id))
|
||||
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(None), # No icon, leaf node
|
||||
Input(
|
||||
name="node_label",
|
||||
value="Edit Me",
|
||||
cls=Contains("mf-treenode-input")
|
||||
),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=node.id
|
||||
)
|
||||
|
||||
assert matches(editing_container, expected)
|
||||
|
||||
# Verify "selected" class is NOT present
|
||||
editing_node_info = find_one(editing_container, Div(cls=Contains("mf-treenode", _word=True)))
|
||||
no_selected = Div(
|
||||
cls=DoesNotContain("selected")
|
||||
)
|
||||
assert matches(editing_node_info, no_selected)
|
||||
|
||||
def test_node_indentation_increases_with_level(self, tree_view):
|
||||
"""Test that node indentation increases correctly with hierarchy level.
|
||||
|
||||
Why these elements matter:
|
||||
- style Contains "padding-left: 0px": Root node has no indentation
|
||||
- style Contains "padding-left: 20px": Child is indented by 20px
|
||||
- style Contains "padding-left: 40px": Grandchild is indented by 40px
|
||||
- Progressive padding: Creates the visual hierarchy of the tree structure
|
||||
- Padding is applied to the node info Div, not the container
|
||||
"""
|
||||
root = TreeNode(label="Root", type="folder")
|
||||
child = TreeNode(label="Child", type="folder")
|
||||
grandchild = TreeNode(label="Grandchild", type="file")
|
||||
|
||||
tree_view.add_node(root)
|
||||
tree_view.add_node(child, parent_id=root.id)
|
||||
tree_view.add_node(grandchild, parent_id=child.id)
|
||||
|
||||
# Expand all to make hierarchy visible
|
||||
tree_view._toggle_node(root.id)
|
||||
tree_view._toggle_node(child.id)
|
||||
|
||||
rendered = tree_view.render()
|
||||
|
||||
# Test root node (level 0)
|
||||
root_container = find_one(rendered, Div(data_node_id=root.id))
|
||||
root_expected = Div(
|
||||
Div(
|
||||
TestIcon("chevron_down20_regular"), # Expanded icon
|
||||
Span("Root"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode"),
|
||||
style=Contains("padding-left: 0px")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=root.id
|
||||
)
|
||||
assert matches(root_container, root_expected)
|
||||
|
||||
# Test child node (level 1)
|
||||
child_container = find_one(rendered, Div(data_node_id=child.id))
|
||||
child_expected = Div(
|
||||
Div(
|
||||
TestIcon("chevron_down20_regular"), # Expanded icon
|
||||
Span("Child"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode"),
|
||||
style=Contains("padding-left: 20px")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=child.id
|
||||
)
|
||||
assert matches(child_container, child_expected)
|
||||
|
||||
# Test grandchild node (level 2)
|
||||
grandchild_container = find_one(rendered, Div(data_node_id=grandchild.id))
|
||||
grandchild_expected = Div(
|
||||
Div(
|
||||
Div(None), # No icon, leaf node
|
||||
Span("Grandchild"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode"),
|
||||
style=Contains("padding-left: 40px")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=grandchild.id
|
||||
)
|
||||
assert matches(grandchild_container, grandchild_expected)
|
||||
|
||||
@pytest.mark.skip(reason="Not possible to validate if the command unicity is not fixed")
|
||||
def test_toggle_icon_has_correct_command(self, tree_view):
|
||||
"""Test that toggle icon has ToggleNode command.
|
||||
|
||||
Why these elements matter:
|
||||
- Div wrapper with command: mk.icon() wraps SVG in Div with HTMX attributes
|
||||
- TestIcon inside Div: Verifies correct chevron icon is displayed
|
||||
- TestCommand "ToggleNode": Essential for HTMX to route to correct handler
|
||||
- Command targets correct node_id: Ensures the right node is toggled
|
||||
"""
|
||||
parent = TreeNode(label="Parent", type="folder")
|
||||
child = TreeNode(label="Child", type="file")
|
||||
|
||||
tree_view.add_node(parent)
|
||||
tree_view.add_node(child, parent_id=parent.id)
|
||||
|
||||
# Step 1: Extract the parent node element
|
||||
rendered = tree_view.render()
|
||||
parent_node = find_one(rendered, Div(data_node_id=parent.id))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Div(
|
||||
Div(
|
||||
TestIcon("chevron_right20_regular", command=tree_view.commands.toggle_node(parent.id)),
|
||||
),
|
||||
data_node_id=parent.id
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(parent_node, expected)
|
||||
|
||||
@pytest.mark.skip(reason="Not possible to validate if the command unicity is not fixed")
|
||||
def test_action_buttons_have_correct_commands(self, tree_view):
|
||||
"""Test that action buttons have correct commands.
|
||||
|
||||
Why these elements matter:
|
||||
- add_circle icon with AddChild: Enables adding child nodes via HTMX
|
||||
- edit icon with StartRename: Triggers inline editing mode
|
||||
- delete icon with DeleteNode: Enables node deletion
|
||||
- cls "mf-treenode-actions": Required CSS class for button container styling
|
||||
"""
|
||||
node = TreeNode(label="Node", type="folder")
|
||||
tree_view.add_node(node)
|
||||
|
||||
# Step 1: Extract the action buttons container
|
||||
rendered = tree_view.render()
|
||||
actions = find_one(rendered, Div(cls=Contains("mf-treenode-actions")))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Div(
|
||||
TestIcon("add_circle20_regular", command=tree_view.commands.add_child(node.id)),
|
||||
TestIcon("edit20_regular", command=tree_view.commands.start_rename(node.id)),
|
||||
TestIcon("delete20_regular", command=tree_view.commands.delete_node(node.id)),
|
||||
cls=Contains("mf-treenode-actions")
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(actions, expected)
|
||||
|
||||
@pytest.mark.skip(reason="Not possible to validate if the command unicity is not fixed")
|
||||
def test_label_has_select_command(self, tree_view):
|
||||
"""Test that node label has SelectNode command.
|
||||
|
||||
Why these elements matter:
|
||||
- Span with node label: Displays the node text
|
||||
- TestCommand "SelectNode": Clicking label selects the node via HTMX
|
||||
- cls "mf-treenode-label": Required CSS class for label styling
|
||||
"""
|
||||
node = TreeNode(label="Clickable Node", type="file")
|
||||
tree_view.add_node(node)
|
||||
|
||||
# Step 1: Extract the label element
|
||||
rendered = tree_view.render()
|
||||
label = find_one(rendered, Span(cls=Contains("mf-treenode-label")))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Span(
|
||||
"Clickable Node",
|
||||
command=tree_view.commands.select_node(node.id),
|
||||
cls=Contains("mf-treenode-label")
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(label, expected)
|
||||
|
||||
@pytest.mark.skip(reason="Not possible to validate if the command unicity is not fixed")
|
||||
def test_input_has_save_rename_command(self, tree_view):
|
||||
"""Test that editing input has SaveRename command.
|
||||
|
||||
Why these elements matter:
|
||||
- Input element: Enables inline editing of node label
|
||||
- TestCommand "SaveRename": Submits new label via HTMX on form submission
|
||||
- name "node_label": Required for form data to include the new label value
|
||||
- value with current label: Pre-fills input with existing node text
|
||||
"""
|
||||
node = TreeNode(label="Edit Me", type="file")
|
||||
tree_view.add_node(node)
|
||||
tree_view._start_rename(node.id)
|
||||
|
||||
# Step 1: Extract the input element
|
||||
rendered = tree_view.render()
|
||||
input_elem = find_one(rendered, Input(name="node_label"))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = Input(
|
||||
name="node_label",
|
||||
value="Edit Me",
|
||||
command=TestCommand(tree_view.commands.save_rename(node.id)),
|
||||
cls=Contains("mf-treenode-input")
|
||||
)
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(input_elem, expected)
|
||||
|
||||
def test_keyboard_has_cancel_rename_command(self, tree_view):
|
||||
"""Test that Keyboard component has Escape key bound to CancelRename.
|
||||
|
||||
Why these elements matter:
|
||||
- TestObject Keyboard: Verifies keyboard shortcuts component is present
|
||||
- esc combination with CancelRename: Enables canceling rename with Escape key
|
||||
- Essential for UX: Users expect Escape to cancel inline editing
|
||||
"""
|
||||
# Step 1: Extract the Keyboard component
|
||||
rendered = tree_view.render()
|
||||
keyboard = find_one(rendered, TestObject(Keyboard))
|
||||
|
||||
# Step 2: Define expected structure
|
||||
expected = TestObject(Keyboard, combinations={"esc": TestCommand("CancelRename")})
|
||||
|
||||
# Step 3: Compare
|
||||
assert matches(keyboard, expected)
|
||||
|
||||
|
||||
def test_multiple_root_nodes_are_rendered(self, tree_view):
|
||||
"""Test that multiple root nodes are rendered at the same level.
|
||||
|
||||
Why these elements matter:
|
||||
- Multiple root nodes: Verifies TreeView supports forest structure (multiple trees)
|
||||
- All at same level: No artificial parent wrapping root nodes
|
||||
- Each root has its own container: Proper structure for multiple independent trees
|
||||
"""
|
||||
root1 = TreeNode(label="Root 1", type="folder")
|
||||
root2 = TreeNode(label="Root 2", type="folder")
|
||||
|
||||
tree_view.add_node(root1)
|
||||
tree_view.add_node(root2)
|
||||
|
||||
rendered = tree_view.render()
|
||||
root_containers = find(rendered, Div(cls=Contains("mf-treenode-container")))
|
||||
|
||||
assert len(root_containers) == 2, "Should have two root-level containers"
|
||||
|
||||
root1_container = find_one(rendered, Div(data_node_id=root1.id))
|
||||
root2_container = find_one(rendered, Div(data_node_id=root2.id))
|
||||
|
||||
expected_root1 = Div(
|
||||
Div(
|
||||
Div(None), # No icon, leaf node
|
||||
Span("Root 1"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=root1.id
|
||||
)
|
||||
|
||||
expected_root2 = Div(
|
||||
Div(
|
||||
Div(None), # No icon, leaf node
|
||||
Span("Root 2"),
|
||||
Div(), # Action buttons
|
||||
cls=Contains("mf-treenode")
|
||||
),
|
||||
cls="mf-treenode-container",
|
||||
data_node_id=root2.id
|
||||
)
|
||||
|
||||
assert matches(root1_container, expected_root1)
|
||||
assert matches(root2_container, expected_root2)
|
||||
|
||||
Reference in New Issue
Block a user