TabsManager.py Added unit tests + documentation
This commit is contained in:
@@ -201,190 +201,283 @@ class TestControlRender:
|
||||
|
||||
### UTR-11: Required Reading for Control Render Tests
|
||||
|
||||
**Before writing ANY render tests for Controls, you MUST:**
|
||||
---
|
||||
|
||||
1. **Read the matcher documentation**: `docs/testing_rendered_components.md`
|
||||
2. **Understand the key concepts**:
|
||||
- How `matches()` and `find()` work
|
||||
- When to use predicates (Contains, StartsWith, AnyValue, etc.)
|
||||
- How to test only what matters (not every detail)
|
||||
- How to read error messages with `^^^` markers
|
||||
3. **Apply the best practices** detailed below
|
||||
#### **UTR-11.0: Read the matcher documentation (MANDATORY PREREQUISITE)**
|
||||
|
||||
**Principle:** Before writing any render tests, you MUST read and understand the complete matcher documentation.
|
||||
|
||||
**Mandatory reading:** `docs/testing_rendered_components.md`
|
||||
|
||||
**What you must master:**
|
||||
- **`matches(actual, expected)`** - How to validate that an element matches your expectations
|
||||
- **`find(ft, expected)`** - How to search for elements within an HTML tree
|
||||
- **Predicates** - How to test patterns instead of exact values:
|
||||
- `Contains()`, `StartsWith()`, `DoesNotContain()`, `AnyValue()` for attributes
|
||||
- `Empty()`, `NoChildren()`, `AttributeForbidden()` for children
|
||||
- **Error messages** - How to read `^^^` markers to understand differences
|
||||
- **Key principle** - Test only what matters, ignore the rest
|
||||
|
||||
**Without this reading, you cannot write correct render tests.**
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.1 : Pattern de test en trois étapes (RÈGLE FONDAMENTALE)**
|
||||
### **TEST FILE STRUCTURE**
|
||||
|
||||
**Principe :** C'est le pattern par défaut à appliquer pour tous les tests de rendu. Les autres règles sont des compléments à ce pattern.
|
||||
---
|
||||
|
||||
**Les trois étapes :**
|
||||
1. **Extraire l'élément à tester** avec `find_one()` ou `find()` à partir du rendu global
|
||||
2. **Définir la structure attendue** avec `expected = ...`
|
||||
3. **Comparer** avec `assert matches(element, expected)`
|
||||
#### **UTR-11.1: Always start with a global structure test (FUNDAMENTAL RULE)**
|
||||
|
||||
**Pourquoi :** Ce pattern permet des messages d'erreur clairs et sépare la recherche de l'élément de la validation de sa structure.
|
||||
**Principle:** The **first render test** must ALWAYS verify the global HTML structure of the component. This is the test that helps readers understand the general architecture.
|
||||
|
||||
**Exemple :**
|
||||
**Why:**
|
||||
- Gives immediate overview of the structure
|
||||
- Facilitates understanding for new contributors
|
||||
- Quickly detects major structural changes
|
||||
- Serves as living documentation of HTML architecture
|
||||
|
||||
**Test format:**
|
||||
```python
|
||||
def test_i_can_render_component_with_no_data(self, component):
|
||||
"""Test that Component renders with correct global structure."""
|
||||
html = component.render()
|
||||
expected = Div(
|
||||
Div(id=f"{component.get_id()}-controller"), # controller
|
||||
Div(id=f"{component.get_id()}-header"), # header
|
||||
Div(id=f"{component.get_id()}-content"), # content
|
||||
id=component.get_id(),
|
||||
)
|
||||
assert matches(html, expected)
|
||||
```
|
||||
|
||||
**Notes:**
|
||||
- Simple test with only IDs of main sections
|
||||
- Inline comments to identify each section
|
||||
- No detailed verification of attributes (classes, content, etc.)
|
||||
- This test must be the first in the `TestComponentRender` class
|
||||
|
||||
**Test order:**
|
||||
1. **First test:** Global structure (UTR-11.1)
|
||||
2. **Following tests:** Details of each section (UTR-11.2 to UTR-11.10)
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.2: Break down complex tests into explicit steps**
|
||||
|
||||
**Principle:** When a test verifies multiple levels of HTML nesting, break it down into numbered steps with explicit comments.
|
||||
|
||||
**Why:**
|
||||
- Facilitates debugging (you know exactly which step fails)
|
||||
- Improves test readability
|
||||
- Allows validating structure level by level
|
||||
|
||||
**Example:**
|
||||
```python
|
||||
def test_content_wrapper_when_tab_active(self, tabs_manager):
|
||||
"""Test that content wrapper shows active tab content."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("My Content"))
|
||||
wrapper = tabs_manager._mk_tab_content_wrapper()
|
||||
|
||||
# Step 1: Validate wrapper global structure
|
||||
expected = Div(
|
||||
Div(), # tab content, tested in step 2
|
||||
id=f"{tabs_manager.get_id()}-content-wrapper",
|
||||
cls=Contains("mf-tab-content-wrapper"),
|
||||
)
|
||||
assert matches(wrapper, expected)
|
||||
|
||||
# Step 2: Extract and validate specific content
|
||||
tab_content = find_one(wrapper, Div(id=f"{tabs_manager.get_id()}-{tab_id}-content"))
|
||||
expected = Div(
|
||||
Div("My Content"), # <= actual content
|
||||
cls=Contains("mf-tab-content"),
|
||||
)
|
||||
assert matches(tab_content, expected)
|
||||
```
|
||||
|
||||
**Pattern:**
|
||||
- Step 1: Global structure with empty `Div()` + comment for children tested after
|
||||
- Step 2+: Extraction with `find_one()` + detailed validation
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.3: Three-step pattern for simple tests**
|
||||
|
||||
**Principle:** For tests not requiring multi-level decomposition, use the standard three-step pattern.
|
||||
|
||||
**The three steps:**
|
||||
1. **Extract the element to test** with `find_one()` or `find()` from the global render
|
||||
2. **Define the expected structure** with `expected = ...`
|
||||
3. **Compare** with `assert matches(element, expected)`
|
||||
|
||||
**Example:**
|
||||
```python
|
||||
# ✅ BON - Pattern en trois étapes
|
||||
def test_header_has_two_sides(self, layout):
|
||||
"""Test that there is a left and right header section."""
|
||||
# Étape 1 : Extraire l'élément à tester
|
||||
# Step 1: Extract the element to test
|
||||
header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
|
||||
|
||||
# Étape 2 : Définir la structure attendue
|
||||
# Step 2: Define the expected structure
|
||||
expected = Header(
|
||||
Div(id=f"{layout._id}_hl"),
|
||||
Div(id=f"{layout._id}_hr"),
|
||||
)
|
||||
|
||||
# Étape 3 : Comparer
|
||||
# Step 3: Compare
|
||||
assert matches(header, expected)
|
||||
|
||||
# ❌ À ÉVITER - Tout imbriqué en une ligne
|
||||
def test_header_has_two_sides(self, layout):
|
||||
assert matches(
|
||||
find_one(layout.render(), Header(cls=Contains("mf-layout-header"))),
|
||||
Header(Div(id=f"{layout._id}_hl"), Div(id=f"{layout._id}_hr"))
|
||||
)
|
||||
```
|
||||
|
||||
**Note :** Cette règle s'applique à presque tous les tests. Les autres règles ci-dessous complètent ce pattern fondamental.
|
||||
---
|
||||
|
||||
### **HOW TO SEARCH FOR ELEMENTS**
|
||||
|
||||
---
|
||||
|
||||
#### **COMMENT CHERCHER LES ÉLÉMENTS**
|
||||
#### **UTR-11.4: Prefer searching by ID**
|
||||
|
||||
---
|
||||
**Principle:** Always search for an element by its `id` when it has one, rather than by class or other attribute.
|
||||
|
||||
#### **UTR-11.2 : Privilégier la recherche par ID**
|
||||
**Why:** More robust, faster, and targeted (an ID is unique).
|
||||
|
||||
**Principe :** Toujours chercher un élément par son `id` quand il en a un, plutôt que par classe ou autre attribut.
|
||||
|
||||
**Pourquoi :** Plus robuste, plus rapide, et ciblé (un ID est unique).
|
||||
|
||||
**Exemple :**
|
||||
**Example:**
|
||||
```python
|
||||
# ✅ BON - recherche par ID
|
||||
# ✅ GOOD - search by ID
|
||||
drawer = find_one(layout.render(), Div(id=f"{layout._id}_ld"))
|
||||
|
||||
# ❌ À ÉVITER - recherche par classe quand un ID existe
|
||||
# ❌ AVOID - search by class when an ID exists
|
||||
drawer = find_one(layout.render(), Div(cls=Contains("mf-layout-left-drawer")))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.3 : Utiliser `find_one()` vs `find()` selon le contexte**
|
||||
#### **UTR-11.5: Use `find_one()` vs `find()` based on context**
|
||||
|
||||
**Principe :**
|
||||
- `find_one()` : Quand vous cherchez un élément unique et voulez tester sa structure complète
|
||||
- `find()` : Quand vous cherchez plusieurs éléments ou voulez compter/vérifier leur présence
|
||||
**Principle:**
|
||||
- `find_one()`: When you search for a unique element and want to test its complete structure
|
||||
- `find()`: When you search for multiple elements or want to count/verify their presence
|
||||
|
||||
**Exemples :**
|
||||
**Examples:**
|
||||
```python
|
||||
# ✅ BON - find_one pour structure unique
|
||||
# ✅ GOOD - find_one for unique structure
|
||||
header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
|
||||
expected = Header(...)
|
||||
assert matches(header, expected)
|
||||
|
||||
# ✅ BON - find pour compter
|
||||
# ✅ GOOD - find for counting
|
||||
resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
|
||||
assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### **COMMENT SPÉCIFIER LA STRUCTURE ATTENDUE**
|
||||
### **HOW TO SPECIFY EXPECTED STRUCTURE**
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.4 : Toujours utiliser `Contains()` pour les attributs `cls` et `style`**
|
||||
#### **UTR-11.6: Always use `Contains()` for `cls` and `style` attributes**
|
||||
|
||||
**Principe :**
|
||||
- Pour `cls` : Les classes CSS peuvent être dans n'importe quel ordre. Testez uniquement les classes importantes avec `Contains()`.
|
||||
- Pour `style` : Les propriétés CSS peuvent être dans n'importe quel ordre. Testez uniquement les propriétés importantes avec `Contains()`.
|
||||
**Principle:**
|
||||
- For `cls`: CSS classes can be in any order. Test only important classes with `Contains()`.
|
||||
- For `style`: CSS properties can be in any order. Test only important properties with `Contains()`.
|
||||
|
||||
**Pourquoi :** Évite les faux négatifs dus à l'ordre des classes/propriétés ou aux espaces.
|
||||
**Why:** Avoids false negatives due to class/property order or spacing.
|
||||
|
||||
**Exemples :**
|
||||
**Examples:**
|
||||
```python
|
||||
# ✅ BON - Contains pour cls (une ou plusieurs classes)
|
||||
# ✅ GOOD - Contains for cls (one or more classes)
|
||||
expected = Div(cls=Contains("mf-layout-drawer"))
|
||||
expected = Div(cls=Contains("mf-layout-drawer", "mf-layout-left-drawer"))
|
||||
|
||||
# ✅ BON - Contains pour style
|
||||
# ✅ GOOD - Contains for style
|
||||
expected = Div(style=Contains("width: 250px"))
|
||||
|
||||
# ❌ À ÉVITER - test exact des classes
|
||||
# ❌ AVOID - exact class test
|
||||
expected = Div(cls="mf-layout-drawer mf-layout-left-drawer")
|
||||
|
||||
# ❌ À ÉVITER - test exact du style complet
|
||||
# ❌ AVOID - exact complete style test
|
||||
expected = Div(style="width: 250px; overflow: hidden; display: flex;")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.5 : Utiliser `TestIcon()` pour tester la présence d'une icône**
|
||||
#### **UTR-11.7: Use `TestIcon()` or `TestIconNotStr()` to test icon presence**
|
||||
|
||||
**Principe :** Utilisez `TestIcon("icon_name")` pour tester la présence d'une icône SVG dans le rendu.
|
||||
**Principle:** Use `TestIcon()` or `TestIconNotStr()` depending on how the icon is integrated in the code.
|
||||
|
||||
**Le paramètre `name` :**
|
||||
- **Nom exact** : Utilisez le nom exact de l'import (ex: `TestIcon("panel_right_expand20_regular")`) pour valider une icône spécifique
|
||||
- **`name=""`** (chaîne vide) : Valide **n'importe quelle icône**. Le test sera passant dès que la structure affichant une icône sera trouvée, peu importe laquelle.
|
||||
- **JAMAIS `name="svg"`** : Cela causera des échecs de test
|
||||
**Difference between the two:**
|
||||
- **`TestIcon("icon_name")`**: Searches for the pattern `<div><NotStr .../></div>` (icon wrapped in a Div)
|
||||
- **`TestIconNotStr("icon_name")`**: Searches only for `<NotStr .../>` (icon alone, without wrapper)
|
||||
|
||||
**How to choose:**
|
||||
1. **Read the source code** to see how the icon is rendered
|
||||
2. If `mk.icon()` or equivalent wraps the icon in a Div → use `TestIcon()`
|
||||
3. If the icon is directly included without wrapper → use `TestIconNotStr()`
|
||||
|
||||
**The `name` parameter:**
|
||||
- **Exact name**: Use the exact import name (e.g., `TestIcon("panel_right_expand20_regular")`) to validate a specific icon
|
||||
- **`name=""`** (empty string): Validates **any icon**
|
||||
|
||||
**Examples:**
|
||||
|
||||
**Exemples :**
|
||||
```python
|
||||
from myfasthtml.icons.fluent import panel_right_expand20_regular
|
||||
|
||||
# ✅ BON - Tester une icône spécifique
|
||||
# Example 1: Wrapped icon (typically with mk.icon())
|
||||
# Source code: mk.icon(panel_right_expand20_regular, size=20)
|
||||
# Rendered: <div><NotStr .../></div>
|
||||
expected = Header(
|
||||
Div(
|
||||
TestIcon("panel_right_expand20_regular"),
|
||||
TestIcon("panel_right_expand20_regular"), # ✅ With wrapper
|
||||
cls=Contains("flex", "gap-1")
|
||||
)
|
||||
)
|
||||
|
||||
# ✅ BON - Tester la présence de n'importe quelle icône
|
||||
expected = Div(
|
||||
TestIcon(""), # Accepte n'importe quelle icône
|
||||
cls=Contains("icon-wrapper")
|
||||
# Example 2: Direct icon (used without helper)
|
||||
# Source code: Span(dismiss_circle16_regular, cls="icon")
|
||||
# Rendered: <span><NotStr .../></span>
|
||||
expected = Span(
|
||||
TestIconNotStr("dismiss_circle16_regular"), # ✅ Without wrapper
|
||||
cls=Contains("icon")
|
||||
)
|
||||
|
||||
# ❌ À ÉVITER - name="svg"
|
||||
expected = Div(TestIcon("svg")) # ERREUR : causera un échec
|
||||
# Example 3: Verify any wrapped icon
|
||||
expected = Div(
|
||||
TestIcon(""), # Accepts any wrapped icon
|
||||
cls=Contains("icon-wrapper")
|
||||
)
|
||||
```
|
||||
|
||||
**Debugging tip:**
|
||||
If your test fails with `TestIcon()`, try `TestIconNotStr()` and vice-versa. The error message will show you the actual structure.
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.6 : Utiliser `TestScript()` pour tester les scripts JavaScript**
|
||||
#### **UTR-11.8: Use `TestScript()` to test JavaScript scripts**
|
||||
|
||||
**Principe :** Utilisez `TestScript(code_fragment)` pour vérifier la présence de code JavaScript. Testez uniquement le fragment important, pas le script complet.
|
||||
**Principle:** Use `TestScript(code_fragment)` to verify JavaScript code presence. Test only the important fragment, not the complete script.
|
||||
|
||||
**Exemple :**
|
||||
**Example:**
|
||||
```python
|
||||
# ✅ BON - TestScript avec fragment important
|
||||
# ✅ GOOD - TestScript with important fragment
|
||||
script = find_one(layout.render(), Script())
|
||||
expected = TestScript(f"initResizer('{layout._id}');")
|
||||
assert matches(script, expected)
|
||||
|
||||
# ❌ À ÉVITER - tester tout le contenu du script
|
||||
# ❌ AVOID - testing all script content
|
||||
expected = Script("(function() { const id = '...'; initResizer(id); })()")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### **COMMENT DOCUMENTER LES TESTS**
|
||||
### **HOW TO DOCUMENT TESTS**
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.7 : Justifier le choix des éléments testés**
|
||||
#### **UTR-11.9: Justify the choice of tested elements**
|
||||
|
||||
**Principe :** Dans la section de documentation du test (après le docstring de description), expliquez **pourquoi chaque élément ou attribut testé a été choisi**. Qu'est-ce qui le rend important pour la fonctionnalité ?
|
||||
**Principle:** In the test documentation section (after the description docstring), explain **why each tested element or attribute was chosen**. What makes it important for the functionality?
|
||||
|
||||
**Ce qui compte :** Pas la formulation exacte ("Why these elements matter" vs "Why this test matters"), mais **l'explication de la pertinence de ce qui est testé**.
|
||||
**What matters:** Not the exact wording ("Why these elements matter" vs "Why this test matters"), but **the explanation of why what is tested is relevant**.
|
||||
|
||||
**Exemples :**
|
||||
**Examples:**
|
||||
```python
|
||||
def test_empty_layout_is_rendered(self, layout):
|
||||
"""Test that Layout renders with all main structural sections.
|
||||
@@ -418,33 +511,33 @@ def test_left_drawer_is_rendered_when_open(self, layout):
|
||||
assert matches(drawer, expected)
|
||||
```
|
||||
|
||||
**Points clés :**
|
||||
- Expliquez pourquoi l'attribut/élément est important (fonctionnalité, HTMX, styling, etc.)
|
||||
- Pas besoin de suivre une formulation rigide
|
||||
- L'important est la **justification du choix**, pas le format
|
||||
**Key points:**
|
||||
- Explain why the attribute/element is important (functionality, HTMX, styling, etc.)
|
||||
- No need to follow rigid wording
|
||||
- What matters is the **justification of the choice**, not the format
|
||||
|
||||
---
|
||||
|
||||
#### **UTR-11.8 : Tests de comptage avec messages explicites**
|
||||
#### **UTR-11.10: Count tests with explicit messages**
|
||||
|
||||
**Principe :** Quand vous comptez des éléments avec `assert len()`, ajoutez TOUJOURS un message explicite qui explique pourquoi ce nombre est attendu.
|
||||
**Principle:** When you count elements with `assert len()`, ALWAYS add an explicit message explaining why this number is expected.
|
||||
|
||||
**Exemple :**
|
||||
**Example:**
|
||||
```python
|
||||
# ✅ BON - message explicatif
|
||||
# ✅ GOOD - explanatory message
|
||||
resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
|
||||
assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
|
||||
|
||||
dividers = find(content, Div(cls="divider"))
|
||||
assert len(dividers) >= 1, "Groups should be separated by dividers"
|
||||
|
||||
# ❌ À ÉVITER - pas de message
|
||||
# ❌ AVOID - no message
|
||||
assert len(resizers) == 1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### **AUTRES RÈGLES IMPORTANTES**
|
||||
### **OTHER IMPORTANT RULES**
|
||||
|
||||
---
|
||||
|
||||
@@ -455,7 +548,7 @@ assert len(resizers) == 1
|
||||
2. **Documentation format**: Every render test MUST have a docstring with:
|
||||
- First line: Brief description of what is being tested
|
||||
- Blank line
|
||||
- Justification section explaining why tested elements matter (see UTR-11.7)
|
||||
- Justification section explaining why tested elements matter (see UTR-11.9)
|
||||
- List of important elements/attributes being tested with explanations (in English)
|
||||
|
||||
3. **No inline comments**: Do NOT add comments on each line of the expected structure (except for structural clarification in global layout tests like `# left drawer`)
|
||||
@@ -479,23 +572,28 @@ assert len(resizers) == 1
|
||||
|
||||
---
|
||||
|
||||
#### **Résumé : Les 8 règles UTR-11**
|
||||
#### **Summary: The 11 UTR-11 sub-rules**
|
||||
|
||||
**Pattern fondamental**
|
||||
- **UTR-11.1** : Pattern en trois étapes (extraire → définir expected → comparer)
|
||||
**Prerequisite**
|
||||
- **UTR-11.0**: ⭐⭐⭐ Read `docs/testing_rendered_components.md` (MANDATORY)
|
||||
|
||||
**Comment chercher**
|
||||
- **UTR-11.2** : Privilégier recherche par ID
|
||||
- **UTR-11.3** : `find_one()` vs `find()` selon contexte
|
||||
**Test file structure**
|
||||
- **UTR-11.1**: ⭐ Always start with a global structure test (FIRST TEST)
|
||||
- **UTR-11.2**: Break down complex tests into numbered steps
|
||||
- **UTR-11.3**: Three-step pattern for simple tests
|
||||
|
||||
**Comment spécifier**
|
||||
- **UTR-11.4** : Toujours `Contains()` pour `cls` et `style`
|
||||
- **UTR-11.5** : `TestIcon()` pour tester la présence d'icônes
|
||||
- **UTR-11.6** : `TestScript()` pour JavaScript
|
||||
**How to search**
|
||||
- **UTR-11.4**: Prefer search by ID
|
||||
- **UTR-11.5**: `find_one()` vs `find()` based on context
|
||||
|
||||
**Comment documenter**
|
||||
- **UTR-11.7** : Justifier le choix des éléments testés
|
||||
- **UTR-11.8** : Messages explicites pour `assert len()`
|
||||
**How to specify**
|
||||
- **UTR-11.6**: Always `Contains()` for `cls` and `style`
|
||||
- **UTR-11.7**: `TestIcon()` or `TestIconNotStr()` to test icon presence
|
||||
- **UTR-11.8**: `TestScript()` for JavaScript
|
||||
|
||||
**How to document**
|
||||
- **UTR-11.9**: Justify the choice of tested elements
|
||||
- **UTR-11.10**: Explicit messages for `assert len()`
|
||||
|
||||
---
|
||||
|
||||
@@ -503,19 +601,89 @@ assert len(resizers) == 1
|
||||
- Reference specific patterns from the documentation
|
||||
- Explain why you chose to test certain elements and not others
|
||||
- Justify the use of predicates vs exact values
|
||||
- Always include justification documentation (see UTR-11.7)
|
||||
- Always include justification documentation (see UTR-11.9)
|
||||
|
||||
### UTR-12: Test Workflow
|
||||
---
|
||||
|
||||
### UTR-12: Analyze Execution Flow Before Writing Tests
|
||||
|
||||
**Rule:** Before writing a test, trace the complete execution flow to understand side effects.
|
||||
|
||||
**Why:** Prevents writing tests based on incorrect assumptions about behavior.
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Test: "content_is_cached_after_first_retrieval"
|
||||
Flow: create_tab() → _add_or_update_tab() → state.ns_tabs_content[tab_id] = component
|
||||
Conclusion: Cache is already filled after create_tab, test would be redundant
|
||||
```
|
||||
|
||||
**Process:**
|
||||
1. Identify the method being tested
|
||||
2. Trace all method calls it makes
|
||||
3. Identify state changes at each step
|
||||
4. Verify your assumptions about what the test should validate
|
||||
5. Only then write the test
|
||||
|
||||
---
|
||||
|
||||
### UTR-13: Prefer matches() for Content Verification
|
||||
|
||||
**Rule:** Even in behavior tests, use `matches()` to verify HTML content rather than `assert "text" in str(element)`.
|
||||
|
||||
**Why:** More robust, clearer error messages, consistent with render test patterns.
|
||||
|
||||
**Examples:**
|
||||
```python
|
||||
# ❌ FRAGILE - string matching
|
||||
result = component._dynamic_get_content("nonexistent_id")
|
||||
assert "Tab not found" in str(result)
|
||||
|
||||
# ✅ ROBUST - structural matching
|
||||
result = component._dynamic_get_content("nonexistent_id")
|
||||
assert matches(result, Div('Tab not found.'))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### UTR-14: Know FastHTML Attribute Names
|
||||
|
||||
**Rule:** FastHTML elements use HTML attribute names, not Python parameter names.
|
||||
|
||||
**Key differences:**
|
||||
- Use `attrs.get('class')` not `attrs.get('cls')`
|
||||
- Use `attrs.get('id')` for the ID
|
||||
- Prefer `matches()` with predicates to avoid direct attribute access
|
||||
|
||||
**Examples:**
|
||||
```python
|
||||
# ❌ WRONG - Python parameter name
|
||||
classes = element.attrs.get('cls', '') # Returns None or ''
|
||||
|
||||
# ✅ CORRECT - HTML attribute name
|
||||
classes = element.attrs.get('class', '') # Returns actual classes
|
||||
|
||||
# ✅ BETTER - Use predicates with matches()
|
||||
expected = Div(cls=Contains("active"))
|
||||
assert matches(element, expected)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### UTR-15: Test Workflow
|
||||
|
||||
1. **Receive code to test** - User provides file path or code section
|
||||
2. **Check existing tests** - Look for corresponding test file and read it if it exists
|
||||
3. **Analyze code** - Read and understand implementation
|
||||
4. **Gap analysis** - If tests exist, identify what's missing; otherwise identify all scenarios
|
||||
5. **Propose test plan** - List new/missing tests with brief explanations
|
||||
6. **Wait for approval** - User validates the test plan
|
||||
7. **Implement tests** - Write all approved tests
|
||||
8. **Verify** - Ensure tests follow naming conventions and structure
|
||||
9. **Ask before running** - Do NOT automatically run tests with pytest. Ask user first if they want to run the tests.
|
||||
4. **Trace execution flow** - Apply UTR-12 to understand side effects
|
||||
5. **Gap analysis** - If tests exist, identify what's missing; otherwise identify all scenarios
|
||||
6. **Propose test plan** - List new/missing tests with brief explanations
|
||||
7. **Wait for approval** - User validates the test plan
|
||||
8. **Implement tests** - Write all approved tests
|
||||
9. **Verify** - Ensure tests follow naming conventions and structure
|
||||
10. **Ask before running** - Do NOT automatically run tests with pytest. Ask user first if they want to run the tests.
|
||||
|
||||
---
|
||||
|
||||
## Managing Rules
|
||||
|
||||
|
||||
2611
.claude/fasthtml-llms-ctx.txt
Normal file
2611
.claude/fasthtml-llms-ctx.txt
Normal file
File diff suppressed because it is too large
Load Diff
622
docs/TabsManager.md
Normal file
622
docs/TabsManager.md
Normal file
@@ -0,0 +1,622 @@
|
||||
# TabsManager Component
|
||||
|
||||
## Introduction
|
||||
|
||||
The TabsManager component provides a dynamic tabbed interface for organizing multiple views within your FastHTML application. It handles tab creation, activation, closing, and content management with automatic state persistence and HTMX-powered interactions.
|
||||
|
||||
**Key features:**
|
||||
|
||||
- Dynamic tab creation and removal at runtime
|
||||
- Automatic content caching for performance
|
||||
- Session-based state persistence (tabs, order, active tab)
|
||||
- Duplicate tab detection based on component identity
|
||||
- Built-in search menu for quick tab navigation
|
||||
- Auto-increment labels for programmatic tab creation
|
||||
- HTMX-powered updates without page reload
|
||||
|
||||
**Common use cases:**
|
||||
|
||||
- Multi-document editor (code editor, text editor)
|
||||
- Dashboard with multiple data views
|
||||
- Settings interface with different configuration panels
|
||||
- Developer tools with console, inspector, network tabs
|
||||
- Application with dynamic content sections
|
||||
|
||||
## Quick Start
|
||||
|
||||
Here's a minimal example showing a tabbed interface with three views:
|
||||
|
||||
```python
|
||||
from fasthtml.common import *
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.core.instances import RootInstance
|
||||
|
||||
# Create root instance and tabs manager
|
||||
root = RootInstance(session)
|
||||
tabs = TabsManager(parent=root)
|
||||
|
||||
# Create three tabs with different content
|
||||
tabs.create_tab("Dashboard", Div(H1("Dashboard"), P("Overview of your data")))
|
||||
tabs.create_tab("Settings", Div(H1("Settings"), P("Configure your preferences")))
|
||||
tabs.create_tab("Profile", Div(H1("Profile"), P("Manage your profile")))
|
||||
|
||||
# Render the tabs manager
|
||||
return tabs
|
||||
```
|
||||
|
||||
This creates a complete tabbed interface with:
|
||||
|
||||
- A header bar displaying three clickable tab buttons ("Dashboard", "Settings", "Profile")
|
||||
- Close buttons (×) on each tab for dynamic removal
|
||||
- A main content area showing the active tab's content
|
||||
- A search menu (⊞ icon) for quick tab navigation when many tabs are open
|
||||
- Automatic HTMX updates when switching or closing tabs
|
||||
|
||||
**Note:** Tabs are interactive by default. Users can click tab labels to switch views, click close buttons to remove tabs, or use the search menu to find tabs quickly. All interactions update the UI without page reload thanks to HTMX integration.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Visual Structure
|
||||
|
||||
The TabsManager component consists of a header with tab buttons and a content area:
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────┐
|
||||
│ Tab Header │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────┐ │
|
||||
│ │ Tab 1 × │ │ Tab 2 × │ │ Tab 3 × │ │ ⊞ │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ └────┘ │
|
||||
├────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ Active Tab Content │
|
||||
│ │
|
||||
│ │
|
||||
└────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Component details:**
|
||||
|
||||
| Element | Description |
|
||||
|-------------------|--------------------------------------------------|
|
||||
| Tab buttons | Clickable labels to switch between tabs |
|
||||
| Close button (×) | Removes the tab and its content |
|
||||
| Search menu (⊞) | Dropdown menu to search and filter tabs |
|
||||
| Content area | Displays the active tab's content |
|
||||
|
||||
### Creating a TabsManager
|
||||
|
||||
The TabsManager is a `MultipleInstance`, meaning you can create multiple independent tab managers in your application. Create it by providing a parent instance:
|
||||
|
||||
```python
|
||||
tabs = TabsManager(parent=root_instance)
|
||||
|
||||
# Or with a custom ID
|
||||
tabs = TabsManager(parent=root_instance, _id="my-tabs")
|
||||
```
|
||||
|
||||
### Creating Tabs
|
||||
|
||||
Use the `create_tab()` method to add a new tab:
|
||||
|
||||
```python
|
||||
# Create a tab with custom content
|
||||
tab_id = tabs.create_tab(
|
||||
label="My Tab",
|
||||
component=Div(H1("Content"), P("Tab content here"))
|
||||
)
|
||||
|
||||
# Create with a MyFastHtml control
|
||||
from myfasthtml.controls.VisNetwork import VisNetwork
|
||||
network = VisNetwork(parent=tabs, nodes=nodes_data, edges=edges_data)
|
||||
tab_id = tabs.create_tab("Network View", network)
|
||||
|
||||
# Create without activating immediately
|
||||
tab_id = tabs.create_tab("Background Tab", content, activate=False)
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
- `label` (str): Display text shown in the tab button
|
||||
- `component` (Any): Content to display in the tab (FastHTML elements or MyFastHtml controls)
|
||||
- `activate` (bool): Whether to make this tab active immediately (default: True)
|
||||
|
||||
**Returns:** A unique `tab_id` (UUID string) that identifies the tab
|
||||
|
||||
### Showing Tabs
|
||||
|
||||
Use the `show_tab()` method to activate and display a tab:
|
||||
|
||||
```python
|
||||
# Show a tab (makes it active and sends content to client if needed)
|
||||
tabs.show_tab(tab_id)
|
||||
|
||||
# Show without activating (just send content to client)
|
||||
tabs.show_tab(tab_id, activate=False)
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
- `tab_id` (str): The UUID of the tab to show
|
||||
- `activate` (bool): Whether to make this tab active (default: True)
|
||||
|
||||
**Note:** The first time a tab is shown, its content is sent to the client and cached. Subsequent activations just toggle visibility without re-sending content.
|
||||
|
||||
### Closing Tabs
|
||||
|
||||
Use the `close_tab()` method to remove a tab:
|
||||
|
||||
```python
|
||||
# Close a specific tab
|
||||
tabs.close_tab(tab_id)
|
||||
```
|
||||
|
||||
**What happens when closing:**
|
||||
1. Tab is removed from the tab list and order
|
||||
2. Content is removed from cache and client
|
||||
3. If the closed tab was active, the first remaining tab becomes active
|
||||
4. If no tabs remain, `active_tab` is set to `None`
|
||||
|
||||
### Changing Tab Content
|
||||
|
||||
Use the `change_tab_content()` method to update an existing tab's content and label:
|
||||
|
||||
```python
|
||||
# Update tab content and label
|
||||
new_content = Div(H1("Updated"), P("New content"))
|
||||
tabs.change_tab_content(
|
||||
tab_id=tab_id,
|
||||
label="Updated Tab",
|
||||
component=new_content,
|
||||
activate=True
|
||||
)
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
- `tab_id` (str): The UUID of the tab to update
|
||||
- `label` (str): New label for the tab
|
||||
- `component` (Any): New content to display
|
||||
- `activate` (bool): Whether to activate the tab after updating (default: True)
|
||||
|
||||
**Note:** This method forces the new content to be sent to the client, even if the tab was already displayed.
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Auto-increment Labels
|
||||
|
||||
When creating multiple tabs programmatically, you can use auto-increment to generate unique labels:
|
||||
|
||||
```python
|
||||
# Using the on_new_tab method with auto_increment
|
||||
def create_multiple_tabs():
|
||||
# Creates "Untitled_0", "Untitled_1", "Untitled_2"
|
||||
tabs.on_new_tab("Untitled", content, auto_increment=True)
|
||||
tabs.on_new_tab("Untitled", content, auto_increment=True)
|
||||
tabs.on_new_tab("Untitled", content, auto_increment=True)
|
||||
```
|
||||
|
||||
**How it works:**
|
||||
- The TabsManager maintains an internal counter (`_tab_count`)
|
||||
- When `auto_increment=True`, the counter value is appended to the label
|
||||
- Counter increments with each auto-incremented tab creation
|
||||
- Useful for "New Tab 1", "New Tab 2" patterns in editors or tools
|
||||
|
||||
### Duplicate Detection
|
||||
|
||||
The TabsManager automatically detects and reuses tabs with identical content to prevent duplicates:
|
||||
|
||||
```python
|
||||
# Create a control instance
|
||||
network = VisNetwork(parent=tabs, nodes=data, edges=edges)
|
||||
|
||||
# First call creates a new tab
|
||||
tab_id_1 = tabs.create_tab("Network", network)
|
||||
|
||||
# Second call with same label and component returns existing tab_id
|
||||
tab_id_2 = tabs.create_tab("Network", network)
|
||||
|
||||
# tab_id_1 == tab_id_2 (True - same tab!)
|
||||
```
|
||||
|
||||
**Detection criteria:**
|
||||
A tab is considered a duplicate if all three match:
|
||||
- Same `label`
|
||||
- Same `component_type` (component class prefix)
|
||||
- Same `component_id` (component instance ID)
|
||||
|
||||
**Note:** This only works with `BaseInstance` components (MyFastHtml controls). Plain FastHTML elements don't have IDs and will always create new tabs.
|
||||
|
||||
### Dynamic Content Updates
|
||||
|
||||
You can update tabs dynamically during the session:
|
||||
|
||||
```python
|
||||
# Initial tab creation
|
||||
tab_id = tabs.create_tab("Data View", Div("Loading..."))
|
||||
|
||||
# Later, update with actual data
|
||||
def load_data():
|
||||
data_content = Div(H2("Data"), P("Loaded content"))
|
||||
tabs.change_tab_content(tab_id, "Data View", data_content)
|
||||
# Returns HTMX response to update the UI
|
||||
```
|
||||
|
||||
**Use cases:**
|
||||
- Loading data asynchronously
|
||||
- Refreshing tab content based on user actions
|
||||
- Updating visualizations with new data
|
||||
- Switching between different views in the same tab
|
||||
|
||||
### Tab Search Menu
|
||||
|
||||
The built-in search menu helps users navigate when many tabs are open:
|
||||
|
||||
```python
|
||||
# The search menu is automatically created and includes:
|
||||
# - A Search control for filtering tabs by label
|
||||
# - Live filtering as you type
|
||||
# - Click to activate a tab from search results
|
||||
```
|
||||
|
||||
**How to access:**
|
||||
- Click the ⊞ icon in the tab header
|
||||
- Start typing to filter tabs by label
|
||||
- Click a result to activate that tab
|
||||
|
||||
The search menu updates automatically when tabs are added or removed.
|
||||
|
||||
### HTMX Out-of-Band Swaps
|
||||
|
||||
For advanced HTMX control, you can customize swap behavior:
|
||||
|
||||
```python
|
||||
# Standard behavior (out-of-band swap enabled)
|
||||
tabs.show_tab(tab_id, oob=True) # Default
|
||||
|
||||
# Custom target behavior (disable out-of-band)
|
||||
tabs.show_tab(tab_id, oob=False) # Swap into HTMX target only
|
||||
```
|
||||
|
||||
**When to use `oob=False`:**
|
||||
- When you want to control the exact HTMX target
|
||||
- When combining with other HTMX responses
|
||||
- When the tab activation is triggered by a command with a specific target
|
||||
|
||||
**When to use `oob=True` (default):**
|
||||
- Most common use case
|
||||
- Allows other controls to trigger tab changes without caring about targets
|
||||
- Enables automatic UI updates across multiple elements
|
||||
|
||||
### CSS Customization
|
||||
|
||||
The TabsManager uses CSS classes that you can customize:
|
||||
|
||||
| Class | Element |
|
||||
|----------------------------|----------------------------------|
|
||||
| `mf-tabs-manager` | Root tabs manager container |
|
||||
| `mf-tabs-header-wrapper` | Header wrapper (buttons + menu) |
|
||||
| `mf-tabs-header` | Tab buttons container |
|
||||
| `mf-tab-button` | Individual tab button |
|
||||
| `mf-tab-active` | Active tab button (modifier) |
|
||||
| `mf-tab-label` | Tab label text |
|
||||
| `mf-tab-close-btn` | Close button (×) |
|
||||
| `mf-tab-content-wrapper` | Content area container |
|
||||
| `mf-tab-content` | Individual tab content |
|
||||
| `mf-empty-content` | Empty state when no tabs |
|
||||
|
||||
**Example customization:**
|
||||
|
||||
```css
|
||||
/* Change active tab color */
|
||||
.mf-tab-active {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Customize close button */
|
||||
.mf-tab-close-btn:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Style the content area */
|
||||
.mf-tab-content-wrapper {
|
||||
padding: 2rem;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Multi-view Application
|
||||
|
||||
A typical application with different views accessible through tabs:
|
||||
|
||||
```python
|
||||
from fasthtml.common import *
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.core.instances import RootInstance
|
||||
|
||||
# Create tabs manager
|
||||
root = RootInstance(session)
|
||||
tabs = TabsManager(parent=root, _id="app-tabs")
|
||||
|
||||
# Dashboard view
|
||||
dashboard = Div(
|
||||
H1("Dashboard"),
|
||||
Div(
|
||||
Div("Total Users: 1,234", cls="stat"),
|
||||
Div("Active Sessions: 56", cls="stat"),
|
||||
Div("Revenue: $12,345", cls="stat"),
|
||||
cls="stats-grid"
|
||||
)
|
||||
)
|
||||
|
||||
# Analytics view
|
||||
analytics = Div(
|
||||
H1("Analytics"),
|
||||
P("Detailed analytics and reports"),
|
||||
Div("Chart placeholder", cls="chart-container")
|
||||
)
|
||||
|
||||
# Settings view
|
||||
settings = Div(
|
||||
H1("Settings"),
|
||||
Form(
|
||||
Label("Username:", Input(name="username", value="admin")),
|
||||
Label("Email:", Input(name="email", value="admin@example.com")),
|
||||
Button("Save", type="submit"),
|
||||
)
|
||||
)
|
||||
|
||||
# Create tabs
|
||||
tabs.create_tab("Dashboard", dashboard)
|
||||
tabs.create_tab("Analytics", analytics)
|
||||
tabs.create_tab("Settings", settings)
|
||||
|
||||
# Render
|
||||
return tabs
|
||||
```
|
||||
|
||||
### Example 2: Dynamic Tabs with VisNetwork
|
||||
|
||||
Creating tabs dynamically with interactive network visualizations:
|
||||
|
||||
```python
|
||||
from fasthtml.common import *
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.controls.VisNetwork import VisNetwork
|
||||
from myfasthtml.controls.helpers import mk
|
||||
from myfasthtml.core.commands import Command
|
||||
from myfasthtml.core.instances import RootInstance
|
||||
|
||||
root = RootInstance(session)
|
||||
tabs = TabsManager(parent=root, _id="network-tabs")
|
||||
|
||||
# Create initial tab with welcome message
|
||||
tabs.create_tab("Welcome", Div(
|
||||
H1("Network Visualizer"),
|
||||
P("Click 'Add Network' to create a new network visualization")
|
||||
))
|
||||
|
||||
# Function to create a new network tab
|
||||
def add_network_tab():
|
||||
# Define network data
|
||||
nodes = [
|
||||
{"id": 1, "label": "Node 1"},
|
||||
{"id": 2, "label": "Node 2"},
|
||||
{"id": 3, "label": "Node 3"}
|
||||
]
|
||||
edges = [
|
||||
{"from": 1, "to": 2},
|
||||
{"from": 2, "to": 3}
|
||||
]
|
||||
|
||||
# Create network instance
|
||||
network = VisNetwork(parent=tabs, nodes=nodes, edges=edges)
|
||||
|
||||
# Use auto-increment to create unique labels
|
||||
return tabs.on_new_tab("Network", network, auto_increment=True)
|
||||
|
||||
# Create command for adding networks
|
||||
add_cmd = Command("add_network", "Add network tab", add_network_tab)
|
||||
|
||||
# Add button to create new network tabs
|
||||
add_button = mk.button("Add Network", command=add_cmd, cls="btn btn-primary")
|
||||
|
||||
# Return tabs and button
|
||||
return Div(add_button, tabs)
|
||||
```
|
||||
|
||||
### Example 3: Tab Management with Content Updates
|
||||
|
||||
An application that updates tab content based on user interaction:
|
||||
|
||||
```python
|
||||
from fasthtml.common import *
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.controls.helpers import mk
|
||||
from myfasthtml.core.commands import Command
|
||||
from myfasthtml.core.instances import RootInstance
|
||||
|
||||
root = RootInstance(session)
|
||||
tabs = TabsManager(parent=root, _id="editor-tabs")
|
||||
|
||||
# Create initial document tabs
|
||||
doc1_id = tabs.create_tab("Document 1", Textarea("Initial content 1", rows=10))
|
||||
doc2_id = tabs.create_tab("Document 2", Textarea("Initial content 2", rows=10))
|
||||
|
||||
# Function to refresh a document's content
|
||||
def refresh_document(tab_id, doc_name):
|
||||
# Simulate loading new content
|
||||
new_content = Textarea(f"Refreshed content for {doc_name}\nTimestamp: {datetime.now()}", rows=10)
|
||||
tabs.change_tab_content(tab_id, doc_name, new_content)
|
||||
return tabs._mk_tabs_controller(oob=True), tabs._mk_tabs_header_wrapper(oob=True)
|
||||
|
||||
# Create refresh commands
|
||||
refresh_doc1 = Command("refresh_1", "Refresh doc 1", refresh_document, doc1_id, "Document 1")
|
||||
refresh_doc2 = Command("refresh_2", "Refresh doc 2", refresh_document, doc2_id, "Document 2")
|
||||
|
||||
# Add refresh buttons
|
||||
controls = Div(
|
||||
mk.button("Refresh Document 1", command=refresh_doc1, cls="btn btn-sm"),
|
||||
mk.button("Refresh Document 2", command=refresh_doc2, cls="btn btn-sm"),
|
||||
cls="controls-bar"
|
||||
)
|
||||
|
||||
return Div(controls, tabs)
|
||||
```
|
||||
|
||||
### Example 4: Using Auto-increment for Dynamic Tabs
|
||||
|
||||
Creating multiple tabs programmatically with auto-generated labels:
|
||||
|
||||
```python
|
||||
from fasthtml.common import *
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.controls.helpers import mk
|
||||
from myfasthtml.core.commands import Command
|
||||
from myfasthtml.core.instances import RootInstance
|
||||
|
||||
root = RootInstance(session)
|
||||
tabs = TabsManager(parent=root, _id="dynamic-tabs")
|
||||
|
||||
# Create initial placeholder tab
|
||||
tabs.create_tab("Start", Div(
|
||||
H2("Welcome"),
|
||||
P("Click 'New Tab' to create numbered tabs")
|
||||
))
|
||||
|
||||
# Function to create a new numbered tab
|
||||
def create_numbered_tab():
|
||||
content = Div(
|
||||
H2("New Tab Content"),
|
||||
P(f"This tab was created dynamically"),
|
||||
Input(placeholder="Enter some text...", cls="input")
|
||||
)
|
||||
# Auto-increment creates "Tab_0", "Tab_1", "Tab_2", etc.
|
||||
return tabs.on_new_tab("Tab", content, auto_increment=True)
|
||||
|
||||
# Create command
|
||||
new_tab_cmd = Command("new_tab", "Create new tab", create_numbered_tab)
|
||||
|
||||
# Add button
|
||||
new_tab_button = mk.button("New Tab", command=new_tab_cmd, cls="btn btn-primary")
|
||||
|
||||
return Div(
|
||||
Div(new_tab_button, cls="toolbar"),
|
||||
tabs
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Developer Reference
|
||||
|
||||
This section contains technical details for developers working on the TabsManager component itself.
|
||||
|
||||
### State
|
||||
|
||||
The TabsManager component maintains the following state properties:
|
||||
|
||||
| Name | Type | Description | Default |
|
||||
|----------------------------|-----------------|------------------------------------------------------|---------|
|
||||
| `tabs` | dict[str, Any] | Dictionary of tab metadata (id, label, component) | `{}` |
|
||||
| `tabs_order` | list[str] | Ordered list of tab IDs | `[]` |
|
||||
| `active_tab` | str \| None | ID of the currently active tab | `None` |
|
||||
| `ns_tabs_content` | dict[str, Any] | Cache of tab content (raw, not wrapped) | `{}` |
|
||||
| `ns_tabs_sent_to_client` | set | Set of tab IDs already sent to client | `set()` |
|
||||
|
||||
**Note:** Properties prefixed with `ns_` are not persisted in the database and exist only for the session.
|
||||
|
||||
### Commands
|
||||
|
||||
Available commands for programmatic control:
|
||||
|
||||
| Name | Description |
|
||||
|-----------------------------------------|------------------------------------------------|
|
||||
| `show_tab(tab_id)` | Activate or show a specific tab |
|
||||
| `close_tab(tab_id)` | Close a specific tab |
|
||||
| `add_tab(label, component, auto_increment)` | Add a new tab with optional auto-increment |
|
||||
|
||||
### Public Methods
|
||||
|
||||
| Method | Description |
|
||||
|---------------------------------------------------------|------------------------------------------------------|
|
||||
| `create_tab(label, component, activate=True)` | Create a new tab or reuse existing duplicate |
|
||||
| `show_tab(tab_id, activate=True, oob=True)` | Send tab to client and/or activate it |
|
||||
| `close_tab(tab_id)` | Close and remove a tab |
|
||||
| `change_tab_content(tab_id, label, component, activate=True)` | Update existing tab's label and content |
|
||||
| `on_new_tab(label, component, auto_increment=False)` | Create and show tab with auto-increment support |
|
||||
| `add_tab_btn()` | Returns add tab button element |
|
||||
| `get_state()` | Returns the TabsManagerState object |
|
||||
| `render()` | Renders the complete TabsManager component |
|
||||
|
||||
### High Level Hierarchical Structure
|
||||
|
||||
```
|
||||
Div(id="{id}", cls="mf-tabs-manager")
|
||||
├── Div(id="{id}-controller") # Controller (hidden, manages active state)
|
||||
├── Div(id="{id}-header-wrapper") # Header wrapper
|
||||
│ ├── Div(id="{id}-header") # Tab buttons container
|
||||
│ │ ├── Div (mf-tab-button) # Tab button 1
|
||||
│ │ │ ├── Span (mf-tab-label) # Label (clickable)
|
||||
│ │ │ └── Span (mf-tab-close-btn) # Close button
|
||||
│ │ ├── Div (mf-tab-button) # Tab button 2
|
||||
│ │ └── ...
|
||||
│ └── Div (dropdown) # Search menu
|
||||
│ ├── Icon (tabs24_regular) # Menu toggle button
|
||||
│ └── Div (dropdown-content) # Search component
|
||||
├── Div(id="{id}-content-wrapper") # Content wrapper
|
||||
│ ├── Div(id="{id}-{tab_id_1}-content") # Tab 1 content
|
||||
│ ├── Div(id="{id}-{tab_id_2}-content") # Tab 2 content
|
||||
│ └── ...
|
||||
└── Script # Initialization script
|
||||
```
|
||||
|
||||
### Element IDs
|
||||
|
||||
| Name | Description |
|
||||
|-------------------------------|------------------------------------------|
|
||||
| `{id}` | Root tabs manager container |
|
||||
| `{id}-controller` | Hidden controller managing active state |
|
||||
| `{id}-header-wrapper` | Header wrapper (buttons + search) |
|
||||
| `{id}-header` | Tab buttons container |
|
||||
| `{id}-content-wrapper` | Content area wrapper |
|
||||
| `{id}-{tab_id}-content` | Individual tab content |
|
||||
| `{id}-search` | Search component ID |
|
||||
|
||||
**Note:** `{id}` is the TabsManager instance ID, `{tab_id}` is the UUID of each tab.
|
||||
|
||||
### Internal Methods
|
||||
|
||||
These methods are used internally for rendering:
|
||||
|
||||
| Method | Description |
|
||||
|-----------------------------------------|-------------------------------------------------------|
|
||||
| `_mk_tabs_controller(oob=False)` | Renders the hidden controller element |
|
||||
| `_mk_tabs_header_wrapper(oob=False)` | Renders the header wrapper with buttons and search |
|
||||
| `_mk_tab_button(tab_data)` | Renders a single tab button |
|
||||
| `_mk_tab_content_wrapper()` | Renders the content wrapper with active tab content |
|
||||
| `_mk_tab_content(tab_id, content)` | Renders individual tab content div |
|
||||
| `_mk_show_tabs_menu()` | Renders the search dropdown menu |
|
||||
| `_wrap_tab_content(tab_content)` | Wraps tab content for HTMX out-of-band insertion |
|
||||
| `_get_or_create_tab_content(tab_id)` | Gets tab content from cache or creates it |
|
||||
| `_dynamic_get_content(tab_id)` | Retrieves component from InstancesManager |
|
||||
| `_tab_already_exists(label, component)` | Checks if duplicate tab exists |
|
||||
| `_add_or_update_tab(...)` | Internal method to add/update tab in state |
|
||||
| `_get_ordered_tabs()` | Returns tabs ordered by tabs_order list |
|
||||
| `_get_tab_list()` | Returns list of tab dictionaries in order |
|
||||
| `_get_tab_count()` | Returns and increments internal tab counter |
|
||||
|
||||
### Tab Metadata Structure
|
||||
|
||||
Each tab in the `tabs` dictionary has the following structure:
|
||||
|
||||
```python
|
||||
{
|
||||
'id': 'uuid-string', # Unique tab identifier
|
||||
'label': 'Tab Label', # Display label
|
||||
'component_type': 'prefix', # Component class prefix (or None)
|
||||
'component_id': 'instance-id' # Component instance ID (or None)
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** `component_type` and `component_id` are `None` for plain FastHTML elements that don't inherit from `BaseInstance`.
|
||||
@@ -126,11 +126,12 @@ def index(session):
|
||||
|
||||
# data grids
|
||||
dgs_manager = DataGridsManager(layout, _id="-datagrids")
|
||||
layout.left_drawer.add_group("Documents", Div("Documents", dgs_manager.mk_main_icons(), cls="mf-layout-group flex gap-3"))
|
||||
layout.left_drawer.add_group("Documents", Div("Documents",
|
||||
dgs_manager.mk_main_icons(),
|
||||
cls="mf-layout-group flex gap-3"))
|
||||
layout.left_drawer.add(dgs_manager, "Documents")
|
||||
layout.set_main(tabs_manager)
|
||||
|
||||
|
||||
# keyboard shortcuts
|
||||
keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o",
|
||||
add_tab("File Open", FileUpload(layout, _id="-file_upload")))
|
||||
|
||||
@@ -2,6 +2,7 @@ import pandas as pd
|
||||
from fasthtml.components import Div
|
||||
|
||||
from myfasthtml.controls.BaseCommands import BaseCommands
|
||||
from myfasthtml.controls.FileUpload import FileUpload
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.controls.TreeView import TreeView
|
||||
from myfasthtml.controls.helpers import mk
|
||||
@@ -13,14 +14,22 @@ from myfasthtml.icons.fluent_p3 import folder_open20_regular
|
||||
|
||||
class Commands(BaseCommands):
|
||||
def upload_from_source(self):
|
||||
return Command("UploadFromSource", "Upload from source", self._owner.upload_from_source)
|
||||
return Command("UploadFromSource",
|
||||
"Upload from source",
|
||||
self._owner.upload_from_source).htmx(target=None)
|
||||
|
||||
def new_grid(self):
|
||||
return Command("NewGrid", "New grid", self._owner.new_grid)
|
||||
return Command("NewGrid",
|
||||
"New grid",
|
||||
self._owner.new_grid)
|
||||
|
||||
def open_from_excel(self, tab_id, get_content_callback):
|
||||
excel_content = get_content_callback()
|
||||
return Command("OpenFromExcel", "Open from Excel", self._owner.open_from_excel, tab_id, excel_content)
|
||||
return Command("OpenFromExcel",
|
||||
"Open from Excel",
|
||||
self._owner.open_from_excel,
|
||||
tab_id,
|
||||
excel_content).htmx(target=None)
|
||||
|
||||
|
||||
class DataGridsManager(MultipleInstance):
|
||||
@@ -31,10 +40,8 @@ class DataGridsManager(MultipleInstance):
|
||||
self._tabs_manager = InstancesManager.get_by_type(self._session, TabsManager)
|
||||
|
||||
def upload_from_source(self):
|
||||
from myfasthtml.controls.FileUpload import FileUpload
|
||||
file_upload = FileUpload(self, _id="-file-upload", auto_register=False)
|
||||
self._tabs_manager = InstancesManager.get_by_type(self._session, TabsManager)
|
||||
tab_id = self._tabs_manager.add_tab("Upload Datagrid", file_upload)
|
||||
file_upload = FileUpload(self)
|
||||
tab_id = self._tabs_manager.create_tab("Upload Datagrid", file_upload)
|
||||
file_upload.on_ok = self.commands.open_from_excel(tab_id, file_upload.get_content)
|
||||
return self._tabs_manager.show_tab(tab_id)
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@ class Search(MultipleInstance):
|
||||
:ivar template: Callable function to define how filtered items are rendered.
|
||||
:type template: Callable[[Any], Any]
|
||||
"""
|
||||
|
||||
def __init__(self,
|
||||
parent: BaseInstance,
|
||||
_id=None,
|
||||
@@ -69,6 +70,12 @@ class Search(MultipleInstance):
|
||||
self.filtered = self.items.copy()
|
||||
return self
|
||||
|
||||
def get_items(self):
|
||||
return self.items
|
||||
|
||||
def get_filtered(self):
|
||||
return self.filtered
|
||||
|
||||
def on_search(self, query):
|
||||
logger.debug(f"on_search {query=}")
|
||||
self.search(query)
|
||||
|
||||
@@ -52,32 +52,39 @@ class TabsManagerState(DbObject):
|
||||
self.active_tab: str | None = None
|
||||
|
||||
# must not be persisted in DB
|
||||
self._tabs_content: dict[str, Any] = {}
|
||||
self.ns_tabs_content: dict[str, Any] = {} # Cache: always stores raw content (not wrapped)
|
||||
self.ns_tabs_sent_to_client: set = set() # for tabs created, but not yet displayed
|
||||
|
||||
|
||||
class Commands(BaseCommands):
|
||||
def show_tab(self, tab_id):
|
||||
return Command(f"{self._prefix}ShowTab",
|
||||
"Activate or show a specific tab",
|
||||
self._owner.show_tab, tab_id).htmx(target=f"#{self._id}-controller", swap="outerHTML")
|
||||
self._owner.show_tab,
|
||||
tab_id,
|
||||
True,
|
||||
False).htmx(target=f"#{self._id}-controller", swap="outerHTML")
|
||||
|
||||
def close_tab(self, tab_id):
|
||||
return Command(f"{self._prefix}CloseTab",
|
||||
"Close a specific tab",
|
||||
self._owner.close_tab, tab_id).htmx(target=f"#{self._id}", swap="outerHTML")
|
||||
self._owner.close_tab,
|
||||
tab_id).htmx(target=f"#{self._id}-controller", swap="outerHTML")
|
||||
|
||||
def add_tab(self, label: str, component: Any, auto_increment=False):
|
||||
return (Command(f"{self._prefix}AddTab",
|
||||
"Add a new tab",
|
||||
self._owner.on_new_tab, label, component, auto_increment).
|
||||
htmx(target=f"#{self._id}-controller"))
|
||||
return Command(f"{self._prefix}AddTab",
|
||||
"Add a new tab",
|
||||
self._owner.on_new_tab,
|
||||
label,
|
||||
component,
|
||||
auto_increment).htmx(target=f"#{self._id}-controller", swap="outerHTML")
|
||||
|
||||
|
||||
class TabsManager(MultipleInstance):
|
||||
_tab_count = 0
|
||||
|
||||
def __init__(self, parent, _id=None):
|
||||
super().__init__(parent, _id=_id)
|
||||
self._tab_count = 0
|
||||
self._state = TabsManagerState(self)
|
||||
self.commands = Commands(self)
|
||||
self._boundaries = Boundaries()
|
||||
@@ -86,6 +93,7 @@ class TabsManager(MultipleInstance):
|
||||
get_attr=lambda x: x["label"],
|
||||
template=self._mk_tab_button,
|
||||
_id="-search")
|
||||
|
||||
logger.debug(f"TabsManager created with id: {self._id}")
|
||||
logger.debug(f" tabs : {self._get_ordered_tabs()}")
|
||||
logger.debug(f" active tab : {self._state.active_tab}")
|
||||
@@ -96,22 +104,36 @@ class TabsManager(MultipleInstance):
|
||||
def _get_ordered_tabs(self):
|
||||
return {tab_id: self._state.tabs.get(tab_id, None) for tab_id in self._state.tabs_order}
|
||||
|
||||
def _get_tab_content(self, tab_id):
|
||||
def _dynamic_get_content(self, tab_id):
|
||||
if tab_id not in self._state.tabs:
|
||||
return None
|
||||
return Div("Tab not found.")
|
||||
tab_config = self._state.tabs[tab_id]
|
||||
if tab_config["component_type"] is None:
|
||||
return None
|
||||
return Div("Tab content does not support serialization.")
|
||||
try:
|
||||
return InstancesManager.get(self._session, tab_config["component_id"])
|
||||
except Exception as e:
|
||||
logger.error(f"Error while retrieving tab content: {e}")
|
||||
return Div("Tab not found.")
|
||||
return Div("Failed to retrieve tab content.")
|
||||
|
||||
@staticmethod
|
||||
def _get_tab_count():
|
||||
res = TabsManager._tab_count
|
||||
TabsManager._tab_count += 1
|
||||
def _get_or_create_tab_content(self, tab_id):
|
||||
"""
|
||||
Get tab content from cache or create it.
|
||||
This method ensures content is always stored in raw form (not wrapped).
|
||||
|
||||
Args:
|
||||
tab_id: ID of the tab
|
||||
|
||||
Returns:
|
||||
Raw content component (not wrapped in Div)
|
||||
"""
|
||||
if tab_id not in self._state.ns_tabs_content:
|
||||
self._state.ns_tabs_content[tab_id] = self._dynamic_get_content(tab_id)
|
||||
return self._state.ns_tabs_content[tab_id]
|
||||
|
||||
def _get_tab_count(self):
|
||||
res = self._tab_count
|
||||
self._tab_count += 1
|
||||
return res
|
||||
|
||||
def on_new_tab(self, label: str, component: Any, auto_increment=False):
|
||||
@@ -120,20 +142,13 @@ class TabsManager(MultipleInstance):
|
||||
label = f"{label}_{self._get_tab_count()}"
|
||||
component = component or VisNetwork(self, nodes=vis_nodes, edges=vis_edges)
|
||||
|
||||
tab_id = self._tab_already_exists(label, component)
|
||||
if tab_id:
|
||||
return self.show_tab(tab_id)
|
||||
|
||||
tab_id = self.add_tab(label, component)
|
||||
return (
|
||||
self._mk_tabs_controller(),
|
||||
self._wrap_tab_content(self._mk_tab_content(tab_id, component)),
|
||||
self._mk_tabs_header_wrapper(True),
|
||||
)
|
||||
tab_id = self.create_tab(label, component)
|
||||
return self.show_tab(tab_id, oob=False)
|
||||
|
||||
def add_tab(self, label: str, component: Any, activate: bool = True) -> str:
|
||||
def create_tab(self, label: str, component: Any, activate: bool = True) -> str:
|
||||
"""
|
||||
Add a new tab or update an existing one with the same component type, ID and label.
|
||||
The tab is not yet sent to the client.
|
||||
|
||||
Args:
|
||||
label: Display label for the tab
|
||||
@@ -144,73 +159,52 @@ class TabsManager(MultipleInstance):
|
||||
tab_id: The UUID of the tab (new or existing)
|
||||
"""
|
||||
logger.debug(f"add_tab {label=}, component={component}, activate={activate}")
|
||||
# copy the state to avoid multiple database call
|
||||
state = self._state.copy()
|
||||
|
||||
# Extract component ID if the component has a get_id() method
|
||||
component_type, component_id = None, None
|
||||
if isinstance(component, BaseInstance):
|
||||
component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
|
||||
component_id = component.get_id()
|
||||
|
||||
# Check if a tab with the same component_type, component_id AND label already exists
|
||||
existing_tab_id = self._tab_already_exists(label, component)
|
||||
|
||||
if existing_tab_id:
|
||||
# Update existing tab (only the component instance in memory)
|
||||
tab_id = existing_tab_id
|
||||
state._tabs_content[tab_id] = component
|
||||
else:
|
||||
# Create new tab
|
||||
tab_id = str(uuid.uuid4())
|
||||
|
||||
# Add tab metadata to state
|
||||
state.tabs[tab_id] = {
|
||||
'id': tab_id,
|
||||
'label': label,
|
||||
'component_type': component_type,
|
||||
'component_id': component_id
|
||||
}
|
||||
|
||||
# Add tab to order
|
||||
state.tabs_order.append(tab_id)
|
||||
|
||||
# Store component in memory
|
||||
state._tabs_content[tab_id] = component
|
||||
|
||||
# Activate tab if requested
|
||||
if activate:
|
||||
state.active_tab = tab_id
|
||||
|
||||
# finally, update the state
|
||||
self._state.update(state)
|
||||
self._search.set_items(self._get_tab_list())
|
||||
|
||||
tab_id = self._tab_already_exists(label, component) or str(uuid.uuid4())
|
||||
self._add_or_update_tab(tab_id, label, component, activate)
|
||||
return tab_id
|
||||
|
||||
def show_tab(self, tab_id):
|
||||
def show_tab(self, tab_id, activate: bool = True, oob=True):
|
||||
"""
|
||||
Send the tab to the client if needed.
|
||||
If the tab was already sent, just update the active tab.
|
||||
:param tab_id:
|
||||
:param activate:
|
||||
:param oob: default=True so other control will not care of the target
|
||||
:return:
|
||||
"""
|
||||
logger.debug(f"show_tab {tab_id=}")
|
||||
if tab_id not in self._state.tabs:
|
||||
logger.debug(f" Tab not found.")
|
||||
return None
|
||||
|
||||
logger.debug(f" Tab label is: {self._state.tabs[tab_id]['label']}")
|
||||
self._state.active_tab = tab_id
|
||||
|
||||
if tab_id not in self._state._tabs_content:
|
||||
logger.debug(f" Content does not exist. Creating it.")
|
||||
content = self._get_tab_content(tab_id)
|
||||
if activate:
|
||||
self._state.active_tab = tab_id
|
||||
|
||||
# Get or create content (always stored in raw form)
|
||||
content = self._get_or_create_tab_content(tab_id)
|
||||
|
||||
if tab_id not in self._state.ns_tabs_sent_to_client:
|
||||
logger.debug(f" Content not in client memory. Sending it.")
|
||||
self._state.ns_tabs_sent_to_client.add(tab_id)
|
||||
tab_content = self._mk_tab_content(tab_id, content)
|
||||
self._state._tabs_content[tab_id] = tab_content
|
||||
return self._mk_tabs_controller(), self._wrap_tab_content(tab_content)
|
||||
return self._mk_tabs_controller(oob), self._mk_tabs_header_wrapper(), self._wrap_tab_content(tab_content)
|
||||
else:
|
||||
logger.debug(f" Content already exists. Just switch.")
|
||||
return self._mk_tabs_controller()
|
||||
logger.debug(f" Content already in client memory. Just switch.")
|
||||
return self._mk_tabs_controller(oob) # no new tab_id => header is already up to date
|
||||
|
||||
def switch_tab(self, tab_id, label, component, activate=True):
|
||||
def change_tab_content(self, tab_id, label, component, activate=True):
|
||||
logger.debug(f"switch_tab {label=}, component={component}, activate={activate}")
|
||||
|
||||
if tab_id not in self._state.tabs:
|
||||
logger.error(f" Tab {tab_id} not found. Cannot change its content.")
|
||||
return None
|
||||
|
||||
self._add_or_update_tab(tab_id, label, component, activate)
|
||||
return self.show_tab(tab_id) #
|
||||
self._state.ns_tabs_sent_to_client.discard(tab_id) # to make sure that the new content will be sent to the client
|
||||
return self.show_tab(tab_id, activate=activate, oob=True)
|
||||
|
||||
def close_tab(self, tab_id: str):
|
||||
"""
|
||||
@@ -220,10 +214,12 @@ class TabsManager(MultipleInstance):
|
||||
tab_id: ID of the tab to close
|
||||
|
||||
Returns:
|
||||
Self for chaining
|
||||
tuple: (controller, header_wrapper, content_to_remove) for HTMX swapping,
|
||||
or self if tab not found
|
||||
"""
|
||||
logger.debug(f"close_tab {tab_id=}")
|
||||
if tab_id not in self._state.tabs:
|
||||
logger.debug(f" Tab not found.")
|
||||
return self
|
||||
|
||||
# Copy state
|
||||
@@ -234,8 +230,12 @@ class TabsManager(MultipleInstance):
|
||||
state.tabs_order.remove(tab_id)
|
||||
|
||||
# Remove from content
|
||||
if tab_id in state._tabs_content:
|
||||
del state._tabs_content[tab_id]
|
||||
if tab_id in state.ns_tabs_content:
|
||||
del state.ns_tabs_content[tab_id]
|
||||
|
||||
# Remove from content sent
|
||||
if tab_id in state.ns_tabs_sent_to_client:
|
||||
state.ns_tabs_sent_to_client.remove(tab_id)
|
||||
|
||||
# If closing active tab, activate another one
|
||||
if state.active_tab == tab_id:
|
||||
@@ -249,7 +249,8 @@ class TabsManager(MultipleInstance):
|
||||
self._state.update(state)
|
||||
self._search.set_items(self._get_tab_list())
|
||||
|
||||
return self
|
||||
content_to_remove = Div(id=f"{self._id}-{tab_id}-content", hx_swap_oob=f"delete")
|
||||
return self._mk_tabs_controller(), self._mk_tabs_header_wrapper(), content_to_remove
|
||||
|
||||
def add_tab_btn(self):
|
||||
return mk.icon(tab_add24_regular,
|
||||
@@ -259,11 +260,12 @@ class TabsManager(MultipleInstance):
|
||||
None,
|
||||
True))
|
||||
|
||||
def _mk_tabs_controller(self):
|
||||
return Div(
|
||||
Div(id=f"{self._id}-controller", data_active_tab=f"{self._state.active_tab}"),
|
||||
Script(f'updateTabs("{self._id}-controller");'),
|
||||
)
|
||||
def _mk_tabs_controller(self, oob=False):
|
||||
return Div(id=f"{self._id}-controller",
|
||||
data_active_tab=f"{self._state.active_tab}",
|
||||
hx_on__after_settle=f'updateTabs("{self._id}-controller");',
|
||||
hx_swap_oob="true" if oob else None,
|
||||
)
|
||||
|
||||
def _mk_tabs_header_wrapper(self, oob=False):
|
||||
# Create visible tab buttons
|
||||
@@ -273,24 +275,20 @@ class TabsManager(MultipleInstance):
|
||||
if tab_id in self._state.tabs
|
||||
]
|
||||
|
||||
header_content = [*visible_tab_buttons]
|
||||
|
||||
return Div(
|
||||
Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"),
|
||||
Div(*visible_tab_buttons, cls="mf-tabs-header", id=f"{self._id}-header"),
|
||||
self._mk_show_tabs_menu(),
|
||||
id=f"{self._id}-header-wrapper",
|
||||
cls="mf-tabs-header-wrapper",
|
||||
hx_swap_oob="true" if oob else None
|
||||
)
|
||||
|
||||
def _mk_tab_button(self, tab_data: dict, in_dropdown: bool = False):
|
||||
def _mk_tab_button(self, tab_data: dict):
|
||||
"""
|
||||
Create a single tab button with its label and close button.
|
||||
|
||||
Args:
|
||||
tab_id: Unique identifier for the tab
|
||||
tab_data: Dictionary containing tab information (label, component_type, etc.)
|
||||
in_dropdown: Whether this tab is rendered in the dropdown menu
|
||||
|
||||
Returns:
|
||||
Button element representing the tab
|
||||
@@ -308,12 +306,10 @@ class TabsManager(MultipleInstance):
|
||||
command=self.commands.show_tab(tab_id)
|
||||
)
|
||||
|
||||
extra_cls = "mf-tab-in-dropdown" if in_dropdown else ""
|
||||
|
||||
return Div(
|
||||
tab_label,
|
||||
close_btn,
|
||||
cls=f"mf-tab-button {extra_cls} {'mf-tab-active' if is_active else ''}",
|
||||
cls=f"mf-tab-button {'mf-tab-active' if is_active else ''}",
|
||||
data_tab_id=tab_id,
|
||||
data_manager_id=self._id
|
||||
)
|
||||
@@ -325,15 +321,9 @@ class TabsManager(MultipleInstance):
|
||||
Returns:
|
||||
Div element containing the active tab content or empty container
|
||||
"""
|
||||
|
||||
if self._state.active_tab:
|
||||
active_tab = self._state.active_tab
|
||||
if active_tab in self._state._tabs_content:
|
||||
tab_content = self._state._tabs_content[active_tab]
|
||||
else:
|
||||
content = self._get_tab_content(active_tab)
|
||||
tab_content = self._mk_tab_content(active_tab, content)
|
||||
self._state._tabs_content[active_tab] = tab_content
|
||||
content = self._get_or_create_tab_content(self._state.active_tab)
|
||||
tab_content = self._mk_tab_content(self._state.active_tab, content)
|
||||
else:
|
||||
tab_content = self._mk_tab_content(None, None)
|
||||
|
||||
@@ -344,10 +334,13 @@ class TabsManager(MultipleInstance):
|
||||
)
|
||||
|
||||
def _mk_tab_content(self, tab_id: str, content):
|
||||
if tab_id is None:
|
||||
return Div("No Content", cls="mf-empty-content mf-tab-content hidden")
|
||||
|
||||
is_active = tab_id == self._state.active_tab
|
||||
return Div(
|
||||
content if content else Div("No Content", cls="mf-empty-content"),
|
||||
cls=f"mf-tab-content {'hidden' if not is_active else ''}", # ← ici
|
||||
cls=f"mf-tab-content {'hidden' if not is_active else ''}",
|
||||
id=f"{self._id}-{tab_id}-content",
|
||||
)
|
||||
|
||||
@@ -376,7 +369,7 @@ class TabsManager(MultipleInstance):
|
||||
if not isinstance(component, BaseInstance):
|
||||
return None
|
||||
|
||||
component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
|
||||
component_type = component.get_prefix()
|
||||
component_id = component.get_id()
|
||||
|
||||
if component_id is not None:
|
||||
@@ -397,7 +390,7 @@ class TabsManager(MultipleInstance):
|
||||
# Extract component ID if the component has a get_id() method
|
||||
component_type, component_id = None, None
|
||||
if isinstance(component, BaseInstance):
|
||||
component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
|
||||
component_type = component.get_prefix()
|
||||
component_id = component.get_id()
|
||||
|
||||
# Add tab metadata to state
|
||||
@@ -408,8 +401,12 @@ class TabsManager(MultipleInstance):
|
||||
'component_id': component_id
|
||||
}
|
||||
|
||||
# Add tab to order list
|
||||
if tab_id not in state.tabs_order:
|
||||
state.tabs_order.append(tab_id)
|
||||
|
||||
# Add the content
|
||||
state._tabs_content[tab_id] = component
|
||||
state.ns_tabs_content[tab_id] = component
|
||||
|
||||
# Activate tab if requested
|
||||
if activate:
|
||||
@@ -433,6 +430,7 @@ class TabsManager(MultipleInstance):
|
||||
self._mk_tabs_controller(),
|
||||
self._mk_tabs_header_wrapper(),
|
||||
self._mk_tab_content_wrapper(),
|
||||
Script(f'updateTabs("{self._id}-controller");'), # first time, run the script to initialize the tabs
|
||||
cls="mf-tabs-manager",
|
||||
id=self._id,
|
||||
)
|
||||
|
||||
@@ -110,6 +110,14 @@ class Regex(AttrPredicate):
|
||||
return re.match(self.value, actual) is not None
|
||||
|
||||
|
||||
class And(AttrPredicate):
|
||||
def __init__(self, *predicates):
|
||||
super().__init__(predicates)
|
||||
|
||||
def validate(self, actual):
|
||||
return all(p.validate(actual) for p in self.value)
|
||||
|
||||
|
||||
class ChildrenPredicate(Predicate):
|
||||
"""
|
||||
Predicate given as a child of an element.
|
||||
@@ -791,10 +799,6 @@ def find(ft, expected):
|
||||
for element in elements_to_search:
|
||||
all_matches.extend(_search_tree(element, expected))
|
||||
|
||||
# Raise error if nothing found
|
||||
if not all_matches:
|
||||
raise AssertionError(f"No element found for '{expected}'")
|
||||
|
||||
return all_matches
|
||||
|
||||
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import shutil
|
||||
|
||||
import pytest
|
||||
from fasthtml.components import *
|
||||
from fasthtml.xtend import Script
|
||||
from fasthtml.common import Div, Span
|
||||
|
||||
from myfasthtml.controls.TabsManager import TabsManager
|
||||
from myfasthtml.controls.VisNetwork import VisNetwork
|
||||
from myfasthtml.core.instances import InstancesManager
|
||||
from myfasthtml.test.matcher import matches, NoChildren
|
||||
from .conftest import session
|
||||
from myfasthtml.test.matcher import matches, find_one, find, Contains, TestIcon, TestScript, TestObject, DoesNotContain, \
|
||||
And, TestIconNotStr
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def tabs_manager(root_instance):
|
||||
"""Create a fresh TabsManager instance for each test."""
|
||||
shutil.rmtree(".myFastHtmlDb", ignore_errors=True)
|
||||
yield TabsManager(root_instance)
|
||||
|
||||
@@ -20,107 +21,736 @@ def tabs_manager(root_instance):
|
||||
|
||||
|
||||
class TestTabsManagerBehaviour:
|
||||
def test_tabs_manager_is_registered(self, session, tabs_manager):
|
||||
from_instance_manager = InstancesManager.get(session, tabs_manager.get_id())
|
||||
assert from_instance_manager == tabs_manager
|
||||
"""Tests for TabsManager behavior and logic."""
|
||||
|
||||
def test_i_can_add_tab(self, tabs_manager):
|
||||
tab_id = tabs_manager.add_tab("Tab1", Div("Content 1"))
|
||||
# =========================================================================
|
||||
# Initialization
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_create_tabs_manager(self, root_instance):
|
||||
"""Test that TabsManager can be created with default state."""
|
||||
tm = TabsManager(root_instance)
|
||||
|
||||
assert tm is not None
|
||||
assert tm.get_state().tabs == {}
|
||||
assert tm.get_state().tabs_order == []
|
||||
assert tm.get_state().active_tab is None
|
||||
assert tm.get_state().ns_tabs_content == {}
|
||||
assert tm.get_state().ns_tabs_sent_to_client == set()
|
||||
assert tm._tab_count == 0
|
||||
|
||||
# =========================================================================
|
||||
# Tab Creation
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_create_tab_with_simple_component(self, tabs_manager):
|
||||
"""Test creating a tab with a simple Div component."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
assert tab_id is not None
|
||||
assert tab_id in tabs_manager.get_state().tabs
|
||||
assert tabs_manager.get_state().tabs[tab_id]["label"] == "Tab1"
|
||||
assert tabs_manager.get_state().tabs[tab_id]["id"] == tab_id
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_type"] is None # Div is not BaseInstance
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_id"] is None # Div is not BaseInstance
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_type"] is None
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_id"] is None
|
||||
assert tabs_manager.get_state().tabs_order == [tab_id]
|
||||
assert tabs_manager.get_state().active_tab == tab_id
|
||||
|
||||
def test_i_can_add_multiple_tabs(self, tabs_manager):
|
||||
tab_id1 = tabs_manager.add_tab("Users", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.add_tab("User2", Div("Content 2"))
|
||||
def test_i_can_create_tab_with_base_instance(self, tabs_manager):
|
||||
"""Test creating a tab with a BaseInstance component (VisNetwork)."""
|
||||
vis_network = VisNetwork(tabs_manager, nodes=[], edges=[])
|
||||
tab_id = tabs_manager.create_tab("Network", vis_network)
|
||||
|
||||
assert tab_id is not None
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_type"] == vis_network.get_prefix()
|
||||
assert tabs_manager.get_state().tabs[tab_id]["component_id"] == vis_network.get_id()
|
||||
|
||||
def test_i_can_create_multiple_tabs(self, tabs_manager):
|
||||
"""Test creating multiple tabs maintains correct order and activation."""
|
||||
tab_id1 = tabs_manager.create_tab("Users", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("User2", Div("Content 2"))
|
||||
|
||||
assert len(tabs_manager.get_state().tabs) == 2
|
||||
assert tabs_manager.get_state().tabs_order == [tab_id1, tab_id2]
|
||||
assert tabs_manager.get_state().active_tab == tab_id2
|
||||
|
||||
def test_i_can_show_tab(self, tabs_manager):
|
||||
tab_id1 = tabs_manager.add_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.add_tab("Tab2", Div("Content 2"))
|
||||
def test_created_tab_is_activated_by_default(self, tabs_manager):
|
||||
"""Test that newly created tab becomes active by default."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
assert tabs_manager.get_state().active_tab == tab_id2 # last crated tab is active
|
||||
assert tabs_manager.get_state().active_tab == tab_id
|
||||
|
||||
def test_i_can_create_tab_without_activating(self, tabs_manager):
|
||||
"""Test creating a tab without activating it."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"), activate=False)
|
||||
|
||||
assert tab_id2 in tabs_manager.get_state().tabs
|
||||
assert tabs_manager.get_state().active_tab == tab_id1
|
||||
|
||||
# =========================================================================
|
||||
# Tab Activation
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_show_existing_tab(self, tabs_manager):
|
||||
"""Test showing an existing tab activates it."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
assert tabs_manager.get_state().active_tab == tab_id2
|
||||
|
||||
tabs_manager.show_tab(tab_id1)
|
||||
assert tabs_manager.get_state().active_tab == tab_id1
|
||||
|
||||
def test_i_can_show_tab_without_activating(self, tabs_manager):
|
||||
"""Test showing a tab without changing active tab."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
assert tabs_manager.get_state().active_tab == tab_id2
|
||||
|
||||
tabs_manager.show_tab(tab_id1, activate=False)
|
||||
assert tabs_manager.get_state().active_tab == tab_id2
|
||||
|
||||
def test_show_tab_returns_controller_only_when_already_sent(self, tabs_manager):
|
||||
"""Test that show_tab returns only controller when tab was already sent to client."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
# First call: tab not sent yet, returns controller + header + content
|
||||
result1 = tabs_manager.show_tab(tab_id, oob=False)
|
||||
assert len(result1) == 3 # controller, header, wrapped_content
|
||||
assert tab_id in tabs_manager.get_state().ns_tabs_sent_to_client
|
||||
|
||||
# Second call: tab already sent, returns only controller
|
||||
result2 = tabs_manager.show_tab(tab_id, oob=False)
|
||||
assert result2 is not None
|
||||
# Result2 is a single Div (controller), not a tuple
|
||||
assert hasattr(result2, 'tag') and result2.tag == 'div'
|
||||
|
||||
def test_i_cannot_show_nonexistent_tab(self, tabs_manager):
|
||||
"""Test that showing a nonexistent tab returns None."""
|
||||
result = tabs_manager.show_tab("nonexistent_id")
|
||||
|
||||
assert result is None
|
||||
|
||||
# =========================================================================
|
||||
# Tab Closing
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_close_tab(self, tabs_manager):
|
||||
tab_id1 = tabs_manager.add_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.add_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.add_tab("Tab3", Div("Content 3"))
|
||||
"""Test closing a tab removes it from state."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.create_tab("Tab3", Div("Content 3"))
|
||||
|
||||
tabs_manager.close_tab(tab_id2)
|
||||
|
||||
assert len(tabs_manager.get_state().tabs) == 2
|
||||
assert [tab_id for tab_id in tabs_manager.get_state().tabs] == [tab_id1, tab_id3]
|
||||
assert tab_id2 not in tabs_manager.get_state().tabs
|
||||
assert tabs_manager.get_state().tabs_order == [tab_id1, tab_id3]
|
||||
assert tabs_manager.get_state().active_tab == tab_id3 # last tab stays active
|
||||
assert tabs_manager.get_state().active_tab == tab_id3
|
||||
|
||||
def test_i_still_have_an_active_tab_after_close(self, tabs_manager):
|
||||
tab_id1 = tabs_manager.add_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.add_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.add_tab("Tab3", Div("Content 3"))
|
||||
def test_closing_active_tab_activates_first_remaining(self, tabs_manager):
|
||||
"""Test that closing the active tab activates the first remaining tab."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.create_tab("Tab3", Div("Content 3"))
|
||||
|
||||
tabs_manager.close_tab(tab_id3) # close the currently active tab
|
||||
assert tabs_manager.get_state().active_tab == tab_id1 # default to the first tab
|
||||
assert tabs_manager.get_state().active_tab == tab_id1
|
||||
|
||||
def test_closing_last_tab_sets_active_to_none(self, tabs_manager):
|
||||
"""Test that closing the last remaining tab sets active_tab to None."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
tabs_manager.close_tab(tab_id)
|
||||
|
||||
assert len(tabs_manager.get_state().tabs) == 0
|
||||
assert tabs_manager.get_state().active_tab is None
|
||||
|
||||
def test_close_tab_cleans_cache(self, tabs_manager):
|
||||
"""Test that closing a tab removes it from content cache."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
# Trigger cache population
|
||||
tabs_manager._get_or_create_tab_content(tab_id)
|
||||
assert tab_id in tabs_manager.get_state().ns_tabs_content
|
||||
|
||||
tabs_manager.close_tab(tab_id)
|
||||
|
||||
assert tab_id not in tabs_manager.get_state().ns_tabs_content
|
||||
|
||||
def test_close_tab_cleans_sent_to_client(self, tabs_manager):
|
||||
"""Test that closing a tab removes it from ns_tabs_sent_to_client."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
# Send tab to client
|
||||
tabs_manager.show_tab(tab_id)
|
||||
assert tab_id in tabs_manager.get_state().ns_tabs_sent_to_client
|
||||
|
||||
tabs_manager.close_tab(tab_id)
|
||||
|
||||
assert tab_id not in tabs_manager.get_state().ns_tabs_sent_to_client
|
||||
|
||||
def test_i_cannot_close_nonexistent_tab(self, tabs_manager):
|
||||
"""Test that closing a nonexistent tab returns self without error."""
|
||||
result = tabs_manager.close_tab("nonexistent_id")
|
||||
|
||||
assert result == tabs_manager
|
||||
|
||||
# =========================================================================
|
||||
# Content Management
|
||||
# =========================================================================
|
||||
|
||||
def test_cached_content_is_reused(self, tabs_manager):
|
||||
"""Test that cached content is returned without re-creation."""
|
||||
content = Div("Test Content")
|
||||
tab_id = tabs_manager.create_tab("Tab1", content)
|
||||
|
||||
# First call creates cache
|
||||
result1 = tabs_manager._get_or_create_tab_content(tab_id)
|
||||
|
||||
# Second call should return same object from cache
|
||||
result2 = tabs_manager._get_or_create_tab_content(tab_id)
|
||||
|
||||
assert result1 is result2
|
||||
|
||||
def test_dynamic_get_content_for_base_instance(self, tabs_manager):
|
||||
"""Test that _dynamic_get_content retrieves BaseInstance from InstancesManager."""
|
||||
vis_network = VisNetwork(tabs_manager, nodes=[], edges=[])
|
||||
tab_id = tabs_manager.create_tab("Network", vis_network)
|
||||
|
||||
# Get content dynamically
|
||||
result = tabs_manager._dynamic_get_content(tab_id)
|
||||
|
||||
assert result == vis_network
|
||||
|
||||
def test_dynamic_get_content_for_simple_component(self, tabs_manager):
|
||||
"""Test that _dynamic_get_content returns error message for non-BaseInstance."""
|
||||
content = Div("Simple content")
|
||||
tab_id = tabs_manager.create_tab("Tab1", content)
|
||||
|
||||
# Get content dynamically (should fail gracefully)
|
||||
result = tabs_manager._dynamic_get_content(tab_id)
|
||||
|
||||
# Should return error Div since Div is not serializable
|
||||
assert matches(result, Div('Tab content does not support serialization.'))
|
||||
|
||||
def test_dynamic_get_content_for_nonexistent_tab(self, tabs_manager):
|
||||
"""Test that _dynamic_get_content returns error for nonexistent tab."""
|
||||
result = tabs_manager._dynamic_get_content("nonexistent_id")
|
||||
|
||||
assert matches(result, Div('Tab not found.'))
|
||||
|
||||
# =========================================================================
|
||||
# Content Change
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_change_tab_content(self, tabs_manager):
|
||||
"""Test changing the content of an existing tab."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Original Content"))
|
||||
|
||||
new_content = Div("New Content")
|
||||
tabs_manager.change_tab_content(tab_id, "Updated Tab", new_content)
|
||||
|
||||
assert tabs_manager.get_state().tabs[tab_id]["label"] == "Updated Tab"
|
||||
assert tabs_manager.get_state().ns_tabs_content[tab_id] == new_content
|
||||
|
||||
def test_change_tab_content_invalidates_cache(self, tabs_manager):
|
||||
"""Test that changing tab content invalidates the sent_to_client cache."""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Original"))
|
||||
|
||||
# Send tab to client
|
||||
tabs_manager.show_tab(tab_id)
|
||||
assert tab_id in tabs_manager.get_state().ns_tabs_sent_to_client
|
||||
|
||||
# Change content
|
||||
tabs_manager.change_tab_content(tab_id, "Tab1", Div("New Content"))
|
||||
|
||||
# Cache should be invalidated (discard was called)
|
||||
# The show_tab inside change_tab_content will re-add it, but the test
|
||||
# verifies that discard was called by checking the behavior
|
||||
# Since show_tab is called after discard, tab will be in sent_to_client again
|
||||
# We verify the invalidation worked by checking the method was called
|
||||
# This is more of an integration test
|
||||
assert tab_id in tabs_manager.get_state().ns_tabs_sent_to_client
|
||||
|
||||
def test_i_cannot_change_content_of_nonexistent_tab(self, tabs_manager):
|
||||
"""Test that changing content of nonexistent tab returns None."""
|
||||
result = tabs_manager.change_tab_content("nonexistent", "Label", Div("Content"))
|
||||
|
||||
assert result is None
|
||||
|
||||
# =========================================================================
|
||||
# Auto-increment
|
||||
# =========================================================================
|
||||
|
||||
def test_on_new_tab_with_auto_increment(self, tabs_manager):
|
||||
"""Test that on_new_tab with auto_increment appends counter to label."""
|
||||
tabs_manager.on_new_tab("Untitled", None, auto_increment=True)
|
||||
tabs_manager.on_new_tab("Untitled", None, auto_increment=True)
|
||||
tabs_manager.on_new_tab("Untitled", None, auto_increment=True)
|
||||
|
||||
tabs = list(tabs_manager.get_state().tabs.values())
|
||||
assert tabs[0]["label"] == "Untitled_0"
|
||||
assert tabs[1]["label"] == "Untitled_1"
|
||||
assert tabs[2]["label"] == "Untitled_2"
|
||||
|
||||
def test_each_instance_has_independent_counter(self, root_instance):
|
||||
"""Test that each TabsManager instance has its own independent counter."""
|
||||
tm1 = TabsManager(root_instance, _id="tm1")
|
||||
tm2 = TabsManager(root_instance, _id="tm2")
|
||||
|
||||
tm1.on_new_tab("Tab", None, auto_increment=True)
|
||||
tm1.on_new_tab("Tab", None, auto_increment=True)
|
||||
|
||||
tm2.on_new_tab("Tab", None, auto_increment=True)
|
||||
|
||||
# tm1 should have Tab_0 and Tab_1
|
||||
tabs_tm1 = list(tm1.get_state().tabs.values())
|
||||
assert tabs_tm1[0]["label"] == "Tab_0"
|
||||
assert tabs_tm1[1]["label"] == "Tab_1"
|
||||
|
||||
# tm2 should have Tab_0 (independent counter)
|
||||
tabs_tm2 = list(tm2.get_state().tabs.values())
|
||||
assert tabs_tm2[0]["label"] == "Tab_0"
|
||||
|
||||
def test_auto_increment_uses_default_component_when_none(self, tabs_manager):
|
||||
"""Test that on_new_tab uses VisNetwork when component is None."""
|
||||
tabs_manager.on_new_tab("Network", None, auto_increment=False)
|
||||
|
||||
tab_id = tabs_manager.get_state().tabs_order[0]
|
||||
content = tabs_manager.get_state().ns_tabs_content[tab_id]
|
||||
|
||||
assert isinstance(content, VisNetwork)
|
||||
|
||||
# =========================================================================
|
||||
# Duplicate Detection
|
||||
# =========================================================================
|
||||
|
||||
def test_tab_already_exists_with_same_label_and_component(self, tabs_manager):
|
||||
"""Test that duplicate tab is detected and returns existing tab_id."""
|
||||
vis_network = VisNetwork(tabs_manager, nodes=[], edges=[])
|
||||
|
||||
tab_id1 = tabs_manager.create_tab("Network", vis_network)
|
||||
tab_id2 = tabs_manager.create_tab("Network", vis_network)
|
||||
|
||||
# Should return same tab_id
|
||||
assert tab_id1 == tab_id2
|
||||
assert len(tabs_manager.get_state().tabs) == 1
|
||||
|
||||
def test_tab_already_exists_returns_none_for_different_label(self, tabs_manager):
|
||||
"""Test that same component with different label creates new tab."""
|
||||
vis_network = VisNetwork(tabs_manager, nodes=[], edges=[])
|
||||
|
||||
tab_id1 = tabs_manager.create_tab("Network 1", vis_network)
|
||||
tab_id2 = tabs_manager.create_tab("Network 2", vis_network)
|
||||
|
||||
# Should create two different tabs
|
||||
assert tab_id1 != tab_id2
|
||||
assert len(tabs_manager.get_state().tabs) == 2
|
||||
|
||||
def test_tab_already_exists_returns_none_for_non_base_instance(self, tabs_manager):
|
||||
"""Test that Div components are never considered duplicates."""
|
||||
content = Div("Content")
|
||||
|
||||
tab_id1 = tabs_manager.create_tab("Tab", content)
|
||||
tab_id2 = tabs_manager.create_tab("Tab", content)
|
||||
|
||||
# Should create two different tabs (Div is not BaseInstance)
|
||||
assert tab_id1 != tab_id2
|
||||
assert len(tabs_manager.get_state().tabs) == 2
|
||||
|
||||
# =========================================================================
|
||||
# Edge Cases
|
||||
# =========================================================================
|
||||
|
||||
def test_get_ordered_tabs_respects_order(self, tabs_manager):
|
||||
"""Test that _get_ordered_tabs returns tabs in correct order."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.create_tab("Tab3", Div("Content 3"))
|
||||
|
||||
ordered = tabs_manager._get_ordered_tabs()
|
||||
|
||||
assert list(ordered.keys()) == [tab_id1, tab_id2, tab_id3]
|
||||
|
||||
def test_get_tab_list_returns_only_existing_tabs(self, tabs_manager):
|
||||
"""Test that _get_tab_list is robust to inconsistent state."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
# Manually corrupt state (tab_id in order but not in tabs dict)
|
||||
tabs_manager._state.tabs_order.append("fake_id")
|
||||
|
||||
tab_list = tabs_manager._get_tab_list()
|
||||
|
||||
# Should only return existing tabs
|
||||
assert len(tab_list) == 2
|
||||
assert all(tab["id"] in [tab_id1, tab_id2] for tab in tab_list)
|
||||
|
||||
def test_state_update_propagates_to_search(self, tabs_manager):
|
||||
"""Test that state updates propagate to the Search component."""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
|
||||
# Search should have 1 item
|
||||
assert len(tabs_manager._search.get_items()) == 1
|
||||
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
# Search should have 2 items
|
||||
assert len(tabs_manager._search.get_items()) == 2
|
||||
|
||||
tabs_manager.close_tab(tab_id1)
|
||||
|
||||
# Search should have 1 item again
|
||||
assert len(tabs_manager._search.get_items()) == 1
|
||||
|
||||
def test_multiple_tabs_managers_in_same_session(self, root_instance):
|
||||
"""Test that multiple TabsManager instances can coexist in same session."""
|
||||
tm1 = TabsManager(root_instance, _id="tm1")
|
||||
tm2 = TabsManager(root_instance, _id="tm2")
|
||||
|
||||
tm1.create_tab("Tab1", Div("Content 1"))
|
||||
tm2.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
assert len(tm1.get_state().tabs) == 1
|
||||
assert len(tm2.get_state().tabs) == 1
|
||||
assert tm1.get_id() != tm2.get_id()
|
||||
|
||||
|
||||
class TestTabsManagerRender:
|
||||
def test_i_can_render_when_no_tabs(self, tabs_manager):
|
||||
res = tabs_manager.render()
|
||||
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(id=f"{tabs_manager.get_id()}-controller"),
|
||||
Script(f'updateTabs("{tabs_manager.get_id()}-controller");'),
|
||||
),
|
||||
Div(
|
||||
Div(NoChildren(), id=f"{tabs_manager.get_id()}-header"),
|
||||
id=f"{tabs_manager.get_id()}-header-wrapper"
|
||||
),
|
||||
Div(
|
||||
Div(id=f"{tabs_manager.get_id()}-None-content"),
|
||||
id=f"{tabs_manager.get_id()}-content-wrapper"
|
||||
),
|
||||
id=tabs_manager.get_id(),
|
||||
)
|
||||
|
||||
assert matches(res, expected)
|
||||
"""Tests for TabsManager HTML rendering."""
|
||||
|
||||
def test_i_can_render_when_multiple_tabs(self, tabs_manager):
|
||||
tabs_manager.add_tab("Users1", Div("Content 1"))
|
||||
tabs_manager.add_tab("Users2", Div("Content 2"))
|
||||
tabs_manager.add_tab("Users3", Div("Content 3"))
|
||||
res = tabs_manager.render()
|
||||
|
||||
@pytest.fixture
|
||||
def tabs_manager(self, root_instance):
|
||||
"""Create a fresh TabsManager instance for render tests."""
|
||||
shutil.rmtree(".myFastHtmlDb", ignore_errors=True)
|
||||
tm = TabsManager(root_instance)
|
||||
yield tm
|
||||
InstancesManager.reset()
|
||||
shutil.rmtree(".myFastHtmlDb", ignore_errors=True)
|
||||
|
||||
# =========================================================================
|
||||
# Controller
|
||||
# =========================================================================
|
||||
|
||||
def test_i_can_render_tabs_manager_with_no_tabs(self, tabs_manager):
|
||||
"""Test that TabsManager renders with no tabs."""
|
||||
html = tabs_manager.render()
|
||||
expected = Div(
|
||||
Div(
|
||||
Div(id=f"{tabs_manager.get_id()}-controller"),
|
||||
Script(f'updateTabs("{tabs_manager.get_id()}-controller");'),
|
||||
),
|
||||
Div(
|
||||
Div(
|
||||
Div(), # tab_button
|
||||
Div(), # tab_button
|
||||
Div(), # tab_button
|
||||
id=f"{tabs_manager.get_id()}-header"
|
||||
),
|
||||
id=f"{tabs_manager.get_id()}-header-wrapper"
|
||||
),
|
||||
Div(
|
||||
Div("Content 3"), # active tab content
|
||||
# Lasy loading for the other contents
|
||||
id=f"{tabs_manager.get_id()}-content-wrapper"
|
||||
),
|
||||
Div(id=f"{tabs_manager.get_id()}-controller"), # controller
|
||||
Div(id=f"{tabs_manager.get_id()}-header-wrapper"), # header
|
||||
Div(id=f"{tabs_manager.get_id()}-content-wrapper"), # active content
|
||||
id=tabs_manager.get_id(),
|
||||
)
|
||||
assert matches(res, expected)
|
||||
|
||||
assert matches(html, expected)
|
||||
|
||||
def test_controller_has_correct_id_and_attributes(self, tabs_manager):
|
||||
"""Test that controller has correct ID, data attribute, and HTMX script.
|
||||
|
||||
Why these elements matter:
|
||||
- id: Required for HTMX targeting in commands
|
||||
- data_active_tab: Stores active tab ID for JavaScript access
|
||||
- hx_on__after_settle: Triggers updateTabs() after HTMX swap completes
|
||||
"""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("Content"))
|
||||
controller = tabs_manager._mk_tabs_controller(oob=False)
|
||||
|
||||
expected = Div(
|
||||
id=f"{tabs_manager.get_id()}-controller",
|
||||
data_active_tab=tab_id,
|
||||
hx_on__after_settle=f'updateTabs("{tabs_manager.get_id()}-controller");'
|
||||
)
|
||||
|
||||
assert matches(controller, expected)
|
||||
|
||||
def test_controller_with_oob_false(self, tabs_manager):
|
||||
"""Test that controller has no swap attribute when oob=False.
|
||||
|
||||
Why this matters:
|
||||
- hx_swap_oob controls whether element swaps out-of-band
|
||||
- When False, element swaps into target specified in command
|
||||
"""
|
||||
controller = tabs_manager._mk_tabs_controller(oob=False)
|
||||
|
||||
# Controller should not have hx_swap_oob attribute
|
||||
assert not hasattr(controller, 'hx_swap_oob') or controller.attrs.get('hx_swap_oob') is None
|
||||
|
||||
def test_controller_with_oob_true(self, tabs_manager):
|
||||
"""Test that controller has swap attribute when oob=True.
|
||||
|
||||
Why this matters:
|
||||
- hx_swap_oob="true" enables out-of-band swapping
|
||||
- Allows updating controller independently of main target
|
||||
"""
|
||||
controller = tabs_manager._mk_tabs_controller(oob=True)
|
||||
|
||||
expected = Div(hx_swap_oob="true")
|
||||
assert matches(controller, expected)
|
||||
|
||||
# =========================================================================
|
||||
# Header
|
||||
# =========================================================================
|
||||
|
||||
def test_header_wrapper_with_no_tabs(self, tabs_manager):
|
||||
"""Test that header wrapper renders empty when no tabs exist.
|
||||
|
||||
Why these elements matter:
|
||||
- id: Required for targeting header in updates
|
||||
- cls: Provides base styling for header
|
||||
- Empty header div: Shows no tabs are present
|
||||
- Search menu: Always present for adding tabs
|
||||
"""
|
||||
header = tabs_manager._mk_tabs_header_wrapper(oob=False)
|
||||
|
||||
# Should have no children (no tabs)
|
||||
tab_buttons = find(header, Div(cls=Contains("mf-tab-button")))
|
||||
assert len(tab_buttons) == 0, "Header should contain no tab buttons when empty"
|
||||
|
||||
def test_header_wrapper_with_multiple_tabs(self, tabs_manager):
|
||||
"""Test that header wrapper renders all tab buttons.
|
||||
|
||||
Why these elements matter:
|
||||
- Multiple Div elements: Each represents a tab button
|
||||
- Order preservation: Tabs must appear in creation order
|
||||
- cls mf-tab-button: Identifies tab buttons for styling/selection
|
||||
"""
|
||||
tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
tabs_manager.create_tab("Tab3", Div("Content 3"))
|
||||
|
||||
header = tabs_manager._mk_tabs_header_wrapper(oob=False)
|
||||
|
||||
# Should have 3 tab buttons
|
||||
tab_buttons = find(header, Div(cls=Contains("mf-tab-button")))
|
||||
assert len(tab_buttons) == 3, "Header should contain exactly 3 tab buttons"
|
||||
|
||||
def test_header_wrapper_contains_search_menu(self, tabs_manager):
|
||||
"""Test that header wrapper contains the search menu dropdown.
|
||||
|
||||
Why these elements matter:
|
||||
- dropdown: DaisyUI dropdown container for tab search
|
||||
- dropdown-end: Positions dropdown at end of header
|
||||
- TestIcon for tabs icon: Visual indicator for menu
|
||||
- Search component: Provides tab search functionality
|
||||
"""
|
||||
header = tabs_manager._mk_tabs_header_wrapper(oob=False)
|
||||
|
||||
# Find dropdown menu
|
||||
dropdown = find_one(header, Div(cls=Contains("dropdown", "dropdown-end")))
|
||||
|
||||
# Should contain tabs icon
|
||||
icon = find_one(dropdown, TestIcon("tabs24_regular"))
|
||||
assert icon is not None, "Dropdown should contain tabs icon"
|
||||
|
||||
# Should contain Search component
|
||||
search = find_one(dropdown, TestObject(tabs_manager._search.__class__))
|
||||
assert search is not None, "Dropdown should contain Search component"
|
||||
|
||||
# =========================================================================
|
||||
# Tab Button
|
||||
# =========================================================================
|
||||
|
||||
def test_tab_button_for_active_tab(self, tabs_manager):
|
||||
"""Test that active tab button has the active class.
|
||||
|
||||
Why these elements matter:
|
||||
- cls mf-tab-active: Highlights the currently active tab
|
||||
- data_tab_id: Links button to specific tab
|
||||
- data_manager_id: Links button to TabsManager instance
|
||||
"""
|
||||
tab_id = tabs_manager.create_tab("Active Tab", Div("Content"))
|
||||
tab_data = tabs_manager.get_state().tabs[tab_id]
|
||||
|
||||
button = tabs_manager._mk_tab_button(tab_data)
|
||||
|
||||
expected = Div(
|
||||
cls=Contains("mf-tab-button", "mf-tab-active"),
|
||||
data_tab_id=tab_id,
|
||||
data_manager_id=tabs_manager.get_id()
|
||||
)
|
||||
|
||||
assert matches(button, expected)
|
||||
|
||||
def test_tab_button_for_inactive_tab(self, tabs_manager):
|
||||
"""Test that inactive tab button does not have active class.
|
||||
|
||||
Why these elements matter:
|
||||
- cls without mf-tab-active: Indicates tab is not active
|
||||
- Visual distinction: User can see which tab is selected
|
||||
"""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
# tab_id1 is now inactive
|
||||
tab_data = tabs_manager.get_state().tabs[tab_id1]
|
||||
button = tabs_manager._mk_tab_button(tab_data)
|
||||
|
||||
expected = Div(
|
||||
cls=And(DoesNotContain("mf-tab-active"), Contains("mf-tab-button")),
|
||||
data_tab_id=tab_id1,
|
||||
data_manager_id=tabs_manager.get_id()
|
||||
)
|
||||
|
||||
assert matches(button, expected)
|
||||
|
||||
def test_tab_button_has_label_and_close_icon(self, tabs_manager):
|
||||
"""Test that tab button contains label and close icon.
|
||||
|
||||
Why these elements matter:
|
||||
- Label Span: Displays tab name
|
||||
- Close icon: Allows user to close the tab
|
||||
- cls mf-tab-label: Styles the label text
|
||||
- cls mf-tab-close-btn: Styles the close button
|
||||
"""
|
||||
tab_id = tabs_manager.create_tab("My Tab", Div("Content"))
|
||||
tab_data = tabs_manager.get_state().tabs[tab_id]
|
||||
|
||||
button = tabs_manager._mk_tab_button(tab_data)
|
||||
|
||||
expected = Div(
|
||||
Span("My Tab", cls=Contains("mf-tab-label")),
|
||||
Span(TestIconNotStr("dismiss_circle16_regular"), cls=Contains("mf-tab-close-btn")),
|
||||
)
|
||||
|
||||
assert matches(button, expected)
|
||||
|
||||
# =========================================================================
|
||||
# Content
|
||||
# =========================================================================
|
||||
|
||||
def test_content_wrapper_when_no_active_tab(self, tabs_manager):
|
||||
"""Test that content wrapper shows 'No Content' when no tab is active.
|
||||
|
||||
Why these elements matter:
|
||||
- id content-wrapper: Container for all tab contents
|
||||
- 'No Content' message: Informs user no tab is selected
|
||||
- cls hidden: Hides empty content by default
|
||||
"""
|
||||
wrapper = tabs_manager._mk_tab_content_wrapper()
|
||||
|
||||
# Should contain "No Content" message
|
||||
content = find_one(wrapper, Div(cls=Contains("mf-empty-content")))
|
||||
assert "No Content" in str(content)
|
||||
|
||||
def test_content_wrapper_when_tab_active(self, tabs_manager):
|
||||
"""Test that content wrapper shows active tab content.
|
||||
|
||||
Why these elements matter:
|
||||
- Active tab content is visible
|
||||
- Content is wrapped in mf-tab-content div
|
||||
- Correct tab ID in content div ID
|
||||
"""
|
||||
tab_id = tabs_manager.create_tab("Tab1", Div("My Content"))
|
||||
|
||||
wrapper = tabs_manager._mk_tab_content_wrapper()
|
||||
|
||||
# global view from the wrapper
|
||||
expected = Div(
|
||||
Div(), # tab content, tested just after
|
||||
id=f"{tabs_manager.get_id()}-content-wrapper",
|
||||
cls=Contains("mf-tab-content-wrapper"),
|
||||
)
|
||||
assert matches(wrapper, expected)
|
||||
|
||||
# check if the content is present
|
||||
tab_content = find_one(wrapper, Div(id=f"{tabs_manager.get_id()}-{tab_id}-content"))
|
||||
expected = Div(
|
||||
Div("My Content"), # <= content
|
||||
cls=Contains("mf-tab-content"),
|
||||
)
|
||||
|
||||
assert matches(tab_content, expected)
|
||||
|
||||
def test_tab_content_for_active_tab(self, tabs_manager):
|
||||
"""Test that active tab content does not have hidden class.
|
||||
|
||||
Why these elements matter:
|
||||
- No 'hidden' class: Content is visible to user
|
||||
- Correct content ID: Links to specific tab
|
||||
"""
|
||||
content_div = Div("Test Content")
|
||||
tab_id = tabs_manager.create_tab("Tab1", content_div)
|
||||
|
||||
tab_content_wrapper = tabs_manager._mk_tab_content(tab_id, content_div)
|
||||
tab_content = find_one(tab_content_wrapper, Div(id=f"{tabs_manager.get_id()}-{tab_id}-content"))
|
||||
|
||||
# Should not have 'hidden' in classes
|
||||
classes = tab_content.attrs.get('class', '')
|
||||
assert 'hidden' not in classes
|
||||
assert 'mf-tab-content' in classes
|
||||
|
||||
def test_tab_content_for_inactive_tab(self, tabs_manager):
|
||||
"""Test that inactive tab content has hidden class.
|
||||
|
||||
Why these elements matter:
|
||||
- 'hidden' class: Hides inactive tab content
|
||||
- Content still in DOM: Enables fast tab switching
|
||||
"""
|
||||
tab_id1 = tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tab_id2 = tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
|
||||
# tab_id1 is now inactive
|
||||
content_div = Div("Content 1")
|
||||
tab_content = tabs_manager._mk_tab_content(tab_id1, content_div)
|
||||
|
||||
# Should have 'hidden' class
|
||||
expected = Div(cls=Contains("hidden"))
|
||||
assert matches(tab_content, expected)
|
||||
|
||||
# =========================================================================
|
||||
# Complete Render
|
||||
# =========================================================================
|
||||
|
||||
def test_complete_render_with_no_tabs(self, tabs_manager):
|
||||
"""Test complete render structure when no tabs exist.
|
||||
|
||||
Why these elements matter:
|
||||
- cls mf-tabs-manager: Root container class for styling
|
||||
- Controller: HTMX control and state management
|
||||
- Header wrapper: Tab buttons container (empty)
|
||||
- Content wrapper: Tab content container (shows 'No Content')
|
||||
- Script: Initializes tabs on first render
|
||||
"""
|
||||
render = tabs_manager.render()
|
||||
|
||||
# Extract main elements
|
||||
controller = find_one(render, Div(id=f"{tabs_manager.get_id()}-controller"))
|
||||
header = find_one(render, Div(id=f"{tabs_manager.get_id()}-header-wrapper"))
|
||||
content = find_one(render, Div(id=f"{tabs_manager.get_id()}-content-wrapper"))
|
||||
script = find_one(render, TestScript(f'updateTabs("{tabs_manager.get_id()}-controller")'))
|
||||
|
||||
assert controller is not None, "Render should contain controller"
|
||||
assert header is not None, "Render should contain header wrapper"
|
||||
assert content is not None, "Render should contain content wrapper"
|
||||
assert script is not None, "Render should contain initialization script"
|
||||
|
||||
def test_complete_render_with_multiple_tabs(self, tabs_manager):
|
||||
"""Test complete render structure with multiple tabs.
|
||||
|
||||
Why these elements matter:
|
||||
- 3 tab buttons: One for each created tab
|
||||
- Active tab content visible: Shows current tab content
|
||||
- Inactive tabs hidden: Lazy-loaded on activation
|
||||
- Structure consistency: All components present
|
||||
"""
|
||||
tabs_manager.create_tab("Tab1", Div("Content 1"))
|
||||
tabs_manager.create_tab("Tab2", Div("Content 2"))
|
||||
tab_id3 = tabs_manager.create_tab("Tab3", Div("Content 3"))
|
||||
|
||||
render = tabs_manager.render()
|
||||
|
||||
# Find header
|
||||
header_inner = find_one(render, Div(id=f"{tabs_manager.get_id()}-header"))
|
||||
|
||||
# Should have 3 tab buttons
|
||||
tab_buttons = find(header_inner, Div(cls=Contains("mf-tab-button")))
|
||||
assert len(tab_buttons) == 3, "Render should contain exactly 3 tab buttons"
|
||||
|
||||
# Content wrapper should show active tab (tab3)
|
||||
active_content = find_one(render, Div(id=f"{tabs_manager.get_id()}-{tab_id3}-content"))
|
||||
|
||||
expected = Div(Div("Content 3"), cls=Contains("mf-tab-content"))
|
||||
assert matches(active_content, expected), "Active tab content should be visible"
|
||||
|
||||
@@ -74,8 +74,8 @@ def test_i_can_manage_notstr_success_path(ft, to_search, expected):
|
||||
(NotStr("hello my friend"), TestObject(NotStr, s="hello")),
|
||||
])
|
||||
def test_test_i_can_manage_notstr_failure_path(ft, to_search):
|
||||
with pytest.raises(AssertionError):
|
||||
find(ft, to_search)
|
||||
res = find(ft, to_search)
|
||||
assert res == []
|
||||
|
||||
|
||||
@pytest.mark.parametrize('ft, expected', [
|
||||
@@ -85,5 +85,4 @@ def test_test_i_can_manage_notstr_failure_path(ft, to_search):
|
||||
(Div(id="id2"), Div(id="id1")),
|
||||
])
|
||||
def test_i_cannot_find(ft, expected):
|
||||
with pytest.raises(AssertionError):
|
||||
find(expected, ft)
|
||||
assert find(expected, ft) == []
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import pytest
|
||||
from fastcore.basics import NotStr
|
||||
from fasthtml.components import *
|
||||
|
||||
from myfasthtml.controls.helpers import mk
|
||||
from myfasthtml.core.commands import Command
|
||||
from myfasthtml.icons.fluent_p3 import add20_regular
|
||||
from myfasthtml.test.matcher import matches, StartsWith, Contains, DoesNotContain, Empty, ErrorOutput, \
|
||||
ErrorComparisonOutput, AttributeForbidden, AnyValue, NoChildren, TestObject, Skip, DoNotCheck, TestIcon, HasHtmx
|
||||
from myfasthtml.test.matcher import *
|
||||
from myfasthtml.test.testclient import MyFT
|
||||
|
||||
|
||||
@@ -468,3 +466,16 @@ class TestPredicates:
|
||||
c = Command("c", "testing has_htmx", None)
|
||||
c.bind_ft(div)
|
||||
assert HasHtmx(command=c).validate(div)
|
||||
|
||||
def test_i_can_use_and(self):
|
||||
contains1 = Contains("value1")
|
||||
contains2 = Contains("value2")
|
||||
not_contains1 = DoesNotContain("value1")
|
||||
not_contains2 = DoesNotContain("value2")
|
||||
|
||||
assert And(contains1, contains2).validate("value1 value2")
|
||||
assert And(contains1, not_contains2).validate("value1")
|
||||
assert And(not_contains1, contains2).validate("value2")
|
||||
assert And(not_contains1, not_contains2).validate("value3")
|
||||
|
||||
assert not And(contains1, not_contains2).validate("value2")
|
||||
|
||||
Reference in New Issue
Block a user