[2.2.x] Fixed #30153 -- Fixed incorrect form Media asset ordering after three way merge.

Delaying merging assets as long as possible avoids introducing
incorrect relative orderings that cause a broken final result.
Backport of 959d0c078a1c903cd1e4850932be77c4f0d2294d from master.

1 files changed, 30 insertions, 0 deletions

diff --git a/tests/forms_tests/tests/test_media.py b/tests/forms_tests/tests/test_media.py
index a586da90c5..8cb484a15e 100644
--- a/tests/forms_tests/tests/test_media.py
+++ b/tests/forms_tests/tests/test_media.py
@@ -541,3 +541,33 @@ class FormsMediaTestCase(SimpleTestCase):
         msg = 'Detected duplicate Media files in an opposite order:\n1\n2'
         with self.assertWarnsMessage(RuntimeWarning, msg):
             self.assertEqual(Media.merge([1, 2], [2, 1]), [1, 2])
+
+    def test_merge_js_three_way(self):
+        """
+        The relative order of scripts is preserved in a three-way merge.
+        """
+        # custom_widget.js doesn't depend on jquery.js.
+        widget1 = Media(js=['custom_widget.js'])
+        widget2 = Media(js=['jquery.js', 'uses_jquery.js'])
+        form_media = widget1 + widget2
+        # The relative ordering of custom_widget.js and jquery.js has been
+        # established (but without a real need to).
+        self.assertEqual(form_media._js, ['custom_widget.js', 'jquery.js', 'uses_jquery.js'])
+        # The inline also uses custom_widget.js. This time, it's at the end.
+        inline_media = Media(js=['jquery.js', 'also_jquery.js']) + Media(js=['custom_widget.js'])
+        merged = form_media + inline_media
+        self.assertEqual(merged._js, ['custom_widget.js', 'jquery.js', 'uses_jquery.js', 'also_jquery.js'])
+
+    def test_merge_css_three_way(self):
+        widget1 = Media(css={'screen': ['a.css']})
+        widget2 = Media(css={'screen': ['b.css']})
+        widget3 = Media(css={'all': ['c.css']})
+        form1 = widget1 + widget2
+        form2 = widget2 + widget1
+        # form1 and form2 have a.css and b.css in different order...
+        self.assertEqual(form1._css, {'screen': ['a.css', 'b.css']})
+        self.assertEqual(form2._css, {'screen': ['b.css', 'a.css']})
+        # ...but merging succeeds as the relative ordering of a.css and b.css
+        # was never specified.
+        merged = widget3 + form1 + form2
+        self.assertEqual(merged._css, {'screen': ['a.css', 'b.css'], 'all': ['c.css']})