add E2E testing for front end app

.gitignore

@@ -5,4 +5,5 @@ front-end/yarn.lock
 api/node_modules
 api/.env
 api/package-lock.json
-api/dist
+api/dist
+E2E-test/node_modules

E2E-test/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["env"]
+  }

E2E-test/interaction.test.js

@@ -0,0 +1,73 @@
+
+import {isDebugging} from './testingInit'
+const puppeteer = require('puppeteer')
+const striptags = require('striptags')
+
+/**
+ *  CAUTION!!!
+these test requires the service to be run. the test wont work if service not running.
+*/
+
+const APP = 'http://localhost:3000/'
+let page
+let browser
+const width = 1920;
+const height = 1080;
+
+let getJsonPayload = () =>  {
+    return JSON.parse(document.querySelector("pre").innerText)
+}
+
+beforeAll(async ()=>{
+
+    browser = await puppeteer.launch(isDebugging().puppeteer)
+    page = await browser.newPage()
+    await page.setViewport({width,height})
+
+    process.env.USER_ACCESS_TOKEN = null
+})
+
+afterAll(async ()=>{
+    browser.close()
+})
+
+describe("interaction test", ()=>{
+    test('landing on page and sees normal table header & "not pivot" switch', async()=>{
+        await page.goto(APP)
+        // await page.waitFor('.ant-table-thead')
+        const selector = await page.$('.ant-table-thead');
+        const html = await page.evaluate(body => body.innerHTML, selector);
+
+        expect(html).toBe('<tr><th class="ant-table-column-has-filters"><span>ID<div class="ant-table-column-sorter"><span class="ant-table-column-sorter-up off" title="↑"><i class="anticon anticon-caret-up"></i></span><span class="ant-table-column-sorter-down off" title="↓"><i class="anticon anticon-caret-down"></i></span></div></span></th><th class="ant-table-column-has-filters"><span>Full Name<div class="ant-table-column-sorter"><span class="ant-table-column-sorter-up off" title="↑"><i class="anticon anticon-caret-up"></i></span><span class="ant-table-column-sorter-down off" title="↓"><i class="anticon anticon-caret-down"></i></span></div></span></th><th class=""><span>Email</span></th><th class="ant-table-column-has-filters"><span>Item<div class="ant-table-column-sorter"><span class="ant-table-column-sorter-up off" title="↑"><i class="anticon anticon-caret-up"></i></span><span class="ant-table-column-sorter-down off" title="↓"><i class="anticon anticon-caret-down"></i></span></div></span></th><th class="" style="text-align: right;"><span>Quantity</span></th><th class="" style="text-align: right;"><span>Total Price</span></th></tr>')
+
+        const switchSelector = await page.$('#__next > div > div > div > div.ant-layout-header > span > span')
+        const label = await page.evaluate(body => body.innerHTML, switchSelector);
+        expect(label).toBe('Pivot Off')
+    })
+
+    test('click on ID column header and sees row re-sorted', async()=>{
+        let selector = await page.$('#__next > div > div > div > div.ant-layout-content > div > div > div > div > div > div > table > tbody > tr:nth-child(1) > td:nth-child(1)')
+        const idBefore = await page.evaluate(res=>{
+            return parseInt(res.innerText)
+        }, selector)
+        expect(idBefore).toEqual(1)
+
+        const sorter = await page.$('#__next > div > div > div > div.ant-layout-content > div > div > div > div > div > div > table > thead > tr > th:nth-child(1) > span > div > span.ant-table-column-sorter-down.off')
+        await page.evaluate(res => res.click(), sorter)
+
+        await page.waitFor(2000)
+        selector = await page.$('#__next > div > div > div > div.ant-layout-content > div > div > div > div > div > div > table > tbody > tr:nth-child(1) > td.ant-table-column-has-filters.ant-table-column-sort')
+        const idAfter = await page.evaluate(res=>{return parseInt(res.innerText)}, selector)
+        expect(idAfter).toEqual(100)
+    })
+
+    test('click on pivot switch and sees correct table header', async()=>{
+        let theSwitch = await page.$('.ant-switch')
+        await page.evaluate(res => res.click(), theSwitch)
+
+        const selector = await page.$('.ant-table-thead');
+        const header = await page.evaluate(body => body.outerHTML, selector);
+
+        expect(striptags(header,[],' ').trim().split('    ').map(x=>x.trim()).filter(x=>x.length > 0).length).toEqual(12)
+    })
+})

E2E-test/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "E2E-test",
+  "version": "0.1.0",
+  "description": "end to end testing for FDN app",
+  "main": "index.js",
+  "author": "[email protected]",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.4.2",
+    "babel-preset-env": "^1.7.0",
+    "jest": "^23.5.0",
+    "puppeteer": "^1.7.0",
+    "striptags": "^3.1.1"
+  },
+  "scripts": {
+    "test": "jest",
+    "debug": "export NODE_ENV=debug && jest"
+  }
+}

E2E-test/testingInit.js

@@ -0,0 +1,12 @@
+
+export const isDebugging = () => {
+    let debugging_mode = {
+      puppeteer: {
+        headless: false,
+        slowMo: 80,
+        args: [`--window-size=1920,1080`]
+      },
+      timeout: 60000
+    };
+    return process.env.NODE_ENV === "debug" ? debugging_mode : false;
+  };