Merge pull request #4 from oslabs-beta/robby/testing

Robby/testing - add new test file for backend RoutesDescription, update test cases to reflect changes in backend hierarchy

Author: khobread

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"
   },
@@ -113,7 +114,7 @@
     "jest-diff": "^26.1.0",
     "jest-runner-eslint": "^0.7.7",
     "jscharting-react": "^1.2.1",
-    "puppeteer": "^5.1.0",
+    "puppeteer": "^14.3.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
     "sinon-chrome": "^3.0.1",

src/app/__tests__/ActionContainer.test.tsx

@@ -8,6 +8,7 @@ import ActionContainer from '../containers/ActionContainer';
 import { useStoreContext } from '../store';
 import { emptySnapshots } from '../actions/actions';
 import Action from '../components/Action';
+import RouteDescription from '../components/RouteDescription';
 
 configure({ adapter: new (Adapter as any)() });
 
@@ -26,6 +27,10 @@ const state = {
             name: 'App',
             componentData: { actualDuration: 3.5 },
           }],
+          route: {
+            id: 1,
+            url: 'http://localhost:8080/',
+          },
         },
         children: [{
           index: 1,
@@ -38,6 +43,10 @@ const state = {
               name: 'App',
               componentData: { actualDuration: 3.5 },
             }],
+            route: {
+              id: 2,
+              url: 'http://localhost:8080/',
+            },
           },
           children: [{
             index: 2,
@@ -50,6 +59,10 @@ const state = {
                 name: 'App',
                 componentData: { actualDuration: 3.5 },
               }],
+              route: {
+                id: 3,
+                url: 'http://localhost:8080/',
+              },
             },
             children: [{
               index: 3,
@@ -62,6 +75,10 @@ const state = {
                   name: 'App',
                   componentData: { actualDuration: 3.5 },
                 }],
+                route: {
+                  id: 4,
+                  url: 'http://localhost:8080/test/',
+                },
               },
               children: [],
             }],
@@ -87,11 +104,12 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
 
 let wrapper;
 
-//actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
-//conditional rendering in ActionContainer that shows/hides time-travel functionality
+// actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
+// conditional rendering in ActionContainer that shows/hides time-travel functionality
 
 beforeEach(() => {
   wrapper = shallow(<ActionContainer actionView={true} />);
+  // wrapper2 = shallow(<RouteDescription />);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });
@@ -107,6 +125,6 @@ describe('testing the emptySnapshot button', () => {
   });
 });
 
-test('number of actions should reflect snapshots array', () => {
-  expect(wrapper.find(Action).length).toBe(state.tabs[state.currentTab].snapshots.length);
+test('number of RouteDescription components should reflect number of unique routes', () => {
+  expect(wrapper.find(RouteDescription).length).toBe(2);
 });

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;