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 %}
1: {% slot "content" default / %}
2: {% slot "content" default / %}
"""
@register("outer")
class OuterComponent(Component):
template: types.django_html = """
{% load component_tags %}
{% component "inner" %}
{{ content }}
{% endcomponent %}
"""
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 %}
{% component "outer" content=item / %}
{% endfor %}
"""
template = Template(template_str)
return template
@djc_test
class TestComponentHighlight:
def test_component_highlight_fn(self):
# Test component highlighting
test_html = "Test content
"
component_name = "TestComponent"
result = apply_component_highlight("component", test_html, component_name)
# Check that the output contains the component name
assert component_name in result
# Check that the output contains the original HTML
assert test_html in result
# Check that the component colors are used
assert COLORS["component"].text_color in result
assert COLORS["component"].border_color in result
def test_slot_highlight_fn(self):
# Test slot highlighting
test_html = "Slot content"
slot_name = "content-slot"
result = apply_component_highlight("slot", test_html, slot_name)
# Check that the output contains the slot name
assert slot_name in result
# Check that the output contains the original HTML
assert test_html in result
# 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={
"extensions_defaults": {
"debug_highlight": {"highlight_components": True},
},
}
)
def test_component_highlight_extension(self):
template = _prepare_template()
rendered = template.render(Context({"items": [1, 2]}))
expected = """
"""
assertHTMLEqual(rendered, expected)
# TODO_v1 - Remove this test once we've removed the `debug_highlight_components` setting.
@djc_test(components_settings={"debug_highlight_components": True})
def test_component_highlight_extension__legacy(self):
template = _prepare_template()
rendered = template.render(Context({"items": [1, 2]}))
expected = """
"""
assertHTMLEqual(rendered, expected)
@djc_test(
components_settings={
"extensions_defaults": {
"debug_highlight": {"highlight_slots": True},
},
}
)
def test_slot_highlight_extension(self):
template = _prepare_template()
rendered = template.render(Context({"items": [1, 2]}))
expected = """
"""
assertHTMLEqual(rendered, expected)
# TODO_v1 - Remove this test once we've removed the `debug_highlight_slots` setting.
@djc_test(components_settings={"debug_highlight_slots": True})
def test_slot_highlight_extension__legacy(self):
template = _prepare_template()
rendered = template.render(Context({"items": [1, 2]}))
expected = """
"""
assertHTMLEqual(rendered, expected)
def test_highlight_on_component_class(self):
@register("inner")
class InnerComponent(Component):
template: types.django_html = """
{% load component_tags %}
1: {% slot "content" default / %}
2: {% slot "content" default / %}
"""
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 = """
"""
assertHTMLEqual(rendered, expected)