Add a basic tauri e2e test on Linux (#923)

* WIP e2e test

* Working test on Linux

* Clean up

* Add to CI

* Fix

* Install tauri-driver

* Migrate to ubuntu-latest

* Add button check and click

* Update name

* Separate job for e2e test

* Fix path

* Fix perms

* Fix perms

* Single build-test-apps job

* Lint wdio file

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ concurrency:
   cancel-in-progress: true
 jobs:
   check-format:
-    runs-on: 'ubuntu-20.04'
+    runs-on: 'ubuntu-latest'
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -27,8 +27,9 @@ jobs:
       - run: yarn install
       - run: yarn fmt-check
 
+
   check-types:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
@@ -44,8 +45,9 @@ jobs:
       - run: yarn build:wasm
       - run: yarn tsc
 
+
   build-test-web:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
@@ -68,8 +70,9 @@ jobs:
 
       - run: yarn test:cov
 
+
   prepare-json-files:
-    runs-on: ubuntu-20.04  # seperate job on Ubuntu for easy string manipulations (compared to Windows)
+    runs-on: ubuntu-latest  # seperate job on Ubuntu for easy string manipulations (compared to Windows)
     outputs:
       version: ${{ steps.export_version.outputs.version }}
     steps:
@@ -97,12 +100,13 @@ jobs:
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
-  build-apps:
+
+  build-test-apps:
     needs: [check-format, build-test-web, prepare-json-files, check-types]
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-latest, ubuntu-20.04, windows-latest]
+        os: [macos-latest, ubuntu-latest, windows-latest]
     steps:
       - uses: actions/checkout@v4
 
@@ -116,10 +120,16 @@ jobs:
           cp artifact/src-tauri/tauri.conf.json src-tauri/tauri.conf.json
 
       - name: install ubuntu system dependencies
-        if: matrix.os == 'ubuntu-20.04'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libayatana-appindicator3-dev librsvg2-dev
+        if: matrix.os == 'ubuntu-latest'
+        run: >
+          sudo apt-get update &&
+          sudo apt-get install -y
+          libgtk-3-dev
+          libgtksourceview-3.0-dev
+          webkit2gtk-4.0
+          libappindicator3-dev
+          webkit2gtk-driver
+          xvfb
 
       - name: Sync node version and setup cache
         uses: actions/setup-node@v4
@@ -201,10 +211,22 @@ jobs:
         with:
           path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}
 
+      - name: Install tauri-driver for e2e tests
+        if: matrix.os == 'ubuntu-latest'
+        uses: actions-rs/cargo@v1
+        with:
+          command: install
+          args: tauri-driver
+
+      - name: Run e2e tests
+        if: matrix.os == 'ubuntu-latest'
+        run: xvfb-run yarn test:e2e
+
+
   publish-apps-release:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     if: ${{ github.event_name == 'release' || github.event_name == 'schedule' }}
-    needs: [build-test-web, prepare-json-files, build-apps]
+    needs: [build-test-web, prepare-json-files, build-test-apps]
     env:
       VERSION_NO_V: ${{ needs.prepare-json-files.outputs.version }}
       VERSION: ${{ github.event_name == 'release' && format('v{0}', needs.prepare-json-files.outputs.version) || needs.prepare-json-files.outputs.version }}

e2e/tauri/specs/signin.e2e.js

@@ -0,0 +1,11 @@
+describe('Modeling App', () => {
+  it('open the sign in page', async () => {
+    const button = await $('#signin')
+    expect(button).toHaveText('Sign in')
+    
+    // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
+    await button.waitForClickable()
+    await browser.execute('arguments[0].click();', button)
+    // TODO: handle auth
+  })
+})

package.json

@@ -69,6 +69,7 @@
     "test:nowatch": "vitest run --mode development",
     "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests --benches)",
     "test:cov": "vitest run --coverage --mode development",
+    "test:e2e": "wdio run wdio.conf.js",
     "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
     "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
     "fmt": "prettier --write ./src",
@@ -125,6 +126,10 @@
     "vite": "^4.4.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.2.1",
-    "yarn": "^1.22.19"
+    "yarn": "^1.22.19",
+    "@wdio/cli": "^7.7.3",
+    "@wdio/local-runner": "^7.7.3",
+    "@wdio/mocha-framework": "^7.7.3",
+    "@wdio/spec-reporter": "^7.7.3"
   }
 }

src/routes/SignIn.tsx

@@ -67,6 +67,7 @@ const SignIn = () => {
             onClick={signInTauri}
             icon={{ icon: faSignInAlt }}
             className="w-fit mt-4"
+            id="signin"
           >
             Sign in
           </ActionButton>

wdio.conf.js

@@ -0,0 +1,40 @@
+const os = require('os')
+const path = require('path')
+const { spawn } = require('child_process')
+
+// keep track of the `tauri-driver` child process
+let tauriDriver
+
+const application =
+  process.env.E2E_APPLICATION || './src-tauri/target/release/kittycad-modeling'
+
+exports.config = {
+  port: 4444,
+  specs: ['./e2e/tauri/specs/**/*.js'],
+  maxInstances: 1,
+  capabilities: [
+    {
+      maxInstances: 1,
+      'tauri:options': {
+        application,
+      },
+    },
+  ],
+  reporters: ['spec'],
+  framework: 'mocha',
+  mochaOpts: {
+    ui: 'bdd',
+    timeout: 600000,
+  },
+
+  // ensure we are running `tauri-driver` before the session starts so that we can proxy the webdriver requests
+  beforeSession: () =>
+    (tauriDriver = spawn(
+      path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
+      [],
+      { stdio: [null, process.stdout, process.stderr] }
+    )),
+
+  // clean up the `tauri-driver` process we spawned at the start of the session
+  afterSession: () => tauriDriver.kill(),
+}