test: add electron test (#1840)

apps/electron/layers/main/src/main-window.ts

@@ -5,7 +5,8 @@ import { join } from 'path';
 import { logger } from '../../logger';
 import { isMacOS } from '../../utils';
 
-const IS_DEV = process.env.NODE_ENV === 'development';
+const IS_DEV: boolean =
+  process.env.NODE_ENV === 'development' && !process.env.CI;
 
 async function createWindow() {
   logger.info('create window');

apps/electron/package.json

@@ -16,7 +16,8 @@
     "make-windows-x64": "electron-forge make --platform=win32 --arch=x64",
     "make-linux-x64": "electron-forge make --platform=linux --arch=x64",
     "rebuild:for-test": "yarn rebuild better-sqlite3",
-    "rebuild:for-electron": "yarn electron-rebuild"
+    "rebuild:for-electron": "yarn electron-rebuild",
+    "test": "playwright test"
   },
   "config": {
     "forge": "./forge.config.js"
@@ -42,6 +43,8 @@
     "electron-window-state": "^5.0.3",
     "esbuild": "^0.17.18",
     "fs-extra": "^11.1.1",
+    "playwright": "^1.32.3",
+    "ts-node": "^10.9.1",
     "undici": "^5.22.0",
     "zx": "^7.2.1"
   },
@@ -62,5 +65,9 @@
   "stableVersion": "0.5.3",
   "installConfig": {
     "hoistingLimits": "workspaces"
+  },
+  "peerDependencies": {
+    "playwright": "*",
+    "ts-node": "*"
   }
 }

apps/electron/playwright.config.ts

@@ -0,0 +1,27 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+// import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  fullyParallel: true,
+  timeout: process.env.CI ? 50_000 : 30_000,
+  use: {
+    viewport: { width: 1440, height: 800 },
+  },
+};
+
+if (process.env.CI) {
+  config.retries = 3;
+  config.workers = '50%';
+}
+
+export default config;

apps/electron/scripts/build-ci.mts

@@ -0,0 +1,17 @@
+#!/usr/bin/env ts-node-esm
+import * as esbuild from 'esbuild';
+
+import { config } from './common.mjs';
+
+const common = config();
+await esbuild.build(common.preload);
+
+await esbuild.build({
+  ...common.main,
+  define: {
+    ...common.main.define,
+    'process.env.NODE_ENV': `"production"`,
+  },
+});
+
+console.log('Compiled successfully.');

apps/electron/scripts/common.mjs

@@ -1,4 +1,9 @@
-const NODE_MAJOR_VERSION = 18;
+import { resolve } from 'node:path';
+
+import { fileURLToPath } from 'url';
+
+export const root = fileURLToPath(new URL('..', import.meta.url));
+export const NODE_MAJOR_VERSION = 18;
 
 const nativeNodeModulesPlugin = {
   name: 'native-node-modules',
@@ -14,7 +19,7 @@ const nativeNodeModulesPlugin = {
 const ENV_MACROS = ['AFFINE_GOOGLE_CLIENT_ID', 'AFFINE_GOOGLE_CLIENT_SECRET'];
 
 /** @return {{main: import('esbuild').BuildOptions, preload: import('esbuild').BuildOptions}} */
-export default () => {
+export const config = () => {
   const define = Object.fromEntries(
     ENV_MACROS.map(key => [
       'process.env.' + key,
@@ -23,8 +28,8 @@ export default () => {
   );
   return {
     main: {
-      entryPoints: ['layers/main/src/index.ts'],
-      outdir: 'dist/layers/main',
+      entryPoints: [resolve(root, './layers/main/src/index.ts')],
+      outdir: resolve(root, './dist/layers/main'),
       bundle: true,
       target: `node${NODE_MAJOR_VERSION}`,
       platform: 'node',
@@ -33,8 +38,8 @@ export default () => {
       define: define,
     },
     preload: {
-      entryPoints: ['layers/preload/src/index.ts'],
-      outdir: 'dist/layers/preload',
+      entryPoints: [resolve(root, './layers/preload/src/index.ts')],
+      outdir: resolve(root, './dist/layers/preload'),
       bundle: true,
       target: `node${NODE_MAJOR_VERSION}`,
       platform: 'node',

apps/electron/scripts/dev.mjs

@@ -1,15 +1,11 @@
 import { spawn } from 'node:child_process';
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import electronPath from 'electron';
 import * as esbuild from 'esbuild';
 
-import commonFn from './common.mjs';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { config, root } from './common.mjs';
 
 /** @type 'production' | 'development'' */
 const mode = (process.env.NODE_ENV = process.env.NODE_ENV || 'development');
@@ -22,9 +18,9 @@ const stderrFilterPatterns = [
   /ExtensionLoadWarning/,
 ];
 
-// these are set before calling commonFn so we have a chance to override them
+// these are set before calling `config`, so we have a chance to override them
 try {
-  const devJson = readFileSync(path.resolve(__dirname, '../dev.json'), 'utf-8');
+  const devJson = readFileSync(path.resolve(root, './dev.json'), 'utf-8');
   const devEnv = JSON.parse(devJson);
   Object.assign(process.env, devEnv);
 } catch (err) {
@@ -67,7 +63,7 @@ function spawnOrReloadElectron() {
   spawnProcess.on('exit', process.exit);
 }
 
-const common = commonFn();
+const common = config();
 
 async function main() {
   async function watchPreload(onInitialBuild) {

apps/electron/scripts/generate-assets.mjs

@@ -5,7 +5,7 @@ import path from 'node:path';
 
 import * as esbuild from 'esbuild';
 
-import commonFn from './common.mjs';
+import { config } from './common.mjs';
 
 const repoRootDir = path.join(__dirname, '..', '..', '..');
 const electronRootDir = path.join(__dirname, '..');
@@ -77,7 +77,7 @@ async function cleanup() {
 }
 
 async function buildLayers() {
-  const common = commonFn();
+  const common = config();
   await esbuild.build(common.preload);
 
   await esbuild.build({

apps/electron/tests/basic.spec.ts

@@ -0,0 +1,22 @@
+import { resolve } from 'node:path';
+
+import { expect, test } from '@playwright/test';
+import { _electron as electron } from 'playwright';
+
+test('new page', async () => {
+  const electronApp = await electron.launch({
+    args: [resolve(__dirname, '..')],
+    executablePath: resolve(__dirname, '../node_modules/.bin/electron'),
+  });
+  const page = await electronApp.firstWindow();
+  await page.getByTestId('new-page-button').click({
+    delay: 100,
+  });
+  await page.waitForSelector('v-line');
+  const flavour = await page.evaluate(
+    // @ts-expect-error
+    () => globalThis.currentWorkspace.flavour
+  );
+  expect(flavour).toBe('local');
+  await electronApp.close();
+});

apps/electron/tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true
+  },
+  "include": ["**.spec.ts", "**.test.ts"]
+}

apps/electron/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": false,
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "outDir": "dist",
+    "noEmit": false
+  },
+  "include": ["layers", "types", "package.json"],
+  "exclude": ["out", "dist", "node_modules"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "ts-node": {
+    "esm": true,
+    "experimentalSpecifierResolution": "node"
+  }
+}

apps/electron/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./scripts", "package.json"]
+}