test: add the E2E testing (#72)

### Description
Add a test to verify that when this library is used with `electron`, it
works correctly from the following points of view.
1. The type that we expect is actually reflected in the typescript.
2. Build an electron app using this library and make sure IPC works as
expected.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/pull_request_template.md

@@ -0,0 +1 @@
+### Description

.github/workflows/test.yml

@@ -37,7 +37,51 @@ jobs:
         run: pnpm run test
 
       - name: Build
-        run: pnpm run build
+        id: build
+        shell: bash
+        run: |
+          pnpm run build
+          TAR_NAME="$(pnpm pack)"
+          ls -l "${TAR_NAME}"
+          RESULT="tar-name=${TAR_NAME}" 
+          echo "${RESULT}" >>"${GITHUB_OUTPUT}"
+          echo "${RESULT}"
+
+      - name: Setup playground
+        env:
+          TAR_NAME: ${{ steps.build.outputs.tar-name }}
+        working-directory: ./playground
+        shell: bash
+        run: |
+          pnpm install "../${TAR_NAME}"
+
+      - name: Type check
+        working-directory: ./playground
+        run: pnpm run typecheck
+
+      - name: Build (Windows)
+        if: runner.os == 'Windows'
+        working-directory: ./playground
+        run: pnpm build:win
+
+      - name: Test (E2E) on Windows
+        if: runner.os == 'Windows'
+        working-directory: ./playground
+        run: pnpm test:e2e
+
+      - name: Build (Linux)
+        if: runner.os == 'Linux'
+        working-directory: ./playground
+        run: pnpm build:linux
+
+      - name: Test (E2E) on Linux
+        if: runner.os == 'Linux'
+        working-directory: ./playground
+        run: |
+          export XDG_RUNTIME_DIR="/run/user/$(id -u)"
+          export DBUS_SESSION_BUS_ADDRESS="unix:path=${XDG_RUNTIME_DIR}/bus"
+          dbus-daemon --session --address=${DBUS_SESSION_BUS_ADDRESS} --nofork --nopidfile --syslog-only &
+          xvfb-run -a pnpm test:e2e
 
   coverage:
     name: Report Coverage

.npmrc

@@ -0,0 +1 @@
+hoist=false

.vscode/settings.json

@@ -14,5 +14,5 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "eslint.useFlatConfig": true,
-  "cSpell.words": ["codecov", "onwarn", "typeof"]
+  "cSpell.words": ["codecov", "culc", "onwarn", "typecheck", "typeof"]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-typed-ipc-bridge",
   "version": "2.1.0",
-  "description": "Fully typesafe Electron context bridge generator for IPC (Inter-Process Communication).",
+  "description": "Fully type-safe Electron context bridge generator for IPC (Inter-Process Communication).",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",

playground/.prettierrc.yml

@@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+printWidth: 80
+trailingComma: es5

playground/README.md

@@ -31,6 +31,22 @@ $ pnpm install
 $ pnpm dev
 ```
 
+## How to E2E tests
+
+### build the library
+
+```bash
+$ cd ..
+$ TAR_NAME="$(pnpm build)"
+```
+
+### Install the library
+
+```bash
+$ cd playground/
+$ pnpm install "../${TAR_NAME}"
+```
+
 ### Build
 
 ```bash
@@ -43,3 +59,5 @@ $ pnpm build:mac
 # For Linux
 $ pnpm build:linux
 ```
+
+### Run the E2E tests

playground/e2e/index.e2e.spec.ts

@@ -0,0 +1,22 @@
+import { browser } from '@wdio/globals'
+
+describe('Electron Testing', () => {
+  beforeEach(async () => {
+    await browser.$('#btn-reset').click()
+    expect(await browser.$('#counter').getText()).toBe('0')
+  })
+
+  it('should print application title', async () => {
+    expect(await browser.getTitle()).toBe('Electron')
+  })
+
+  it('should invoke the function of main process', async () => {
+    await browser.$('#btn-add').click()
+    expect(await browser.$('#counter').getText()).toBe('2')
+  })
+
+  it('should receive the message from main process', async () => {
+    await browser.$('#btn-on-test').click()
+    expect(await browser.$('#counter').getText()).toBe('1')
+  })
+})

playground/electron-builder.yml

@@ -6,9 +6,9 @@ files:
   - '!**/.vscode/*'
   - '!src/*'
   - '!electron.vite.config.{js,ts,mjs,cjs}'
-  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{eslint.config.js,.prettierignore,.prettierrc.yml,dev-app-update.yml,CHANGELOG.md,README.md}'
   - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
-  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json,tsconfig.e2e.json,wdio.conf.ts}'
 asarUnpack:
   - resources/**
 win:

playground/electron.vite.config.ts

@@ -5,17 +5,17 @@ import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   preload: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   renderer: {
     resolve: {
       alias: {
-        '@renderer': resolve('src/renderer/src')
-      }
+        '@renderer': resolve('src/renderer/src'),
+      },
     },
-    plugins: [vue()]
-  }
+    plugins: [vue()],
+  },
 })

playground/eslint.config.js

@@ -4,12 +4,14 @@ import prettierConfig from '@vue/eslint-config-prettier'
 import vueTsEslintConfig from '@vue/eslint-config-typescript'
 import pluginVue from 'eslint-plugin-vue'
 import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
 export default [
   js.configs.recommended,
   ...tseslint.configs.recommended,
   ...pluginVue.configs['flat/recommended'],
   ...vueTsEslintConfig(),
+  eslintConfigPrettier,
   prettierConfig,
   {
     files: [
@@ -21,7 +23,7 @@ export default [
       '**/*.tsx',
       '**/*.cts',
       '**/*.mts',
-      '**/*.vue'
+      '**/*.vue',
     ],
     rules: {
       '@typescript-eslint/no-unused-vars': [
@@ -30,29 +32,35 @@ export default [
           argsIgnorePattern: '^_',
           varsIgnorePattern: '^_',
           caughtErrorsIgnorePattern: '^_',
-          destructuredArrayIgnorePattern: '^_'
-        }
+          destructuredArrayIgnorePattern: '^_',
+        },
       ],
       '@typescript-eslint/consistent-type-imports': [
         'error',
         {
           prefer: 'type-imports',
-          disallowTypeAnnotations: false
-        }
+          disallowTypeAnnotations: false,
+        },
       ],
       'vue/require-default-prop': 'off',
-      'vue/multi-word-component-names': 'off'
-    }
+      'vue/multi-word-component-names': 'off',
+    },
   },
   {
     files: ['*.vue', '**/*.vue'],
     languageOptions: {
       parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
+        parser: '@typescript-eslint/parser',
+      },
+    },
   },
   {
-    ignores: ['node_modules/*', 'dist/*', 'out/*', '**/*/.gitignore', 'coverage/*']
-  }
+    ignores: [
+      'node_modules/*',
+      'dist/*',
+      'out/*',
+      '**/*/.gitignore',
+      'coverage/*',
+    ],
+  },
 ]

playground/package.json

@@ -11,30 +11,33 @@
     "lint": "eslint . --fix",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
-    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "npm run typecheck && electron-vite build",
+    "test:e2e": "wdio run ./wdio.conf.ts",
+    "build": "pnpm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
-    "build:unpack": "npm run build && electron-builder --dir",
-    "build:win": "npm run build && electron-builder --win",
-    "build:mac": "npm run build && electron-builder --mac",
-    "build:linux": "npm run build && electron-builder --linux"
+    "build:unpack": "pnpm run build && electron-builder --dir",
+    "build:win": "pnpm run build && electron-builder --win",
+    "build:mac": "pnpm run build && electron-builder --mac",
+    "build:linux": "pnpm run build && electron-builder --linux"
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "electron-typed-ipc-bridge": "link:.."
   },
   "devDependencies": {
-    "@electron-toolkit/eslint-config": "^1.0.2",
-    "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@rushstack/eslint-patch": "^1.10.4",
     "@types/node": "^22.8.6",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.3",
+    "@wdio/cli": "^9.2.10",
+    "@wdio/local-runner": "^9.2.8",
+    "@wdio/mocha-framework": "^9.2.8",
+    "@wdio/spec-reporter": "^9.2.8",
     "electron": "^33.0.2",
     "electron-builder": "^25.1.8",
     "electron-vite": "^2.3.0",
@@ -43,7 +46,9 @@
     "prettier": "^3.3.3",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",
+    "vitest": "^2.1.4",
     "vue": "^3.5.12",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.10",
+    "wdio-electron-service": "^7.2.0"
   }
 }