add support for testing and debugging

Author: nklayman

__mocks__/@vue/cli-service/lib/commands/serve.js

@@ -1,23 +1,37 @@
-// jest.enableAutomock()
-// jest.unmock('bluebird')
-// jest.unmock('once')
-
 const pluginIndex = require('../index.js')
+const testWithSpectron = pluginIndex.testWithSpectron
 const Config = require('webpack-chain')
 const webpack = require('webpack')
 const builder = require('electron-builder')
 const buildRenderer = require('@vue/cli-service/lib/commands/build').build
+const serve = require('@vue/cli-service/lib/commands/serve').serve
 const fs = require('fs-extra')
+const execa = require('execa')
+const portfinder = require('portfinder')
+const Application = require('spectron').Application
 jest.mock('@vue/cli-service/lib/commands/build')
 jest.mock('fs-extra')
 jest.mock('electron-builder')
+jest.mock('execa', () => jest.fn(() => ({ on: jest.fn() })))
+jest.mock('@vue/cli-service/lib/commands/serve', () => ({
+  serve: jest.fn().mockResolvedValue({ url: 'serveUrl' })
+}))
+jest.mock('electron-builder', () => ({ build: jest.fn().mockResolvedValue() }))
+const mockWait = jest.fn(() => new Promise(resolve => resolve()))
+const mockStart = jest.fn()
+jest.mock('spectron', () => ({
+  Application: jest.fn().mockImplementation(() => ({
+    start: mockStart,
+    client: { waitUntilWindowLoaded: mockWait }
+  }))
+}))
 console.log = jest.fn()
 
 beforeEach(() => {
   jest.clearAllMocks()
 })
-
-const runCommand = async (command, options = {}, args = { _: [] }) => {
+const runCommand = async (command, options = {}, args = {}) => {
+  if (!args._) args._ = []
   const renderConfig = new Config()
   //   Command expects define plugin to exist
   renderConfig
@@ -207,4 +221,105 @@ describe('serve:electron', () => {
     // Custom node key is passed through
     expect(mainConfig.node.test).toBe('expected')
   })
+  test('If --debug argument is passed, electron is not launched and main process is not minified', async () => {
+    await runCommand('serve:electron', {}, { debug: true })
+    const mainConfig = webpack.mock.calls[0][0]
+
+    // UglifyJS plugin does not exist
+    expect(
+      mainConfig.plugins.find(
+        p => p.__pluginConstructorName === 'UglifyJsPlugin'
+      )
+    ).toBeUndefined()
+    // Electron is not launched
+    expect(execa).not.toBeCalled()
+  })
+  test('If --healdess argument is passed, serve:electron is launched in production mode', async () => {
+    await runCommand('serve:electron', {}, { headless: true })
+
+    // Production mode is used
+    expect(serve.mock.calls[0][0].mode).toBe('production')
+    // Electron is not launched
+    expect(execa).not.toBeCalled()
+  })
+  test('If --forceDev argument is passed, serve:electron is launched in dev mode', async () => {
+    await runCommand('serve:electron', {}, { headless: true, forceDev: true })
+
+    // Production mode is used
+    expect(serve.mock.calls[0][0].mode).toBe('development')
+    // Electron is not launched
+    expect(execa).not.toBeCalled()
+  })
+})
+
+describe('testWithSpectron', async () => {
+  // Mock portfinder's returned port
+  portfinder.getPortPromise = jest.fn().mockResolvedValue('expectedPort')
+
+  const runSpectron = async (spectronOptions, launchOptions = {}) => {
+    let sendData
+    execa.mockReturnValueOnce({
+      on: jest.fn(),
+      stdout: {
+        on: (event, callback) => {
+          if (event === 'data') {
+            sendData = callback
+          }
+        }
+      }
+    })
+    const testPromise = testWithSpectron(spectronOptions)
+    // Mock console.log from serve:elctron
+    if (launchOptions.customLog) await sendData(launchOptions.customLog)
+    await sendData(`$outputDir=${launchOptions.outputDir || 'dist_electron'}`)
+    await sendData(
+      `$WEBPACK_DEV_SERVER_URL=${launchOptions.url || 'http://localhost:8080/'}`
+    )
+    return testPromise
+  }
+
+  test('uses custom output dir and url', async () => {
+    const { url } = await runSpectron(
+      {},
+      {
+        url: 'http://localhost:1234/',
+        outputDir: 'customOutput'
+      }
+    )
+    // Proper url is returned
+    expect(url).toBe('http://localhost:1234/')
+    const appArgs = Application.mock.calls[0][0]
+    // Spectron is launched with proper url
+    expect(appArgs.env.WEBPACK_DEV_SERVER_URL).toBe('http://localhost:1234/')
+    // Spectron is launched with proper path to background
+    expect(appArgs.args).toEqual(['customOutput/background.js'])
+  })
+  test('secures an open port with portfinder', async () => {
+    await runSpectron()
+    // Port should match portfinder's mock return value
+    expect(Application.mock.calls[0][0].port).toBe('expectedPort')
+  })
+  test("doesn't start app if noStart option is provided", async () => {
+    await runSpectron({ noStart: true })
+    // App should not be started nor waited for to load
+    expect(mockStart).not.toBeCalled()
+    expect(mockWait).not.toBeCalled()
+  })
+  test("doesn't launch spectron if noSpectron option is provided", async () => {
+    await runSpectron({ noSpectron: true })
+    // Spectron instance should not be created
+    expect(Application).not.toBeCalled()
+  })
+  test('uses custom spectron options if provided', async () => {
+    await runSpectron({ spectronOptions: { testKey: 'expected' } })
+    expect(Application.mock.calls[0][0].testKey).toBe('expected')
+  })
+  test('launches dev server in dev mode if forceDev argument is provided', async () => {
+    await runSpectron({ forceDev: true })
+    expect(execa.mock.calls[0][1]).toContain('--forceDev')
+  })
+  test('returns stdout of command', async () => {
+    const { stdout } = await runSpectron({}, { customLog: 'shouldBeInLog' })
+    expect(stdout.indexOf('shouldBeInLog')).not.toBe(-1)
+  })
 })

__mocks__/electron-builder.js

@@ -3,18 +3,19 @@ const create = require('@vue/cli-test-utils/createTestProject')
 const path = require('path')
 const fs = require('fs-extra')
 
-const createProject = (projectName, useTS) =>
+const createProject = (projectName, useTS, customPlugins = {}) =>
   new Promise(async resolve => {
     //   Prevent modification of import
     let preset = { ...defaultPreset }
     if (useTS) {
       // Install typescript plugin
-      defaultPreset.plugins['@vue/cli-plugin-typescript'] = {}
+      preset.plugins['@vue/cli-plugin-typescript'] = {}
       //   Use different project name
       projectName += '-ts'
     }
     // Install vcp-electron-builder
-    defaultPreset.plugins['vue-cli-plugin-electron-builder'] = {}
+    preset.plugins['vue-cli-plugin-electron-builder'] = {}
+    preset.plugins = { ...preset.plugins, ...customPlugins }
     const projectPath = p =>
       path.join(process.cwd(), '__tests__/projects/' + projectName, p)
     const project = await create(

__tests__/commands.spec.js

@@ -0,0 +1,28 @@
+jest.setTimeout(100000)
+
+const createProject = require('./createProject.helper.js')
+
+test('basic tests pass', async () => {
+  const { project } = await createProject('spectron', false, {
+    '@vue/cli-plugin-unit-jest': {}
+  })
+
+  // Update jest config to find test
+  const config = JSON.parse(await project.read('package.json'))
+  config.jest.testMatch = ['<rootDir>/tests/unit/spectron.js']
+  await project.write('package.json', JSON.stringify(config))
+
+  // Create spectron test
+  await project.write(
+    'tests/unit/spectron.js',
+    `jest.setTimeout(30000)
+  const { testWithSpectron } = require('vue-cli-plugin-electron-builder')
+  test('app loads a window', async () => {
+    const { app, stopServe } = await testWithSpectron()
+    expect(await app.client.getWindowCount()).toBe(1)
+    await stopServe()
+  })
+  `
+  )
+  await project.run('vue-cli-service test:unit')
+})

__tests__/createProject.helper.js

@@ -0,0 +1,32 @@
+import { Application, AppConstructorOptions } from 'spectron'
+interface Options {
+  /**
+   Do not launch spectron.
+   You will have to launch it on your own.
+   */
+  noSpectron: boolean
+  /** Launch server in dev mode, not in production. */
+  forceDev: boolean
+  /** Custom spectron options.These will be merged with default options. */
+  spectronOptions: AppConstructorOptions
+  /** Do not start app or wait for it to load.
+   You will have to run app.start() and app.client.waitUntilWindowLoaded() yourself.
+   */
+  noStart: boolean
+}
+interface Server {
+  /** Spectron instance. */
+  app: Application
+  /** URL of dev server. */
+  url: string
+  /** Close spectron and stop dev server (must be called to prevent continued async operations). */
+  stopServe: function(): Promise
+  /** Log of dev server. */
+  stdout: string
+}
+
+/**
+   Run serve:electron, but instead of launching Electron it returns a Spectron Application instance.
+   Used for e2e testing with Spectron.
+*/
+export function testWithSpectron(options: Options): Promise<Server>

__tests__/testWithSpectron.spec.js

@@ -202,11 +202,13 @@ module.exports = (api, options) => {
         .node.set('__dirname', false)
         .set('__filename', false)
       mainConfig.output.path(api.resolve(outputDir)).filename('background.js')
-      mainConfig.plugin('uglify').use(UglifyJSPlugin, [
-        {
-          parallel: true
-        }
-      ])
+      if (!args.debug) {
+        mainConfig.plugin('uglify').use(UglifyJSPlugin, [
+          {
+            parallel: true
+          }
+        ])
+      }
       //   Set __static to absolute path to public folder
       mainConfig.plugin('define').use(webpack.DefinePlugin, [
         {
@@ -259,34 +261,59 @@ module.exports = (api, options) => {
         console.log('\nStarting development server:\n')
         // Run the serve command with custom webpack config
         serve(
-          // Use dashboard if called from ui
-          { _: [], dashboard: args.dashboard },
+          {
+            _: [],
+            // Use dashboard if called from ui
+            dashboard: args.dashboard,
+            // Serve in development mode if launched in headless mode
+            mode: args.headless && !args.forceDev ? 'production' : 'development'
+          },
           api,
           options,
           rendererConfig
         ).then(server => {
-          // Launch electron with execa
-          console.log('\nLaunching Electron...')
-          const child = execa(
-            './node_modules/.bin/electron',
-            // Have it load the main process file built with webpack
-            [`${outputDir}/background.js`],
-            {
-              cwd: api.resolve('.'),
-              stdio: 'inherit',
-              env: {
-                ...process.env,
-                // Give the main process the url to the dev server
-                WEBPACK_DEV_SERVER_URL: server.url,
-                // Disable electron security warnings
-                ELECTRON_DISABLE_SECURITY_WARNINGS: true
+          if (args.debug) {
+            //   Do not launch electron and provide instructions on launching through debugger
+            console.log(
+              'Not launching electron as debug argument was passed. You must launch electron though your debugger.'
+            )
+            console.log(
+              `Make sure to set the WEBPACK_DEV_SERVER_URL env variable to ${
+                server.url
               }
-            }
-          )
-          child.on('exit', () => {
-            //   Exit when electron is closed
-            process.exit(0)
-          })
+              And IS_TEST to true`
+            )
+            console.log(
+              'Learn more about debugging the main process at https://github.com/nklayman/vue-cli-plugin-electron-builder#debugging.'
+            )
+          } else if (args.headless) {
+            // Log information for spectron
+            console.log(`$outputDir=${outputDir}`)
+            console.log(`$WEBPACK_DEV_SERVER_URL=${server.url}`)
+          } else {
+            // Launch electron with execa
+            console.log('\nLaunching Electron...')
+            const child = execa(
+              './node_modules/.bin/electron',
+              // Have it load the main process file built with webpack
+              [`${outputDir}/background.js`],
+              {
+                cwd: api.resolve('.'),
+                stdio: 'inherit',
+                env: {
+                  ...process.env,
+                  // Give the main process the url to the dev server
+                  WEBPACK_DEV_SERVER_URL: server.url,
+                  // Disable electron security warnings
+                  ELECTRON_DISABLE_SECURITY_WARNINGS: true
+                }
+              }
+            )
+            child.on('exit', () => {
+              //   Exit when electron is closed
+              process.exit(0)
+            })
+          }
         })
       })
     }
@@ -296,3 +323,4 @@ module.exports.defaultModes = {
   'build:electron': 'production',
   'serve:electron': 'development'
 }
+module.exports.testWithSpectron = require('./lib/testWithSpectron')