🔖 (23.12.0) darkmode, transaction locking, mobile updates and more (#2003)

* Larger mobile autocomplete fonts and paddings

* Release notes

* VRT + update tests

* Update tests

* Update data-highlighted and tests

* Use styles text

* Fix tests

* Fix tests

* Fix tests

* Fix tests

* Fix tests

* Fix tests

* Adjust Add Transaction padding + VRT updates

* Larger autocomplete text and divider

* Fix rebase

* Fix rebase

* Fix icons

* Adjust fonts

* Fix lint errors

* PR feedback

* VRT

* Update embedded autocomplete highlight hover color

* Refactor create payee button

* Embedded create payee button color

* Dummy change to re-run CI

.eslintignore

@@ -6,11 +6,13 @@ packages/crdt/dist
 
 packages/desktop-client/bundle.browser.js
 packages/desktop-client/build/
+packages/desktop-client/build-stats/
 packages/desktop-client/public/kcab/
 packages/desktop-client/public/data/
 packages/desktop-client/**/node_modules/*
 packages/desktop-client/node_modules/
 packages/desktop-client/src/icons/**/*
+packages/desktop-client/test-results/
 
 packages/desktop-electron/client-build/
 packages/desktop-electron/dist/

.eslintrc.js

@@ -25,17 +25,31 @@ const restrictedImportPatterns = [
   },
 ];
 
+const restrictedImportColors = [
+  {
+    group: ['**/style', '**/colors'],
+    importNames: ['colors'],
+    message: 'Please use themes instead of colors',
+  },
+];
+
 module.exports = {
   plugins: ['prettier', 'import', 'rulesdir', '@typescript-eslint'],
-  extends: ['react-app', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'react-app',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: { project: [path.join(__dirname, './tsconfig.json')] },
   reportUnusedDisableDirectives: true,
   rules: {
-    'prettier/prettier': 'error',
+    'prettier/prettier': 'warn',
+
+    // Note: base rule explicitly disabled in favor of the TS one
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
-      'error',
+      'warn',
       {
         args: 'none',
         varsIgnorePattern: '^_',
@@ -43,41 +57,56 @@ module.exports = {
       },
     ],
 
-    curly: ['error', 'multi-line', 'consistent'],
+    curly: ['warn', 'multi-line', 'consistent'],
 
-    'no-restricted-globals': ['error'].concat(
+    'no-restricted-globals': ['warn'].concat(
       require('confusing-browser-globals').filter(g => g !== 'self'),
     ),
 
-    'react/jsx-no-useless-fragment': 'error',
+    'react/jsx-no-useless-fragment': 'warn',
+    'react/self-closing-comp': 'warn',
+    'react/no-unstable-nested-components': [
+      'warn',
+      { allowAsProps: true, customValidators: ['formatter'] },
+    ],
 
-    'rulesdir/typography': 'error',
+    'rulesdir/typography': 'warn',
+    'rulesdir/prefer-if-statement': 'warn',
 
     // https://github.com/eslint/eslint/issues/16954
     // https://github.com/eslint/eslint/issues/16953
     'no-loop-func': 'off',
 
+    // Do don't need this as we're using TypeScript
+    'react/prop-types': 'off',
+
     // TODO: re-enable these rules
     'react-hooks/exhaustive-deps': 'off',
+    'react/no-children-prop': 'off',
+    'react/display-name': 'off',
+    'react/react-in-jsx-scope': 'off',
     // 'react-hooks/exhaustive-deps': [
-    //   'error',
+    //   'warn',
     //   {
     //     additionalHooks: 'useLiveQuery',
     //   },
     // ],
 
+    'no-var': 'warn',
+    'object-shorthand': ['warn', 'properties'],
+
     'import/extensions': [
-      'error',
+      'warn',
       'never',
       {
         json: 'always',
       },
     ],
-    'import/no-useless-path-segments': 'error',
-    'import/no-duplicates': ['error', { 'prefer-inline': true }],
-    'import/no-unused-modules': ['error', { unusedExports: true }],
+    'import/no-useless-path-segments': 'warn',
+    'import/no-duplicates': ['warn', { 'prefer-inline': true }],
+    'import/no-unused-modules': ['warn', { unusedExports: true }],
     'import/order': [
-      'error',
+      'warn',
       {
         alphabetize: {
           caseInsensitive: true,
@@ -106,7 +135,7 @@ module.exports = {
     ],
 
     'no-restricted-syntax': [
-      'error',
+      'warn',
       {
         // forbid React.* as they are legacy https://twitter.com/dan_abramov/status/1308739731551858689
         selector:
@@ -121,7 +150,10 @@ module.exports = {
           'Using <a> is discouraged, please use <LinkButton> or <ExternalLink> instead.',
       },
     ],
-    'no-restricted-imports': ['error', { patterns: restrictedImportPatterns }],
+    'no-restricted-imports': [
+      'warn',
+      { patterns: [...restrictedImportPatterns, ...restrictedImportColors] },
+    ],
 
     // Rules disable during TS migration
     '@typescript-eslint/no-var-requires': 'off',
@@ -144,14 +176,14 @@ module.exports = {
       ],
       rules: {
         // enforce type over interface
-        '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+        '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
         // enforce import type
         '@typescript-eslint/consistent-type-imports': [
-          'error',
+          'warn',
           { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
         ],
         '@typescript-eslint/ban-types': [
-          'error',
+          'warn',
           {
             types: {
               // forbid FC as superflous
@@ -167,7 +199,7 @@ module.exports = {
       files: ['./packages/loot-core/src/**/*'],
       rules: {
         'no-restricted-imports': [
-          'error',
+          'warn',
           {
             patterns: [
               ...restrictedImportPatterns,
@@ -183,14 +215,52 @@ module.exports = {
     },
     {
       files: [
-        '**/icons/**/*.js',
-        '**/mocks/**/*.{js,ts,tsx}',
-        '**/{mocks,__mocks__}/*.{js,ts,tsx}',
+        'packages/loot-core/src/types/**/*',
+        'packages/loot-core/src/client/state-types/**/*',
+        '**/icons/**/*',
+        '**/{mocks,__mocks__}/**/*',
         // can't correctly resolve usages
         '**/*.{testing,electron,browser,web,api}.ts',
       ],
       rules: { 'import/no-unused-modules': 'off' },
     },
+    {
+      files: [
+        './packages/desktop-client/src/style/index.*',
+        './packages/desktop-client/src/style/palette.*',
+      ],
+      rules: {
+        'no-restricted-imports': ['off', { patterns: restrictedImportColors }],
+      },
+    },
+    // TODO: Remove this override once we addressed all warnings and enable the rule globally.
+    {
+      files: [
+        './packages/api/*',
+        './packages/api/app/**/*',
+        './packages/crdt/**/*',
+        './packages/desktop-client/src/*',
+        // './packages/desktop-client/src/components/**/*',
+        './packages/desktop-client/src/hooks/**/*',
+        './packages/desktop-client/src/icons/**/*',
+        './packages/desktop-client/src/style/**/*',
+        './packages/desktop-client/src/types/**/*',
+        './packages/desktop-client/src/util/**/*',
+        './packages/desktop-electron/**/*',
+        './packages/eslint-plugin-actual/**/*',
+        './packages/loot-core/*',
+        './packages/loot-core/src/client/**/*',
+        './packages/loot-core/src/mocks/**/*',
+        './packages/loot-core/src/platform/**/*',
+        // './packages/loot-core/src/server/**/*',
+        './packages/loot-core/src/shared/**/*',
+        './packages/loot-core/src/types/**/*',
+        './packages/loot-core/webpack/**/*',
+      ],
+      rules: {
+        'prefer-const': 'warn',
+      },
+    },
   ],
   settings: {
     'import/parsers': {

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# Funding policies: https://actualbudget.org/docs/contributing/leadership/funding
+open_collective: actual
+github: actualbudget

.github/actions/handle-feature-requests.js

@@ -76,7 +76,7 @@ async function main() {
           label =>
             label.name === 'help wanted' ||
             label.name === 'needs votes' ||
-            lahel.name === 'good first issue',
+            label.name === 'good first issue',
         )
         .map(label => label.id);
       const res = await makeAPIRequest(

.github/actions/netlify-wait-for-build

@@ -9,8 +9,8 @@ function get_status() {
   curl --header "Authorization: Bearer $GITHUB_TOKEN" "https://api.github.com/repos/actualbudget/actual/commits/$COMMIT_SHA/statuses" > /tmp/status.json
   cat /tmp/status.json
   echo "::endgroup::"
-  netlify=$(jq '[.[] | select(.context == "netlify/actualbudget/deploy-preview")][0]' /tmp/status.json)
-  state=$(jq -r '.state' <<< "$netlify")
+  netlify=$(yarn jq '[.[] | select(.context == "netlify/actualbudget/deploy-preview")][0]' /tmp/status.json)
+  state=$(yarn jq -r '.state' <<< "$netlify")
   echo "::group::Netlify Status"
   echo "$netlify"
   echo "::endgroup::"
@@ -32,7 +32,7 @@ done
 
 if [ "$state" == "success" ]; then
   echo -e "\033[0;32mNetlify build succeeded!\033[0m"
-  jq -r '"url=" + .target_url' <<< "$netlify" > $GITHUB_OUTPUT
+  yarn jq -r '"url=" + .target_url' <<< "$netlify" > $GITHUB_OUTPUT
   exit 0
 else
   echo -e "\033[0;31mNetlify build failed. Cancelling end-to-end tests.\033[0m"

.github/workflows/build.yml

@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   api:

.github/workflows/check.yml

@@ -8,7 +8,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   lint:
@@ -41,7 +41,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: '19'
       - name: Check migrations

.github/workflows/codeql.yml

@@ -9,7 +9,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   analyze:

.github/workflows/e2e-test.yml

@@ -10,25 +10,56 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  test:
-    name: Run end-to-end tests on Netlify PR preview
+  netlify:
+    name: Wait for Netlify build to finish
     runs-on: ubuntu-latest
+    outputs:
+      netlify_url: ${{ steps.netlify.outputs.url }}
     steps:
       - uses: actions/checkout@v3
       - name: Set up environment
         uses: ./.github/actions/setup
-      - name: Setup Playwright
-        run: npx playwright install chromium --with-deps
       - name: Wait for Netlify build to finish
         id: netlify
         env:
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: ./.github/actions/netlify-wait-for-build
+
+  functional:
+    name: Functional
+    needs: netlify
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up environment
+        uses: ./.github/actions/setup
       - name: Run E2E Tests on Netlify URL
         run: yarn e2e
         env:
-          E2E_START_URL: ${{ steps.netlify.outputs.url }}
+          E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: desktop-client-test-results
+          path: packages/desktop-client/test-results/
+          retention-days: 30
+  vrt:
+    name: Visual regression
+    needs: netlify
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Run VRT Tests on Netlify URL
+        run: yarn vrt
+        env:
+          E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
       - uses: actions/upload-artifact@v3
         if: always()
         with:

.github/workflows/electron.yml

@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   build:
@@ -28,6 +28,10 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
+      - if: ${{ startsWith(matrix.os, 'windows') }}
+        run: pip.exe install setuptools
+      - if: ${{ ! startsWith(matrix.os, 'windows') }}
+        run: python3 -m pip install setuptools
       - name: Set up environment
         uses: ./.github/actions/setup
       - name: Build Electron

.github/workflows/issues-close-feature-requests.yml

@@ -24,7 +24,7 @@ jobs:
           body: |
             :sparkles: Thanks for sharing your idea! :sparkles:
 
-            This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open. This doesn’t mean we don’t accept feature requests, though! We will consider implementing ones that receive many upvotes, and we welcome contributions for any feature requests marked as needing votes (just post a comment first so we can help you make a successful contribution).
+            This repository uses lodash style issue management for enhancements. That means enhancement issues are automatically closed. This doesn’t mean we don’t accept feature requests, though! We will consider implementing ones that receive many upvotes, and we welcome contributions for any feature requests marked as needing votes (just post a comment first so we can help you make a successful contribution).
 
             The enhancement backlog can be found here: https://github.com/actualbudget/actual/issues?q=label%3A%22needs+votes%22+sort%3Areactions-%2B1-desc+
 

.github/workflows/issues-feature-implemented.yml

@@ -25,7 +25,7 @@ jobs:
     steps:
       # This is not a security concern because we have approved & merged the PR
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: '19'
       - name: Handle feature requests

.github/workflows/size-compare.yml

@@ -66,14 +66,14 @@ jobs:
         run: |
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./head/*.json
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./base/*.json
-      - uses: github/webpack-bundlesize-compare-action@v1.8.1
+      - uses: github/webpack-bundlesize-compare-action@v1.8.2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           current-stats-json-path: ./head/desktop-client-stats.json
           base-stats-json-path: ./base/desktop-client-stats.json
           title: desktop-client
 
-      - uses: github/webpack-bundlesize-compare-action@v1.8.1
+      - uses: github/webpack-bundlesize-compare-action@v1.8.2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           current-stats-json-path: ./head/loot-core-stats.json

.github/workflows/stale.yml

@@ -0,0 +1,16 @@
+name: 'Close stale PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
+          days-before-stale: 30
+          days-before-close: 5
+          days-before-issue-stale: -1

.yarnrc.yml

@@ -1,9 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

bin/package-electron

@@ -35,8 +35,6 @@ if [ "$OSTYPE" == "msys" ]; then
     fi
 fi
 
-yarn patch-package
-
 yarn rebuild-electron
 
 yarn workspace loot-core build:node

package.json

@@ -19,7 +19,7 @@
   },
   "scripts": {
     "start": "yarn start:browser",
-    "start:desktop": "npm-run-all --parallel 'start:desktop-*'",
+    "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
     "start:desktop-electron": "yarn workspace desktop-electron watch",
@@ -28,15 +28,18 @@
     "start:browser-backend": "yarn workspace loot-core watch:browser",
     "start:browser-frontend": "yarn workspace @actual-app/web start:browser",
     "build:browser": "./bin/package-browser",
-    "test": "yarn workspaces foreach --parallel --verbose run test",
-    "test:debug": "yarn workspaces foreach --verbose run test",
-    "e2e": "yarn workspaces foreach --parallel --verbose run e2e",
+    "build:desktop": "./bin/package-electron",
+    "build:api": "yarn workspace @actual-app/api build",
+    "test": "yarn workspaces foreach --all --parallel --verbose run test",
+    "test:debug": "yarn workspaces foreach --all --verbose run test",
+    "e2e": "yarn workspaces foreach --all --parallel --verbose run e2e",
+    "vrt": "yarn workspaces foreach --all --parallel --verbose run vrt",
     "rebuild-electron": "./node_modules/.bin/electron-rebuild -f -m ./packages/loot-core",
     "rebuild-node": "yarn workspace loot-core rebuild",
     "lint": "eslint . --max-warnings 0",
     "lint:verbose": "DEBUG=eslint:cli-engine eslint . --max-warnings 0",
     "typecheck": "yarn tsc",
-    "postinstall": "patch-package"
+    "jq": "./node_modules/node-jq/bin/jq"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
@@ -47,20 +50,17 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-rulesdir": "^0.2.2",
+    "node-jq": "^4.0.1",
     "npm-run-all": "^4.1.3",
-    "patch-package": "^6.1.2",
     "prettier": "2.8.2",
     "react-refresh": "^0.14.0",
     "source-map-support": "^0.5.21",
     "typescript": "^5.0.2"
   },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "yarn@3.5.1",
+  "packageManager": "yarn@4.0.1",
   "browserslist": [
     "electron 24.0",
     "defaults"

packages/api/.gitignore

@@ -1,3 +1,4 @@
 app/bundle.api.js*
+app/stats.json
 migrations
 default-db.sqlite

packages/api/app/query.js

@@ -23,7 +23,7 @@ class Query {
   }
 
   unfilter(exprs) {
-    let exprSet = new Set(exprs);
+    const exprSet = new Set(exprs);
     return new Query({
       ...this.state,
       filterExpressions: this.state.filterExpressions.filter(
@@ -37,13 +37,13 @@ class Query {
       exprs = [exprs];
     }
 
-    let query = new Query({ ...this.state, selectExpressions: exprs });
+    const query = new Query({ ...this.state, selectExpressions: exprs });
     query.state.calculation = false;
     return query;
   }
 
   calculate(expr) {
-    let query = this.select({ result: expr });
+    const query = this.select({ result: expr });
     query.state.calculation = true;
     return query;
   }

packages/api/index.js

@@ -1,8 +1,9 @@
-import fetch from 'node-fetch';
+/* eslint-disable import/no-unused-modules */
 
 // eslint-disable-next-line import/extensions
 import * as bundle from './app/bundle.api.js';
 import * as injected from './injected';
+import { validateNodeVersion } from './validateNodeVersion';
 
 let actualApp;
 export const internal = bundle.lib;
@@ -18,7 +19,10 @@ export async function init(config = {}) {
     return;
   }
 
-  global.fetch = fetch;
+  validateNodeVersion();
+
+  global.fetch = (...args) =>
+    import('node-fetch').then(({ default: fetch }) => fetch(...args));
 
   await bundle.init(config);
   actualApp = bundle.lib;

packages/api/methods.js

@@ -58,8 +58,17 @@ export function setBudgetCarryover(month, categoryId, flag) {
   return send('api/budget-set-carryover', { month, categoryId, flag });
 }
 
-export function addTransactions(accountId, transactions) {
-  return send('api/transactions-add', { accountId, transactions });
+export function addTransactions(
+  accountId,
+  transactions,
+  { learnCategories = false, runTransfers = false } = {},
+) {
+  return send('api/transactions-add', {
+    accountId,
+    transactions,
+    learnCategories,
+    runTransfers,
+  });
 }
 
 export function importTransactions(accountId, transactions) {

packages/api/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@actual-app/api",
-  "version": "6.1.1",
+  "version": "6.3.0",
   "license": "MIT",
   "description": "An API for Actual",
+  "engines": {
+    "node": ">=18.12.0"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -16,8 +19,9 @@
     "build": "rm -rf dist && yarn run build:app && yarn run build:node && yarn run build:migrations && yarn run build:default-db"
   },
   "dependencies": {
-    "better-sqlite3": "^8.2.0",
-    "node-fetch": "^2.6.9",
+    "better-sqlite3": "^9.1.1",
+    "compare-versions": "^6.1.0",
+    "node-fetch": "^3.3.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

packages/api/test.js

@@ -1,8 +0,0 @@
-import * as api from './index';
-
-async function run() {
-  let app = await api.init({ config: { dataDir: '/tmp' } });
-  await app.send('create-budget', { testMode: true });
-}
-
-run();

packages/api/tsconfig.dist.json

@@ -5,6 +5,7 @@
     // the latest Node 16.x release supports all of the features
     "target": "es2021",
     "module": "CommonJS",
+    "moduleResolution": "Node16",
     "noEmit": false,
     "declaration": true,
     "outDir": "dist"

packages/api/validateNodeVersion.js

@@ -0,0 +1,16 @@
+import { satisfies } from 'compare-versions';
+
+import * as packageJson from './package.json';
+
+export function validateNodeVersion() {
+  if (process?.versions?.node) {
+    const nodeVersion = process?.versions?.node;
+    const minimumNodeVersion = packageJson.engines.node;
+
+    if (!satisfies(nodeVersion, minimumNodeVersion)) {
+      throw new Error(
+        `@actual-app/api requires a node version ${minimumNodeVersion}. Found that you are using: ${nodeVersion}. Please upgrade to a higher version`,
+      );
+    }
+  }
+}

packages/crdt/jest.config.js

@@ -1,4 +1,6 @@
 module.exports = {
-  preset: 'ts-jest/presets/js-with-ts-esm',
   testEnvironment: 'node',
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
 };

packages/crdt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/crdt",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "CRDT layer of Actual",
   "main": "dist/index.js",
@@ -16,14 +16,15 @@
   },
   "dependencies": {
     "google-protobuf": "^3.12.0-rc.1",
-    "murmurhash": "^0.0.2",
+    "murmurhash": "^2.0.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.82",
+    "@swc/jest": "^0.2.29",
     "@types/jest": "^27.5.0",
     "@types/uuid": "^9.0.2",
     "jest": "^27.0.0",
-    "ts-jest": "^27.0.0",
     "ts-protoc-gen": "^0.15.0",
     "typescript": "^5.0.2"
   }

packages/crdt/src/crdt/index.ts

@@ -8,6 +8,6 @@ export {
   makeClientId,
   serializeClock,
   deserializeClock,
-  Clock,
+  type Clock,
   Timestamp,
 } from './timestamp';

packages/crdt/src/crdt/merkle.test.ts

@@ -1,13 +1,17 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as merkle from './merkle';
 import { Timestamp } from './timestamp';
 
-function message(timestamp, hash) {
-  timestamp = Timestamp.parse(timestamp);
+function message(timestampStr: string, hash: number) {
+  const timestamp = Timestamp.parse(timestampStr)!;
   timestamp.hash = () => hash;
   return { timestamp };
 }
 
-function insertMessages(trie, messages) {
+function insertMessages(
+  trie: merkle.TrieNode,
+  messages: ReturnType<typeof message>[],
+) {
   messages.forEach(msg => {
     trie = merkle.insert(trie, msg.timestamp);
   });
@@ -18,11 +22,11 @@ describe('merkle trie', () => {
   test('adding an item works', () => {
     let trie = merkle.insert(
       merkle.emptyTrie(),
-      Timestamp.parse('2018-11-12T13:21:40.122Z-0000-0123456789ABCDEF'),
+      Timestamp.parse('2018-11-12T13:21:40.122Z-0000-0123456789ABCDEF')!,
     );
     trie = merkle.insert(
       trie,
-      Timestamp.parse('2018-11-13T13:21:40.122Z-0000-0123456789ABCDEF'),
+      Timestamp.parse('2018-11-13T13:21:40.122Z-0000-0123456789ABCDEF')!,
     );
     expect(trie).toMatchSnapshot();
   });
@@ -51,7 +55,7 @@ describe('merkle trie', () => {
     trie2 = merkle.insert(trie2, messages[4].timestamp);
     expect(trie2.hash).toBe(108);
 
-    expect(new Date(merkle.diff(trie1, trie2)).toISOString()).toBe(
+    expect(new Date(merkle.diff(trie1, trie2)!).toISOString()).toBe(
       '2018-11-02T17:15:00.000Z',
     );
 
@@ -65,17 +69,17 @@ describe('merkle trie', () => {
   });
 
   test('diffing works with empty tries', () => {
-    let trie1 = merkle.emptyTrie();
-    let trie2 = merkle.insert(
+    const trie1 = merkle.emptyTrie();
+    const trie2 = merkle.insert(
       merkle.emptyTrie(),
-      Timestamp.parse('2009-01-02T10:17:37.789Z-0000-0000testinguuid1'),
+      Timestamp.parse('2009-01-02T10:17:37.789Z-0000-0000testinguuid1')!,
     );
 
     expect(merkle.diff(trie1, trie2)).toBe(0);
   });
 
   test('pruning works and keeps correct hashes', () => {
-    let messages = [
+    const messages = [
       message('2018-11-01T01:00:00.000Z-0000-0123456789ABCDEF', 1000),
       message('2018-11-01T01:09:00.000Z-0000-0123456789ABCDEF', 1100),
       message('2018-11-01T01:18:00.000Z-0000-0123456789ABCDEF', 1200),
@@ -97,13 +101,13 @@ describe('merkle trie', () => {
     expect(trie.hash).toBe(2496);
     expect(trie).toMatchSnapshot();
 
-    let pruned = merkle.prune(trie);
+    const pruned = merkle.prune(trie);
     expect(pruned.hash).toBe(2496);
     expect(pruned).toMatchSnapshot();
   });
 
   test('diffing differently shaped tries returns correct time', () => {
-    let messages = [
+    const messages = [
       message('2018-11-01T01:00:00.000Z-0000-0123456789ABCDEF', 1000),
       message('2018-11-01T01:09:00.000Z-0000-0123456789ABCDEF', 1100),
       message('2018-11-01T01:18:00.000Z-0000-0123456789ABCDEF', 1200),
@@ -118,70 +122,70 @@ describe('merkle trie', () => {
       message('2018-11-01T02:37:00.000Z-0000-0123456789ABCDEF', 2100),
     ];
 
-    let trie = insertMessages({}, messages);
+    const trie = insertMessages({}, messages);
 
     // Case 0: It always returns a base time when comparing with an
     // empty trie
-    expect(new Date(merkle.diff(merkle.emptyTrie(), trie)).toISOString()).toBe(
+    expect(new Date(merkle.diff(merkle.emptyTrie(), trie)!).toISOString()).toBe(
       '1970-01-01T00:00:00.000Z',
     );
-    expect(new Date(merkle.diff(trie, merkle.emptyTrie())).toISOString()).toBe(
+    expect(new Date(merkle.diff(trie, merkle.emptyTrie())!).toISOString()).toBe(
       '1970-01-01T00:00:00.000Z',
     );
 
     // Case 1: Add an older message that modifies the trie in such a
     // way that it modifies the 1st out of 3 branches (so it will be
     // pruned away)
-    let trie1 = insertMessages(trie, [
+    const trie1 = insertMessages(trie, [
       message('2018-11-01T00:59:00.000Z-0000-0123456789ABCDEF', 900),
     ]);
 
-    // Normal comparision works
-    expect(new Date(merkle.diff(trie1, trie)).toISOString()).toBe(
+    // Normal comparison works
+    expect(new Date(merkle.diff(trie1, trie)!).toISOString()).toBe(
       '2018-11-01T00:54:00.000Z',
     );
 
     // Comparing the pruned new trie is lossy, so it returns an even older time
-    expect(new Date(merkle.diff(merkle.prune(trie1), trie)).toISOString()).toBe(
-      '2018-11-01T00:45:00.000Z',
-    );
+    expect(
+      new Date(merkle.diff(merkle.prune(trie1), trie)!).toISOString(),
+    ).toBe('2018-11-01T00:45:00.000Z');
 
     // Comparing the pruned original trie is just as lossy
-    expect(new Date(merkle.diff(trie1, merkle.prune(trie))).toISOString()).toBe(
-      '2018-11-01T00:45:00.000Z',
-    );
+    expect(
+      new Date(merkle.diff(trie1, merkle.prune(trie))!).toISOString(),
+    ).toBe('2018-11-01T00:45:00.000Z');
 
     // Pruning both tries is just as lossy as well, since the changed
     // key is pruned away in both cases and it won't find a changed
     // key so it bails at the point
     expect(
       new Date(
-        merkle.diff(merkle.prune(trie1), merkle.prune(trie)),
+        merkle.diff(merkle.prune(trie1), merkle.prune(trie))!,
       ).toISOString(),
     ).toBe('2018-11-01T00:45:00.000Z');
 
     // Case 2: Add two messages similar to the above case, but the
     // second message modifies the 2nd key at the same level as the
-    // first message modifiying the 1st key
-    let trie2 = insertMessages(trie, [
+    // first message modifying the 1st key
+    const trie2 = insertMessages(trie, [
       message('2018-11-01T00:59:00.000Z-0000-0123456789ABCDEF', 900),
       message('2018-11-01T01:15:00.000Z-0000-0123456789ABCDEF', 1422),
     ]);
 
-    // Normal comparision works
-    expect(new Date(merkle.diff(trie2, trie)).toISOString()).toBe(
+    // Normal comparison works
+    expect(new Date(merkle.diff(trie2, trie)!).toISOString()).toBe(
       '2018-11-01T00:54:00.000Z',
     );
 
     // Same as case 1
-    expect(new Date(merkle.diff(merkle.prune(trie2), trie)).toISOString()).toBe(
-      '2018-11-01T00:45:00.000Z',
-    );
+    expect(
+      new Date(merkle.diff(merkle.prune(trie2), trie)!).toISOString(),
+    ).toBe('2018-11-01T00:45:00.000Z');
 
     // Same as case 1
-    expect(new Date(merkle.diff(trie2, merkle.prune(trie))).toISOString()).toBe(
-      '2018-11-01T00:45:00.000Z',
-    );
+    expect(
+      new Date(merkle.diff(trie2, merkle.prune(trie))!).toISOString(),
+    ).toBe('2018-11-01T00:45:00.000Z');
 
     // Pruning both tries is very lossy and this ends up returning a
     // time that only covers the second message. Syncing will need
@@ -190,7 +194,7 @@ describe('merkle trie', () => {
     // ignores the first message.
     expect(
       new Date(
-        merkle.diff(merkle.prune(trie2), merkle.prune(trie)),
+        merkle.diff(merkle.prune(trie2), merkle.prune(trie))!,
       ).toISOString(),
     ).toBe('2018-11-01T01:12:00.000Z');
   });

packages/crdt/src/crdt/merkle.ts

@@ -19,18 +19,24 @@ export type TrieNode = {
   hash?: number;
 };
 
+type NumberTrieNodeKey = keyof Omit<TrieNode, 'hash'>;
+
 export function emptyTrie(): TrieNode {
   return { hash: 0 };
 }
 
-export function getKeys(trie: TrieNode): ('0' | '1' | '2')[] {
-  return Object.keys(trie).filter(x => x !== 'hash') as ('0' | '1' | '2')[];
+function isNumberTrieNodeKey(input: string): input is NumberTrieNodeKey {
+  return ['0', '1', '2'].includes(input);
+}
+
+export function getKeys(trie: TrieNode): NumberTrieNodeKey[] {
+  return Object.keys(trie).filter(isNumberTrieNodeKey);
 }
 
 export function keyToTimestamp(key: string): number {
   // 16 is the length of the base 3 value of the current time in
   // minutes. Ensure it's padded to create the full value
-  let fullkey = key + '0'.repeat(16 - key.length);
+  const fullkey = key + '0'.repeat(16 - key.length);
 
   // Parse the base 3 representation
   return parseInt(fullkey, 3) * 1000 * 60;
@@ -40,35 +46,36 @@ export function keyToTimestamp(key: string): number {
  * Mutates `trie` to insert a node at `timestamp`
  */
 export function insert(trie: TrieNode, timestamp: Timestamp) {
-  let hash = timestamp.hash();
-  let key = Number(Math.floor(timestamp.millis() / 1000 / 60)).toString(3);
+  const hash = timestamp.hash();
+  const key = Number(Math.floor(timestamp.millis() / 1000 / 60)).toString(3);
 
-  trie = Object.assign({}, trie, { hash: trie.hash ^ hash });
+  trie = Object.assign({}, trie, { hash: (trie.hash || 0) ^ hash });
   return insertKey(trie, key, hash);
 }
 
-function insertKey(trie: TrieNode, key: string, hash: number) {
+function insertKey(trie: TrieNode, key: string, hash: number): TrieNode {
   if (key.length === 0) {
     return trie;
   }
   const c = key[0];
-  const n = trie[c] || {};
+  const t = isNumberTrieNodeKey(c) ? trie[c] : undefined;
+  const n = t || {};
   return Object.assign({}, trie, {
     [c]: Object.assign({}, n, insertKey(n, key.slice(1), hash), {
-      hash: n.hash ^ hash,
+      hash: (n.hash || 0) ^ hash,
     }),
   });
 }
 
 export function build(timestamps: Timestamp[]) {
-  let trie = emptyTrie();
-  for (let timestamp of timestamps) {
+  const trie = emptyTrie();
+  for (const timestamp of timestamps) {
     insert(trie, timestamp);
   }
   return trie;
 }
 
-export function diff(trie1: TrieNode, trie2: TrieNode): number {
+export function diff(trie1: TrieNode, trie2: TrieNode): number | null {
   if (trie1.hash === trie2.hash) {
     return null;
   }
@@ -82,8 +89,8 @@ export function diff(trie1: TrieNode, trie2: TrieNode): number {
   // left (this shouldn't happen, if that's the case the hash check at
   // the top of this function should pass)
   while (1) {
-    let keyset = new Set([...getKeys(node1), ...getKeys(node2)]);
-    let keys = [...keyset.values()];
+    const keyset = new Set([...getKeys(node1), ...getKeys(node2)]);
+    const keys = [...keyset.values()];
     keys.sort();
 
     let diffkey = null;
@@ -103,14 +110,15 @@ export function diff(trie1: TrieNode, trie2: TrieNode): number {
     // changed time that we know of, because of pruning it might take
     // multiple passes to sync up a trie.
     for (let i = 0; i < keys.length; i++) {
-      let key = keys[i];
+      const key = keys[i];
 
-      if (!node1[key] || !node2[key]) {
+      const next1 = node1[key];
+      const next2 = node2[key];
+
+      if (!next1 || !next2) {
         break;
       }
 
-      let next1 = node1[key];
-      let next2 = node2[key];
       if (next1.hash !== next2.hash) {
         diffkey = key;
         break;
@@ -125,6 +133,8 @@ export function diff(trie1: TrieNode, trie2: TrieNode): number {
     node1 = node1[diffkey] || emptyTrie();
     node2 = node2[diffkey] || emptyTrie();
   }
+
+  return null;
 }
 
 export function prune(trie: TrieNode, n = 2): TrieNode {
@@ -133,20 +143,26 @@ export function prune(trie: TrieNode, n = 2): TrieNode {
     return trie;
   }
 
-  let keys = getKeys(trie);
+  const keys = getKeys(trie);
   keys.sort();
 
-  let next = { hash: trie.hash };
+  const next: TrieNode = { hash: trie.hash };
 
   // Prune child nodes.
-  for (let k of keys.slice(-n)) {
-    next[k] = prune(trie[k], n);
+  for (const k of keys.slice(-n)) {
+    const node = trie[k];
+
+    if (!node) {
+      throw new Error(`TrieNode for key ${k} could not be found`);
+    }
+
+    next[k] = prune(node, n);
   }
 
   return next;
 }
 
-export function debug(trie: TrieNode, k = '', indent = 0) {
+export function debug(trie: TrieNode, k = '', indent = 0): string {
   const str =
     ' '.repeat(indent) +
     (k !== '' ? `k: ${k} ` : '') +
@@ -155,7 +171,9 @@ export function debug(trie: TrieNode, k = '', indent = 0) {
     str +
     getKeys(trie)
       .map(key => {
-        return debug(trie[key], key, indent + 2);
+        const node = trie[key];
+        if (!node) return '';
+        return debug(node, key, indent + 2);
       })
       .join('')
   );

packages/crdt/src/crdt/timestamp.test.ts

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Timestamp } from './timestamp';
 
 describe('Timestamp', function () {
   let now = 0;
-  let prevNow;
+  let prevNow: typeof Date.now;
 
   beforeEach(function () {
     prevNow = Date.now;
@@ -16,16 +17,18 @@ describe('Timestamp', function () {
 
   describe('comparison', function () {
     it('should be in order', function () {
+      const sendTimestamp = Timestamp.send();
+
       expect(Timestamp.zero).toBe(Timestamp.zero);
       expect(Timestamp.max > Timestamp.zero).toBeTruthy();
-      expect(Timestamp.send() > Timestamp.zero).toBeTruthy();
-      expect(Timestamp.send() < Timestamp.max).toBeTruthy();
+      expect(sendTimestamp && sendTimestamp > Timestamp.zero).toBeTruthy();
+      expect(sendTimestamp && sendTimestamp < Timestamp.max).toBeTruthy();
     });
   });
 
   describe('parsing', function () {
     it('should not parse', function () {
-      let invalidInputs = [
+      const invalidInputs = [
         null,
         undefined,
         {},
@@ -41,19 +44,19 @@ describe('Timestamp', function () {
         '9999-12-31T23:59:59.999Z-10000-FFFFFFFFFFFFFFFF',
         '9999-12-31T23:59:59.999Z-FFFF-10000000000000000',
       ];
-      for (let invalidInput of invalidInputs) {
+      for (const invalidInput of invalidInputs) {
         expect(Timestamp.parse(invalidInput as string)).toBe(null);
       }
     });
 
     it('should parse', function () {
-      let validInputs = [
+      const validInputs = [
         '1970-01-01T00:00:00.000Z-0000-0000000000000000',
         '2015-04-24T22:23:42.123Z-1000-0123456789ABCDEF',
         '9999-12-31T23:59:59.999Z-FFFF-FFFFFFFFFFFFFFFF',
       ];
-      for (let validInput of validInputs) {
-        let parsed = Timestamp.parse(validInput);
+      for (const validInput of validInputs) {
+        const parsed = Timestamp.parse(validInput)!;
         expect(typeof parsed).toBe('object');
         expect(parsed.millis() >= 0).toBeTruthy();
         expect(parsed.millis() < 253402300800000).toBeTruthy();
@@ -133,7 +136,7 @@ describe('Timestamp', function () {
       now = 52;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.051Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.051Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.052Z-0000-0000000000000001'),
@@ -141,7 +144,7 @@ describe('Timestamp', function () {
       now = 54;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.053Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.053Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.054Z-0000-0000000000000001'),
@@ -149,7 +152,7 @@ describe('Timestamp', function () {
       now = 56;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.055Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.055Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.056Z-0000-0000000000000001'),
@@ -160,7 +163,7 @@ describe('Timestamp', function () {
       now = 61;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.062Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.062Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.062Z-0001-0000000000000001'),
@@ -168,7 +171,7 @@ describe('Timestamp', function () {
       now = 62;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.062Z-0001-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.062Z-0001-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.062Z-0002-0000000000000001'),
@@ -176,7 +179,7 @@ describe('Timestamp', function () {
       now = 62;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.062Z-0002-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.062Z-0002-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.062Z-0003-0000000000000001'),
@@ -184,7 +187,7 @@ describe('Timestamp', function () {
       now = 63;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.062Z-0004-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.062Z-0004-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.063Z-0000-0000000000000001'),
@@ -195,7 +198,7 @@ describe('Timestamp', function () {
       now = 73;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.071Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.071Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.073Z-0000-0000000000000001'),
@@ -203,7 +206,7 @@ describe('Timestamp', function () {
       now = 73;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.072Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.072Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.073Z-0001-0000000000000001'),
@@ -211,7 +214,7 @@ describe('Timestamp', function () {
       now = 74;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.073Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.073Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.074Z-0000-0000000000000001'),
@@ -222,7 +225,7 @@ describe('Timestamp', function () {
       now = 81;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.083Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.083Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.083Z-0001-0000000000000001'),
@@ -230,7 +233,7 @@ describe('Timestamp', function () {
       now = 82;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.083Z-0001-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.083Z-0001-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.083Z-0002-0000000000000001'),
@@ -238,7 +241,7 @@ describe('Timestamp', function () {
       now = 83;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.083Z-0002-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.083Z-0002-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.083Z-0003-0000000000000001'),
@@ -246,7 +249,7 @@ describe('Timestamp', function () {
       now = 84;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.083Z-0003-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.083Z-0003-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.084Z-0000-0000000000000001'),
@@ -256,7 +259,7 @@ describe('Timestamp', function () {
       now = 93;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.091Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.091Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.093Z-0000-0000000000000001'),
@@ -264,7 +267,7 @@ describe('Timestamp', function () {
       now = 92;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.092Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.092Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.093Z-0001-0000000000000001'),
@@ -272,7 +275,7 @@ describe('Timestamp', function () {
       now = 91;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.093Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.093Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.093Z-0002-0000000000000001'),
@@ -282,7 +285,7 @@ describe('Timestamp', function () {
       now = 101;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.103Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.103Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.103Z-0001-0000000000000001'),
@@ -290,7 +293,7 @@ describe('Timestamp', function () {
       now = 102;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.102Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.102Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.103Z-0002-0000000000000001'),
@@ -298,7 +301,7 @@ describe('Timestamp', function () {
       now = 103;
       expect(
         Timestamp.recv(
-          Timestamp.parse('1970-01-01T00:00:00.101Z-0000-0000000000000002'),
+          Timestamp.parse('1970-01-01T00:00:00.101Z-0000-0000000000000002')!,
         ),
       ).toEqual(
         Timestamp.parse('1970-01-01T00:00:00.103Z-0003-0000000000000001'),
@@ -316,7 +319,7 @@ describe('Timestamp', function () {
     it('should fail with clock drift', function () {
       expect(function () {
         Timestamp.recv(
-          Timestamp.parse('1980-01-01T00:00:00.101Z-0000-0000000000000002'),
+          Timestamp.parse('1980-01-01T00:00:00.101Z-0000-0000000000000002')!,
         );
       }).toThrow(Timestamp.ClockDriftError);
     });

packages/crdt/src/crdt/timestamp.ts

@@ -32,7 +32,7 @@ export type Clock = {
 };
 
 // A mutable global clock
-let clock: Clock = null;
+let clock: Clock;
 
 export function setClock(clock_: Clock): void {
   clock = clock_;
@@ -64,8 +64,14 @@ export function deserializeClock(clock: string): Clock {
     };
   }
 
+  const ts = Timestamp.parse(data.timestamp);
+
+  if (!ts) {
+    throw new Timestamp.InvalidError(data.timestamp);
+  }
+
   return {
-    timestamp: MutableTimestamp.from(Timestamp.parse(data.timestamp)),
+    timestamp: MutableTimestamp.from(ts),
     merkle: data.merkle,
   };
 }
@@ -74,7 +80,7 @@ export function makeClientId() {
   return uuidv4().replace(/-/g, '').slice(-16);
 }
 
-let config = {
+const config = {
   // Allow 5 minutes of clock drift
   maxDrift: 5 * 60 * 1000,
 };
@@ -90,9 +96,9 @@ export class Timestamp {
 
   constructor(millis: number, counter: number, node: string) {
     this._state = {
-      millis: millis,
-      counter: counter,
-      node: node,
+      millis,
+      counter,
+      node,
     };
   }
 
@@ -148,9 +154,10 @@ export class Timestamp {
   /**
    * maximum timestamp
    */
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   static max = Timestamp.parse(
     '9999-12-31T23:59:59.999Z-FFFF-FFFFFFFFFFFFFFFF',
-  );
+  )!;
 
   /**
    * timestamp parsing
@@ -161,11 +168,11 @@ export class Timestamp {
       return timestamp;
     }
     if (typeof timestamp === 'string') {
-      let parts = timestamp.split('-');
+      const parts = timestamp.split('-');
       if (parts && parts.length === 5) {
-        let millis = Date.parse(parts.slice(0, 3).join('-')).valueOf();
-        let counter = parseInt(parts[3], 16);
-        let node = parts[4];
+        const millis = Date.parse(parts.slice(0, 3).join('-')).valueOf();
+        const counter = parseInt(parts[3], 16);
+        const node = parts[4];
         if (
           !isNaN(millis) &&
           millis >= 0 &&
@@ -191,17 +198,17 @@ export class Timestamp {
     }
 
     // retrieve the local wall time
-    let phys = Date.now();
+    const phys = Date.now();
 
     // unpack the clock.timestamp logical time and counter
-    let lOld = clock.timestamp.millis();
-    let cOld = clock.timestamp.counter();
+    const lOld = clock.timestamp.millis();
+    const cOld = clock.timestamp.counter();
 
     // calculate the next logical time and counter
     // * ensure that the logical time never goes backward
     // * increment the counter if phys time does not advance
-    let lNew = Math.max(lOld, phys);
-    let cNew = lOld === lNew ? cOld + 1 : 0;
+    const lNew = Math.max(lOld, phys);
+    const cNew = lOld === lNew ? cOld + 1 : 0;
 
     // check the result for drift and counter overflow
     if (lNew - phys > config.maxDrift) {
@@ -231,11 +238,11 @@ export class Timestamp {
     }
 
     // retrieve the local wall time
-    let phys = Date.now();
+    const phys = Date.now();
 
     // unpack the message wall time/counter
-    let lMsg = msg.millis();
-    let cMsg = msg.counter();
+    const lMsg = msg.millis();
+    const cMsg = msg.counter();
 
     // assert the node id and remote clock drift
     // if (msg.node() === clock.timestamp.node()) {
@@ -246,8 +253,8 @@ export class Timestamp {
     }
 
     // unpack the clock.timestamp logical time and counter
-    let lOld = clock.timestamp.millis();
-    let cOld = clock.timestamp.counter();
+    const lOld = clock.timestamp.millis();
+    const cOld = clock.timestamp.counter();
 
     // calculate the next logical time and counter
     // . ensure that the logical time never goes backward
@@ -255,8 +262,8 @@ export class Timestamp {
     // . if max = old > message, increment local counter
     // . if max = messsage > old, increment message counter
     // . otherwise, clocks are monotonic, reset counter
-    let lNew = Math.max(Math.max(lOld, phys), lMsg);
-    let cNew =
+    const lNew = Math.max(Math.max(lOld, phys), lMsg);
+    const cNew =
       lNew === lOld && lNew === lMsg
         ? Math.max(cOld, cMsg) + 1
         : lNew === lOld
@@ -287,11 +294,12 @@ export class Timestamp {
   /**
    * zero/minimum timestamp
    */
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   static zero = Timestamp.parse(
     '1970-01-01T00:00:00.000Z-0000-0000000000000000',
-  );
+  )!;
 
-  static since = isoString => isoString + '-0000-0000000000000000';
+  static since = (isoString: string) => isoString + '-0000-0000000000000000';
 
   /**
    * error classes
@@ -318,10 +326,17 @@ export class Timestamp {
       this.name = 'OverflowError';
     }
   };
+
+  static InvalidError = class InvalidError extends Error {
+    constructor(...args: unknown[]) {
+      super(['timestamp is not valid'].concat(args.map(String)).join(' '));
+      this.name = 'InvalidError';
+    }
+  };
 }
 
 class MutableTimestamp extends Timestamp {
-  static from(timestamp) {
+  static from(timestamp: Timestamp) {
     return new MutableTimestamp(
       timestamp.millis(),
       timestamp.counter(),
@@ -329,15 +344,15 @@ class MutableTimestamp extends Timestamp {
     );
   }
 
-  setMillis(n) {
+  setMillis(n: number) {
     this._state.millis = n;
   }
 
-  setCounter(n) {
+  setCounter(n: number) {
     this._state.counter = n;
   }
 
-  setNode(n) {
+  setNode(n: string) {
     this._state.node = n;
   }
 }

packages/crdt/src/main.ts

@@ -7,7 +7,7 @@ export {
   makeClientId,
   serializeClock,
   deserializeClock,
-  Clock,
+  type Clock,
   Timestamp,
 } from './crdt';
 

packages/crdt/tsconfig.dist.json

@@ -7,6 +7,7 @@
     "module": "CommonJS",
     "noEmit": false,
     "declaration": true,
+    "strict": true,
     "outDir": "dist"
   },
   "include": ["."],

packages/desktop-client/.swcrc

@@ -0,0 +1,16 @@
+{
+  "jsc": {
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
+    "externalHelpers": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    }
+  },
+  "sourceMaps": true
+}

packages/desktop-client/README.md

@@ -4,11 +4,13 @@ Actual on the web
 
 E2E (end-to-end) tests use [Playwright](https://playwright.dev/). Running them requires an Actual server to be running either locally or on a remote server.
 
+### Functional
+
 Running against the local server:
 
 ```sh
 # Start the development server
-yarn start:browser
+yarn start
 
 # Run against the local server (localhost:3001)
 yarn e2e
@@ -19,3 +21,42 @@ Running against a remote server:
 ```sh
 E2E_START_URL=http://my-remote-server.com yarn e2e
 ```
+
+### Visual regression
+
+Visual regression tests (also known as screenshot tests) check that the visual appearance of the product has not regressed. Each environment has slightly different colors, fonts etc. Mac differs from Windows which differs from Linux. In order to have a stable test environment for visual comparisons - you must use a standartised docker container. This ensures that the tests are always ran in a consistent environment.
+
+Prerequisites:
+
+- Docker installed
+
+#### Running against the local server
+
+First start the dev server:
+
+```sh
+HTTPS=true yarn start
+```
+Next, navigate to the root of your project folder, run the standartised docker container, and launch the visual regression tests from within it.
+
+```sh
+# Run docker container
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+
+    # If you recieve an error such as "docker: invalid reference format", please instead use the following command:
+    docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+
+# Run the VRT tests: important - they MUST be ran against a HTTPS server
+E2E_START_URL=https://192.168.0.178:3001 yarn vrt
+
+    # To update snapshots, use the following command:
+    E2E_START_URL=https://192.168.0.178:3001 yarn vrt --update-snapshots
+```
+
+#### Running against a remote server
+
+You can also run the tests against a remote server by passing the URL:
+
+```sh
+E2E_START_URL=https://my-remote-server.com yarn vrt
+```

packages/desktop-client/config-overrides.js

@@ -1,77 +0,0 @@
-const path = require('path');
-
-const chokidar = require('chokidar');
-const {
-  addWebpackPlugin,
-  addWebpackResolve,
-  babelInclude,
-  override,
-  overrideDevServer,
-} = require('customize-cra');
-const { IgnorePlugin } = require('webpack');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-if (process.env.CI) {
-  process.env.DISABLE_ESLINT_PLUGIN = 'true';
-}
-
-// Forward Netlify env variables
-if (process.env.REVIEW_ID) {
-  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
-}
-
-module.exports = {
-  webpack: override(
-    babelInclude([path.resolve('src'), path.resolve('../loot-core')]),
-    addWebpackResolve({
-      extensions: [
-        ...(process.env.IS_GENERIC_BROWSER
-          ? ['.browser.js', '.browser.ts', '.browser.tsx']
-          : []),
-        '.web.js',
-        '.web.ts',
-        '.web.tsx',
-        '.js',
-        '.ts',
-        '.tsx',
-      ],
-    }),
-    addWebpackPlugin(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'disabled',
-        generateStatsFile: true,
-      }),
-    ),
-    // Pikaday throws a warning if Moment.js is not installed however it doesn't
-    // actually require it to be installed. As we don't use Moment.js ourselves
-    // then we can just silence this warning.
-    addWebpackPlugin(
-      new IgnorePlugin({
-        contextRegExp: /pikaday$/,
-        resourceRegExp: /moment$/,
-      }),
-    ),
-  ),
-  devServer: overrideDevServer(config => {
-    return {
-      ...config,
-      onBeforeSetupMiddleware(server) {
-        chokidar
-          .watch([
-            path.resolve('../loot-core/lib-dist/*.js'),
-            path.resolve('../loot-core/lib-dist/browser/*.js'),
-          ])
-          .on('all', function () {
-            for (const ws of server.webSocketServer.clients) {
-              ws.send(JSON.stringify({ type: 'static-changed' }));
-            }
-          });
-      },
-      headers: {
-        ...config.headers,
-        'Cross-Origin-Opener-Policy': 'same-origin',
-        'Cross-Origin-Embedder-Policy': 'require-corp',
-      },
-    };
-  }),
-};

packages/desktop-client/craco.config.ts

@@ -0,0 +1,116 @@
+const path = require('path');
+
+const {
+  loaderByName,
+  removeLoaders,
+  addAfterLoader,
+  addPlugins,
+} = require('@craco/craco');
+const chokidar = require('chokidar');
+const TerserPlugin = require('terser-webpack-plugin');
+const { IgnorePlugin } = require('webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+if (process.env.CI) {
+  process.env.DISABLE_ESLINT_PLUGIN = 'true';
+}
+
+// Forward Netlify env variables
+if (process.env.REVIEW_ID) {
+  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
+}
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      webpackConfig.mode =
+        process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+      // swc-loader
+      addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
+        test: /\.m?[tj]sx?$/,
+        exclude: /node_modules/,
+        loader: require.resolve('swc-loader'),
+      });
+
+      // remove the babel loaders
+      removeLoaders(webpackConfig, loaderByName('babel-loader'));
+
+      addPlugins(webpackConfig, [
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'disabled',
+          generateStatsFile: true,
+        }),
+        // Pikaday throws a warning if Moment.js is not installed however it doesn't
+        // actually require it to be installed. As we don't use Moment.js ourselves
+        // then we can just silence this warning.
+        new IgnorePlugin({
+          contextRegExp: /pikaday$/,
+          resourceRegExp: /moment$/,
+        }),
+      ]);
+
+      webpackConfig.resolve.extensions = [
+        '.web.js',
+        '.web.jsx',
+        '.web.ts',
+        '.web.tsx',
+        '.js',
+        '.jsx',
+        '.ts',
+        '.tsx',
+        ...webpackConfig.resolve.extensions,
+      ];
+
+      if (process.env.IS_GENERIC_BROWSER) {
+        webpackConfig.resolve.extensions = [
+          '.browser.js',
+          '.browser.jsx',
+          '.browser.ts',
+          '.browser.tsx',
+          ...webpackConfig.resolve.extensions,
+        ];
+      }
+
+      webpackConfig.optimization = {
+        ...webpackConfig.optimization,
+        minimize:
+          process.env.CI === 'true' || process.env.NODE_ENV !== 'development',
+        minimizer: [
+          new TerserPlugin({
+            minify: TerserPlugin.swcMinify,
+            // `terserOptions` options will be passed to `swc` (`@swc/core`)
+            // Link to options - https://swc.rs/docs/config-js-minify
+            terserOptions: {
+              compress: false,
+              mangle: true,
+            },
+          }),
+        ],
+      };
+
+      return webpackConfig;
+    },
+  },
+  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
+    devServerConfig.onBeforeSetupMiddleware = server => {
+      chokidar
+        .watch([
+          path.resolve('../loot-core/lib-dist/*.js'),
+          path.resolve('../loot-core/lib-dist/browser/*.js'),
+        ])
+        .on('all', function () {
+          for (const ws of server.webSocketServer.clients) {
+            ws.send(JSON.stringify({ type: 'static-changed' }));
+          }
+        });
+    };
+    devServerConfig.headers = {
+      ...devServerConfig.headers,
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    };
+
+    return devServerConfig;
+  },
+};

packages/desktop-client/e2e/accounts.test.js

@@ -28,13 +28,13 @@ test.describe('Accounts', () => {
       balance: 100,
     });
 
-    expect(await accountPage.getNthTransaction(0)).toMatchObject({
-      payee: 'Starting Balance',
-      notes: '',
-      category: 'Starting Balances',
-      debit: '',
-      credit: '100.00',
-    });
+    const transaction = accountPage.getNthTransaction(0);
+    await expect(transaction.payee).toHaveText('Starting Balance');
+    await expect(transaction.notes).toHaveText('');
+    await expect(transaction.category).toHaveText('Starting Balances');
+    await expect(transaction.debit).toHaveText('');
+    await expect(transaction.credit).toHaveText('100.00');
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('closes an account', async () => {
@@ -44,8 +44,10 @@ test.describe('Accounts', () => {
 
     const modal = await accountPage.clickCloseAccount();
     await modal.selectTransferAccount('Vanguard 401k');
+    await expect(page).toMatchThemeScreenshots();
     await modal.closeAccount();
 
     await expect(accountPage.accountName).toHaveText('Closed: Roth IRA');
+    await expect(page).toMatchThemeScreenshots();
   });
 });

packages/desktop-client/e2e/budget.test.js

@@ -13,6 +13,11 @@ test.describe('Budget', () => {
 
     await page.goto('/');
     budgetPage = await configurationPage.createTestFile();
+
+    // Move mouse to corner of the screen;
+    // sometimes the mouse hovers on a budget element thus rendering an input box
+    // and this breaks screenshot tests
+    await page.mouse.move(0, 0);
   });
 
   test.afterAll(async () => {
@@ -28,6 +33,7 @@ test.describe('Budget', () => {
     await expect(summary.getByText(/^Overspent in /)).toBeVisible();
     await expect(summary.getByText('Budgeted')).toBeVisible();
     await expect(summary.getByText('For Next Month')).toBeVisible();
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('transfer funds to another category', async () => {
@@ -40,6 +46,7 @@ test.describe('Budget', () => {
     expect(await budgetPage.getBalanceForRow(2)).toEqual(
       currentFundsA + currentFundsB,
     );
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('budget table is rendered', async () => {

packages/desktop-client/e2e/mobile.test.js

@@ -0,0 +1,148 @@
+import { test, expect } from '@playwright/test';
+
+import { ConfigurationPage } from './page-models/configuration-page';
+import { MobileNavigation } from './page-models/mobile-navigation';
+
+test.describe('Mobile', () => {
+  let page;
+  let navigation;
+  let configurationPage;
+
+  test.beforeEach(async ({ browser }) => {
+    page = await browser.newPage();
+    navigation = new MobileNavigation(page);
+    configurationPage = new ConfigurationPage(page);
+
+    await page.setViewportSize({
+      width: 350,
+      height: 600,
+    });
+    await page.goto('/');
+    await configurationPage.createTestFile();
+  });
+
+  test.afterEach(async () => {
+    await page.close();
+  });
+
+  test('loads the budget page with budgeted amounts', async () => {
+    const budgetPage = await navigation.goToBudgetPage();
+
+    await expect(budgetPage.categoryNames).toHaveText([
+      'Food',
+      'Restaurants',
+      'Entertainment',
+      'Clothing',
+      'General',
+      'Gift',
+      'Medical',
+      'Savings',
+      'Cell',
+      'Internet',
+      'Mortgage',
+      'Water',
+      'Power',
+    ]);
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('opens the accounts page and asserts on balances', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+
+    const account = await accountsPage.getNthAccount(0);
+
+    await expect(account.name).toHaveText('Ally Savings');
+    await expect(account.balance).toHaveText('7,653.00');
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('opens individual account page and checks that filtering is working', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    const accountPage = await accountsPage.openNthAccount(1);
+
+    await expect(accountPage.heading).toHaveText('Bank of America');
+    expect(await accountPage.getBalance()).toBeGreaterThan(0);
+
+    await expect(accountPage.noTransactionsFoundError).not.toBeVisible();
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.searchByText('nothing should be found');
+    await expect(accountPage.noTransactionsFoundError).toBeVisible();
+    await expect(accountPage.transactions).toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.searchByText('Kroger');
+    await expect(accountPage.transactions).not.toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('creates a transaction via footer button', async () => {
+    const transactionEntryPage = await navigation.goToTransactionEntryPage();
+    await expect(page).toMatchThemeScreenshots();
+
+    await expect(transactionEntryPage.header).toHaveText('New Transaction');
+
+    await transactionEntryPage.amountField.fill('12.34');
+    await transactionEntryPage.fillField(
+      page.getByTestId('payee-field'),
+      'Kroger',
+    );
+    await transactionEntryPage.fillField(
+      page.getByTestId('category-field'),
+      'Clothing',
+    );
+    await transactionEntryPage.fillField(
+      page.getByTestId('account-field'),
+      'Ally Savings',
+    );
+    await expect(page).toMatchThemeScreenshots();
+
+    const accountPage = await transactionEntryPage.createTransaction();
+
+    await expect(accountPage.transactions.nth(0)).toHaveText(
+      'KrogerClothing-12.34',
+    );
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('creates a transaction from `/accounts/:id` page', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    const accountPage = await accountsPage.openNthAccount(2);
+    const transactionEntryPage = await accountPage.clickCreateTransaction();
+
+    await expect(transactionEntryPage.header).toHaveText('New Transaction');
+    await expect(page).toMatchThemeScreenshots();
+
+    await transactionEntryPage.amountField.fill('12.34');
+    await transactionEntryPage.fillField(
+      page.getByTestId('payee-field'),
+      'Kroger',
+    );
+    await transactionEntryPage.fillField(
+      page.getByTestId('category-field'),
+      'Clothing',
+    );
+
+    await transactionEntryPage.createTransaction();
+
+    await expect(accountPage.transactions.nth(0)).toHaveText(
+      'KrogerClothing-12.34',
+    );
+  });
+
+  test('checks that settings page can be opened', async () => {
+    const settingsPage = await navigation.goToSettingsPage();
+    await expect(page).toMatchThemeScreenshots();
+
+    const downloadPromise = page.waitForEvent('download');
+
+    await settingsPage.exportData();
+
+    const download = await downloadPromise;
+
+    expect(await download.suggestedFilename()).toMatch(
+      /^\d{4}-\d{2}-\d{2}-.*.zip$/,
+    );
+    await expect(page).toMatchThemeScreenshots();
+  });
+});

packages/desktop-client/e2e/onboarding.test.js

@@ -23,6 +23,14 @@ test.describe('Onboarding', () => {
     await page.close();
   });
 
+  test('checks the page visuals', async () => {
+    await expect(configurationPage.heading).toHaveText('Where’s the server?');
+    await expect(page).toMatchThemeScreenshots();
+
+    await configurationPage.clickOnNoServer();
+    await expect(page).toMatchThemeScreenshots();
+  });
+
   test('creates a new budget file by importing YNAB4 budget', async () => {
     await configurationPage.clickOnNoServer();
     const budgetPage = await configurationPage.importBudget(
@@ -41,8 +49,21 @@ test.describe('Onboarding', () => {
     await expect(accountPage.accountBalance).toHaveText('2,607.00');
   });
 
-  // TODO: implement this test once we have an example nYNAB file
-  // test('creates a new budget file by importing nYNAB budget');
+  test('creates a new budget file by importing nYNAB budget', async () => {
+    await configurationPage.clickOnNoServer();
+    const budgetPage = await configurationPage.importBudget(
+      'nYNAB',
+      path.resolve(__dirname, 'data/ynab5-demo-budget.json'),
+    );
+
+    await expect(budgetPage.budgetTable).toBeVisible({ timeout: 30000 });
+
+    const accountPage = await navigation.goToAccountPage('Checking');
+    await expect(accountPage.accountBalance).toHaveText('600.00');
+
+    await navigation.goToAccountPage('Saving');
+    await expect(accountPage.accountBalance).toHaveText('250.00');
+  });
 
   test('creates a new budget file by importing Actual budget', async () => {
     await configurationPage.clickOnNoServer();
@@ -51,7 +72,7 @@ test.describe('Onboarding', () => {
       path.resolve(__dirname, 'data/actual-demo-budget.zip'),
     );
 
-    await expect(budgetPage.budgetTable).toBeVisible();
+    await expect(budgetPage.budgetTable).toBeVisible({ timeout: 20_000 });
 
     const accountPage = await navigation.goToAccountPage('Ally Savings');
     await expect(accountPage.accountBalance).toHaveText('1,772.80');

packages/desktop-client/e2e/page-models/account-page.js

@@ -20,9 +20,11 @@ export class AccountPage {
       name: 'Menu',
     });
 
-    this.transactionTableRow = this.page
-      .getByTestId('table')
-      .getByTestId('row');
+    this.transactionTable = this.page.getByTestId('transaction-table');
+    this.transactionTableRow = this.transactionTable.getByTestId('row');
+
+    this.filterButton = this.page.getByRole('button', { name: 'Filter' });
+    this.filterSelectTooltip = this.page.getByTestId('filters-select-tooltip');
   }
 
   /**
@@ -70,15 +72,15 @@ export class AccountPage {
    * Retrieve the data for the nth-transaction.
    * 0-based index
    */
-  async getNthTransaction(index) {
+  getNthTransaction(index) {
     const row = this.transactionTableRow.nth(index);
 
     return {
-      payee: await row.getByTestId('payee').textContent(),
-      notes: await row.getByTestId('notes').textContent(),
-      category: await row.getByTestId('category').textContent(),
-      debit: await row.getByTestId('debit').textContent(),
-      credit: await row.getByTestId('credit').textContent(),
+      payee: row.getByTestId('payee'),
+      notes: row.getByTestId('notes'),
+      category: row.getByTestId('category'),
+      debit: row.getByTestId('debit'),
+      credit: row.getByTestId('credit'),
     };
   }
 
@@ -94,6 +96,26 @@ export class AccountPage {
     );
   }
 
+  /**
+   * Open the filtering popover.
+   */
+  async filterBy(field) {
+    await this.filterButton.click();
+    await this.filterSelectTooltip.getByRole('button', { name: field }).click();
+
+    return new FilterTooltip(this.page.getByTestId('filters-menu-tooltip'));
+  }
+
+  /**
+   * Remove the nth filter
+   */
+  async removeFilter(idx) {
+    await this.page
+      .getByRole('button', { name: 'Delete filter' })
+      .nth(idx)
+      .click();
+  }
+
   async _fillTransactionFields(transactionRow, transaction) {
     if (transaction.payee) {
       await transactionRow.getByTestId('payee').click();
@@ -131,3 +153,10 @@ export class AccountPage {
     }
   }
 }
+
+class FilterTooltip {
+  constructor(page) {
+    this.page = page;
+    this.applyButton = page.getByRole('button', { name: 'Apply' });
+  }
+}

packages/desktop-client/e2e/page-models/mobile-account-page.js

@@ -0,0 +1,39 @@
+import { MobileTransactionEntryPage } from './mobile-transaction-entry-page';
+
+export class MobileAccountPage {
+  constructor(page) {
+    this.page = page;
+
+    this.heading = page.getByRole('heading');
+    this.balance = page.getByTestId('account-balance');
+    this.noTransactionsFoundError = page.getByText('No transactions');
+    this.searchBox = page.getByPlaceholder(/^Search/);
+    this.transactionList = page.getByLabel('transaction list');
+    this.transactions = this.transactionList.getByRole('button');
+    this.createTransactionButton = page.getByRole('button', {
+      name: 'Add Transaction',
+    });
+  }
+
+  /**
+   * Retrieve the balance of the account as a number
+   */
+  async getBalance() {
+    return parseInt(await this.balance.textContent(), 10);
+  }
+
+  /**
+   * Search by the given term
+   */
+  async searchByText(term) {
+    await this.searchBox.fill(term);
+  }
+
+  /**
+   * Go to transaction creation page
+   */
+  async clickCreateTransaction() {
+    this.createTransactionButton.click();
+    return new MobileTransactionEntryPage(this.page);
+  }
+}

packages/desktop-client/e2e/page-models/mobile-accounts-page.js

@@ -0,0 +1,30 @@
+import { MobileAccountPage } from './mobile-account-page';
+
+export class MobileAccountsPage {
+  constructor(page) {
+    this.page = page;
+
+    this.accounts = this.page.getByTestId('account');
+  }
+
+  /**
+   * Get the name and balance of the nth account
+   */
+  async getNthAccount(idx) {
+    const accountRow = this.accounts.nth(idx);
+
+    return {
+      name: accountRow.getByTestId('account-name'),
+      balance: accountRow.getByTestId('account-balance'),
+    };
+  }
+
+  /**
+   * Click on the n-th account to open it up
+   */
+  async openNthAccount(idx) {
+    await this.accounts.nth(idx).getByRole('button').click();
+
+    return new MobileAccountPage(this.page);
+  }
+}

packages/desktop-client/e2e/page-models/mobile-budget-page.js

@@ -0,0 +1,9 @@
+export class MobileBudgetPage {
+  constructor(page) {
+    this.page = page;
+
+    this.categoryNames = page
+      .getByTestId('budget-groups')
+      .getByTestId('category-name');
+  }
+}

packages/desktop-client/e2e/page-models/mobile-navigation.js

@@ -0,0 +1,46 @@
+import { MobileAccountsPage } from './mobile-accounts-page';
+import { MobileBudgetPage } from './mobile-budget-page';
+import { MobileTransactionEntryPage } from './mobile-transaction-entry-page';
+import { SettingsPage } from './settings-page';
+
+export class MobileNavigation {
+  constructor(page) {
+    this.page = page;
+  }
+
+  async goToBudgetPage() {
+    const link = this.page.getByRole('link', { name: 'Budget' });
+    await link.click();
+
+    return new MobileBudgetPage(this.page);
+  }
+
+  async goToAccountsPage() {
+    const link = this.page.getByRole('link', { name: 'Accounts' });
+    await link.click();
+
+    return new MobileAccountsPage(this.page);
+  }
+
+  async goToTransactionEntryPage() {
+    const link = this.page.getByRole('link', { name: 'Transaction' });
+    await link.click();
+
+    return new MobileTransactionEntryPage(this.page);
+  }
+
+  async goToSettingsPage() {
+    await this.dragNavbarUp();
+
+    const link = this.page.getByRole('link', { name: 'Settings' });
+    await link.click();
+
+    return new SettingsPage(this.page);
+  }
+
+  async dragNavbarUp() {
+    await this.page
+      .getByRole('navigation')
+      .dragTo(this.page.getByTestId('budget-table'));
+  }
+}

packages/desktop-client/e2e/page-models/mobile-transaction-entry-page.js

@@ -0,0 +1,23 @@
+import { MobileAccountPage } from './mobile-account-page';
+
+export class MobileTransactionEntryPage {
+  constructor(page) {
+    this.page = page;
+
+    this.header = page.getByRole('heading');
+    this.amountField = page.getByTestId('amount-input');
+    this.add = page.getByRole('button', { name: 'Add transaction' });
+  }
+
+  async fillField(fieldLocator, content) {
+    await fieldLocator.click();
+    await this.page.locator('css=[role=combobox] input').fill(content);
+    await this.page.keyboard.press('Enter');
+  }
+
+  async createTransaction() {
+    await this.add.click();
+
+    return new MobileAccountPage(this.page);
+  }
+}

packages/desktop-client/e2e/page-models/reports-page.js

@@ -8,6 +8,16 @@ export class ReportsPage {
     return this.pageContent.getByRole('link', { name: /^Net/ }).waitFor();
   }
 
+  async goToNetWorthPage() {
+    await this.pageContent.getByRole('link', { name: /^Net/ }).click();
+    return new ReportsPage(this.page);
+  }
+
+  async goToCashFlowPage() {
+    await this.pageContent.getByRole('link', { name: /^Cash/ }).click();
+    return new ReportsPage(this.page);
+  }
+
   async getAvailableReportList() {
     return this.pageContent
       .getByRole('link')

packages/desktop-client/e2e/page-models/rules-page.js

@@ -1,6 +1,7 @@
 export class RulesPage {
   constructor(page) {
     this.page = page;
+    this.searchBox = page.getByPlaceholder('Filter rules...');
   }
 
   /**
@@ -22,19 +23,19 @@ export class RulesPage {
    * Retrieve the data for the nth-rule.
    * 0-based index
    */
-  async getNthRule(index) {
+  getNthRule(index) {
     const row = this.page.getByTestId('table').getByTestId('row').nth(index);
 
     return {
-      conditions: await row
-        .getByTestId('conditions')
-        .evaluate(el => [...el.children].map(c => c.textContent)),
-      actions: await row
-        .getByTestId('actions')
-        .evaluate(el => [...el.children].map(c => c.textContent)),
+      conditions: row.getByTestId('conditions').locator(':scope > div'),
+      actions: row.getByTestId('actions').locator(':scope > div'),
     };
   }
 
+  async searchFor(text) {
+    await this.searchBox.fill(text);
+  }
+
   async _fillRuleFields(data) {
     if (data.conditionsOp) {
       await this.page
@@ -81,7 +82,7 @@ export class RulesPage {
 
       if (op) {
         await row.getByRole('button', { name: 'is' }).click();
-        await this.page.getByRole('option', { name: op }).click();
+        await this.page.getByRole('option', { name: op, exact: true }).click();
       }
 
       if (value) {

packages/desktop-client/e2e/page-models/schedules-page.js

@@ -31,15 +31,15 @@ export class SchedulesPage {
    * Retrieve the data for the nth-schedule.
    * 0-based index
    */
-  async getNthSchedule(index) {
+  getNthSchedule(index) {
     const row = this.getNthScheduleRow(index);
 
     return {
-      payee: await row.getByTestId('payee').textContent(),
-      account: await row.getByTestId('account').textContent(),
-      date: await row.getByTestId('date').textContent(),
-      status: await row.getByTestId('status').textContent(),
-      amount: await row.getByTestId('amount').textContent(),
+      payee: row.getByTestId('payee'),
+      account: row.getByTestId('account'),
+      date: row.getByTestId('date'),
+      status: row.getByTestId('status'),
+      amount: row.getByTestId('amount'),
     };
   }
 

packages/desktop-client/e2e/reports.test.js

@@ -31,5 +31,16 @@ test.describe('Reports', () => {
     const reports = await reportsPage.getAvailableReportList();
 
     expect(reports).toEqual(['Net Worth', 'Cash Flow']);
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('loads net worth graph and checks visuals', async () => {
+    await reportsPage.goToNetWorthPage();
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('loads cash flow graph and checks visuals', async () => {
+    await reportsPage.goToCashFlowPage();
+    await expect(page).toMatchThemeScreenshots();
   });
 });