test(react-sdk): add example app verification (#1162)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> **Medium Risk**
> Primarily CI/test additions, but it introduces new GitHub Actions jobs
that assume an AWS role and pull secrets via OIDC/SSM, so
misconfiguration could impact CI or secret access paths.
> 
> **Overview**
> Adds automated e2e verification of the React `examples/client-only`
app using Playwright, including a new `playwright.config.ts`, a basic
spec, and wiring `yarn test` into the example workspace.
> 
> Introduces a reusable composite action `actions/run-example` that
installs the target workspace, fetches required LaunchDarkly keys from
AWS SSM via OIDC, builds dependent workspaces, and runs the example
tests; this action is executed in the main `react.yaml` workflow and a
new scheduled `react-nightly.yaml` workflow. The example app now reads
the flag key from `import.meta.env.LAUNCHDARKLY_FLAG_KEY`, and
Playwright `test-results/` are ignored.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7b2f38f. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/launchdarkly/js-core/pull/1162"
target="_blank">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

Author: joker23

.github/workflows/react-nightly.yaml

@@ -0,0 +1,21 @@
+name: sdk/react nightly
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  run-example:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version: 22
+      - uses: ./actions/run-example
+        with:
+          workspace_name: '@internal/react-sdk-example-client-only'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @internal/react-sdk-example-client-only playwright install --with-deps chromium'

.github/workflows/react.yaml

@@ -81,3 +81,20 @@ jobs:
           [ -f /tmp/browser.pid ] && kill $(cat /tmp/browser.pid) || true
           [ -f /tmp/entity.pid ] && kill $(cat /tmp/entity.pid) || true
           [ -f /tmp/adapter.pid ] && kill $(cat /tmp/adapter.pid) || true
+
+  run-example:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version: 22
+      - uses: ./actions/run-example
+        with:
+          workspace_name: '@internal/react-sdk-example-client-only'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @internal/react-sdk-example-client-only playwright install --with-deps chromium'
+
+# TODO: Add contract tests

actions/run-example/action.yml

@@ -0,0 +1,44 @@
+# Composite action for running an example app e2e test.
+# Note: id-token: write permission must be declared on the calling job.
+name: Run Example App
+inputs:
+  workspace_name:
+    description: 'Yarn workspace name of the example app, e.g. @internal/react-sdk-example-client-only'
+    required: true
+  aws_assume_role:
+    description: 'AWS OIDC role ARN used to fetch secrets from SSM'
+    required: true
+  before_test:
+    description: 'Shell commands to run before the e2e test step (e.g. install Playwright browsers)'
+    default: ''
+runs:
+  using: composite
+  steps:
+    - name: Install dependencies
+      shell: bash
+      run: yarn workspaces focus ${{ inputs.workspace_name }}
+
+    - uses: launchdarkly/gh-actions/actions/release-secrets@bbbbbda684f500766264e7fe327668094ba83d1c
+      name: 'Get the client-side SDK key'
+      with:
+        aws_assume_role: ${{ inputs.aws_assume_role }}
+        ssm_parameter_pairs: '/sdk/common/hello-apps/client-key = LAUNCHDARKLY_CLIENT_SIDE_ID'
+
+    - uses: launchdarkly/gh-actions/actions/release-secrets@bbbbbda684f500766264e7fe327668094ba83d1c
+      name: 'Get the test feature flag key'
+      with:
+        aws_assume_role: ${{ inputs.aws_assume_role }}
+        ssm_parameter_pairs: '/sdk/common/hello-apps/boolean-flag-key = LAUNCHDARKLY_FLAG_KEY'
+
+    - name: Build SDK dependencies
+      shell: bash
+      run: yarn workspaces foreach -pR --topological-dev --from '${{ inputs.workspace_name }}' run build
+
+    - name: Before test hook
+      shell: bash
+      if: ${{ inputs.before_test != '' }}
+      run: ${{ inputs.before_test }}
+
+    - name: Run e2e tests
+      shell: bash
+      run: yarn workspace ${{ inputs.workspace_name }} test

packages/sdk/react/examples/client-only/.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+test-results/

packages/sdk/react/examples/client-only/e2e/verify.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test('feature flag evaluates to true', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.getByText('SDK successfully initialized!')).toBeVisible({ timeout: 10000 });
+
+  await expect(page.getByText(`feature flag evaluates to true`, { exact: false })).toBeVisible({
+    timeout: 10000,
+  });
+});

packages/sdk/react/examples/client-only/package.json

@@ -11,9 +11,11 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "test": "playwright test",
     "tsc": "tsc"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
     "@types/node": "^16.18.18",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

packages/sdk/react/examples/client-only/playwright.config.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  reporter: [['list']],
+  use: {
+    baseURL: 'http://localhost:4173',
+  },
+  webServer: {
+    command: 'yarn preview',
+    port: 4173,
+    timeout: 30_000,
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/sdk/react/examples/client-only/src/App.tsx

@@ -10,7 +10,7 @@ import {
 import './App.css';
 
 // Set FLAG_KEY to the feature flag key you want to evaluate.
-const FLAG_KEY = 'sample-feature';
+const FLAG_KEY = import.meta.env.LAUNCHDARKLY_FLAG_KEY ?? 'sample-feature';
 
 const PRESET_CONTEXTS: ReadonlyArray<LDContext> = [
   { kind: 'user', key: 'example-user-key', name: 'Sandy' },