Merge pull request #61 from mbland/add-calculators-collection

Add calculator collection module

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

@@ -22,7 +22,7 @@ export default class App {
    * @param {object} params - parameters made available to all initializers
    * @param {Element} params.appElem - parent Element containing all components
    * @param {string} params.apiUrl - API backend server URL
-   * @param {Function} params.postForm - posts form data to API
+   * @param {object} params.calculators - calculator implementations
    */
   init(params) {
     // In this example application, none of the components depend on one

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

@@ -11,12 +11,17 @@ import StringCalculatorPage from '../test/page'
 // @vitest-environment jsdom
 describe('initial state after calling App.init()', () => {
   const page = StringCalculatorPage.new()
+  const calculators = {
+    'first': { label: 'First calculator', impl: null },
+    'second': { label: 'Second calculator', impl: null },
+    'third': { label: 'Third calculator', impl: null }
+  }
 
   afterEach(() => page.clear())
   afterAll(() => page.remove())
 
-  test('contains the "Hello, World!" placeholder', async () => {
-    new App().init({ appElem: page.appElem })
+  test('contains the "Hello, World!" title', async () => {
+    new App().init({ appElem: page.appElem, calculators })
 
     const e = page.title()
     expect(e.textContent).toContain('Hello, World!')

strcalc/src/main/frontend/components/calculator.hbs

@@ -8,7 +8,7 @@
   <input type="text" name="numbers" id="numbers" required />
   <fieldset class="impl">
     <p>Select which implementation to use:</p>
-    {{#each implementations}}{{#with this}}
+    {{#each calcOptions}}{{#with this}}
       <label for="impl-{{ value }}">{{ label }}</label>
       <input type="radio" id="impl-{{ value }}" name="impl" value="{{ value }}"
        {{#if @first}}checked{{/if}}/>{{#unless @last}}<br/>{{/unless}}

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

@@ -12,31 +12,31 @@ export default class Calculator {
    * @param {object} params - parameters made available to all initializers
    * @param {Element} params.appElem - parent Element containing all components
    * @param {string} params.apiUrl - API backend server URL
-   * @param {Function} params.postForm - posts form data to API
+   * @param {object} params.calculators - calculator implementations
    */
-  init({ appElem, apiUrl, postForm }) {
-    const implementations = [
-      { label: 'Tomcat backend (Java)', value: 'java' },
-      { label: 'In-browser frontend (JavaScript)', value: 'javascript' }
-    ]
-    const t = Template({ apiUrl, implementations })
+  init({ appElem, apiUrl, calculators }) {
+    const calcOptions = Object.entries(calculators)
+      .map(([k, v]) => ({ value: k, label: v.label }))
+    const t = Template({ apiUrl, calcOptions })
     const [ form, resultElem ] = t.children
 
     appElem.appendChild(t)
     document.querySelector('#numbers').focus()
     form.addEventListener(
-      'submit', e => Calculator.#submitRequest(e, resultElem, postForm)
+      'submit', e => Calculator.#submitRequest(e, resultElem, calculators)
     )
   }
 
   // https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/
-  static async #submitRequest(event, resultElem, postForm) {
+  static async #submitRequest(event, resultElem, calculators) {
     event.preventDefault()
 
+    const form = event.currentTarget
+    const selected = form.querySelector('input[name="impl"]:checked').value
     const result = resultElem.querySelector('p')
 
     try {
-      const response = await postForm(event.currentTarget)
+      const response = await calculators[selected].impl(form)
       result.textContent = `Result: ${response.result}`
     } catch (err) {
       result.textContent = err

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

@@ -7,7 +7,7 @@
 
 import Calculator from './calculator'
 import { afterAll, afterEach, describe, expect, test, vi } from 'vitest'
-import { resolvedUrl } from '../test/helpers.js'
+import { resolvedUrl } from '../test/helpers'
 import StringCalculatorPage from '../test/page'
 
 // @vitest-environment jsdom
@@ -16,7 +16,14 @@ describe('Calculator', () => {
 
   const setup = () => {
     const postForm = vi.fn()
-    new Calculator().init({ appElem: page.appElem, apiUrl: './add', postForm })
+    const calculators = {
+      'api': { label: 'API', impl: postForm },
+      'browser': { label: 'Browser', impl: () => {} }
+    }
+
+    new Calculator().init({
+      appElem: page.appElem, apiUrl: './add', calculators
+    })
     return { page, postForm }
   }
 

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

@@ -0,0 +1,15 @@
+/*
+ * 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 { postForm } from './request'
+
+/**
+ * Collection of production String Calculator implementations
+ */
+export default {
+  'api': { label: 'Tomcat backend API (Java)', impl: postForm },
+  'browser': { label: 'In-browser (JavaScript)', impl: postForm }
+}

strcalc/src/main/frontend/main.js

@@ -16,7 +16,7 @@
  * @module main
  */
 import App from './components/app.js'
-import { postForm } from './components/request'
+import calculators from './components/calculators'
 
 /**
  * Calls the app initializer with production parameters.
@@ -30,7 +30,7 @@ document.addEventListener(
   'DOMContentLoaded',
   () => {
     const appElem = document.querySelector('#app')
-    new App().init({ appElem, apiUrl: './add', postForm })
+    new App().init({ appElem, apiUrl: './add', calculators })
   },
   { once: true }
 )