test(ui): add a simple uitest

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
   ],
   ignorePatterns: [
     '*.mjs',
+    'uitest',
     '.eslintrc.js',
     'tailwind.config.js',
     'node_modules',

.github/workflows/test.yml

@@ -28,5 +28,28 @@ jobs:
       - name: Install Dependencies
         run: yarn
 
-      - name: Yarn Tests
+      - name: Run Tests
         run: yarn test
+
+  setup_and_uitest:
+    runs-on: macos-11
+    steps:
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.14.0'
+
+      - name: Set yarn version
+        run: yarn set version 1.22.18
+
+      - name: Checkout Books
+        uses: actions/checkout@v2
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Build Source Files
+        run: yarn build --nosign --nopackage
+
+      - name: Run UI Tests 
+        run: yarn uitest

package.json

@@ -15,6 +15,7 @@
     "script:translate": "scripts/runner.sh scripts/generateTranslations.ts",
     "script:profile": "scripts/profile.sh",
     "test": "scripts/test.sh",
+    "uitest": "node uitest/index.mjs | tap-spec",
     "lint": "eslint . --ext ts,vue"
   },
   "dependencies": {
@@ -44,7 +45,6 @@
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/lodash": "^4.14.179",
     "@types/luxon": "^2.3.1",
-    "@types/mocha": "^9.1.0",
     "@types/node": "^17.0.23",
     "@types/node-fetch": "^2.6.1",
     "@types/tape": "^4.13.2",
@@ -65,6 +65,7 @@
     "eslint-plugin-vue": "^9.15.0",
     "execa": "^7.1.1",
     "fs-extra": "^11.1.1",
+    "playwright": "^1.35.1",
     "postcss": "^8",
     "prettier": "^2.4.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",

src/components/Sidebar.vue

@@ -115,6 +115,7 @@
       </button>
 
       <button
+        data-testid="change-db"
         class="
           flex
           text-sm text-gray-600

src/pages/DatabaseSelector.vue

@@ -26,6 +26,7 @@
 
       <!-- New File (Blue Icon) -->
       <div
+        data-testid="create-new-file"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
         :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
         @click="newDatabase"

uitest/index.mjs

@@ -0,0 +1,54 @@
+import path from 'path';
+import { _electron } from 'playwright';
+import { fileURLToPath } from 'url';
+import test from 'tape';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(dirname, '..');
+const appSourcePath = path.join(root, 'dist_electron', 'build', 'main.js');
+
+(async function run() {
+  const electronApp = await _electron.launch({ args: [appSourcePath] });
+  const window = await electronApp.firstWindow();
+
+  test('load app', async (t) => {
+    t.equal(await window.title(), 'Frappe Books', 'title matches');
+
+    await new Promise((r) => window.once('load', () => r()));
+    t.ok(true, 'window has loaded');
+  });
+
+  test('navigate to database selector', async (t) => {
+    /**
+     * When running on local, Frappe Books will open
+     * the last selected database.
+     */
+    const changeDb = window.getByTestId('change-db');
+    const createNew = window.getByTestId('create-new-file');
+
+    const changeDbPromise = changeDb
+      .waitFor({ state: 'visible' })
+      .then(() => 'change-db');
+    const createNewPromise = createNew
+      .waitFor({ state: 'visible' })
+      .then(() => 'create-new-file');
+
+    const el = await Promise.race([changeDbPromise, createNewPromise]);
+    if (el === 'change-db') {
+      await changeDb.click();
+      await createNewPromise;
+    }
+
+    t.ok(await createNew.isVisible(), 'create new is visible');
+  });
+
+  test('create new instance', async (t) => {
+    // await window.getByTestId('create-new-file').click();
+    t.ok(true, '...');
+  });
+
+  test('close app', async (t) => {
+    await electronApp.close();
+    t.ok(true, 'app closed without errors');
+  });
+})();

yarn.lock

@@ -651,11 +651,6 @@
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-2.3.1.tgz#e34763178b46232e4c5f079f1706e18692415519"
   integrity sha512-nAPUltOT28fal2eDZz8yyzNhBjHw1NEymFBP7Q9iCShqpflWPybxHbD7pw/46jQmT+HXOy1QN5hNTms8MOTlOQ==
 
-"@types/mocha@^9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-9.1.0.tgz#baf17ab2cca3fcce2d322ebc30454bff487efad5"
-  integrity sha512-QCWHkbMv4Y5U9oW10Uxbr45qMMSzl4OzijsozynUAgx3kEHUdXB00udx2dWDQ7f2TU2a2uuiFaRZjCe3unPpeg==
-
 "@types/ms@*":
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
@@ -4484,6 +4479,18 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+playwright-core@1.35.1:
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.35.1.tgz#52c1e6ffaa6a8c29de1a5bdf8cce0ce290ffb81d"
+  integrity sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==
+
+playwright@^1.35.1:
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.35.1.tgz#f991d0c76ae517d4a0023d9428b09d19d5e87128"
+  integrity sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA==
+  dependencies:
+    playwright-core "1.35.1"
+
 plist@^3.0.4, plist@^3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.6.tgz#7cfb68a856a7834bca6dbfe3218eb9c7740145d3"