Add tests + Update src to enhance testability

__tests__/e2e/prodApp.test.js

@@ -0,0 +1,101 @@
+// server needs to start before running this test
+// % node index.js
+
+// Needs to be higher than the default Playwright timeout
+jest.setTimeout(40 * 1000)
+
+const { chromium, firefox, webkit, devices } = require("playwright");
+
+const deviceList = [
+    'Galaxy S8',
+    // 'iPad Pro 11',
+    'iPad Mini landscape',
+    // 'iPhone 8',
+    'iPhone 12',
+    'Pixel 2 XL',
+    // 'Pixel 5 landscape',
+    'Desktop Safari',
+    'Desktop Chrome',
+    'Dekstop Edge',
+    'Desktop Firefox',
+];
+
+describe.each([
+    [chromium.name(), chromium],
+    [firefox.name(), firefox],
+    [webkit.name(), webkit],
+])('test on %p', (_browserName, browserType) => {
+
+    let newBrowser;
+
+    beforeAll(async () => {
+        newBrowser = await browserType.launch();
+        // // For debugging
+        // newBrowser = await browserType.launch({
+        //     // slowMo: 250,
+        //     headless: false
+        // });
+    });
+
+    afterAll(async () => {
+        await newBrowser.close();
+    });
+
+    it.each(deviceList)('(#%s) should render the built app', async (curDeviceName) => {
+
+        let context
+        try {
+            context = await newBrowser.newContext({
+                ...devices[curDeviceName],
+
+                // Required when clicking Submit
+                geolocation: { longitude: 48.858455, latitude: 2.294474 },
+                permissions: ['geolocation']
+            });
+        } catch (e) {
+            console.log(`Skip test in "${_browserName}" `);
+            return
+        }
+
+        const page = await context.newPage();
+        await page.goto('http://localhost:8080');
+
+        await expect(page).toHaveSelector('[data-testid="nav-item-brand"]');
+
+        const selector = '[data-testid="nav-item-askbuddy"]';
+        await page.click(selector);
+        await expect(page).toHaveSelector('[data-testid="qna-container"]');
+
+
+        const selectorResContainer = '[data-testid="response-container"]';
+        const elResContainerBefore = await page.$(selectorResContainer);
+        const elResContainerContentBefore = await elResContainerBefore.textContent();
+        expect(elResContainerContentBefore).toBeFalsy();
+
+        // await page.pause()
+
+        // Click [placeholder="Select or type question or category..."]
+        await page.click('[placeholder="Select or type question or category..."]');
+
+        // Click text=What can we do so that other diseases like COVID-19 do not affect us in future?C
+        //   await page.click('text=What can we do so that other diseases like COVID-19 do not affect us in future?C');
+        await page.click('#faq-typeahead-item-0');
+        const element = await page.$('input[placeholder="Select or type question or category..."]');
+
+        const elemValue = await element.inputValue();
+        expect(elemValue).toBeTruthy();
+
+        // Click text=Submit
+        await page.click('text=Submit');
+
+        // Poll until the response shows up
+        await page.waitForSelector('[data-testid="response-item"]');
+
+        const elResContainerAfter = await page.$(selectorResContainer);
+        const elResContainerContentAfter = await elResContainerAfter.textContent();
+        expect(elResContainerContentAfter).toBeTruthy();
+
+        await page.close();
+    });
+
+});

__tests__/server/Utils.test.js

@@ -0,0 +1,41 @@
+const { zipWith } = require('../../server/Utils');
+
+describe('tUtils', () => {
+
+    it('zipWith should return an appropriate output', () => {
+
+        const myFcn = (a, b) => [a, b];
+
+        // --- When xs and ys has the same number of elements
+        let xs = [1, 2, 3];
+        let ys = [4, 5, 6];
+
+        const actSameElems = zipWith(myFcn, xs, ys);
+        expect(actSameElems).toEqual([
+            [1, 4],
+            [2, 5],
+            [3, 6]
+        ]);
+
+        // --- When a number of Elements in xs of LESS than a number of element of ys
+        xs = [1, 2];
+        ys = [4, 5, 6];
+
+        const actXsLessThanYs = zipWith(myFcn, xs, ys);
+        expect(actXsLessThanYs).toEqual([
+            [1, 4],
+            [2, 5]
+        ]);
+
+        // --- When a number of Elements in xs of GREATER than a number of element of ys
+        xs = [1, 2, 3];
+        ys = [4];
+
+        const actXsGtYs = zipWith(myFcn, xs, ys);
+        expect(actXsGtYs).toEqual([
+            [1, 4]
+        ]);
+
+    });
+
+});

artifacts/design_artifacts/app_architecture.md

@@ -0,0 +1,22 @@
+
+## Sequence diagram
+
+### FAQ Workflow
+![FAQ Workflow](./seq_diagram_faqworkflow.svg) 
+
+The sequence diagram above was created from  https://sequencediagram.org/ using the syntaxes below:
+
+```
+title FAQ Workflow
+
+User->Client-FAQ:Select a FAQ
+Client-FAQ->Client-QnAService:getFAQResponseById(id)
+Client-QnAService->Server: axios.get(`/getfaqresponse?id=${id}`)
+Server->Server-QnAService: getFAQResponseById(id)
+Server-QnAService->Server: [Object] faqresponse
+Server->Client-QnAService: {data: faqresponse}
+
+Client-QnAService->Client-FAQ: faqresponse
+Client-FAQ->Client-FAQ: Render FAQ result
+
+```

client/package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!@codemirror)/'",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -42,5 +42,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "puppeteer": "^10.2.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

client/src/App.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
 import { Modal } from 'react-bootstrap';
-import GitHubButton from 'react-github-btn'
+import GitHubButton from 'react-github-btn';
 
 // Components
 import Layout from './components/Layout/Layout';
@@ -244,7 +244,7 @@ function App() {
         <hr />
       </div>
 
-      <section className="container bottom-section">
+      <section data-testid="github-container" className="container bottom-section">
         <GitHubButton href="https://github.com/nongnoochr/covid-buddy" 
           data-size="large"
           data-show-count="true"