add visual regression tests

.github/workflows/continuous-integration.yaml

@@ -0,0 +1,38 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+    - main
+  pull_request:
+    branches:
+    - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install Python dependencies
+        run: pip3 install .
+
+      - name: Start Fava
+        working-directory: example
+        run: fava example.beancount &
+
+      - name: Install test dependencies
+        working-directory: tests/e2e
+        run: npm ci
+
+      - name: Run tests
+        working-directory: tests/e2e
+        run: npm test
+
+      - name: Upload image diffs
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: image-diffs
+          path: tests/e2e/__image_snapshots__/__diff_output__/*.png
+          if-no-files-found: ignore

Makefile

@@ -1,5 +1,8 @@
 format:
-	prettier -w fava_dashboards/static/*.js fava_dashboards/static/*.css
+	prettier -w fava_dashboards/static/*.js fava_dashboards/static/*.css tests/e2e/*.js
 	black fava_dashboards/__init__.py scripts/format_js_in_dashboard.py
 	./scripts/format_js_in_dashboard.py example/dashboards.yaml
 	find . -name '*.beancount' -exec bean-format -c 59 -o "{}" "{}" \;
+
+test:
+	cd tests/e2e; npm test

setup.cfg

@@ -13,6 +13,6 @@ python_requires = >=3.6
 setup_requires =
     setuptools_scm
 install_requires =
-    fava>=1.22
+    fava>=1.22,<1.25
     beancount
     pyyaml

tests/e2e/.gitignore

@@ -0,0 +1 @@
+node_modules

tests/e2e/dashboards.test.js

@@ -0,0 +1,28 @@
+const { toMatchImageSnapshot } = require("jest-image-snapshot");
+expect.extend({ toMatchImageSnapshot });
+
+const waitFor = (ms) => new Promise((r) => setTimeout(r, ms));
+const customSnapshotIdentifier = (p) => p.currentTestName.replaceAll(" ", "_").toLowerCase();
+
+describe("Dashboard", () => {
+    for (let dashboard of [
+        { name: "Overview", link: "" },
+        { name: "Assets", link: "?dashboard=1" },
+        { name: "Income and Expenses", link: "?dashboard=2" },
+        { name: "Travelling", link: "?dashboard=3" },
+        { name: "Sankey", link: "?dashboard=4" },
+    ]) {
+        it(dashboard.name, async () => {
+            await page.goto(`http://127.0.0.1:5000/beancount/extension/FavaDashboards/${dashboard.link}`);
+            await waitFor(1500); // wait for animations to finish
+
+            const screenshot = await page.screenshot({ fullPage: true });
+            expect(screenshot).toMatchImageSnapshot({
+                customSnapshotIdentifier,
+                comparisonMethod: 'ssim',
+                failureThreshold: 0.01,
+                failureThresholdType: 'percent'
+             });
+        });
+    }
+});

tests/e2e/jest-puppeteer.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    launch: {
+        defaultViewport: {
+            width: 1680,
+            height: 1000,
+        },
+        headless: "new",
+    },
+};

tests/e2e/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    preset: "jest-puppeteer",
+};