jest & spectron test

Author: fredosauce

__tests__/componentReducer.test.ts

@@ -0,0 +1,84 @@
+import reducer from '../app/src/reducers/componentReducer';
+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 app = new Application({
+  path: electronPath,
+  args: ['../app/electron/main.js']
+})
+// const testComponent: Component = {
+//   id: 2,
+//   name: "Test",
+//   nextChildId: 1,
+//   style: {},
+//   code: '',
+//   children: []
+// }
+
+describe('Testing componentReducer functionality', () => {
+  let state: State = initialState;
+
+  beforeAll(() => {
+    return app.start();
+  })
+
+  afterAll(() => {
+    if (app && app.isRunning()) {
+      return app.stop();
+    }
+  })
+
+  // TEST 'ADD COMPONENT'
+  describe('ADD COMPONENT reducer', () => {
+    it('should add new reuseable component to state', () => {
+      const action = {
+        type: 'ADD COMPONENT',
+        payload: {
+          componentName: "TestRegular",
+          root: false
+        }
+      }
+      state = reducer(state, action);
+      // expect state.components array to have length 2
+      const length = state.components.length;
+      expect(length).toEqual(2);
+      // expect new component name to match name of last elem in state.components array
+      expect(state.components[length - 1].name).toEqual(action.payload.componentName);
+    })
+  })
+
+  // TEST 'ADD CHILD'
+  describe('ADD CHILD reducer', () => {
+    it('should add child component to top-level component', () => {
+      const action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'Component',
+          typeId: 2,
+          childId: null
+        }
+      }
+      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
+      expect(newParent.children.length).toEqual(1);
+      // expect child to have type 'Component' and name 'TestRegular'
+      expect(newParent.children[0].type).toEqual('Component');
+      expect(newParent.children[0].name).toEqual('TestRegular');
+    })
+  })
+  // TEST 'CHANGE FOCUS'
+
+  // TEST 'UPDATE CSS'
+
+  // TEST 'SET INITIAL STATE'
+
+})

app/electron/main.js

@@ -24,7 +24,7 @@ const path = require('path');
 // const fs = require('fs');
 
 console.log('NODE ENV is ', process.env.NODE_ENV);
-const isDev = process.env.NODE_ENV === 'development';
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ;
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 

app/src/components/App.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useReducer, useEffect } from 'react';
 import '../public/styles/style.css';
-import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppContainer from '../containers/AppContainer';

app/src/components/main/CanvasContainer.tsx

@@ -4,7 +4,6 @@ import Canvas from './Canvas';
 // The CanvasContainer sets the boundaries on the width/height of the canvas
 function CanvasContainer() {
   const canvasContainerStyle = {
-    height: '950px',
     width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px Solid grey',

app/src/public/styles/style.css

@@ -168,7 +168,7 @@ h1 {
   background: #fff;
   flex: 1;
   width: 100%;
-  /* overflow: hidden;  */
+  overflow: auto;
   display: flex;
   background-color: #e4e4e4;
   /* justify-content: center;
@@ -301,12 +301,6 @@ div.rst__rowContents {
   cursor: pointer;
 }
 
-/* @media only screen and (max-width: 560px) {
-  .app-container {
-    width: 80%;
-  }
-} */
-
 a.nav_link {
   color: rgba(0, 0, 0, 0.87);
   cursor: pointer;
@@ -315,4 +309,63 @@ a.nav_link {
 a.nav_link:hover {
   color: #3EC1AC;
   text-decoration: underline;
+}
+
+// Additional styling for ReacType X
+
+.componentDefault {
+  width: 100%;
+  border: 2px solid gray;
+  min-height: 150px;
+  padding: 10px;
+  background-color: lightgray;
+  opacity: 0.75;
+}
+
+.componentPanelWrapper {
+  margin-top: 75px;
+  width: 100%;
+}
+
+.inputName {
+  margin-bottom: 35px;
+  text-align: center;
+}
+
+.makeStyles-panelWrapperList-4::-webkit-scrollbar-track {
+  background-color: rgba(25, 25, 25, 0.8);
+}
+
+h4 {
+  color: white;
+  text-align: center;
+}
+
+h3 {
+  margin: 0;
+  padding-left: 15px;
+  padding-top: 15px;
+  font-size: 1em;
+  letter-spacing: 0.5px;
+}
+
+.compPanelItem {
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+.compPanelItem h3 {
+  padding-top: 25px;
+  font-size: 1.15em;
+  letter-spacing: 0.75px;
+}
+
+.compPanelItem:hover {
+  cursor: pointer;
+}
+
+.right {
+  padding-top: 35px;
+  width: 420px;
 }

app/src/public/styles/styleNew.css

@@ -113,7 +113,7 @@ const reducer = (state: State, action: Action) => {
 
       // update the focus to the new component
       const canvasFocus = {
-        ...canvasFocus,
+        ...state.canvasFocus,
         componentId: newComponent.id,
         childId: null
       };

app/src/reducers/componentReducer.ts

@@ -24,7 +24,7 @@
     "Andrew Cho"
   ],
   "scripts": {
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true electron-builder install-app-deps",
     "dev-server": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js",
     "dev": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=development electron .\" -k",
     "prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
@@ -34,7 +34,8 @@
     "dist-mac": "npm run prod-build && electron-builder --mac",
     "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"
+    "dist-all": "npm run prod-build && electron-builder --mac --linux --windows",
+    "test": "cross-env NODE_ENV=test jest --verbose"
   },
   "build": {
     "productName": "ReacType",
@@ -72,6 +73,26 @@
     "boilerplate"
   ],
   "license": "MIT",
+  "jest": {
+    "moduleNameMapper": {
+      "^.+\\.(css|scss|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy",
+      "electron": "<rootDir>/__mocks__/electron.ts"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest"
+    },
+    "testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
+    "globals": {
+      "ts-jest": {
+        "diagnostics": false
+      }
+    }
+  },
   "bugs": {
     "url": "https://github.com/open-source-labs/ReacType/issues"
   },
@@ -194,6 +215,7 @@
     "postcss-loader": "^2.1.6",
     "redux-mock-store": "^1.5.4",
     "sass-loader": "^7.0.3",
+    "spectron": "^11.1.0",
     "style-loader": "^0.20.3",
     "ts-jest": "^25.3.0",
     "ts-node": "^8.10.2",