Merge pull request #42 from mbland/use-jsdom-environment

Add initApp test, fragment helper, page object

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

@@ -0,0 +1,24 @@
+/* eslint-env browser, node, jest, vitest */
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import initApp from './init'
+import { describe, expect, test } from 'vitest'
+import { fragment } from './test-helpers.js'
+import StringCalculatorPage from './test-page.js'
+
+// @vitest-environment jsdom
+describe('initial state after calling initApp', () => {
+  test('contains the "Hello, World!" placeholder', async () => {
+    const document = fragment('<div id="app"></div>')
+
+    initApp(window, document)
+
+    const e = new StringCalculatorPage(document).getPlaceholder()
+    expect(e.textContent).toContain('Hello, World!')
+    expect(e.href).toContain('%22Hello,_World!%22')
+  })
+})
+

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

@@ -6,20 +6,17 @@
  */
 import { describe, afterEach, expect, test } from 'vitest'
 import { PageLoader } from './test-helpers.js'
+import StringCalculatorPage from './test-page.js'
 
-describe('String Calculator UI', () => {
+describe('String Calculator UI on initial page load', () => {
   const loader = new PageLoader('/strcalc')
-
   afterEach(() => loader.closeAll())
 
-  describe('initial state', () => {
-    test('contains the "Hello, World!" placeholder', async () => {
-      const { document } = await loader.load('index.html')
-
-      const e = document.querySelector('#app .placeholder a')
+  test('contains the "Hello, World!" placeholder', async () => {
+    const { document } = await loader.load('index.html')
 
-      expect(e.textContent).toContain('Hello, World!')
-      expect(e.href).toContain('%22Hello,_World!%22')
-    })
+    const e = new StringCalculatorPage(document).getPlaceholder()
+    expect(e.textContent).toContain('Hello, World!')
+    expect(e.href).toContain('%22Hello,_World!%22')
   })
 })

strcalc/src/main/frontend/test-helpers.js

@@ -10,6 +10,20 @@
  * @module test-helpers
  */
 
+/**
+ * Produces a DocumentFragment from an HTML string.
+ *
+ * Useful for running tests on Document-like objects that don't impact the
+ * actual global Document.
+ * @param {string} innerHtml - HTML from which to produce a DocumentFragment
+ * @returns {DocumentFragment} - DocumentFragment containing innerHtml elements
+ */
+export function fragment(innerHtml) {
+  const t = document.createElement('template')
+  t.innerHTML = innerHtml
+  return t.content
+}
+
 /**
  * Enables tests to load page URLs both in the browser and in Node using JSDom.
  */

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

@@ -0,0 +1,25 @@
+/* eslint-env browser */
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * Represents the StringCalculator web page.
+ *
+ * Follows the Page Object pattern from the Selenium WebDriver documentation,
+ * though we're using the DOM directly rather than Selenium.
+ * @see https://www.selenium.dev/documentation/test_practices/design_strategies/
+ */
+export default class StringCalculatorPage {
+  document
+
+  constructor(doc) {
+    this.document = doc
+  }
+
+  getPlaceholder() {
+    return this.document.querySelector('#app .placeholder a')
+  }
+}