test(js-client-sdk): adding hello app test

.github/workflows/browser-nightly.yaml

@@ -0,0 +1,21 @@
+name: sdk/browser 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: '@launchdarkly/browser-example'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @launchdarkly/browser-example playwright install --with-deps chromium'

.github/workflows/browser.yml

@@ -128,3 +128,18 @@ jobs:
           pkill -f "playwright" || true
           pkill -f "http-server" || true
           pkill -f "browser-contract-test-adapter" || 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: '@launchdarkly/browser-example'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @launchdarkly/browser-example playwright install --with-deps chromium'

packages/sdk/browser/example/.env.template

@@ -1,5 +1,5 @@
-# Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
-LD_CLIENT_SIDE_ID=
+# Set LAUNCHDARKLY_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+LAUNCHDARKLY_CLIENT_SIDE_ID=
 
-# Set LD_FLAG_KEY to the feature flag key you want to evaluate
-LD_FLAG_KEY=
+# Set LAUNCHDARKLY_FLAG_KEY to the feature flag key you want to evaluate
+LAUNCHDARKLY_FLAG_KEY=

packages/sdk/browser/example/README.md

@@ -18,11 +18,11 @@ Nodejs 20.6.0 or later
 
 2. Set the variables in `.env` to your specific LD values
     ```
-    # Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
-    LD_CLIENT_SIDE_ID=
+    # Set LAUNCHDARKLY_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+    LAUNCHDARKLY_CLIENT_SIDE_ID=
 
-    # Set LD_FLAG_KEY to the feature flag key you want to evaluate
-    LD_FLAG_KEY=
+    # Set LAUNCHDARKLY_FLAG_KEY to the feature flag key you want to evaluate
+    LAUNCHDARKLY_FLAG_KEY=
     ```
     > [!NOTE]
     > Setting these values is equivilent to modifying the `clientSideID` and `flagKey`

packages/sdk/browser/example/e2e/verify.spec.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { expect, test as it } from '@playwright/test';
+
+it('evaluates the feature flag to true', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('body')).toContainText('feature flag evaluates to true', {
+    timeout: 20_000,
+  });
+});

packages/sdk/browser/example/package.json

@@ -14,12 +14,15 @@
   "scripts": {
     "start": "open index.html",
     "clean": "rm -rf dist dist-static",
-    "build": "npm run clean && tsdown"
+    "build": "npm run clean && tsdown",
+    "test": "playwright test"
   },
   "dependencies": {
     "@launchdarkly/js-client-sdk": "workspace:^"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "playwright": "^1.49.1",
     "tsdown": "^0.17.0-beta.4",
     "typescript": "^5.9.3"
   }

packages/sdk/browser/example/playwright.config.ts

@@ -0,0 +1,16 @@
+// 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: 'npx http-server . -p 4173 --silent',
+    url: 'http://localhost:4173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/sdk/browser/example/tsdown.config.ts

@@ -10,7 +10,7 @@ if (fs.existsSync('.env')) {
 
 const ENTRY_FILE = path.join('src', 'app.ts');
 const OUTPUT_FILE = path.join('dist', 'app.js');
-const { LD_CLIENT_SIDE_ID, LD_FLAG_KEY } = process.env;
+const { LAUNCHDARKLY_CLIENT_SIDE_ID, LAUNCHDARKLY_FLAG_KEY } = process.env;
 
 const CLIENT_SIDE_ID_PLACEHOLDER = 'LD_CLIENT_SIDE_ID';
 const FLAG_KEY_PLACEHOLDER = 'LD_FLAG_KEY';
@@ -22,14 +22,14 @@ export default defineConfig({
   noExternal: ['@launchdarkly/js-client-sdk'],
   hooks(hooks) {
     hooks.hook('build:done', () => {
-      if (LD_CLIENT_SIDE_ID) {
+      if (LAUNCHDARKLY_CLIENT_SIDE_ID) {
         const content = fs.readFileSync(OUTPUT_FILE).toString();
         fs.writeFileSync(
           OUTPUT_FILE,
-          content.replaceAll(CLIENT_SIDE_ID_PLACEHOLDER, LD_CLIENT_SIDE_ID),
+          content.replaceAll(CLIENT_SIDE_ID_PLACEHOLDER, LAUNCHDARKLY_CLIENT_SIDE_ID),
         );
       }
-      const flagKey = LD_FLAG_KEY || 'sample-feature';
+      const flagKey = LAUNCHDARKLY_FLAG_KEY || 'sample-feature';
       const content = fs.readFileSync(OUTPUT_FILE).toString();
       fs.writeFileSync(OUTPUT_FILE, content.replaceAll(FLAG_KEY_PLACEHOLDER, flagKey));
     });