Merge pull request #51 from mbland/page-object-uses-host-document

Have StringCalculatorPage use host document
mbland · Dec 17, 2023 · 26e7f3f · 26e7f3f
2 parents 2d9a631 + 5f2a917
commit 26e7f3f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/strcalc/src/main/frontend/components/init.test.js b/strcalc/src/main/frontend/components/init.test.js
@@ -5,15 +5,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import initApp from './init'
-import { describe, expect, test } from 'vitest'
+import { afterEach, describe, expect, test } from 'vitest'
 import StringCalculatorPage from '../test/page'
 
 // @vitest-environment jsdom
 describe('initial state after calling initApp', () => {
+  afterEach(() => StringCalculatorPage.cleanup())
+
   test('contains the "Hello, World!" placeholder', async () => {
-    const page = new StringCalculatorPage()
+    const page = StringCalculatorPage.new('app-init')
 
-    initApp(window, page.document, page.appElem)
+    initApp(window, 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
@@ -18,7 +18,6 @@
 import Template from './placeholder.hbs'
 
 export default class Placeholder {
-
   /**
    * Initializes the Placeholder within the document.
    * @param {Window} window - the browser window object

diff --git a/strcalc/src/main/frontend/main.test.js b/strcalc/src/main/frontend/main.test.js
@@ -14,8 +14,9 @@ describe('String Calculator UI on initial page load', () => {
 
   test('contains the "Hello, World!" placeholder', async () => {
     const { document } = await loader.load('index.html')
+    const appElem = document.querySelector('#app')
 
-    const e = new StringCalculatorPage(document).placeholder()
+    const e = new StringCalculatorPage(appElem, document).placeholder()
     expect(e.textContent).toContain('Hello, World!')
     expect(e.href).toContain('%22Hello,_World!%22')
   })

diff --git a/strcalc/src/main/frontend/test/page.js b/strcalc/src/main/frontend/test/page.js
@@ -5,8 +5,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { fragment } from './helpers'
-
 /**
  * Represents the StringCalculator web page.
  *
@@ -15,15 +13,27 @@ import { fragment } from './helpers'
  * @see https://www.selenium.dev/documentation/test_practices/design_strategies/
  */
 export default class StringCalculatorPage {
-  document
+  static #pages = []
+
   appElem
   #select
 
-  constructor(doc) {
-    this.document = doc !== undefined ? doc : fragment('<div id="app"></div>')
-    this.appElem = this.document.querySelector('#app')
-    this.#select = s => this.document.querySelector(`#${this.appElem.id} ${s}`)
+  constructor(appElem, doc = document) {
+    this.appElem = appElem
+    this.#select = sel => doc.querySelector(`#${appElem.id} ${sel}`)
+  }
+
+  static new(appElemId) {
+    const appElem = document.createElement('div')
+    appElem.id = appElemId
+    document.body.appendChild(appElem)
+
+    const page = new StringCalculatorPage(appElem)
+    this.#pages.push(page)
+    return page
   }
 
+  static cleanup() { this.#pages.forEach(p => p.appElem.remove()) }
+
   placeholder() { return this.#select('.placeholder a') }
 }