mirror of
https://github.com/django-components/django-components.git
synced 2025-08-03 22:08:17 +00:00
fix: Fix broken JS execution order (#821)
* fix: fix broken js exec order * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * refactor: remove stale comment --------- 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
e88e3af27f
commit
be27c1c94d
15 changed files with 833 additions and 379 deletions
|
|
@ -127,10 +127,19 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count(r"const toLoadJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count(r"const toLoadCssScripts = [];"), 1)
|
||||
# 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)
|
||||
|
||||
def test_no_js_dependencies_when_no_components_used(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -148,10 +157,19 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count(r"const toLoadJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count(r"const toLoadCssScripts = [];"), 1)
|
||||
# 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)
|
||||
|
||||
def test_no_css_dependencies_when_no_components_used(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -184,22 +202,21 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count('<link href="style.css" media="all" rel="stylesheet">'), 1) # Media.css
|
||||
self.assertEqual(rendered.count("<link"), 1)
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 2)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = ["style.css"];"), 1)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadJsScripts = [Components.unescapeJs(\`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadCssScripts = [Components.unescapeJs(\`&lt;link href=&quot;style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
# 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)
|
||||
|
||||
def test_single_component_with_dash_or_slash_in_name(self):
|
||||
registry.register(name="te-s/t", component=SimpleComponent)
|
||||
|
|
@ -219,22 +236,21 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
self.assertEqual(rendered.count('<link href="style.css" media="all" rel="stylesheet">'), 1) # Media.css
|
||||
self.assertEqual(rendered.count("<link"), 1)
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 2)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = ["style.css"];"), 1)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadJsScripts = [Components.unescapeJs(\`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadCssScripts = [Components.unescapeJs(\`&lt;link href=&quot;style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
# 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)
|
||||
|
||||
def test_single_component_placeholder_removed(self):
|
||||
registry.register(name="test", component=SimpleComponent)
|
||||
|
|
@ -285,22 +301,21 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
# CSS NOT included
|
||||
self.assertEqual(rendered.count("<link"), 0)
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 2)
|
||||
self.assertEqual(rendered.count("<script"), 3)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = ["style.css"];"), 1)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadJsScripts = [Components.unescapeJs(\`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadCssScripts = [Components.unescapeJs(\`&lt;link href=&quot;style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
# 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)
|
||||
|
||||
def test_all_dependencies_are_rendered_for_component_with_multiple_dependencies(
|
||||
self,
|
||||
|
|
@ -320,31 +335,41 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
|
||||
self.assertEqual(rendered.count("<link"), 2)
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
self.assertEqual(rendered.count("<script"), 2) # Boilerplate scripts
|
||||
self.assertEqual(rendered.count("<script"), 4) # 2 scripts belong to the boilerplate
|
||||
|
||||
self.assertEqual(rendered.count('<link href="style.css" media="all" rel="stylesheet">'), 1) # Media.css
|
||||
self.assertEqual(rendered.count('<link href="style2.css" media="all" rel="stylesheet">'), 1)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(
|
||||
rendered.count("const loadedCssScripts = ["style.css", "style2.css"];"), 1
|
||||
# Media.css
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<link href="style.css" media="all" rel="stylesheet">
|
||||
<link href="style2.css" media="all" rel="stylesheet">
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
# JS ORDER - "script.js", "script2.js"
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadJsScripts = [Components.unescapeJs(\`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;\`), Components.unescapeJs(\`&lt;script src=&quot;script2.js&quot;&gt;&lt;/script&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
# Media.js
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<script src="script.js"></script>
|
||||
<script src="script2.js"></script>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
# CSS ORDER - "style.css", "style2.css"
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadCssScripts = [Components.unescapeJs(\`&lt;link href=&quot;style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`), Components.unescapeJs(\`&lt;link href=&quot;style2.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`)];"
|
||||
),
|
||||
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)
|
||||
|
||||
def test_no_dependencies_with_multiple_unused_components(self):
|
||||
registry.register(name="inner", component=SimpleComponent)
|
||||
|
|
@ -361,14 +386,23 @@ 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"), 2) # 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<link"), 0) # No CSS
|
||||
self.assertEqual(rendered.count("<style"), 0)
|
||||
|
||||
self.assertEqual(rendered.count("const loadedJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const loadedCssScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const toLoadJsScripts = [];"), 1)
|
||||
self.assertEqual(rendered.count("const toLoadCssScripts = [];"), 1)
|
||||
# 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)
|
||||
|
||||
def test_multiple_components_dependencies(self):
|
||||
registry.register(name="inner", component=SimpleComponent)
|
||||
|
|
@ -390,55 +424,76 @@ class DependencyRenderingTests(BaseTestCase):
|
|||
# NOTE: Should be present only ONCE!
|
||||
self.assertInHTML('<script src="django_components/django_components.min.js"></script>', rendered, count=1)
|
||||
|
||||
self.assertEqual(rendered.count("<script"), 4) # Two 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<script"), 7) # 2 scripts belong to the boilerplate
|
||||
self.assertEqual(rendered.count("<link"), 3)
|
||||
self.assertEqual(rendered.count("<style"), 2)
|
||||
|
||||
# Components' inlined CSS
|
||||
# NOTE: Each of these should be present only ONCE!
|
||||
self.assertInHTML("<style>.xyz { color: red; }</style>", rendered, count=1)
|
||||
self.assertInHTML("<style>.my-class { color: red; }</style>", rendered, count=1)
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<style>.my-class { color: red; }</style>
|
||||
<style>.xyz { color: red; }</style>
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
# Components' Media.css
|
||||
# NOTE: Each of these should be present only ONCE!
|
||||
self.assertInHTML('<link href="xyz1.css" media="all" rel="stylesheet">', rendered, count=1)
|
||||
self.assertInHTML('<link href="style.css" media="all" rel="stylesheet">', rendered, count=1)
|
||||
self.assertInHTML('<link href="style2.css" media="all" rel="stylesheet">', rendered, count=1)
|
||||
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
"const loadedJsScripts = ["/components/cache/OtherComponent_6329ae.js/", "/components/cache/SimpleComponentNested_f02d32.js/"];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
"const loadedCssScripts = ["/components/cache/OtherComponent_6329ae.css/", "/components/cache/SimpleComponentNested_f02d32.css/", "style.css", "style2.css", "xyz1.css"];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
|
||||
# JS ORDER:
|
||||
# - "script2.js" (from SimpleComponentNested)
|
||||
# - "script.js" (from SimpleComponent inside SimpleComponentNested)
|
||||
# - "xyz1.js" (from OtherComponent inserted into SimpleComponentNested)
|
||||
self.assertEqual(
|
||||
rendered.count(
|
||||
r"const toLoadJsScripts = [Components.unescapeJs(\`&lt;script src=&quot;script2.js&quot;&gt;&lt;/script&gt;\`), Components.unescapeJs(\`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;\`), Components.unescapeJs(\`&lt;script src=&quot;xyz1.js&quot;&gt;&lt;/script&gt;\`)];"
|
||||
),
|
||||
1,
|
||||
)
|
||||
|
||||
# CSS ORDER:
|
||||
# Order:
|
||||
# - "style.css", "style2.css" (from SimpleComponentNested)
|
||||
# - "style.css" (from SimpleComponent inside SimpleComponentNested)
|
||||
# - "xyz1.css" (from OtherComponent inserted into SimpleComponentNested)
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<link href="style.css" media="all" rel="stylesheet">
|
||||
<link href="style2.css" media="all" rel="stylesheet">
|
||||
<link href="xyz1.css" media="all" rel="stylesheet">
|
||||
""",
|
||||
rendered,
|
||||
count=1,
|
||||
)
|
||||
|
||||
# Components' Media.js followed by inlined JS
|
||||
# Order:
|
||||
# - "script2.js" (from SimpleComponentNested)
|
||||
# - "script.js" (from SimpleComponent inside SimpleComponentNested)
|
||||
# - "xyz1.js" (from OtherComponent inserted into SimpleComponentNested)
|
||||
self.assertInHTML(
|
||||
"""
|
||||
<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>
|
||||
""",
|
||||
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(
|
||||
r"const toLoadCssScripts = [Components.unescapeJs(\`&lt;link href=&quot;style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`), Components.unescapeJs(\`&lt;link href=&quot;style2.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`), Components.unescapeJs(\`&lt;link href=&quot;xyz1.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;\`)];"
|
||||
"loadedJsUrls: ["/components/cache/OtherComponent_6329ae.js/", "/components/cache/SimpleComponentNested_f02d32.js/", "script.js", "script2.js", "xyz1.js"],"
|
||||
),
|
||||
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