Merge pull request #53 from mbland/stringcalculatorpage-auto-appelemids

StringCalculatorPage autogenerates app element IDs

strcalc/src/main/frontend/components/init.test.js

@@ -5,17 +5,18 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import initApp from './init'
-import { afterEach, describe, expect, test } from 'vitest'
+import { afterAll, afterEach, describe, expect, test } from 'vitest'
 import StringCalculatorPage from '../test/page'
 
 // @vitest-environment jsdom
 describe('initial state after calling initApp', () => {
-  afterEach(() => StringCalculatorPage.cleanup())
+  const page = StringCalculatorPage.new()
 
-  test('contains the "Hello, World!" placeholder', async () => {
-    const page = StringCalculatorPage.new('app-init')
+  afterEach(() => page.clear())
+  afterAll(() => page.remove())
 
-    initApp({ window, document, appElem: page.appElem })
+  test('contains the "Hello, World!" placeholder', async () => {
+    initApp({ appElem: page.appElem })
 
     const e = page.placeholder()
     expect(e.textContent).toContain('Hello, World!')

strcalc/src/main/frontend/test/page.js

@@ -13,7 +13,7 @@
  * @see https://www.selenium.dev/documentation/test_practices/design_strategies/
  */
 export default class StringCalculatorPage {
-  static #pages = []
+  static #nextId = 0
 
   appElem
   #select
@@ -23,17 +23,16 @@ export default class StringCalculatorPage {
     this.#select = sel => doc.querySelector(`#${appElem.id} ${sel}`)
   }
 
-  static new(appElemId) {
+  static new() {
     const appElem = document.createElement('div')
-    appElem.id = appElemId
+    appElem.id = `test-app-${this.#nextId++}`
     document.body.appendChild(appElem)
-
-    const page = new StringCalculatorPage(appElem)
-    this.#pages.push(page)
-    return page
+    return new StringCalculatorPage(appElem)
   }
 
-  static cleanup() { this.#pages.forEach(p => p.appElem.remove()) }
+  clear() { this.appElem.replaceChildren() }
+
+  remove() { this.appElem.remove() }
 
   placeholder() { return this.#select('.placeholder a') }
 }