mirror of
https://github.com/django-components/django-components.git
synced 2025-08-03 22:08:17 +00:00
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:
parent
296da4a1e8
commit
fe67d90547
28 changed files with 1181 additions and 594 deletions
|
@ -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,
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue