Skip to content

Commit

Permalink
Merge pull request #2210 from beekeeper-studio/e2e-tests
Browse files Browse the repository at this point in the history
World's first Beekeeper Studio UI test
  • Loading branch information
rathboma committed May 23, 2024
2 parents c1ecf8e + f3d5c82 commit 3f1c72e
Show file tree
Hide file tree
Showing 8 changed files with 495 additions and 119 deletions.
28 changes: 28 additions & 0 deletions .github/workflows/studio-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,31 @@ jobs:
command: yarn workspace beekeeper-studio run test:integration --runInBand --ci --silent ${{ matrix.chunk[1] }}
env:
TESTCONTAINERS_RYUK_DISABLED: true
e2e:
name: E2E tests
runs-on: ubuntu-latest
steps:
- name: Check out Git repository
uses: actions/checkout@v2

- name: Install Node.js, NPM and Yarn
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
cache: yarn

- name: Install dependencies
run: yarn install --frozen-lockfile
env:
npm_config_node_gyp: ${{ github.workspace }}${{ runner.os == 'Windows' && '\node_modules\node-gyp\bin\node-gyp.js' || '/node_modules/node-gyp/bin/node-gyp.js' }}

- name: E2E Tests
run: yarn workspace beekeeper-studio run test:e2e

- name: Upload test results
if: ${{ !cancelled() }}
uses: actions/upload-artifact@v4
with:
name: test-results
path: apps/studio/test-results
retention-days: 30
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@ yarn-error.log
.env
.instant/
cli.zip
apps/studio/test-results
12 changes: 12 additions & 0 deletions apps/studio/e2e/example.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { test } from "@playwright/test";
import testWithPlaywright from "./testWithPlaywright";

// TODO maybe remove this after we get a faster compiler?
test.setTimeout(180000);

test("example test", async () => {
const { app, stop } = await testWithPlaywright();
const page = await app.firstWindow();
await page.getByLabel("Connection Type").selectOption("SQLite");
await stop();
});
77 changes: 77 additions & 0 deletions apps/studio/e2e/testWithPlaywright.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
// "forked" from https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v3/lib/testWithPlaywright.js
// Distributed under MIT license: https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/master/LICENSE

import { _electron as electron, ElectronApplication } from "@playwright/test";
import { execa } from "execa";

export default function testWithPlaywright(): Promise<{
stdout: string;
url: string;
app: ElectronApplication;
stop: () => Promise<void>;
}> {
return new Promise((resolve, reject) => {
let log = "";
let outputDir = "";
// Launch electron:serve in headless mode
const child = execa(
require.resolve("@vue/cli-service/bin/vue-cli-service"),
["electron:serve", "--headless", "--mode", "production"],
{
extendEnv: false,
env: {
...process.env,
// Extending NODE_ENV causes warnings with build
NODE_ENV: undefined,
},
}
);

// Exit if electron:serve throws an error
child.on("error", (err: any) => {
reject(err);
});

child.stdout.on("data", async (data) => {
data = data.toString();
console.log(data);
log += data;
const urlMatch = data.match(
/\$WEBPACK_DEV_SERVER_URL=https?:\/\/[^/]+\/?/
);
const outputDirMatch = data.match(/\$outputDir=\b.*\b/);
if (outputDirMatch) {
// Record output dir
outputDir = outputDirMatch[0].split("=")[1];
}
if (urlMatch) {
// Record url and launch app
const url = urlMatch[0].split("=")[1];
let app: ElectronApplication;
// Launch app with playwright
app = await electron.launch({
args: [`${outputDir}`],
env: {
...process.env,
IS_TEST: "true",
WEBPACK_DEV_SERVER_URL: url,
TEST_MODE: "true",
DEBUG: "",
},
});
resolve({
stdout: log,
url,
app,
stop: () => {
// Exit serve process
child.stdin.write("close");
child.kill("SIGKILL");
// Close playwright
return app.close();
},
});
}
});
});
}
6 changes: 5 additions & 1 deletion apps/studio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"serve": "vue-cli-service serve",
"test:ci": "cross-env TEST_MODE=1 ELECTRON_RUN_AS_NODE=1 yarn electron ../../node_modules/jest/bin/jest.js --config ./jest.ci.config.js",
"test:unit": "cross-env TEST_MODE=1 ELECTRON_RUN_AS_NODE=1 yarn electron ../../node_modules/jest/bin/jest.js",
"test:e2e": "xvfb-maybe yarn playwright test e2e/*",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve --host localhost --ozone-platform-hint=auto",
Expand Down Expand Up @@ -100,6 +101,7 @@
},
"devDependencies": {
"@aws-sdk/types": "^3.127.0",
"@playwright/test": "^1.44.0",
"@types/better-sqlite3": "^5.4.1",
"@types/bytes": "^3.1.0",
"@types/codemirror": "^0.0.97",
Expand Down Expand Up @@ -135,13 +137,15 @@
"electron-updater": "^4.6.5",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"execa": "npm:@esm2cjs/execa",
"node-abi": "^3.34.0",
"node-gyp": "^10.1.0",
"oracledb": "npm:bks-oracledb",
"testcontainers": "~8.9.0",
"typescript": "~4.1.5",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.11",
"xvfb-maybe": "^0.2.1"
},
"eslintConfig": {
"ignorePatterns": [
Expand Down
2 changes: 1 addition & 1 deletion apps/studio/src/components/ConnectionInterface.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
v-if="config"
>
<div class="form-group">
<label for="connectionType">Connection Type</label>
<label for="connection-select">Connection Type</label>
<select
name="connectionType"
class="form-control custom-select"
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"electron:serve": "yarn bks:dev",
"docs:serve": "yarn workspace beekeeper-studio docs:serve",
"web:serve": "yarn sqltools:dev",
"test:e2e": "yarn workspace beekeeper-studio test:e2e",
"test:integration": "yarn workspace beekeeper-studio test:integration",
"test:unit": "yarn workspace beekeeper-studio test:unit",
"test:ci": "yarn workspace beekeeper-studio test:ci",
Expand Down
Loading

1 comment on commit 3f1c72e

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.