Resolved install error for puppeteer dependency. Changed puppeteerServer port to 5001 from 5000 since Apple uses port 5000 for Air Play. Added tests to masterState.test and wrote routes.test file.

Co-authored-by: Chris LeBrett <[email protected]>
Co-authored-by: Robby Tipton <[email protected]>
Co-authored-by: Joseph Park <[email protected]>
Co-authored-by: David Kim <[email protected]>
Co-authored-by: Kevin HoEun Lee <[email protected]>

Author: 5 people

package.json

@@ -16,6 +16,7 @@
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
     "test": "jest --verbose --coverage",
+    "test-on": "./node_modules/.bin/jest $1",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md"
   },
@@ -111,9 +112,10 @@
     "jest": "^26.1.0",
     "jest-cli": "^26.1.0",
     "jest-diff": "^26.1.0",
+    "jest-puppeteer": "^3.4.0",
     "jest-runner-eslint": "^0.7.7",
     "jscharting-react": "^1.2.1",
-    "puppeteer": "^5.1.0",
+    "puppeteer": "^1.9.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
     "sinon-chrome": "^3.0.1",

src/backend/__tests__/linkFiber.test.tsx

@@ -15,7 +15,8 @@ import puppeteer from 'puppeteer';
 
 const SERVER = require('../puppeteerServer');
 
-const APP = 'http://localhost:5000';
+// Apple uses port 5000 for Air Play.
+const APP = 'http://localhost:5001';
 
 let linkFiber;
 let mode;

src/backend/__tests__/masterState.test.ts

@@ -1,35 +1,61 @@
-import masterState from '../masterState'
+import masterState from '../masterState';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   HookStateItem,
-  HookStates
+  HookStates,
 } from '../types/backendTypes';
 
 describe('Testing masterState functionality', () => {
-  let hookOne : HookStateItem = {state: 'A', component: 'counter1'};
-  let hookTwo : HookStateItem = {state: 'B', component: 'counter2'};
-  let allHooks : HookStates = [hookOne, hookTwo];
-  masterState.saveNew(hookOne.state, hookOne.component);
-  masterState.saveNew(hookTwo.state, hookTwo.component);
+  const hookOne : HookStateItem = { state: 'A', component: 'counter1' };
+  const hookTwo : HookStateItem = { state: 'B', component: 'counter2' };
+  const hookThree : HookStateItem = { state: 'C', component: 'counter3' };
+  const allHooks : HookStates = [hookOne, hookTwo];
 
-  describe('Save new', () => {
-    masterState.saveNew(hookOne.state, hookOne.component);
-    masterState.saveNew(hookTwo.state, hookTwo.component);
-  })
+  describe('saveNew', () => {
+    it('Should return the index of the saved component', () => {
+      expect(masterState.saveNew(hookOne.state, hookOne.component)).toBe(0);
+      expect(masterState.saveNew(hookTwo.state, hookTwo.component)).toBe(1);
+    });
+  });
 
   describe('getComponentByIndex', () => {
-    it('should be able to get both hook states component', () => {
+    it('Should return the component when given a valid index', () => {
       expect(masterState.getComponentByIndex(0)).toEqual(hookOne.component);
       expect(masterState.getComponentByIndex(1)).toEqual(hookTwo.component);
-    })
-  })
+    });
+    it('Should return undefined when given an invalid index', () => {
+      expect(masterState.getComponentByIndex(2)).toBe(undefined);
+    });
+  });
 
   describe('getRecordByIndex', () => {
-    it('should be able to get both hook states', () => {
+    it('Should return the record when given a valid index', () => {
       expect(masterState.getRecordByIndex(0)).toEqual(hookOne);
       expect(masterState.getRecordByIndex(1)).toEqual(hookTwo);
-    })
-  })
+    });
+    it('Should return undefined when given an invalid index', () => {
+      expect(masterState.getRecordByIndex(2)).toBe(undefined);
+    });
+  });
 
-  
-})
+  describe('getComponentByIndexHooks', () => {
+    it('Should return an array of components when given an a valid array of indices', () => {
+      expect(masterState.getComponentByIndexHooks([0, 1])).toEqual([hookOne.component, hookTwo.component]);
+    });
+    it('Should return an empty array when given an invalid array of indices', () => {
+      expect(masterState.getComponentByIndexHooks([2])).toEqual([]);
+    });
+  });
+
+  describe('clear', () => {
+    it('Should return undefined', () => {
+      expect(masterState.clear()).toBe(undefined);
+    });
+    it('Should reset the componentActionRecord index', () => {
+      expect(masterState.saveNew(hookThree.state, hookThree.component)).toBe(0);
+    });
+    it('Should empty the componentActionRecord array', () => {
+      expect(masterState.getComponentByIndex(0)).toEqual(hookThree.component);
+    });
+  });
+});

src/backend/__tests__/routes.test.ts

@@ -0,0 +1,46 @@
+import routes from '../routes';
+
+describe('Unit Tests for routes.ts', () => {
+  describe('addRoute', () => {
+    it('If given a url that doesn\'t match the current route, it should return a new route object and add the route object to its values array.', () => {
+      const newRoute = routes.addRoute('http://localhost:8080/');
+      expect(newRoute.url).toBe('http://localhost:8080/');
+      expect(newRoute.id).toBe(1);
+      expect(routes.values[1].url).toBe('http://localhost:8080/');
+      expect(routes.values[1].id).toBe(1);
+    });
+
+    it('If given a url that does match the current route, it should return the current route object and not add anything to its values array.', () => {
+      const sameRoute = routes.addRoute('http://localhost:8080/');
+      expect(sameRoute).toBe(routes.values[1]);
+      expect(routes.values.length).toBe(2);
+    });
+
+    it('Should give route objects unique ids.', () => {
+      routes.addRoute('http://localhost:8080/test');
+      expect(routes.values[1].id).not.toBe(routes.values[2].id);
+    });
+
+    it('Should reassign current to point to the last index in the values array.', () => {
+      expect(routes.current).toBe(routes.values.length - 1);
+    });
+  });
+
+  describe('navigate', () => {
+    it('Should correctly calculate delta between current and target route.', () => {
+      routes.addRoute('http://localhost:8080/test1');
+      routes.navigate({ url: 'http://localhost:8080/', id: 1 });
+      expect(routes.current).toBe(1);
+      routes.navigate({ url: 'http://localhost:8080/test1', id: 3 });
+      expect(routes.current).toBe(3);
+    });
+
+    it('Should return true if it navigated.', () => {
+      expect(routes.navigate({ url: 'http://localhost:8080/', id: 1 })).toBe(true);
+    });
+
+    it('Should return false if it didn\'t navigate.', () => {
+      expect(routes.navigate({ url: 'http://localhost:8080/', id: 1 })).toBe(false);
+    });
+  });
+});

src/backend/puppeteerServer.js

@@ -8,6 +8,7 @@ const app = express();
 
 app.use(express.static(path.resolve(__dirname)));
 
-const server = app.listen(5000);
+// Apple uses port 5000 for Air Play.
+const server = app.listen(5001);
 
 module.exports = server;