mirror of
https://github.com/django-components/django-components.git
synced 2025-08-04 06:18:17 +00:00
feat: on_slot_rendered extension hook + refactor debug highlight as extension (#1209)
* feat: on_slot_rendered extension hook + refactor debug highlight as extension * refactor: fix whitespace in test output
This commit is contained in:
Juro Oravec
GitHub
parent
223fc2c68c
commit
6ff2d78a2f
12 changed files with 560 additions and 77 deletions
|
|
@ -1,14 +1,60 @@
|
|||
from django_components.util.component_highlight import apply_component_highlight, COLORS
|
||||
from django.template import Context, Template
|
||||
from pytest_django.asserts import assertHTMLEqual
|
||||
|
||||
from django_components import Component, register, types
|
||||
from django_components.extensions.debug_highlight import apply_component_highlight, COLORS
|
||||
from django_components.testing import djc_test
|
||||
from .testutils import setup_test_config
|
||||
|
||||
setup_test_config({"autodiscover": False})
|
||||
|
||||
|
||||
def _prepare_template() -> Template:
|
||||
@register("inner")
|
||||
class InnerComponent(Component):
|
||||
template: types.django_html = """
|
||||
{% load component_tags %}
|
||||
<div class="inner">
|
||||
<div>
|
||||
1: {% slot "content" default / %}
|
||||
</div>
|
||||
<div>
|
||||
2: {% slot "content" default / %}
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
@register("outer")
|
||||
class OuterComponent(Component):
|
||||
template: types.django_html = """
|
||||
{% load component_tags %}
|
||||
<div class="outer">
|
||||
{% component "inner" %}
|
||||
{{ content }}
|
||||
{% endcomponent %}
|
||||
</div>
|
||||
"""
|
||||
|
||||
def get_template_data(self, args, kwargs, slots, context):
|
||||
return {
|
||||
"content": kwargs["content"],
|
||||
}
|
||||
|
||||
template_str: types.django_html = """
|
||||
{% load component_tags %}
|
||||
{% for item in items %}
|
||||
<div class="item">
|
||||
{% component "outer" content=item / %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
"""
|
||||
template = Template(template_str)
|
||||
return template
|
||||
|
||||
|
||||
@djc_test
|
||||
class TestComponentHighlight:
|
||||
def test_component_highlight(self):
|
||||
def test_component_highlight_fn(self):
|
||||
# Test component highlighting
|
||||
test_html = "<div>Test content</div>"
|
||||
component_name = "TestComponent"
|
||||
|
|
@ -22,7 +68,7 @@ class TestComponentHighlight:
|
|||
assert COLORS["component"].text_color in result
|
||||
assert COLORS["component"].border_color in result
|
||||
|
||||
def test_slot_highlight(self):
|
||||
def test_slot_highlight_fn(self):
|
||||
# Test slot highlighting
|
||||
test_html = "<span>Slot content</span>"
|
||||
slot_name = "content-slot"
|
||||
|
|
@ -35,3 +81,213 @@ class TestComponentHighlight:
|
|||
# Check that the slot colors are used
|
||||
assert COLORS["slot"].text_color in result
|
||||
assert COLORS["slot"].border_color in result
|
||||
|
||||
@djc_test(components_settings={"debug_highlight_components": True})
|
||||
def test_component_highlight_extension(self):
|
||||
template = _prepare_template()
|
||||
rendered = template.render(Context({"items": [1, 2]}))
|
||||
|
||||
expected = """
|
||||
<div class="item">
|
||||
<style>
|
||||
.component-highlight-a1bc45::before {
|
||||
content: "outer (ca1bc3f): ";
|
||||
font-weight: bold;
|
||||
color: #2f14bb;
|
||||
}
|
||||
</style>
|
||||
<div class="component-highlight-a1bc45" style="border: 1px solid blue">
|
||||
<div class="outer" data-djc-id-ca1bc3f="">
|
||||
<style>
|
||||
.component-highlight-a1bc44::before {
|
||||
content: "inner (ca1bc41): ";
|
||||
font-weight: bold;
|
||||
color: #2f14bb;
|
||||
}
|
||||
</style>
|
||||
<div class="component-highlight-a1bc44" style="border: 1px solid blue">
|
||||
<div class="inner" data-djc-id-ca1bc41="">
|
||||
<div>
|
||||
1: 1
|
||||
</div>
|
||||
<div>
|
||||
2: 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<style>
|
||||
.component-highlight-a1bc49::before {
|
||||
content: "outer (ca1bc46): ";
|
||||
font-weight: bold;
|
||||
color: #2f14bb;
|
||||
}
|
||||
</style>
|
||||
<div class="component-highlight-a1bc49" style="border: 1px solid blue">
|
||||
<div class="outer" data-djc-id-ca1bc46="">
|
||||
<style>
|
||||
.component-highlight-a1bc48::before {
|
||||
content: "inner (ca1bc47): ";
|
||||
font-weight: bold;
|
||||
color: #2f14bb;
|
||||
}
|
||||
</style>
|
||||
<div class="component-highlight-a1bc48" style="border: 1px solid blue">
|
||||
<div class="inner" data-djc-id-ca1bc47="">
|
||||
<div>
|
||||
1: 2
|
||||
</div>
|
||||
<div>
|
||||
2: 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
assertHTMLEqual(rendered, expected)
|
||||
|
||||
@djc_test(components_settings={"debug_highlight_slots": True})
|
||||
def test_slot_highlight_extension(self):
|
||||
template = _prepare_template()
|
||||
rendered = template.render(Context({"items": [1, 2]}))
|
||||
|
||||
expected = """
|
||||
<div class="item">
|
||||
<div class="outer" data-djc-id-ca1bc3f="">
|
||||
<div class="inner" data-djc-id-ca1bc41="">
|
||||
<div>
|
||||
1:
|
||||
<style>
|
||||
.slot-highlight-a1bc44::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc44" style="border: 1px solid #e40c0c">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
2:
|
||||
<style>
|
||||
.slot-highlight-a1bc45::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc45" style="border: 1px solid #e40c0c">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="outer" data-djc-id-ca1bc46="">
|
||||
<div class="inner" data-djc-id-ca1bc47="">
|
||||
<div>
|
||||
1:
|
||||
<style>
|
||||
.slot-highlight-a1bc48::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc48" style="border: 1px solid #e40c0c">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
2:
|
||||
<style>
|
||||
.slot-highlight-a1bc49::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc49" style="border: 1px solid #e40c0c">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
assertHTMLEqual(rendered, expected)
|
||||
|
||||
def test_highlight_on_component_class(self):
|
||||
@register("inner")
|
||||
class InnerComponent(Component):
|
||||
template: types.django_html = """
|
||||
{% load component_tags %}
|
||||
<div class="inner">
|
||||
<div>
|
||||
1: {% slot "content" default / %}
|
||||
</div>
|
||||
<div>
|
||||
2: {% slot "content" default / %}
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
class DebugHighlight:
|
||||
highlight_components = True
|
||||
highlight_slots = True
|
||||
|
||||
template = Template("""
|
||||
{% load component_tags %}
|
||||
{% component "inner" %}
|
||||
{{ content }}
|
||||
{% endcomponent %}
|
||||
""")
|
||||
rendered = template.render(Context({"content": "Hello, world!"}))
|
||||
|
||||
expected = """
|
||||
<style>
|
||||
.component-highlight-a1bc44::before {
|
||||
content: "inner (ca1bc3f): ";
|
||||
font-weight: bold;
|
||||
color: #2f14bb;
|
||||
}
|
||||
</style>
|
||||
<div class="component-highlight-a1bc44" style="border: 1px solid blue">
|
||||
<div class="inner" data-djc-id-ca1bc3f="">
|
||||
<div>
|
||||
1:
|
||||
<style>
|
||||
.slot-highlight-a1bc42::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc42" style="border: 1px solid #e40c0c">
|
||||
Hello, world!
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
2:
|
||||
<style>
|
||||
.slot-highlight-a1bc43::before {
|
||||
content: "InnerComponent - content: ";
|
||||
font-weight: bold;
|
||||
color: #bb1414;
|
||||
}
|
||||
</style>
|
||||
<div class="slot-highlight-a1bc43" style="border: 1px solid #e40c0c">
|
||||
Hello, world!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
assertHTMLEqual(rendered, expected)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue