Merge pull request #50 from mbland/init-with-app-elem

Pass the <div id="app"> to initApp()
mbland · Dec 16, 2023 · 2d9a631 · 2d9a631
2 parents 2b86a65 + bd161b7
commit 2d9a631
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/strcalc/src/main/frontend/components/init.js b/strcalc/src/main/frontend/components/init.js
@@ -19,7 +19,8 @@ import Placeholder from './placeholder'
  * demonstrate how to design much larger applications for testability.
  * @param {Window} window - the browser window object
  * @param {Document} document - a Document or DocumentFragment
+ * @param {Element} appElem - the parent Element containing all app components
  */
-export default function initApp(window, document) {
-  Placeholder.init(window, document)
+export default function initApp(window, document, appElem) {
+  Placeholder.init(window, document, appElem)
 }
diff --git a/strcalc/src/main/frontend/components/init.test.js b/strcalc/src/main/frontend/components/init.test.js
@@ -13,7 +13,7 @@ describe('initial state after calling initApp', () => {
   test('contains the "Hello, World!" placeholder', async () => {
     const page = new StringCalculatorPage()
 
-    initApp(window, page.document)
+    initApp(window, page.document, page.appElem)
 
     const e = page.placeholder()
     expect(e.textContent).toContain('Hello, World!')

diff --git a/strcalc/src/main/frontend/components/placeholder.js b/strcalc/src/main/frontend/components/placeholder.js
@@ -23,9 +23,10 @@ export default class Placeholder {
    * Initializes the Placeholder within the document.
    * @param {Window} window - the browser window object
    * @param {Document} document - a Document or DocumentFragment
+   * @param {Element} appElem - the parent Element containing all app components
    */
-  static init(window, document) {
-    document.querySelector('#app').appendChild(Template({
+  static init(window, document, appElem) {
+    appElem.appendChild(Template({
       message: 'Hello, World!',
       url: 'https://en.wikipedia.org/wiki/%22Hello,_World!%22_program'
     }))

diff --git a/strcalc/src/main/frontend/main.js b/strcalc/src/main/frontend/main.js
@@ -24,7 +24,7 @@ import initApp from './components/init'
  * - main.test.js uses PageLoader to validate that initApp() fires on
  *   DOMContentLoaded.
  * - init.test.js tests the initApp() method directly.
- * @param {Window} window - the browser window object
- * @param {Document} document - a Document or DocumentFragment
  */
-document.addEventListener('DOMContentLoaded', () => initApp(window, document))
+document.addEventListener('DOMContentLoaded', () => {
+  initApp(window, document, document.querySelector('#app'))
+})
diff --git a/strcalc/src/main/frontend/test/page.js b/strcalc/src/main/frontend/test/page.js
@@ -16,11 +16,13 @@ import { fragment } from './helpers'
  */
 export default class StringCalculatorPage {
   document
+  appElem
   #select
 
   constructor(doc) {
     this.document = doc !== undefined ? doc : fragment('<div id="app"></div>')
-    this.#select = selector => this.document.querySelector(`#app ${selector}`)
+    this.appElem = this.document.querySelector('#app')
+    this.#select = s => this.document.querySelector(`#${this.appElem.id} ${s}`)
   }
 
   placeholder() { return this.#select('.placeholder a') }