refactor: Backbone for passing JS and CSS variables (#861)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Juro Oravec 2024-12-28 19:27:19 +01:00 committed by GitHub
parent 296da4a1e8
commit fe67d90547
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 1181 additions and 594 deletions

View file

@ -1,3 +1,10 @@
"""
These tests check the public API side of managing dependencies - We check
if calling `Component.render()` or `render_dependencies()` behave as expected.
For checking the OUTPUT of the dependencies, see `test_dependency_rendering.py`.
"""
from unittest.mock import Mock
from django.http import HttpResponseNotModified
@ -54,7 +61,7 @@ class RenderDependenciesTests(BaseTestCase):
rendered_raw = template.render(Context({}))
# Placeholders
self.assertEqual(rendered_raw.count('<link name="CSS_PLACEHOLDER">'), 1)
self.assertEqual(rendered_raw.count('<link name="CSS_PLACEHOLDER"/>'), 1)
self.assertEqual(rendered_raw.count('<script name="JS_PLACEHOLDER"></script>'), 1)
self.assertEqual(rendered_raw.count("<script"), 1)
@ -258,7 +265,7 @@ class RenderDependenciesTests(BaseTestCase):
self.assertInHTML(
"""
<body>
Variable: <strong>foo</strong>
Variable: <strong data-djc-id-a1bc41>foo</strong>
<style>.xyz { color: red; }</style>
<link href="style.css" media="all" rel="stylesheet">
@ -415,7 +422,7 @@ class RenderDependenciesTests(BaseTestCase):
<td class="whitespace-nowrap w-fit text-center px-4 w-px"
aria-colindex="1">
1
Variable: <strong>hi</strong>
Variable: <strong data-djc-id-a1bc3f>hi</strong>
</td>
</tr>
</tbody>
@ -471,37 +478,59 @@ class MiddlewareTests(BaseTestCase):
request = Mock()
self.assertEqual(response, middleware(request=request))
def test_middleware_response_with_components_with_slash_dash_and_underscore(
self,
):
def test_middleware_response_with_components_with_slash_dash_and_underscore(self):
registry.register("dynamic", DynamicComponent)
registry.register("test-component", component=SimpleComponent)
registry.register("test/component", component=SimpleComponent)
registry.register("test_component", component=SimpleComponent)
component_names = [
"test-component",
"test/component",
"test_component",
]
for component_name in component_names:
registry.register(name=component_name, component=SimpleComponent)
template_str: types.django_html = """
{% load component_tags %}
{% component_css_dependencies %}
{% component_js_dependencies %}
{% component "dynamic" is=component_name variable='value' / %}
"""
template = Template(template_str)
rendered = create_and_process_template_response(
template, context=Context({"component_name": component_name})
)
template_str: types.django_html = """
{% load component_tags %}
{% component_css_dependencies %}
{% component_js_dependencies %}
{% component "dynamic" is=component_name variable='value' / %}
"""
template = Template(template_str)
def assert_dependencies(content: str):
# Dependency manager script (empty)
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', rendered, count=1)
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', content, count=1)
# Inlined JS
self.assertInHTML('<script>console.log("xyz");</script>', rendered, count=1)
self.assertInHTML('<script>console.log("xyz");</script>', content, count=1)
# Inlined CSS
self.assertInHTML("<style>.xyz { color: red; }</style>", rendered, count=1)
self.assertInHTML("<style>.xyz { color: red; }</style>", content, count=1)
# Media.css
self.assertInHTML('<link href="style.css" media="all" rel="stylesheet">', rendered, count=1)
self.assertInHTML('<link href="style.css" media="all" rel="stylesheet">', content, count=1)
self.assertEqual(rendered.count("Variable: <strong>value</strong>"), 1)
rendered1 = create_and_process_template_response(
template,
context=Context({"component_name": "test-component"}),
)
assert_dependencies(rendered1)
self.assertEqual(
rendered1.count('Variable: <strong data-djc-id-a1bc41 data-djc-id-a1bc42="">value</strong>'),
1,
)
rendered2 = create_and_process_template_response(
template,
context=Context({"component_name": "test-component"}),
)
assert_dependencies(rendered2)
self.assertEqual(
rendered2.count('Variable: <strong data-djc-id-a1bc43 data-djc-id-a1bc44="">value</strong>'),
1,
)
rendered3 = create_and_process_template_response(
template,
context=Context({"component_name": "test_component"}),
)
assert_dependencies(rendered3)
self.assertEqual(
rendered3.count('Variable: <strong data-djc-id-a1bc45 data-djc-id-a1bc46="">value</strong>'),
1,
)