feat: Performance Tests (#924)

* feat: Performance Tests

Added Performance tests

* feat: Performance Tests

Updated scripts

* try direct script

* Add tests for release branches

* Version Bumps

---------

Co-authored-by: Alex Risch <alex@xmtp.com>

.github/workflows/check-android-build.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - release/*
     paths:
       - "android/**"
       - "package.json"

.github/workflows/check-ios-build.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - release/*
     paths:
       - "ios/**"
       - "package.json"

.github/workflows/typescript.yml

@@ -3,41 +3,77 @@ on:
   pull_request:
     branches:
       - main
-
+      - release/*
+    paths:
+      - "**/*.ts"
+      - "**/*.tsx"
+      - "package.json"
 jobs:
   tsc:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v4.0.2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: "yarn"
       - run: yarn
       - run: yarn typecheck
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v4.0.2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: "yarn"
       - run: yarn
       - run: yarn lint
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v4.0.2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: "yarn"
       - run: yarn
       - run: yarn test
+  performance-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: "yarn"
+      - run: |
+          BASELINE_BRANCH=${GITHUB_BASE_REF:="main"}
+
+          # Required for `git switch` on CI
+          git fetch origin
+
+          # Gather baseline perf measurements
+          git switch "$BASELINE_BRANCH"
+
+          yarn
+          yarn reassure --baseline
+
+          # Gather current perf measurements & compare results
+          git switch --detach -
+
+          yarn
+          yarn reassure --branch
+
+      - name: Run Danger.js
+        run: yarn danger ci
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -19,3 +19,5 @@ builds
 
 # iOS
 ios/Converse.xcworkspace/xcshareddata/swiftpm/Package.resolved
+# Reassure output directory
+.reassure

components/__tests__/Avatar.perf-test.tsx

@@ -0,0 +1,48 @@
+import { jest, test } from "@jest/globals";
+import { screen } from "@testing-library/react-native";
+import React from "react";
+import { measureRenders } from "reassure";
+
+import Avatar from "../Avatar";
+
+jest.setTimeout(600_000);
+
+const TestComponent = ({ uri }: { uri?: string }) => <Avatar uri={uri} />;
+
+test("Empty Avatar 10 runs", async () => {
+  const scenario = async () => {
+    await screen.findByTestId("avatar-placeholder");
+  };
+
+  await measureRenders(<TestComponent />, { scenario, runs: 10 });
+});
+
+test("Empty Avatar 50 runs", async () => {
+  const scenario = async () => {
+    await screen.findByTestId("avatar-placeholder");
+  };
+
+  await measureRenders(<TestComponent />, { scenario, runs: 50 });
+});
+
+test("Avatar Image 10 runs", async () => {
+  const scenario = async () => {
+    await screen.findByTestId("avatar-image");
+  };
+
+  await measureRenders(<TestComponent uri="https://picsum.photos/200/300" />, {
+    scenario,
+    runs: 10,
+  });
+});
+
+test("Avatar Image 50 runs", async () => {
+  const scenario = async () => {
+    await screen.findByTestId("avatar-image");
+  };
+
+  await measureRenders(<TestComponent uri="https://picsum.photos/200/300" />, {
+    scenario,
+    runs: 50,
+  });
+});

dangerfile.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import path from 'path';
+import { dangerReassure } from 'reassure';
+
+dangerReassure({
+  inputFilePath: path.join(__dirname, './.reassure/output.md'),
+});

package.json

@@ -11,7 +11,8 @@
     "ios": "EXPO_ENV=dev expo start --ios",
     "postinstall": "patch-package && node scripts/wasm.js && husky install && cross-os postinstall",
     "start": "EXPO_ENV=dev expo start",
-    "test": "echo \"➜ Running tests...\" && jest",
+    "test": "echo \"➜ Running tests...\" && jest --testPathIgnorePatterns='.*\\.perf-test\\.tsx$'",
+    "test:perf": "echo \"➜ Running tests with performance...\" && echo \"➜ Capture baseline performance tests...\" && yarn reassure --baseline && echo \"➜ Running current performance tests...\" && jest --testPathIgnorePatterns='.*\\.perf-test\\.tsx$'",
     "typecheck": "echo \"➜ Typechecking project...\" && tsc --noEmit",
     "update": "node scripts/build/update.js",
     "web:preview": "EXPO_ENV=preview expo export -p web"
@@ -218,6 +219,7 @@
     "@typescript-eslint/typescript-estree": "^6.3.0",
     "@welldone-software/why-did-you-render": "^8.0.3",
     "cross-os": "^1.5.0",
+    "danger": "^12.3.3",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-universe": "^12.0.0",
@@ -237,6 +239,7 @@
     "plist": "^3.0.6",
     "prettier": "^3.0.1",
     "process": "^0.11.10",
+    "reassure": "^1.2.1",
     "sqlite3": "^5.1.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.0",

reassure-tests.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+set -e 
+
+BASELINE_BRANCH=${GITHUB_BASE_REF:="main"}
+
+# Required for `git switch` on CI
+git fetch origin
+
+# Gather baseline perf measurements
+git switch "$BASELINE_BRANCH"
+
+yarn
+yarn reassure --baseline
+
+# Gather current perf measurements & compare results
+git switch --detach -
+
+yarn
+yarn reassure --branch