ci(vue-sdk): add contract tests

.github/workflows/vue.yml

@@ -25,4 +25,107 @@ jobs:
           should_build_docs: false
 
   # TODO(scaffold): run-example job arrives when examples/getting-started lands
-  # TODO(scaffold): contract-tests job arrives when contract-tests land
+
+  contract-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+      - uses: ./actions/setup-yarn
+      - name: Install contract test dependencies
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: 'false'
+        run: yarn workspaces focus @launchdarkly/vue-contract-test-service
+
+      - name: Build the SDK
+        run: yarn workspaces foreach -pR --topological-dev --from '@launchdarkly/vue-client-sdk' run build
+
+      - name: Install Playwright browsers
+        run: yarn workspace @launchdarkly/vue-contract-test-service install-playwright-browsers
+
+      - name: Build shared contract test utils
+        run: yarn workspaces foreach -pR --topological-dev --from '@launchdarkly/js-contract-test-utils' run build
+
+      - name: Build contract test entity (Vue app)
+        run: yarn workspace @launchdarkly/vue-contract-test-service run build
+
+      - name: Start contract test adapter in background
+        run: |
+          yarn workspace @launchdarkly/vue-contract-test-service run start:adapter > /tmp/adapter.log 2>&1 &
+          echo $! > /tmp/adapter.pid
+
+      - name: Serve Vue app with http-server
+        run: |
+          npx http-server packages/sdk/vue/contract-tests/dist -p 5173 --cors > /tmp/http-server.log 2>&1 &
+          echo $! > /tmp/http-server.pid
+
+      - name: Wait for services to be ready
+        run: |
+          echo "Waiting for adapter on port 8001..."
+          for i in {1..30}; do
+            if nc -z localhost 8001; then
+              echo "Adapter WebSocket ready"
+              break
+            fi
+            if [ $i -eq 30 ]; then
+              echo "Timeout waiting for adapter"
+              cat /tmp/adapter.log
+              exit 1
+            fi
+            sleep 1
+          done
+
+          echo "Waiting for HTTP server on port 5173..."
+          for i in {1..30}; do
+            if curl -s http://localhost:5173 > /dev/null; then
+              echo "HTTP server ready"
+              break
+            fi
+            if [ $i -eq 30 ]; then
+              echo "Timeout waiting for HTTP server"
+              cat /tmp/http-server.log
+              exit 1
+            fi
+            sleep 1
+          done
+
+      - name: Open Vue app in headless Chromium
+        run: |
+          node packages/sdk/vue/contract-tests/open-browser.mjs http://localhost:5173 > /tmp/playwright.log 2>&1 &
+          echo $! > /tmp/playwright.pid
+          sleep 5  # Give the browser time to initialize and connect via WebSocket
+
+      - name: Run contract tests (FDv1)
+        uses: launchdarkly/gh-actions/actions/contract-tests@a848aec9c87c29470093b22154107b83a7696374
+        with:
+          test_service_port: 8000
+          token: ${{ secrets.GITHUB_TOKEN }}
+          stop_service: 'false'
+          extra_params: '--skip-from=${{ github.workspace }}/packages/sdk/vue/contract-tests/testharness-suppressions.txt'
+
+      - name: Run contract tests (FDv2)
+        uses: launchdarkly/gh-actions/actions/contract-tests@a848aec9c87c29470093b22154107b83a7696374
+        with:
+          test_service_port: 8000
+          token: ${{ secrets.GITHUB_TOKEN }}
+          version: v3
+          extra_params: '--skip-from=${{ github.workspace }}/packages/sdk/vue/contract-tests/testharness-suppressions-fdv2.txt'
+
+      - name: Print logs on failure
+        if: failure()
+        run: |
+          echo "=== Adapter Log ==="
+          cat /tmp/adapter.log || echo "No adapter log"
+          echo "=== HTTP Server Log ==="
+          cat /tmp/http-server.log || echo "No http-server log"
+          echo "=== Playwright Log ==="
+          cat /tmp/playwright.log || echo "No playwright log"
+
+      - name: Cleanup contract test services
+        if: always()
+        run: |
+          [ -f /tmp/playwright.pid ] && kill $(cat /tmp/playwright.pid) || true
+          [ -f /tmp/http-server.pid ] && kill $(cat /tmp/http-server.pid) || true
+          [ -f /tmp/adapter.pid ] && kill $(cat /tmp/adapter.pid) || true
+          pkill -f "playwright" || true
+          pkill -f "http-server" || true
+          pkill -f "sdk-testharness-server" || true

package.json

@@ -67,7 +67,8 @@
     "packages/sdk/browser/example-fdv2",
     "packages/sdk/openfeature-node-server",
     "packages/sdk/openfeature-node-server/examples/getting-started",
-    "packages/sdk/vue"
+    "packages/sdk/vue",
+    "packages/sdk/vue/contract-tests"
   ],
   "private": true,
   "scripts": {

packages/sdk/vue/contract-tests/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue SDK Contract Test Service</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/sdk/vue/contract-tests/open-browser.mjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+/**
+ * Opens a headless browser and navigates to the contract test entity page.
+ * Keeps the browser open until the process is terminated.
+ *
+ * Usage: node open-browser.mjs [url]
+ * Default URL: http://localhost:5173
+ */
+
+import { chromium } from 'playwright';
+
+const url = process.argv[2] || 'http://localhost:5173';
+
+console.log(`Opening headless browser at ${url}...`);
+
+const browser = await chromium.launch({
+  headless: true,
+  args: ['--no-sandbox', '--disable-setuid-sandbox']
+});
+
+const context = await browser.newContext();
+const page = await context.newPage();
+
+// Log console messages from the browser
+page.on('console', (msg) => {
+  console.log(`[Browser Console] ${msg.type()}: ${msg.text()}`);
+});
+
+// Log page errors
+page.on('pageerror', (error) => {
+  console.error(`[Browser Error] ${error.message}`);
+});
+
+await page.goto(url);
+
+console.log('Browser is open and running. Press Ctrl+C to close.');
+
+// Keep the process alive
+await new Promise(() => {
+  // Intentionally never resolve - keeps browser open until process is killed
+});

packages/sdk/vue/contract-tests/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@launchdarkly/vue-contract-test-service",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Contract test service implementation for @launchdarkly/vue-client-sdk",
+  "scripts": {
+    "install-playwright-browsers": "playwright install --with-deps chromium",
+    "start": "tsc --noEmit && vite --open=true",
+    "start:headless": "tsc --noEmit && vite",
+    "build": "tsc --noEmit && vite build",
+    "lint": "eslint ./src",
+    "start:adapter": "sdk-testharness-server adapter"
+  },
+  "dependencies": {
+    "@launchdarkly/js-client-sdk": "workspace:^",
+    "@launchdarkly/js-contract-test-utils": "workspace:^",
+    "@launchdarkly/vue-client-sdk": "workspace:^",
+    "vue": "^3.2.36"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "eslint": "^9.0.0",
+    "eslint-import-resolver-typescript": "^4.0.0",
+    "eslint-plugin-import-x": "^4.0.0",
+    "eslint-plugin-jest": "^28.0.0",
+    "globals": "^16.0.0",
+    "playwright": "^1.49.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.1"
+  }
+}

packages/sdk/vue/contract-tests/run-test-service.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+yarn workspace @launchdarkly/vue-contract-test-service run start:adapter & yarn workspace @launchdarkly/vue-contract-test-service run start && kill $!