mirror of
https://github.com/django-components/django-components.git
synced 2025-08-31 19:27:19 +00:00
refactor: Assign content of file from Component.template_file to Component.template (#880)
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Juro Oravec
GitHub
parent
8e2428ebd0
commit
1e4b556b4d
12 changed files with 399 additions and 186 deletions
|
|
@ -20,29 +20,7 @@ setup_test_config({"autodiscover": False})
|
|||
# "Main media" refer to the HTML, JS, and CSS set on the Component class itself
|
||||
# (as opposed via the `Media` class). These have special handling in the Component.
|
||||
class MainMediaTest(BaseTestCase):
|
||||
def test_html_inlined(self):
|
||||
class InlineHTMLComponent(Component):
|
||||
template = "<div class='inline'>Hello Inline</div>"
|
||||
|
||||
self.assertHTMLEqual(
|
||||
InlineHTMLComponent.render(),
|
||||
'<div class="inline" data-djc-id-a1bc3e>Hello Inline</div>',
|
||||
)
|
||||
|
||||
def test_html_filepath(self):
|
||||
class Test(Component):
|
||||
template_file = "simple_template.html"
|
||||
|
||||
rendered = Test.render(context={"variable": "test"})
|
||||
|
||||
self.assertHTMLEqual(
|
||||
rendered,
|
||||
"""
|
||||
Variable: <strong data-djc-id-a1bc3e>test</strong>
|
||||
""",
|
||||
)
|
||||
|
||||
def test_js_css_inlined(self):
|
||||
def test_html_js_css_inlined(self):
|
||||
class TestComponent(Component):
|
||||
template = """
|
||||
{% load component_tags %}
|
||||
|
|
@ -77,22 +55,37 @@ class MainMediaTest(BaseTestCase):
|
|||
rendered,
|
||||
)
|
||||
|
||||
# Check that the HTML / JS / CSS can be accessed on the component class
|
||||
self.assertEqual(
|
||||
TestComponent.template,
|
||||
"""
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
<div class='html-css-only'>Content</div>
|
||||
""",
|
||||
)
|
||||
self.assertEqual(
|
||||
TestComponent.css,
|
||||
".html-css-only { color: blue; }",
|
||||
)
|
||||
self.assertEqual(
|
||||
TestComponent.js,
|
||||
"console.log('HTML and JS only');",
|
||||
)
|
||||
|
||||
@override_settings(
|
||||
STATICFILES_DIRS=[
|
||||
os.path.join(Path(__file__).resolve().parent, "static_root"),
|
||||
],
|
||||
)
|
||||
def test_js_css_filepath_rel_to_component(self):
|
||||
def test_html_js_css_filepath_rel_to_component(self):
|
||||
from tests.test_app.components.app_lvl_comp.app_lvl_comp import AppLvlCompComponent
|
||||
|
||||
class TestComponent(AppLvlCompComponent):
|
||||
template_file = None
|
||||
template = """
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
<div class='html-css-only'>Content</div>
|
||||
"""
|
||||
pass
|
||||
|
||||
registry.register("test", TestComponent)
|
||||
|
||||
self.assertIn(
|
||||
".html-css-only {\n color: blue;\n}",
|
||||
|
|
@ -103,10 +96,23 @@ class MainMediaTest(BaseTestCase):
|
|||
TestComponent.js,
|
||||
)
|
||||
|
||||
rendered = TestComponent.render(kwargs={"variable": "test"})
|
||||
rendered_raw = Template(
|
||||
"""
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
{% component "test" variable="test" / %}
|
||||
"""
|
||||
).render(Context())
|
||||
rendered = render_dependencies(rendered_raw)
|
||||
|
||||
self.assertInHTML(
|
||||
'<div class="html-css-only" data-djc-id-a1bc3e>Content</div>',
|
||||
"""
|
||||
<form data-djc-id-a1bc41 method="post">
|
||||
<input name="variable" type="text" value="test"/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
""",
|
||||
rendered,
|
||||
)
|
||||
self.assertInHTML(
|
||||
|
|
@ -118,22 +124,46 @@ class MainMediaTest(BaseTestCase):
|
|||
rendered,
|
||||
)
|
||||
|
||||
# Check that the HTML / JS / CSS can be accessed on the component class
|
||||
self.assertEqual(
|
||||
TestComponent.template,
|
||||
(
|
||||
'<form method="post">\n'
|
||||
" {% csrf_token %}\n"
|
||||
' <input type="text" name="variable" value="{{ variable }}">\n'
|
||||
' <input type="submit">\n'
|
||||
"</form>\n"
|
||||
),
|
||||
)
|
||||
|
||||
self.assertEqual(TestComponent.css, ".html-css-only {\n" " color: blue;\n" "}\n")
|
||||
self.assertEqual(
|
||||
TestComponent.js,
|
||||
'console.log("JS file");\n',
|
||||
)
|
||||
|
||||
@override_settings(
|
||||
STATICFILES_DIRS=[
|
||||
os.path.join(Path(__file__).resolve().parent, "static_root"),
|
||||
],
|
||||
)
|
||||
def test_js_css_filepath_from_static(self):
|
||||
def test_html_js_css_filepath_from_static(self):
|
||||
class TestComponent(Component):
|
||||
template = """
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
<div class='html-css-only'>Content</div>
|
||||
"""
|
||||
template_file = "test_app_simple_template.html"
|
||||
css_file = "style.css"
|
||||
js_file = "script.js"
|
||||
|
||||
def get_context_data(self, variable):
|
||||
return {
|
||||
"variable": variable,
|
||||
}
|
||||
|
||||
registry.register("test", TestComponent)
|
||||
|
||||
self.assertIn(
|
||||
"Variable: <strong>{{ variable }}</strong>",
|
||||
TestComponent.template,
|
||||
)
|
||||
self.assertIn(
|
||||
".html-css-only {\n color: blue;\n}",
|
||||
TestComponent.css,
|
||||
|
|
@ -143,10 +173,18 @@ class MainMediaTest(BaseTestCase):
|
|||
TestComponent.js,
|
||||
)
|
||||
|
||||
rendered = TestComponent.render()
|
||||
rendered_raw = Template(
|
||||
"""
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
{% component "test" variable="test" / %}
|
||||
"""
|
||||
).render(Context())
|
||||
rendered = render_dependencies(rendered_raw)
|
||||
|
||||
self.assertInHTML(
|
||||
'<div class="html-css-only" data-djc-id-a1bc3e>Content</div>',
|
||||
self.assertIn(
|
||||
"Variable: <strong data-djc-id-a1bc41>test</strong>",
|
||||
rendered,
|
||||
)
|
||||
self.assertInHTML(
|
||||
|
|
@ -158,22 +196,38 @@ class MainMediaTest(BaseTestCase):
|
|||
rendered,
|
||||
)
|
||||
|
||||
# Check that the HTML / JS / CSS can be accessed on the component class
|
||||
self.assertEqual(
|
||||
TestComponent.template,
|
||||
"Variable: <strong>{{ variable }}</strong>\n",
|
||||
)
|
||||
self.assertEqual(
|
||||
TestComponent.css,
|
||||
(
|
||||
"/* Used in `MainMediaTest` tests in `test_component_media.py` */\n"
|
||||
".html-css-only {\n"
|
||||
" color: blue;\n"
|
||||
"}"
|
||||
),
|
||||
)
|
||||
self.assertEqual(
|
||||
TestComponent.js,
|
||||
(
|
||||
"/* Used in `MainMediaTest` tests in `test_component_media.py` */\n"
|
||||
'console.log("HTML and JS only");\n'
|
||||
),
|
||||
)
|
||||
|
||||
@override_settings(
|
||||
STATICFILES_DIRS=[
|
||||
os.path.join(Path(__file__).resolve().parent, "static_root"),
|
||||
],
|
||||
)
|
||||
def test_js_css_filepath_lazy_loaded(self):
|
||||
def test_html_js_css_filepath_lazy_loaded(self):
|
||||
from tests.test_app.components.app_lvl_comp.app_lvl_comp import AppLvlCompComponent
|
||||
|
||||
class TestComponent(AppLvlCompComponent):
|
||||
template_file = None
|
||||
template = """
|
||||
{% load component_tags %}
|
||||
{% component_js_dependencies %}
|
||||
{% component_css_dependencies %}
|
||||
<div class='html-css-only'>Content</div>
|
||||
"""
|
||||
pass
|
||||
|
||||
# NOTE: Since this is a subclass, actual CSS is defined on the parent class, and thus
|
||||
# the corresponding ComponentMedia instance is also on the parent class.
|
||||
|
|
@ -189,15 +243,40 @@ class MainMediaTest(BaseTestCase):
|
|||
# Access the property to load the CSS
|
||||
_ = TestComponent.css
|
||||
|
||||
self.assertHTMLEqual(
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.css, # type: ignore[attr-defined]
|
||||
".html-css-only { color: blue; }",
|
||||
(".html-css-only {\n" " color: blue;\n" "}\n"),
|
||||
)
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.css_file, # type: ignore[attr-defined]
|
||||
"app_lvl_comp/app_lvl_comp.css",
|
||||
)
|
||||
|
||||
# Also check JS and HTML while we're at it
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.template, # type: ignore[attr-defined]
|
||||
(
|
||||
'<form method="post">\n'
|
||||
" {% csrf_token %}\n"
|
||||
' <input type="text" name="variable" value="{{ variable }}">\n'
|
||||
' <input type="submit">\n'
|
||||
"</form>\n"
|
||||
),
|
||||
)
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.template_file, # type: ignore[attr-defined]
|
||||
"app_lvl_comp/app_lvl_comp.html",
|
||||
)
|
||||
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.js, # type: ignore[attr-defined]
|
||||
'console.log("JS file");\n',
|
||||
)
|
||||
self.assertEqual(
|
||||
AppLvlCompComponent._component_media.js_file, # type: ignore[attr-defined]
|
||||
"app_lvl_comp/app_lvl_comp.js",
|
||||
)
|
||||
|
||||
def test_html_variable(self):
|
||||
class VariableHTMLComponent(Component):
|
||||
def get_template(self, context):
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue