mirror of
https://github.com/django-components/django-components.git
synced 2025-08-31 11:17:21 +00:00
feat: Add support for HTML fragments (#845)
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
6681fc0085
commit
4dab940db8
26 changed files with 1225 additions and 246 deletions
|
|
@ -123,23 +123,14 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
# Dependency manager script
|
||||
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', rendered, count=1)
|
||||
|
||||
self.assertEqual(rendered.count("<script"), 2) # Two 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<script"), 1) # 1 boilerplate script
|
||||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: [],
|
||||
# loadedJsUrls: [],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
self.assertNotIn("loadedJsUrls", rendered)
|
||||
self.assertNotIn("loadedCssUrls", rendered)
|
||||
self.assertNotIn("toLoadJsTags", rendered)
|
||||
self.assertNotIn("toLoadCssTags", rendered)
|
||||
|
||||
def test_no_js_dependencies_when_no_components_used(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -153,23 +144,14 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
# Dependency manager script
|
||||
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', rendered, count=1)
|
||||
|
||||
self.assertEqual(rendered.count("<script"), 2) # Two 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<script"), 1) # 1 boilerplate script
|
||||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: [],
|
||||
# loadedJsUrls: [],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
self.assertNotIn("loadedJsUrls", rendered)
|
||||
self.assertNotIn("loadedCssUrls", rendered)
|
||||
self.assertNotIn("toLoadJsTags", rendered)
|
||||
self.assertNotIn("toLoadCssTags", rendered)
|
||||
|
||||
def test_no_css_dependencies_when_no_components_used(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -204,19 +186,20 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: ["style.css"],
|
||||
# loadedJsUrls: ["script.js"],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: ["script.js"],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: ["style.css"],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
# `c3R5bGUuY3Nz` is base64 encoded `style.css`
|
||||
# `c2NyaXB0Lmpz` is base64 encoded `style.js`
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script type="application/json" data-djc>
|
||||
{"loadedCssUrls": ["c3R5bGUuY3Nz"],
|
||||
"loadedJsUrls": ["c2NyaXB0Lmpz"],
|
||||
"toLoadCssTags": [],
|
||||
"toLoadJsTags": []}
|
||||
</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
def test_single_component_with_dash_or_slash_in_name(self):
|
||||
registry.register(name="te-s/t", component=SimpleComponent)
|
||||
|
|
@ -238,19 +221,20 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: ["style.css"],
|
||||
# loadedJsUrls: ["script.js"],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: ["script.js"],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: ["style.css"],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
# `c3R5bGUuY3Nz` is base64 encoded `style.css`
|
||||
# `c2NyaXB0Lmpz` is base64 encoded `style.js`
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script type="application/json" data-djc>
|
||||
{"loadedCssUrls": ["c3R5bGUuY3Nz"],
|
||||
"loadedJsUrls": ["c2NyaXB0Lmpz"],
|
||||
"toLoadCssTags": [],
|
||||
"toLoadJsTags": []}
|
||||
</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
def test_single_component_placeholder_removed(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -303,19 +287,20 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: ["style.css"],
|
||||
# loadedJsUrls: ["script.js"],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: ["script.js"],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: ["style.css"],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
# `c3R5bGUuY3Nz` is base64 encoded `style.css`
|
||||
# `c2NyaXB0Lmpz` is base64 encoded `style.js`
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script type="application/json" data-djc>
|
||||
{"loadedCssUrls": ["c3R5bGUuY3Nz"],
|
||||
"loadedJsUrls": ["c2NyaXB0Lmpz"],
|
||||
"toLoadCssTags": [],
|
||||
"toLoadJsTags": []}
|
||||
</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
def test_all_dependencies_are_rendered_for_component_with_multiple_dependencies(
|
||||
self,
|
||||
|
|
@ -357,19 +342,23 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
count=1,
|
||||
)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: ["style.css", "style2.css"],
|
||||
# loadedJsUrls: ["script.js", "script2.js"],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedCssUrls: ["style.css", "style2.css"],"), 1)
|
||||
self.assertEqual(rendered.count("loadedJsUrls: ["script.js", "script2.js""), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
# Base64 encoding:
|
||||
# `c3R5bGUuY3Nz` -> `style.css`
|
||||
# `c3R5bGUyLmNzcw==` -> `style2.css`
|
||||
# `c2NyaXB0Lmpz` -> `script.js`
|
||||
# `c2NyaXB0Mi5qcw==` -> `script2.js`
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script type="application/json" data-djc>
|
||||
{"loadedCssUrls": ["c3R5bGUuY3Nz", "c3R5bGUyLmNzcw=="],
|
||||
"loadedJsUrls": ["c2NyaXB0Lmpz", "c2NyaXB0Mi5qcw=="],
|
||||
"toLoadCssTags": [],
|
||||
"toLoadJsTags": []}
|
||||
</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
def test_no_dependencies_with_multiple_unused_components(self):
|
||||
registry.register(name="inner", component=SimpleComponent)
|
||||
|
|
@ -386,23 +375,14 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
# Dependency manager script
|
||||
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', rendered, count=1)
|
||||
|
||||
self.assertEqual(rendered.count("<script"), 2) # 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<script"), 1) # 1 boilerplate script
|
||||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: [],
|
||||
# loadedJsUrls: [],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(rendered.count("loadedJsUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("loadedCssUrls: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
self.assertNotIn("loadedJsUrls", rendered)
|
||||
self.assertNotIn("loadedCssUrls", rendered)
|
||||
self.assertNotIn("toLoadJsTags", rendered)
|
||||
self.assertNotIn("toLoadCssTags", rendered)
|
||||
|
||||
def test_multiple_components_dependencies(self):
|
||||
registry.register(name="inner", component=SimpleComponent)
|
||||
|
|
@ -464,36 +444,36 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
<script src="script2.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="xyz1.js"></script>
|
||||
<script>eval(Components.unescapeJs(`console.log("Hello");`))</script>
|
||||
<script>eval(Components.unescapeJs(`console.log("xyz");`))</script>
|
||||
<script>console.log("Hello");</script>
|
||||
<script>console.log("xyz");</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
# We expect to find this:
|
||||
# ```js
|
||||
# Components.manager._loadComponentScripts({
|
||||
# loadedCssUrls: ["/components/cache/OtherComponent_6329ae.css/", "/components/cache/SimpleComponentNested_f02d32.css/", "style.css", "style2.css", "xyz1.css"],
|
||||
# loadedJsUrls: ["/components/cache/OtherComponent_6329ae.js/", "/components/cache/SimpleComponentNested_f02d32.js/", "script.js", "script2.js", "xyz1.js"],
|
||||
# toLoadCssTags: [],
|
||||
# toLoadJsTags: [],
|
||||
# });
|
||||
# ```
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
"loadedJsUrls: ["/components/cache/OtherComponent_6329ae.js/", "/components/cache/SimpleComponentNested_f02d32.js/", "script.js", "script2.js", "xyz1.js"],"
|
||||
),
|
||||
1,
|
||||
# Base64 encoding:
|
||||
# `c3R5bGUuY3Nz` -> `style.css`
|
||||
# `c3R5bGUyLmNzcw==` -> `style2.css`
|
||||
# `eHl6MS5jc3M=` -> `xyz1.css`
|
||||
# `L2NvbXBvbmVudHMvY2FjaGUvT3RoZXJDb21wb25lbnRfNjMyOWFlLmNzcw==` -> `/components/cache/OtherComponent_6329ae.css`
|
||||
# `L2NvbXBvbmVudHMvY2FjaGUvU2ltcGxlQ29tcG9uZW50TmVzdGVkX2YwMmQzMi5jc3M=` -> `/components/cache/SimpleComponentNested_f02d32.css`
|
||||
# `L2NvbXBvbmVudHMvY2FjaGUvT3RoZXJDb21wb25lbnRfNjMyOWFlLmpz` -> `/components/cache/OtherComponent_6329ae.js`
|
||||
# `L2NvbXBvbmVudHMvY2FjaGUvU2ltcGxlQ29tcG9uZW50TmVzdGVkX2YwMmQzMi5qcw==` -> `/components/cache/SimpleComponentNested_f02d32.js`
|
||||
# `c2NyaXB0Lmpz` -> `script.js`
|
||||
# `c2NyaXB0Mi5qcw==` -> `script2.js`
|
||||
# `eHl6MS5qcw==` -> `xyz1.js`
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script type="application/json" data-djc>
|
||||
{"loadedCssUrls": ["L2NvbXBvbmVudHMvY2FjaGUvT3RoZXJDb21wb25lbnRfNjMyOWFlLmNzcw==", "L2NvbXBvbmVudHMvY2FjaGUvU2ltcGxlQ29tcG9uZW50TmVzdGVkX2YwMmQzMi5jc3M=", "c3R5bGUuY3Nz", "c3R5bGUyLmNzcw==", "eHl6MS5jc3M="],
|
||||
"loadedJsUrls": ["L2NvbXBvbmVudHMvY2FjaGUvT3RoZXJDb21wb25lbnRfNjMyOWFlLmpz", "L2NvbXBvbmVudHMvY2FjaGUvU2ltcGxlQ29tcG9uZW50TmVzdGVkX2YwMmQzMi5qcw==", "c2NyaXB0Lmpz", "c2NyaXB0Mi5qcw==", "eHl6MS5qcw=="],
|
||||
"toLoadCssTags": [],
|
||||
"toLoadJsTags": []}
|
||||
</script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
"loadedCssUrls: ["/components/cache/OtherComponent_6329ae.css/", "/components/cache/SimpleComponentNested_f02d32.css/", "style.css", "style2.css", "xyz1.css"],"
|
||||
),
|
||||
1,
|
||||
)
|
||||
self.assertEqual(rendered.count("toLoadJsTags: [],"), 1)
|
||||
self.assertEqual(rendered.count("toLoadCssTags: [],"), 1)
|
||||
|
||||
def test_multiple_components_all_placeholders_removed(self):
|
||||
registry.register(name="inner", component=SimpleComponent)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue