added jest testing

Author: fredosauce

__tests__/componentReducer.test.ts

@@ -1,54 +1,12 @@
 import reducer from '../app/src/reducers/componentReducer';
-// import { State, Action, Component, ChildElement } from '../app/src/interfaces/InterfacesNew';
+import { State, Action, Component, ChildElement } from '../app/src/interfaces/InterfacesNew';
 
 import initialState from '../app/src/context/initialState';
 
-const path = require('path');
-const Application = require('spectron').Application;
-const baseDir = path.join(__dirname, '..');
-const electronPath = path.join(baseDir, 'node_modules', '.bin', 'electron');
 
-const appArg = path.join(baseDir, 'app', 'electron', 'main.js');
-//const appArg = path.join(baseDir, 'app', 'electron');
-console.log(electronPath);
-console.log(appArg);
-
-//const electronPath = '../node_modules/.bin/electron';
-//const electronPath = require('electron');
-
-const app = new Application({
-  path: electronPath,
-  args: [appArg],
-  chromeDriverArgs: ['--no-proxy-server'],
-  env: {
-    'NO_PROXY': '127.0.0.1,localhost',
-    'NODE_ENV': 'test'
-  },
-  waitTimeout: 10e3
-})
-
-console.log(app);
-// const testComponent: Component = {
-//   id: 2,
-//   name: "Test",
-//   nextChildId: 1,
-//   style: {},
-//   code: '',
-//   children: []
-// }
-
-describe('Testing componentReducer functionality', () => {
-  let state = initialState;
-
-  beforeAll(() => {
-    return app.start();
-  })
-
-  afterAll(() => {
-    if (app && app.isRunning()) {
-      return app.stop();
-    }
-  })
+describe('Testing componentReducer functionality', function () {
+  let state: State = initialState;
+  
 
   // TEST 'ADD COMPONENT'
   describe('ADD COMPONENT reducer', () => {
@@ -80,21 +38,43 @@ describe('Testing componentReducer functionality', () => {
           childId: null
         }
       }
+      // switch focus to very first root component
       state.canvasFocus = { componentId: 1, childId: null };
       console.log(state);
-      const newState = reducer(state, action);
-      const newParent = newState.components[0];
-      // expect newParent's children array to have length 1
+      state = reducer(state, action);
+      const newParent = state.components[0];
+      // expect new parent's children array to have length 1
       expect(newParent.children.length).toEqual(1);
-      // expect child to have type 'Component' and name 'TestRegular'
+      // expect new child to have type 'Component' 
+      console.log('new child ', newParent.children[0]);
       expect(newParent.children[0].type).toEqual('Component');
-      expect(newParent.children[0].name).toEqual('TestRegular');
+      const addedChild = state.components.find(comp => comp.id === newParent.children[0].typeId);
+      // expect new child typeId to correspond to component with name 'TestRegular'
+      expect(addedChild.name).toEqual('TestRegular');
     })
   })
+  
   // TEST 'CHANGE FOCUS'
+  describe('CHANGE FOCUS reducer', () => {
+    it('should change focus to specified component', () => {
+      const action = {
+        type: 'CHANGE FOCUS',
+        payload: {
+          componentId: 2,
+          childId: null
+        }
+      }
+      console.log('before change focus ', state.canvasFocus);
+      state = reducer(state, action);
+      console.log('after change focus ', state.canvasFocus);
+      expect(state.canvasFocus.componentId).toEqual(2);
+      expect(state.canvasFocus.childId).toEqual(null);
+    })
+  })
 
   // TEST 'UPDATE CSS'
 
-  // TEST 'SET INITIAL STATE'
+
+  // TEST 'RESET STATE'
 
 })

app/electron/main.js

@@ -10,9 +10,6 @@ const {
 // The splash screen is what appears while the app is loading
 const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 const { resolve } = require('app-root-path');
-const Protocol = require('./protocol');
-const MenuBuilder = require('./menu');
-const path = require('path');
 
 const {
   default: installExtension,
@@ -197,18 +194,19 @@ app.on('ready', createWindow);
 app.on('window-all-closed', () => {
   // On macOS it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit();
-  } else {
-    ContextMenu.clearMainBindings(ipcMain);
-  }
+  // if (process.platform !== 'darwin') {
+  //   app.quit();
+  // } else {
+  //   ContextMenu.clearMainBindings(ipcMain);
+  // }
+  app.quit();
 });
 
-app.on('activate', () => {
+app.on('activate', async () => {
   // On macOS it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (win === null) {
-    createWindow();
+    await createWindow();
   }
 });
 

app/src/helperFunctions/generateCode.ts

@@ -1,5 +1,12 @@
 import { Component, State, ChildElement } from '../interfaces/InterfacesNew';
 import HTMLTypes from '../context/HTMLTypes';
+const { format } = require('prettier');
+
+declare global {
+  interface Window {
+    api: any;
+  }
+}
 
 // generate code based on the component heirarchy
 const generateUnformattedCode = (
@@ -211,14 +218,20 @@ const generateUnformattedCode = (
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  return window.api.formatCode(code);
-  // return format(code, {
-  //   singleQuote: true,
-  //   trailingComma: 'es5',
-  //   bracketSpacing: true,
-  //   jsxBracketSameLine: true,
-  //   parser: 'babel'
-  // });
+
+  // in test environment, window.api is not defined,
+  // so we reference original prettier format function instead
+  if (process.env.NODE_ENV === 'test') {
+    return format(code, {
+      singleQuote: true,
+      trailingComma: 'es5',
+      bracketSpacing: true,
+      jsxBracketSameLine: true,
+      parser: 'babel'
+    });
+  } else {
+    return window.api.formatCode(code);
+  }
 };
 
 // generate code based on component heirarchy and then return the rendered code

app/src/reducers/componentReducer.ts

@@ -133,7 +133,7 @@ const reducer = (state: State, action: Action) => {
         type,
         typeId,
         childId
-      }: { type: string; typeId: number; childId: number } = action.payload;
+      }: { type: string; typeId: number; childId: any} = action.payload;
       // the parent of the new child is whichever component that is currently focused on
       const parentComponentId: number = state.canvasFocus.componentId;
 

package.json

@@ -35,8 +35,7 @@
     "dist-linux": "npm run prod-build && electron-builder --linux",
     "dist-windows": "npm run prod-build && electron-builder --windows",
     "dist-all": "npm run prod-build && electron-builder --mac --linux --windows",
-    "test": "cross-env NODE_ENV=test NO_PROXY='127.0.0.1,localhost' jest --verbose",
-    "mocha-test": "mocha"
+    "test": "cross-env NODE_ENV=test jest --verbose"
   },
   "build": {
     "productName": "ReacType",
@@ -88,7 +87,9 @@
       "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest",
       "^.+\\.js?$": "babel-jest"
     },
-    "transformIgnorePatterns": ["<rootDir>/node_modules"],
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules"
+    ],
     "testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
     "globals": {
       "ts-jest": {
@@ -173,7 +174,9 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@types/chai": "^4.2.11",
     "@types/jest": "^25.1.5",
+    "@types/mocha": "^8.0.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
@@ -184,6 +187,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "chai": "^4.2.0",
     "clean-webpack-plugin": "^0.1.19",
     "concurrently": "^5.1.0",
     "copy-webpack-plugin": "^4.5.2",

tsconfig.json

@@ -2,17 +2,18 @@
   "compilerOptions": {
     "outDir": "./app/dist/",
     "sourceMap": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
+    "noImplicitAny": false,
+    "noImplicitThis": false,
+    "strictNullChecks": false,
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",
     "strict": true,
     "lib": ["es6", "dom", "es2017"],
     "allowSyntheticDefaultImports": true,
     "strictFunctionTypes": false,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "typeRoots": ["node_modules/@types", "node_modules/@types/node"]
   },
   // only compile ts files in this directory
   "include": [".app/src/**/*"]