Merge pull request #52 from oslabs-beta/staging

Electron test fixes

Author: StephWood

main.js

@@ -194,9 +194,9 @@ function createWindow() {
     // allowRunningInsecureContent: true,
     webPreferences: {
       nodeIntegration: false,
-      contextIsolation: true,
-      enableRemoteModule: false,
-      sandbox: true,
+      contextIsolation: (process.env.NODE_ENV !== 'test'),
+      // enableRemoteModule: false,
+      sandbox: (process.env.NODE_ENV !== 'test'),
       webSecurity: true,
       preload: path.resolve(__dirname, "preload.js"),
     },
@@ -245,7 +245,7 @@ function createWindow() {
   mainWindow.once("ready-to-show", () => {
     mainWindow.show();
     // Open the DevTools automatically if developing
-    if (isDev) {
+    if (isDev && process.env.NODE_ENV !== 'test') {
       mainWindow.webContents.openDevTools();
     }
   });

package.json

@@ -6,7 +6,7 @@
   "repository": "https://github.com/open-source-labs/Swell",
   "scripts": {
     "test-jest": "jest",
-    "test-mocha": "webpack --mode=production --config ./webpack.production.js && SET NODE_ENV=test & mocha",
+    "test-mocha": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha",
     "build": "webpack --mode=production --config ./webpack.production.js",
     "dev": "webpack-dev-server --mode=development --config ./webpack.development.js",
     "prod": "webpack --mode production --config ./webpack.production.js && electron --noDevServer .",

preload.js

@@ -1,6 +1,6 @@
 const { ipcRenderer, contextBridge } = require("electron");
 
-contextBridge.exposeInMainWorld("api", {
+const apiObj =  {
   send: (channel, ...data) => {
     // allowlist channels SENDING to Main
     const allowedChannels = [
@@ -22,8 +22,7 @@ contextBridge.exposeInMainWorld("api", {
     }
   },
   receive: (channel, cb) => {
-    console.log("listening on channel : ", channel);
-    // allowlist channels LISTENING
+    // allowlist channels
     const allowedChannels = [
       "add-collection",
       "clear-history-response",
@@ -37,4 +36,19 @@ contextBridge.exposeInMainWorld("api", {
       ipcRenderer.on(channel, (event, ...args) => cb(...args));
     }
   },
-});
+}
+
+// this is because we need to have context isolation to be false for spectron tests to run, but context bridge only runs if context isolation is true
+// basically we are assigning certain node functionality (require, ipcRenderer) to the window object in an UN-isolated context only for testing
+// security is reduced for testing, but remains sturdy otherwise
+if (process.env.NODE_ENV === 'test') {
+  console.log('made it into here')
+  window.electronRequire = require;
+  window.api = apiObj; 
+
+} else {
+  contextBridge.exposeInMainWorld("api", apiObj);
+}
+
+
+

test/electronTests.js

@@ -0,0 +1,38 @@
+const app = require('../testApp.js');
+
+class Sidebar {
+
+  get url() { 
+    return app.client.$('input.composer_url_input');
+  };
+
+  get requestMethod() { 
+    return app.client.$('select.composer_method_select.http');
+  };
+
+  get choosePost() { 
+    return app.client.$('option=POST');
+  }; 
+
+  get chooseGet(){ 
+    return app.client.$('option=GET');
+  };
+
+  get activateHeaders(){
+    return app.client.$('.composer_subtitle=Headers'); 
+  };
+
+  get headerCheckbox(){
+    return app.client.$$('header_checkbox');
+  };
+
+  get headerKey(){
+    return app.client.$('.header_key');
+  };
+
+  get headerValue(){
+    return app.client.$('.header_value'); 
+  }
+}; 
+
+module.exports = new Sidebar(); 

test/pageObjects/Sidebar.js

@@ -0,0 +1,54 @@
+const assert = require("assert");
+const path = require("path");
+const fs = require("fs");
+const app = require('../testApp');
+
+
+module.exports = () => {
+
+  describe('App opens and renders a page', () => {
+    describe("Browser Window Tests", () => {
+      it("window is visible", async () => {
+        const isVisible = await app.browserWindow.isVisible();
+        return assert.equal(isVisible, true);
+      });
+      it("browser window title is 'Swell'", async () => {
+        const titleWithBrowser = await app.browserWindow.getTitle();
+        return assert.equal(titleWithBrowser, "Swell");
+      });
+  
+      it("Confirm browser window count is 1", async () => {
+        const windowCount = await app.client.getWindowCount();
+        return assert.equal(1, windowCount);
+      });
+      it("take a snapshot of app", async () => {
+        const imageBuffer = await app.browserWindow.capturePage();
+        fs.writeFileSync(path.resolve(__dirname, "snapshot.png"), imageBuffer);
+      });
+    });
+    describe("DOM Tests", () => {
+      it("html file title is 'Swell'", async () => {
+        const titleWithClient = await app.client
+          .waitUntilWindowLoaded()
+          .getTitle(); // the dom set inside dist/index.html which is set inside webpack htmlPlugin
+        return assert.equal(titleWithClient, "Swell");
+      });
+  
+      it("devTool should NOT open since we are in production mode", async () => {
+        const isOpen = await app.browserWindow.isDevToolsOpened();
+        return assert.equal(isOpen, false);
+      });
+      it("Sidebar exists", async () => {
+        await app.client.waitUntilWindowLoaded();
+        // $ is basically querySelector
+        const sidebar = await app.client.$(".sidebar_composer-console");
+        return assert.notEqual(sidebar.value, null);
+      });
+      it("Main Component exists", async () => {
+        await app.client.waitUntilWindowLoaded();
+        const content = await app.client.$(".contents");
+        return assert.notEqual(content.value, null);
+      });
+    });
+  }); 
+}

test/subSuites/appOpens.js

@@ -0,0 +1,65 @@
+const assert = require('assert'); 
+const sideBar = require('../pageObjects/Sidebar.js'); 
+
+
+module.exports = () => {
+  describe('CRUD/History functionality', function(){
+    
+    describe('URL/request method inputs', () => {
+      it('can type url into url input', async () => {
+        await sideBar.url.addValue('pokeapi.co/api/v2/pokemon?limit=5');
+        const input = await sideBar.url.getValue();
+    
+        return assert.strictEqual(input, 'http://pokeapi.co/api/v2/pokemon?limit=5');
+      });
+  
+      it('can select a request method', async () => {
+        await sideBar.requestMethod.click();
+        await sideBar.choosePost.click();
+        let isSelected = await sideBar.choosePost.isSelected();
+        assert.strictEqual(isSelected, true); 
+  
+        await sideBar.requestMethod.click();
+        await sideBar.chooseGet.click();
+        isSelected = await sideBar.chooseGet.isSelected();
+        assert.strictEqual(isSelected, true);
+      });
+    })
+
+    // describe('headers inputs', async () => {
+    //   let inputs;
+    //   let headerChecked; 
+
+    //   it('should open headers input, rendering single input at first', async () => {
+    //     await sideBar.activateHeaders.click();
+    //     inputs = await sideBar.headerCheckbox[0];
+    //     assert.strictEqual(inputs.length, 1); 
+    //   }); 
+
+    //   it('can type new headers in request', async () => {
+    //     await sideBar.headerKey.addValue('testing');
+    //     const headerKey = await sideBar.headerKey.getValue();
+    //     assert.strictEqual(headerKey, 'testing'); 
+  
+    //     await sideBar.headerValue.addValue('true'); 
+    //     const headerValue = await sideBar.headerValue.getValue();
+    //     assert.strictEqual(headerValue, 'true'); 
+  
+    //   });
+
+    //   it('new headers initialize as checked', async () => {
+    //     headerChecked = await sideBar.headerCheckbox.isSelected();
+    //     assert.strictEqual(headerChecked, true);
+    //   });
+
+    //   // NOTE : THIS WILL FAIL FOR NOW, THIS IS UI DETAIL THAT NEEDS TO BE IMPLEMENTED IN FUTURE
+    //   it('deleting text in input eliminates checkmark', async () => {
+    //     await sideBar.headerKey.clearValue();
+    //     await sideBar.headerValue.clearVAlue();
+    //     headerChecked = await sideBar.headerCheckbox.isSelected();
+    //     assert.strictEqual(headerChecked, false);
+    //   })
+    // })
+
+  });
+}

test/subSuites/historyTests.js

@@ -0,0 +1,19 @@
+const { Application } = require("spectron");
+const electronPath = require("electron");
+const path = require("path");
+
+
+const TEST_MODE = "TEST_MODE";
+
+const app = new Application({
+  // Your electron path can be any binary
+  // i.e for OSX an example path could be '/Applications/MyApp.app/Contents/MacOS/MyApp'
+  // But for the sake of the example we fetch it from our node_modules.
+  requireName: 'electronRequire',
+  path: electronPath,
+  // The following line tells spectron to look and use the main.js file
+  // and the package.json located 1 level above along with an arg, 'TEST_MODE'
+  args: [path.join(__dirname, ".."), TEST_MODE],
+});
+
+module.exports = app; 

test/subSuites/snapshot.png

@@ -0,0 +1,25 @@
+// Integration test for electron for spectron
+// ****** use "npm run test-mocha" to run these tests ******
+
+// import other tests
+const historyTests = require('./subSuites/historyTests');
+const appOpensTests = require('./subSuites/appOpens'); 
+
+const app = require('./testApp');
+
+describe("Electron Tests", function () {
+  this.timeout(10000);
+  before(function () {
+    return app.start();
+  });
+
+  after(function () {
+    if (app && app.isRunning()) {
+      return app.stop();
+    }
+  });
+
+  // these are are test suites within this broader suite
+  appOpensTests();
+  historyTests();
+});