feat: add reassure testing to control render count

.github/workflows/tests.yaml

@@ -17,6 +17,43 @@ jobs:
     - run: npm install
     - run: npm test
     - run: npm run lint
+    - if: github.ref == 'refs/heads/master' && github.event_name == 'push'
+      run: npm run perf:baseline
+    - if: github.ref == 'refs/heads/master' && github.event_name == 'push'
+      uses: actions/cache/save@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+      with:
+        path: .reassure
+        key: reassure-baseline-${{ github.sha }}
+
+  performance:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    steps:
+    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - run: npm install
+    - uses: actions/cache/restore@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+      id: cache-reassure
+      with:
+        path: .reassure
+        key: reassure-baseline-${{ github.sha }}
+        restore-keys: reassure-baseline-
+        # TODO uncomment after merge to master and remove cache-hit == 'true' below
+        # fail-on-cache-miss: true
+    - if: steps.cache-reassure.outputs.cache-hit == 'true'
+      run: npm run perf:compare
+    - if: steps.cache-reassure.outputs.cache-hit == 'true'
+      uses: hCaptcha/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e
+      id: find_comment
+      with:
+        issue-number: ${{ github.event.pull_request.number }}
+        body-includes: Performance Comparison Report
+    - if: steps.cache-reassure.outputs.cache-hit == 'true'
+      uses: hCaptcha/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
+      with:
+        edit-mode: replace
+        body-path: .reassure/output.md
+        comment-id: ${{ steps.find_comment.outputs.comment-id }}
+        issue-number: ${{ github.event.pull_request.number }}
 
   test:
     needs: build

.gitignore

@@ -1,2 +1,5 @@
 node_modules/*
 yarn.lock
+
+# Reassure performance testing files
+.reassure/

__tests__/ConfirmHcaptcha.perf-test.js

@@ -0,0 +1,209 @@
+import React from 'react';
+import { measureRenders } from 'reassure';
+import { waitFor } from '@testing-library/react-native';
+import ConfirmHcaptcha from '../index';
+
+describe('ConfirmHcaptcha Performance Tests', () => {
+  test('ConfirmHcaptcha initial render performance', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        onMessage={() => {}}
+      />
+    );
+  });
+
+  test('ConfirmHcaptcha render with all props', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        size="compact"
+        siteKey="00000000-0000-0000-0000-000000000000"
+        passiveSiteKey={false}
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        orientation="portrait"
+        showLoading={false}
+        closableLoading={false}
+        backgroundColor="rgba(0, 0, 0, 0.3)"
+        loadingIndicatorColor="#999999"
+        theme="light"
+        rqdata='{"some": "data"}'
+        sentry={true}
+        jsSrc="https://js.hcaptcha.com/1/api.js"
+        endpoint="https://api.hcaptcha.com"
+        reportapi="https://accounts.hcaptcha.com"
+        assethost="https://newassets.hcaptcha.com"
+        imghost="https://imgs.hcaptcha.com"
+        host="test-host"
+        hasBackdrop={true}
+        useSafeAreaView={true}
+        debug={{ test: true }}
+        onMessage={() => {}}
+      />
+    );
+  });
+
+  test('ConfirmHcaptcha modal show/hide performance', async () => {
+    const TestComponent = () => {
+      const [show, setShow] = React.useState(false);
+
+      return (
+        <>
+          <ConfirmHcaptcha
+            siteKey="00000000-0000-0000-0000-000000000000"
+            baseUrl="https://hcaptcha.com"
+            languageCode="en"
+            onMessage={() => {}}
+          />
+          <button onPress={() => setShow(!show)}>
+            Toggle Modal
+          </button>
+        </>
+      );
+    };
+
+    await measureRenders(<TestComponent />, {
+      scenario: async () => {
+        // Simulate showing and hiding the modal
+        await waitFor(() => {}, { timeout: 100 });
+      },
+    });
+  });
+
+  test('ConfirmHcaptcha render count stability - multiple renders', async () => {
+    // This test ensures render count doesn't increase with multiple renders
+    const Component = () => (
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        onMessage={() => {}}
+      />
+    );
+
+    await measureRenders(<Component />, {
+      runs: 20, // More runs to detect render count issues
+      warmupRuns: 3,
+    });
+  });
+
+  test('ConfirmHcaptcha minimal configuration', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha with safe area view', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        useSafeAreaView={true}
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha without safe area view', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        useSafeAreaView={false}
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha passive mode', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        passiveSiteKey={true}
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha light theme performance', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        theme="light"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha dark theme performance', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        theme="dark"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('ConfirmHcaptcha contrast theme performance', async () => {
+    await measureRenders(
+      <ConfirmHcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        baseUrl="https://hcaptcha.com"
+        languageCode="en"
+        theme="contrast"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+});

__tests__/Hcaptcha.perf-test.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { measureRenders } from 'reassure';
+import { waitFor } from '@testing-library/react-native';
+import Hcaptcha from '../Hcaptcha';
+
+describe('Hcaptcha Performance Tests', () => {
+  test('Hcaptcha initial render performance', async () => {
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        onMessage={() => {}}
+      />
+    );
+  });
+
+  test('Hcaptcha render with all props', async () => {
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        size="normal"
+        languageCode="en"
+        showLoading={true}
+        loadingIndicatorColor="#123456"
+        backgroundColor="rgba(0.1, 0.1, 0.1, 0.4)"
+        theme="light"
+        rqdata="{}"
+        sentry={false}
+        jsSrc="https://js.hcaptcha.com/1/api.js"
+        endpoint="https://api.hcaptcha.com"
+        reportapi="https://accounts.hcaptcha.com"
+        assethost="https://newassets.hcaptcha.com"
+        imghost="https://imgs.hcaptcha.com"
+        host="test-host"
+        debug={{ test: true }}
+        orientation="portrait"
+        phonePrefix="44"
+        phoneNumber="+441234567890"
+        onMessage={() => {}}
+      />
+    );
+  });
+
+  test('Hcaptcha render with theme object', async () => {
+    const customTheme = {
+      palette: {
+        mode: 'dark',
+        primary: { main: '#26C6DA' },
+        warn: { main: '#FF8A80' },
+        text: {
+          heading: '#FAFAFA',
+          body: '#E0E0E0',
+        },
+      },
+    };
+
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        theme={customTheme}
+        onMessage={() => {}}
+      />
+    );
+  });
+
+  test('Hcaptcha render count stability - multiple renders', async () => {
+    // This test ensures render count doesn't increase with multiple renders
+    const Component = () => (
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        onMessage={() => {}}
+      />
+    );
+
+    await measureRenders(<Component />, {
+      runs: 20, // More runs to detect render count issues
+      warmupRuns: 3,
+    });
+  });
+
+  test('Hcaptcha invisible size performance', async () => {
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        size="invisible"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('Hcaptcha compact size performance', async () => {
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        size="compact"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+
+  test('Hcaptcha normal size performance', async () => {
+    await measureRenders(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        size="normal"
+        onMessage={() => {}}
+      />,
+      {
+        scenario: async () => {
+          await waitFor(() => {}, { timeout: 100 });
+        },
+      }
+    );
+  });
+});