chore: add reassure to paper

.eslintrc

@@ -51,7 +51,11 @@
     "react-native/no-unused-styles": "error",
     "react-native/split-platform-components": "off",
     "react-native/no-raw-text": "off",
-    "react-native-a11y/has-valid-accessibility-descriptors": "off"
+    "react-native-a11y/has-valid-accessibility-descriptors": "off",
+    "jest/expect-expect": [
+      "error",
+      { "assertFunctionNames": ["expect", "measurePerformance"] }
+    ]
   },
 
   "overrides": [

.github/workflows/perf-test.yml

@@ -0,0 +1,28 @@
+name: "Run performance tests"
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ['**']
+
+jobs:
+  main:
+    name: Run performance tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+
+      - name: Run Reassure
+        run: ./reassure-tests.sh
+
+      - name: Run Danger.js
+        run: yarn danger ci
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -64,3 +64,5 @@ CHANGELOG.md
 lib/
 
 .expo
+# Reassure output directory
+.reassure

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

@@ -79,6 +79,7 @@
     "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
     "conventional-changelog-cli": "^2.0.11",
+    "danger": "^11.3.0",
     "dedent": "^0.7.0",
     "eslint": "8.31.0",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -96,6 +97,7 @@
     "react-native-safe-area-context": "^4.5.0",
     "react-native-vector-icons": "9.2.0",
     "react-test-renderer": "18.2.0",
+    "reassure": "^0.9.1",
     "release-it": "^13.4.0",
     "rimraf": "^3.0.2",
     "typescript": "4.8.4"

reassure-tests.sh

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

src/components/__perf-tests__/Appbar.perf-test.js

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { fireEvent, screen } from '@testing-library/react-native';
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
+import { measurePerformance } from 'reassure';
+
+import Appbar from '../Appbar';
+
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
+
+const TEST_ID = 'appbar-perf-test';
+
+function renderAppbar(props = {}) {
+  return (
+    <Appbar {...props} testID={TEST_ID}>
+      {props.children}
+    </Appbar>
+  );
+}
+
+describe('Appbar perf', () => {
+  test('Base', async () => {
+    await measurePerformance(renderAppbar());
+  });
+
+  test('onPress backAction', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId('back-icon'));
+      }
+    };
+
+    await measurePerformance(
+      <Appbar testID={TEST_ID}>
+        <Appbar.BackAction testID="back-icon" onPress={() => {}} />
+        <Appbar.Content title="Examples" />
+      </Appbar>,
+      { scenario }
+    );
+  });
+
+  test('onPress multiple actions', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId('back-icon'));
+      }
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId('magnify-icon'));
+      }
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId('menu-icon'));
+      }
+    };
+
+    await measurePerformance(
+      <Appbar testID={TEST_ID}>
+        <Appbar.BackAction testID="back-icon" onPress={() => {}} key={0} />
+        <Appbar.Content title="Examples" key={1} />
+        <Appbar.Action
+          testID="magnify-icon"
+          icon="magnify"
+          onPress={() => {}}
+          key={2}
+        />
+        ,
+        <Appbar.Action
+          testID="menu-icon"
+          icon="menu"
+          onPress={() => {}}
+          key={3}
+        />
+      </Appbar>,
+      { scenario }
+    );
+  });
+
+  test('with Header', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId('appbar-content'));
+      }
+    };
+
+    await measurePerformance(
+      <mockSafeAreaContext.SafeAreaProvider>
+        <Appbar testID={TEST_ID}>
+          <Appbar.Header>
+            <Appbar.Content title="Accessible test" onPress={() => {}} />
+          </Appbar.Header>
+        </Appbar>
+      </mockSafeAreaContext.SafeAreaProvider>,
+      { scenario }
+    );
+  });
+});

src/components/__perf-tests__/Button.perf-test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent, screen } from '@testing-library/react-native';
+import { measurePerformance } from 'reassure';
+
+import { theme } from './utils/utils';
+import Button from '../Button/Button';
+
+const TEST_ID = 'button-perf-test';
+
+function renderButton(props = {}) {
+  return (
+    <Button {...props} testID={TEST_ID}>
+      <Text>Label</Text>
+    </Button>
+  );
+}
+
+describe('Button perf', () => {
+  test('Base', async () => {
+    await measurePerformance(renderButton());
+  });
+
+  test('onPress', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < 5; i++) {
+        fireEvent.press(screen.getByTestId(TEST_ID));
+      }
+    };
+
+    await measurePerformance(renderButton(), { scenario });
+  });
+
+  test('to dark mode', async () => {
+    const scenario = () => {
+      screen.rerender(renderButton({ dark: true, mode: 'elevated' }));
+    };
+
+    await measurePerformance(renderButton({ dark: false, mode: 'elevated' }), {
+      scenario,
+    });
+  });
+
+  it.each`
+    mode
+    ${'text'}
+    ${'outlined'}
+    ${'contained'}
+    ${'elevated'}
+    ${'contained-tonal'}
+  `('to $mode mode', async ({ mode }) => {
+    await measurePerformance(renderButton({ mode: mode }));
+  });
+
+  test('to compact look', async () => {
+    const scenario = () => {
+      screen.rerender(renderButton({ compact: true, mode: 'text' }));
+    };
+
+    await measurePerformance(renderButton({ compact: false, mode: 'text' }), {
+      scenario,
+    });
+  });
+
+  test('override theme', async () => {
+    await measurePerformance(renderButton({ theme }));
+  });
+});

src/components/__perf-tests__/Card.perf-test.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Button, Text } from 'react-native';
+
+import { measurePerformance } from 'reassure';
+
+import { theme } from './utils/utils';
+import Card from '../Card/Card';
+
+const TEST_ID = 'card-perf-test';
+
+function renderCard(props = {}) {
+  return (
+    <Card {...props} testID={TEST_ID}>
+      <Text>Label</Text>
+    </Card>
+  );
+}
+
+describe('Card perf', () => {
+  test('Base', async () => {
+    await measurePerformance(renderCard());
+  });
+
+  test('with Title', async () => {
+    await measurePerformance(
+      <Card testID={TEST_ID}>
+        <Card.Title title="Title" />
+      </Card>
+    );
+  });
+
+  test('with Content', async () => {
+    await measurePerformance(
+      <Card testID={TEST_ID}>
+        <Card.Content>
+          <Text>Content</Text>
+        </Card.Content>
+      </Card>
+    );
+  });
+
+  test('with Cover', async () => {
+    await measurePerformance(
+      <Card testID={TEST_ID}>
+        <Card.Cover
+          source={{ uri: require('../../assets/back-chevron.png') }}
+        />
+      </Card>
+    );
+  });
+
+  test('with Actions', async () => {
+    await measurePerformance(
+      <Card testID={TEST_ID}>
+        <Card.Actions>
+          <Button title="Cancel" />
+          <Button title="OK" />
+        </Card.Actions>
+      </Card>
+    );
+  });
+
+  test('with All Sections', async () => {
+    await measurePerformance(
+      <Card>
+        <Card.Title title="Title" subtitle="Subtitle" />
+        <Card.Content>
+          <Text>Card title</Text>
+          <Text>Card content</Text>
+        </Card.Content>
+        <Card.Cover
+          source={{ uri: require('../../assets/back-chevron.png') }}
+        />
+        <Card.Actions>
+          <Button title="Cancel" />
+          <Button title="OK" />
+        </Card.Actions>
+      </Card>
+    );
+  });
+
+  test('with All Sections and Theme', async () => {
+    await measurePerformance(
+      <Card theme={theme}>
+        <Card.Title title="Title" subtitle="Subtitle" />
+        <Card.Content>
+          <Text>Card title</Text>
+          <Text>Card content</Text>
+        </Card.Content>
+        <Card.Cover
+          source={{ uri: require('../../assets/back-chevron.png') }}
+        />
+        <Card.Actions>
+          <Button title="Cancel" />
+          <Button title="OK" />
+        </Card.Actions>
+      </Card>
+    );
+  });
+});