Fix backdrop `rootElement` not initialized in Modal (#33853)

* Initialize default value of rootElement before using

* Remove redundant test | put rootElement tests together

Co-authored-by: GeoSot <geo.sotis@gmail.com>

2 files changed, 45 insertions, 29 deletions

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index 775c09ec03..ad9fcb92fa 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -89,6 +89,8 @@ class Backdrop {
       ...Default,
       ...(typeof config === 'object' ? config : {})
     }
+
+    config.rootElement = config.rootElement || document.body
     typeCheckConfig(NAME, config, DefaultType)
     return config
   }
diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
index 0a20a13bc5..ae342b0929 100644
--- a/js/tests/unit/util/backdrop.spec.js
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -73,35 +73,6 @@ describe('Backdrop', () => {
         done()
       })
     })
-
-    it('Should be appended on "document.body" by default', done => {
-      const instance = new Backdrop({
-        isVisible: true
-      })
-      const getElement = () => document.querySelector(CLASS_BACKDROP)
-      instance.show(() => {
-        expect(getElement().parentElement).toEqual(document.body)
-        done()
-      })
-    })
-
-    it('Should appended on any element given by the proper config', done => {
-      fixtureEl.innerHTML = [
-        '<div id="wrapper">',
-        '</div>'
-      ].join('')
-
-      const wrapper = fixtureEl.querySelector('#wrapper')
-      const instance = new Backdrop({
-        isVisible: true,
-        rootElement: wrapper
-      })
-      const getElement = () => document.querySelector(CLASS_BACKDROP)
-      instance.show(() => {
-        expect(getElement().parentElement).toEqual(wrapper)
-        done()
-      })
-    })
   })
 
   describe('hide', () => {
@@ -238,4 +209,47 @@ describe('Backdrop', () => {
       })
     })
   })
+
+  describe('rootElement initialization', () => {
+    it('Should be appended on "document.body" by default', done => {
+      const instance = new Backdrop({
+        isVisible: true
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(document.body)
+        done()
+      })
+    })
+
+    it('Should default parent element to "document.body" when config value is null', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        rootElement: null
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(document.body)
+        done()
+      })
+    })
+
+    it('Should appended on any element given by the proper config', done => {
+      fixtureEl.innerHTML = [
+        '<div id="wrapper">',
+        '</div>'
+      ].join('')
+
+      const wrapper = fixtureEl.querySelector('#wrapper')
+      const instance = new Backdrop({
+        isVisible: true,
+        rootElement: wrapper
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(wrapper)
+        done()
+      })
+    })
+  })
 })