Initialize e2e tests with playwright

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 out
 .gitignore
+.env

.gitignore

@@ -3,3 +3,4 @@ dist
 out
 .DS_Store
 *.log*
+.env

.prettierignore

@@ -4,3 +4,4 @@ pnpm-lock.yaml
 LICENSE.md
 tsconfig.json
 tsconfig.*.json
+.env

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "test:playwright": "playwright test",
     "start": "electron-vite preview",
     "dev": "electron-vite dev --watch",
     "build": "electron-vite build",
@@ -20,9 +21,12 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@playwright/test": "^1.45.1",
     "dexie": "^4.0.7",
     "dexie-react-hooks": "^1.1.7",
+    "dotenv": "^16.4.5",
     "electron-updater": "^6.1.7",
+    "playwright": "^1.45.1",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0"
   },

playwright.config.js

@@ -0,0 +1,18 @@
+// playwright.config.js
+module.exports = {
+  use: {
+    headless: false
+  },
+  projects: [
+    {
+      name: 'electron',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome',
+        launchOptions: {
+          args: ['--no-sandbox']
+        }
+      }
+    }
+  ]
+}

src/main/index.js

@@ -1,7 +1,7 @@
-import { app, shell, BrowserWindow, ipcMain, protocol, net } from 'electron'
-import { join, path } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
+const { app, shell, BrowserWindow, ipcMain, protocol, net } = require('electron')
+const { path, join } = require('path')
+const { electronApp, optimizer, is } = require('@electron-toolkit/utils')
+const iconPath = join(__dirname, '../../resources/icon.png')
 
 function createWindow() {
   // Create the browser window.
@@ -10,7 +10,8 @@ function createWindow() {
     height: 670,
     show: false,
     autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
+    icon: iconPath,
+    // ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

tests/example.spec.js

@@ -0,0 +1,70 @@
+import { _electron as electron } from 'playwright'
+import { test, expect } from '@playwright/test'
+import path from 'path'
+import { execSync } from 'child_process'
+import dotenv from 'dotenv'
+
+dotenv.config()
+
+test.describe('Electron app', () => {
+  let electronApp
+
+  test.beforeAll(async () => {
+    // Build the application before running the tests
+    execSync('npm run build', { stdio: 'inherit' })
+
+    // Path to the built Electron app
+    const appPath = path.join(
+      __dirname,
+      '..',
+      'dist',
+      'mac-arm64',
+      'DHIS2 Downloader.app',
+      'Contents',
+      'MacOS',
+      'DHIS2 Downloader'
+    )
+    electronApp = await electron.launch({
+      executablePath: appPath
+    })
+  })
+
+  // Remove the test.afterAll hook to prevent the app from closing
+  test.afterAll(async () => {
+    await electronApp.close()
+  })
+
+  test.beforeEach(async () => {
+    const window = await electronApp.firstWindow()
+    // Clear all local storage before each test
+    await window.evaluate(() => localStorage.clear())
+  })
+
+  test('should have a navbar with clickable elements', async () => {
+    const window = await electronApp.firstWindow()
+    const navLinks = await window.$$('xpath=//navbar//a')
+
+    // Check that each link is clickable
+    for (const link of navLinks) {
+      const isClickable = await link.isClickable()
+      expect(isClickable).toBe(true)
+    }
+  })
+
+  test('Could fill in Login Form', async () => {
+    const window = await electronApp.firstWindow()
+    const dhis2UrlInput = await window.locator('xpath=//form//input[@placeholder="DHIS2 URL"]')
+    await dhis2UrlInput.fill(process.env.TEST_DHIS2_URL)
+
+    // Fill in other input fields (example)
+    const usernameInput = await window.locator('xpath=//form//input[@placeholder="Username"]')
+    await usernameInput.fill(process.env.TEST_USERNAME)
+
+    const passwordInput = await window.locator('xpath=//form//input[@placeholder="Password"]')
+    await passwordInput.fill(process.env.TEST_PASSWORD)
+
+    // Optionally, click the submit button
+    const submitButton = await window.locator('xpath=//form//button[@type="submit"]')
+    await submitButton.click()
+  })
+})