Setup app tests with spectron

app/build.yml

@@ -26,6 +26,11 @@ steps:
       yarn
     displayName: 'Install'
 
+  - script: |
+      cd app
+      yarn test
+    displayName: 'Run tests'
+
   - script: |
       cd app
       yarn make

app/features/first-time-user.feature

@@ -0,0 +1,21 @@
+@onboarding
+Feature: First time user loads an existing project. Starts, records and watches a service.
+
+  @play @fixture("sample-one")
+  Scenario: Start an existing project from ui
+    Given I open app for the first time
+    Then I should see option to load existing project
+    When I open a project from filesystem
+    Then I see project configuration
+    When I choose start server
+    Then It should serve the configured endpoints
+
+  @record
+  Scenario: Record for an existing project from ui
+    Given I open app for the first time
+    Then I should see option to load existing project
+    When I open a project from filesystem
+    Then I see project configuration
+    When I choose start server
+    Then It should serve the configured endpoints
+

app/features/js/driver/index.js

@@ -0,0 +1,34 @@
+var electron = require('electron')
+var path = require('path')
+var Application = require('spectron').Application
+
+var app = new Application({
+  path: electron,
+  args: [path.join(__dirname, '..', '..', '..', 'src', 'index.js')]
+});
+
+module.exports = {
+  create: () => {
+    return app.start();
+  }
+};
+//
+// app.start().then(function () {
+//   // Check if the window is visible
+//   return app.browserWindow.isVisible()
+// }).then(function (isVisible) {
+//   // Verify the window is visible
+//   assert.equal(isVisible, true)
+// }).then(function () {
+//   // Get the window's title
+//   return app.client.getTitle()
+// }).then(function (title) {
+//   // Verify the window's title
+//   assert.equal(title, 'My App')
+// }).then(function () {
+//   // Stop the application
+//   return app.stop()
+// }).catch(function (error) {
+//   // Log any failures
+//   console.error('Test failed', error.message)
+// })

app/features/js/hooks.js

@@ -0,0 +1,40 @@
+var {After, Before} = require('@cucumber/cucumber');
+const PageHelper = require("./page-helper");
+
+Before(function (testCase, callback) {
+  const absoluteFeatureFilePath = testCase.pickle.uri;
+  const featureName = testCase.gherkinDocument.feature.name;
+  const tags = testCase.pickle.name;
+  const scenarioName = testCase.pickle.name;
+  const stepsAsString = testCase.pickle.steps.map(s => s.text);
+
+  this.setTestInfo({
+    stepsAsString,
+    absoluteFeatureFilePath,
+    featureName,
+    tags,
+    scenarioName,
+    stepsAsString
+  });
+
+  this.getDriver().then(async (driver) => {
+    const client = await driver.client;
+    this.client = client;
+    this.assert = await PageHelper(client);
+    callback();
+  }) ;
+});
+
+After(function (testCase, callback) {
+  this.getDriver().then(async (driver) => {
+    // const client = await driver.client;
+    // await driver.chromeDriver.process.kill()
+    // await this.client.shutdown();
+    driver.stop();
+    callback();
+    // await this.client.close();
+    console.log("closed")
+    callback();
+  });
+});
+

app/features/js/index.js

@@ -0,0 +1,3 @@
+require('./world');
+require('./hooks');
+require('./steps/first-time-user');

app/features/js/page-helper.js

@@ -0,0 +1,18 @@
+const {expect} = require('chai');
+
+module.exports = async (client) => {
+
+  return {
+    elementExists: async (selector) => {
+      const element = await client.$(selector);
+      const isDisplayed = await element.isExisting();
+      expect(isDisplayed).to.be.true;
+    },
+
+    shouldHaveText: async (selector, expectedText) => {
+      const element = await client.$(selector);
+      const text = await element.getText();
+      expect(text).to.equal(expectedText);
+    }
+  }
+};

app/features/js/steps/first-time-user.js

@@ -0,0 +1,36 @@
+const {Given, Then, When} = require('@cucumber/cucumber');
+const {expect} = require('chai');
+
+Given(/^I open app for the first time$/, async function () {
+  this.assert.elementExists(".welcome-screen");
+  this.assert.elementExists('[name="load-project"]');
+  this.assert.elementExists('[name="load-project"]');
+
+  // const welcomeScreen = await this.client.$(".welcome-screen");
+  // const isDisplayed = await welcomeScreen.isExisting();
+  // expect(isDisplayed).to.be.true;
+  //
+  // const loadProjectElement = await this.client.$('[name="load-project"]');
+  // const loadProjectElementDisplayed = await welcomeScreen.isExisting();
+  //
+  // expect(loadProjectElementDisplayed).to.be.true;
+  //
+  // const createProjectElement = await this.client.$('[name="create-project"]');
+  // expect(await createProjectElement.isExisting()).to.be.true;
+});
+
+Then(/^I should see option to load existing project$/, function () {
+
+});
+When(/^I open a project from filesystem$/, function () {
+
+});
+Then(/^I see project configuration$/, function () {
+
+});
+When(/^I choose start server$/, function () {
+
+});
+Then(/^It should serve the configured endpoints$/, function () {
+
+});

app/features/js/world.js

@@ -0,0 +1,24 @@
+const { setWorldConstructor } = require("@cucumber/cucumber");
+const Driver = require("./driver");
+
+class CustomWorld {
+  constructor() {
+    this._ = {
+      driver : Driver.create()
+    };
+  }
+
+  getDriver() {
+    return this._.driver;
+  }
+
+  setTestInfo(info) {
+    this._.testInfo = info;
+  }
+
+  getTestInfo(){
+    return this._.testInfo;
+  }
+}
+
+setWorldConstructor(CustomWorld);

app/package.json

@@ -5,7 +5,9 @@
   "description": "GrpcDevtool Gui app.",
   "main": "src/index.js",
   "scripts": {
-    "start": "electron-forge start",
+    "driver": "node features/js/driver/index.js",
+    "test": "cucumber-js features/**/*.feature --require features/js/index.js",
+    "start": "cross-env devUrl=http://localhost:9000/ electron-forge start",
     "package": "electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
@@ -22,7 +24,7 @@
       "packagerConfig": {
         "name": "GrpcDevtool",
         "out": "dist",
-        "overwrite" : true,
+        "overwrite": true,
         "appCategoryType": "app-category-type=public.app-category.developer-tools",
         "darwinDarkModeSupport": true,
         "icon": "./icons/icon"
@@ -52,9 +54,13 @@
     }
   },
   "dependencies": {
-    "electron-squirrel-startup": "^1.0.0"
+    "chai": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "electron-squirrel-startup": "^1.0.0",
+    "spectron": "^14.0.0"
   },
   "devDependencies": {
+    "@cucumber/cucumber": "^7.0.0",
     "@electron-forge/cli": "^6.0.0-beta.54",
     "@electron-forge/maker-deb": "^6.0.0-beta.54",
     "@electron-forge/maker-rpm": "^6.0.0-beta.54",

app/src/index.js

@@ -6,18 +6,19 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
   app.quit();
 }
 
-const createWindow = () => {
+const createWindow = async () => {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-  });
-
+  const mainWindow = new BrowserWindow({});
+  mainWindow.maximize();
+  // Allow using the webpack dev server for local development
+  if(process.env.devUrl){
+    mainWindow.loadURL(process.env.devUrl);
+    mainWindow.webContents.openDevTools();
+    return;
+  }
   // and load the index.html of the app.
   mainWindow.loadFile(path.join(__dirname,"..", "assets", 'index.html'));
-
   // Open the DevTools.
-  // mainWindow.webContents.openDevTools();
 };
 
 // This method will be called when Electron has finished