Replace test/page-loader.js with test-page-opener

Required adding test-page-opener to the test.server.deps.inline
config variable. Also updated all internal import paths to end with the
'.js' extension.

These changes were a consequence of the fact that the previous
test/page-loader.js file was automatically bundled via Rollup, and the
"external" test-page-opener isn't by default. Without bundling,
test-page-opener can't resolve Handlebars modules transformed via
rollup-plugin-handlebars-precompiler.

---

On first adding test-page-opener to the project, running main.test.js in
the browser passed. When running it in Node, all of the internal imports
that didn't end with '.js' failed. This followed on the heels of
mbland/test-page-opener#20, which I created when test-page-opener's own
internal imports failed when used in this project. (I also filed
mbland/test-page-opener#21 when its internal istanbul-lib-coverage
import broke in this project, too.)

After updating all the local imports on .js files, the Handlebars
imports (ending in '.hbs') continued to fail with
ERR_UNKNOWN_FILE_EXTENSION:

```sh
% pnpm test -- run main.test.js

 RUN  v1.1.3 /.../tomcat-servlet-testing-example/strcalc/src/main/frontend

 ❯ main.test.js (1)
   ❯ String Calculator UI on initial page load (1)
     × contains the "Hello, World!" placeholder

—— Failed Tests 1 ——

 FAIL  main.test.js > String Calculator UI on initial page load > contains the "Hello, World!" placeholder
Error: opening index.html
 ❯ JsdomPageOpener.open node_modules/.pnpm/[email protected]/node_modules/test-page-opener/lib/jsdom.js:85:13
 ❯ TestPageOpener.open node_modules/.pnpm/[email protected]/node_modules/test-page-opener/index.js:109:18
 ❯ main.test.js:18:26
     16|
     17|   test('contains the "Hello, World!" placeholder', async () => {
     18|     const { document } = await opener.open('index.html')
       |                          ^
     19|     const appElem = document.querySelector('#app')
     20|

Caused by: Error: importing file:///.../tomcat-servlet-testing-example/strcalc/src/main/frontend/main.js
 ❯ node_modules/.pnpm/[email protected]/node_modules/test-page-opener/lib/jsdom.js:173:25
 ❯ importModulesOnEvent node_modules/.pnpm/[email protected]/node_modules/test-page-opener/lib/jsdom.js:131:15

Caused by: TypeError: Unknown file extension ".hbs" for
/.../mbland/tomcat-servlet-testing-example/strcalc/src/main/frontend/components/calculator.hbs
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_UNKNOWN_FILE_EXTENSION' }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
```

(I'm rather relieved to have implemented mbland/test-page-opener#14 just
today, which is why there are such nice "Caused by:" messages above.)

When I temporarily replaced the npm dependency with my local working
copy via `pnpm link ../../../../../test-page-opener`, the test would
pass again.

It occurred to me that the Node runs of the test weren't including
test-page-opener in the Rollup bundle containing the transformed .hbs
files. Or, it would include it when it was linked to the local copy, but
not include it when installed normally.

I eventually figured out that the Vitest config setting
server.deps.inline would cause the "external" test-page-opener to get
bundled, enabling it to resolve the '.hbs' imports.

- <https://vitest.dev/config/#server-deps-inline>

Author: mbland

strcalc/src/main/frontend/components/app.js

@@ -10,8 +10,8 @@
  * @module init
  */
 
-import Introduction from './introduction'
-import Calculator from './calculator'
+import Introduction from './introduction.js'
+import Calculator from './calculator.js'
 
 export default class App {
   /**

strcalc/src/main/frontend/components/calculators.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { postFormData } from './request'
+import { postFormData } from './request.js'
 
 export const DEFAULT_ENDPOINT = './add'
 

strcalc/src/main/frontend/main.js

@@ -16,7 +16,7 @@
  * @module main
  */
 import App from './components/app.js'
-import calculators from './components/calculators'
+import calculators from './components/calculators.js'
 
 /**
  * Calls the app initializer with production parameters.

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

@@ -4,16 +4,18 @@
  * 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 { describe, afterEach, expect, test } from 'vitest'
-import { PageLoader } from './test/page-loader.js'
-import StringCalculatorPage from './test/page'
+import { afterEach, beforeAll, describe, expect, test } from 'vitest'
+import StringCalculatorPage from './test/page.js'
+import TestPageOpener from 'test-page-opener'
 
 describe('String Calculator UI on initial page load', () => {
-  const loader = new PageLoader('/strcalc/')
-  afterEach(() => loader.closeAll())
+  let opener
+
+  beforeAll(async () => opener = await TestPageOpener.create('/strcalc/'))
+  afterEach(() => opener.closeAll())
 
   test('contains the "Hello, World!" placeholder', async () => {
-    const { document } = await loader.load('index.html')
+    const { document } = await opener.open('index.html')
     const appElem = document.querySelector('#app')
 
     const e = new StringCalculatorPage(appElem, document).title()

strcalc/src/main/frontend/package.json

@@ -44,6 +44,7 @@
     "handlebars": "^4.7.8",
     "jsdoc-cli-wrapper": "^1.0.4",
     "jsdom": "^23.1.0",
+    "test-page-opener": "^1.0.3",
     "vite": "^5.0.11",
     "vitest": "^1.1.3",
     "webdriverio": "^8.27.0"