Add Puppeteer for End-to-End Tests

.github/workflows/testing.yml

@@ -71,9 +71,15 @@ jobs:
       - name: Install GUIDE
         run: npm ci
 
-      - name: Run tests
+      - if: matrix.os != 'ubuntu-latest'
+        name: Run tests
         run: npm run test:coverage
 
+      - if: matrix.os == 'ubuntu-latest'
+        name: Run tests with xvfb
+        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:coverage
+
+
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
         env:

.gitignore

@@ -3,6 +3,7 @@
 
 dist
 out
+tests/screenshots
 
 coverage
 

package.json

@@ -151,6 +151,7 @@
     "lit": "^2.6.1",
     "lottie-web": "^5.9.5",
     "notyf": "^3.9.0",
+    "puppeteer": "^21.7.0",
     "sweetalert2": "^11.6.13",
     "tippy.js": "^6.3.7",
     "url": "^0.11.3",

src/main/main.ts

@@ -21,6 +21,14 @@ import icon from '../renderer/assets/img/logo-guide-draft.png?asset'
 import splashHTML from './splash-screen.html?asset'
 import preloadUrl from './../preload/preload.js?asset'
 
+const runByTestSuite = !!process.env.VITEST
+
+// Enable remote debugging port for Vitest
+if (runByTestSuite) {
+  app.commandLine.appendSwitch('remote-debugging-port', `${8315}`) // Mirrors the global electronDebugPort variable
+  app.commandLine.appendSwitch('remote-allow-origins', '*') // Allow all remote origins
+}
+
 // autoUpdater.channel = "latest";
 
 /*************************************************************
@@ -37,6 +45,8 @@ const PYINSTALLER_NAME = "nwb-guide"
 const isWindows = process.platform === 'win32'
 
 
+
+
 let pyflaskProcess: any = null;
 
 let PORT: number | string | null = 4242;
@@ -383,13 +393,21 @@ app.on('activate', () => {
 })
 
 
+const root = runByTestSuite ? path.join(paths.root, '.test') : paths.root
+
+if (runByTestSuite) onWindowReady(() => console.log('WINDOW READY FOR TESTING'))
+
+
 const homeDirectory = app.getPath("home");
-const appDirectory = path.join(homeDirectory, paths.root)
+const appDirectory = path.join(homeDirectory, root)
 const guidedProgressFilePath = path.join(appDirectory, ...paths.subfolders.progress);
 const guidedConversionFolderPath = path.join(appDirectory, ...paths.subfolders.conversions);
 const guidedStubFolderPath = path.join(appDirectory, ...paths.subfolders.preview);
 
+if (runByTestSuite && fs.existsSync(appDirectory)) fs.rmSync(appDirectory, { recursive: true }) // Clear the test directory if it exists
+
 function getEntries(path, type = 'isDirectory') {
+  if (!fs.existsSync(path)) return []
   return fs.readdirSync(path, { withFileTypes: true })
   .filter(dirent => dirent[type]())
   .map(dirent => dirent.name)
@@ -416,16 +434,17 @@ app.on("window-all-closed", () => {
 app.on("before-quit", async (ev: Event) => {
 
   ev.preventDefault()
+    if (!runByTestSuite) {
+    const { response } = await dialog
+    .showMessageBox(BrowserWindow.getFocusedWindow() as BrowserWindow, {
+      type: "question",
+      buttons: ["Yes", "No"],
+      title: "Confirm",
+      message: "Any running process will be stopped. Are you sure you want to quit?",
+    })
 
-  const { response } = await dialog
-  .showMessageBox(BrowserWindow.getFocusedWindow() as BrowserWindow, {
-    type: "question",
-    buttons: ["Yes", "No"],
-    title: "Confirm",
-    message: "Any running process will be stopped. Are you sure you want to quit?",
-  })
-
-  if (response !== 0) return // Skip quitting
+    if (response !== 0) return // Skip quitting
+  }
 
   try {
     globalShortcut.unregisterAll();

src/renderer/src/dependencies/simple.js

@@ -8,8 +8,9 @@ export const reloadPageToHome = () => {
 }; // Clear all query params
 
 // Filesystem Management
+const root = process.env.VITEST ? joinPath(paths.root, ".test") : paths.root;
 export const homeDirectory = app?.getPath("home") ?? "";
-export const appDirectory = homeDirectory ? joinPath(homeDirectory, paths.root) : "";
+export const appDirectory = homeDirectory ? joinPath(homeDirectory, root) : "";
 export const guidedProgressFilePath = homeDirectory ? joinPath(appDirectory, ...paths.subfolders.progress) : "";
 
 export const previewSaveFolderPath = homeDirectory

tests/e2e.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'vitest'
+import { connect } from './puppeteer'
+
+import { mkdirSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const screenshotPath = join( __dirname, 'screenshots')
+mkdirSync(screenshotPath, { recursive: true })
+
+
+describe('E2E Test', () => {
+
+    const references = connect()
+
+    test('Ensure number of test pipelines starts at zero', async () => {
+      const page = references.page
+      const nPipelines = await page.evaluate(() => document.getElementById('guided-div-resume-progress-cards').children.length)
+      await page.screenshot({ path: join(screenshotPath, 'test.png'), fullPage: true });
+      expect(nPipelines).toBe(0)
+    })
+
+})

tests/globals.ts

@@ -0,0 +1 @@
+export const electronDebugPort = 8315

tests/puppeteer.ts

@@ -0,0 +1,79 @@
+
+import { afterAll, beforeAll, expect, describe, vi, test } from 'vitest'
+
+import * as puppeteer from 'puppeteer'
+
+import { exec } from 'child_process'
+import { electronDebugPort } from './globals'
+
+export const sharePort = 1234
+
+export const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+
+const beforeStart = (timeout) => new Promise(async (resolve, reject) => {
+
+  const handleOutput = (data) => {
+    if (data.includes('WINDOW READY FOR TESTING')) resolve(true)
+    console.log(`[electron] ${data}`)
+  }
+
+  const process = exec('npm start') // Run Start Script from package.json
+  process.stdout.on('data', handleOutput);
+  process.stderr.on('data', handleOutput);
+  process.on('close', (code) => console.log(`[electron] Exited with code ${code}`));
+  await sleep(timeout) // Wait for five seconds for Electron to open
+
+  reject('Failed to open Electron window successfully.')
+})
+
+type BrowserTestOutput = {
+  info?: any
+  page?: puppeteer.Page,
+  browser?: puppeteer.Browser,
+}
+
+const timeout = 60 * 1000 // Wait for 1 minute for Electron to open (mostly for Windows)
+
+export const connect = () => {
+
+
+  const output: BrowserTestOutput = {}
+
+
+  beforeAll(async () => {
+
+    await beforeStart(timeout)
+
+
+
+    // Ensure Electron will exit gracefully
+    const mockExit = vi.spyOn(process, 'exit').mockImplementation(() => {
+        mockExit.mockRestore()
+    });
+
+    const browserURL = `http://localhost:${electronDebugPort}`
+    const browser = output.browser = await puppeteer.launch({ headless: 'new' })
+    const page = output.page = await browser.newPage();
+    await page.goto(browserURL);
+    const endpoint = await page.evaluate(() => fetch(`json/version`).then(res => res.json()).then(res => res.webSocketDebuggerUrl))
+    await browser.close()
+    delete output.browser
+    delete output.page
+
+    // Connect to browser WS Endpoint
+    const browserWSEndpoint = endpoint.replace('localhost', '0.0.0.0')
+    output.browser = await puppeteer.connect({ browserWSEndpoint, defaultViewport: null })
+
+    const pages = await output.browser.pages()
+    output.page = pages[0]
+
+  }, timeout + 1000)
+
+  afterAll(async () => {
+    if (output.browser) await output.browser.close() // Will also exit the Electron instance
+  });
+
+  return output
+
+}