chore(vscode): add integration test

Author: benfdking

.circleci/continue_config.yml

@@ -47,6 +47,11 @@ jobs:
           name: Install Dependencies
           command: |
             pnpm install
+      - run: 
+          name: Fetch VSCode
+          command: |
+            cd vscode/extension
+            pnpm run fetch-vscode
       - run:
           name: Run VSCode extension CI
           command: |

pnpm-lock.yaml

@@ -0,0 +1,89 @@
+# E2E Testing with Playwright
+
+This directory contains end-to-end tests for the SQLMesh VS Code extension using Playwright.
+
+## Setup
+
+1. **Install dependencies:**
+   ```bash
+   pnpm install
+   ```
+
+2. **Download VS Code executable (one-time setup):**
+   ```bash
+   pnpm run fetch-vscode
+   ```
+   
+   This downloads VS Code and caches it in `.vscode-test/` directory. The paths are saved to `.vscode-test/paths.json` for Playwright to use.
+
+3. **Install Playwright browsers:**
+   ```bash
+   npx playwright install
+   ```
+
+## Running Tests
+
+- **Run all E2E tests:**
+  ```bash
+  pnpm run test:e2e
+  ```
+
+- **Run tests with UI (interactive):**
+  ```bash
+  pnpm run test:e2e:ui
+  ```
+
+- **Run tests in headed mode (visible browser):**
+  ```bash
+  pnpm run test:e2e:headed
+  ```
+
+## Test Structure
+
+- `scripts/fetch-vscode.ts` - Downloads and caches VS Code executable
+- `playwright.config.ts` - Playwright configuration for Electron testing
+- `tests/webview.e2e.spec.ts` - E2E tests for webview panels
+
+## How It Works
+
+1. **VS Code as Electron app:** Playwright launches VS Code as an Electron application with the extension loaded in development mode
+2. **Extension isolation:** Each test runs with a fresh user data directory (`/tmp/vscode-test`)
+3. **Webview testing:** Tests can interact with webview content using frame locators
+4. **Visual regression:** Screenshots are captured and compared for pixel-perfect testing
+
+## CI/CD
+
+- The `.vscode-test` directory should be cached in CI to avoid re-downloading VS Code
+- Tests run in headless mode by default in CI environments
+- Screenshots are stored as test artifacts for comparison
+
+## Adding New Tests
+
+Create new test files in the `tests/` directory following the pattern:
+
+```typescript
+import { test, expect, _electron as electron } from '@playwright/test';
+import path from 'path';
+import fs from 'fs-extra';
+
+const VS_CODE_EXE = fs.readJsonSync('.vscode-test/paths.json').executablePath;
+const EXT_PATH = path.join(__dirname, '..');
+
+test('my new test', async () => {
+  const electronApp = await electron.launch({
+    executablePath: VS_CODE_EXE,
+    args: [
+      `--extensionDevelopmentPath=${EXT_PATH}`,
+      '--disable-workspace-trust',
+      '--disable-telemetry',
+      '--user-data-dir=/tmp/vscode-test',
+    ],
+  });
+
+  const window = await electronApp.firstWindow();
+  
+  // Your test logic here...
+  
+  await electronApp.close();
+});
+```

vscode/extension/.vscode-test.mjs

@@ -86,7 +86,11 @@
     "pretest": "pnpm run compile-tests && pnpm run compile && pnpm run lint",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "test": "vscode-test",
+    "test": "pnpm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "fetch-vscode": "tsx scripts/fetch-vscode.ts",
     "compile": "pnpm run check-types && node esbuild.js",
     "check-types": "tsc --noEmit",
     "watch": "node esbuild.js --watch",
@@ -105,6 +109,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
+    "@playwright/test": "^1.48.2",
     "@types/mocha": "^10.0.10",
     "@types/node": "20.11.25",
     "@types/vscode": "1.96.0",
@@ -114,6 +119,7 @@
     "esbuild": "^0.25.2",
     "eslint": "^9.23.0",
     "ts-loader": "^9.5.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.31.1"
   }

vscode/extension/E2E_TESTING.md

@@ -0,0 +1,22 @@
+import { defineConfig } from '@playwright/test'
+import * as path from 'path'
+
+export default defineConfig({
+  testDir: 'tests',
+  timeout: 60_000,
+  retries: process.env.CI ? 1 : 0,
+
+  projects: [
+    {
+      name: 'electron-vscode',
+      use: {
+        // ⭢ we'll launch Electron ourselves – no browser needed
+        browserName: 'chromium',
+        headless: false, // headed makes screenshots deterministic
+        launchOptions: {
+          slowMo: process.env.CI ? 0 : 100,
+        },
+      },
+    },
+  ],
+})

vscode/extension/package.json

@@ -0,0 +1,28 @@
+import {
+  downloadAndUnzipVSCode,
+  resolveCliPathFromVSCodeExecutablePath,
+} from '@vscode/test-electron'
+import * as fs from 'fs-extra'
+import * as path from 'path'
+
+;(async () => {
+  const vscPath = await downloadAndUnzipVSCode('stable') // one-time-only
+  console.log('VS Code downloaded to:', vscPath)
+
+  const cliPath = resolveCliPathFromVSCodeExecutablePath(vscPath) // optional
+  console.log('CLI path:', cliPath)
+
+  // Save paths to a JSON file for Playwright to use
+  const pathsFile = path.join('.vscode-test', 'paths.json')
+  await fs.ensureDir(path.dirname(pathsFile))
+  await fs.writeJson(
+    pathsFile,
+    {
+      executablePath: vscPath,
+      cliPath: cliPath,
+    },
+    { spaces: 2 },
+  )
+
+  console.log('Paths saved to:', pathsFile)
+})()

vscode/extension/playwright.config.ts

@@ -0,0 +1,48 @@
+import { test, _electron as electron } from '@playwright/test';
+import path from 'path';
+import fs from 'fs-extra';
+
+// Absolute path to the VS Code executable you downloaded in step 1.
+const VS_CODE_EXE = fs.readJsonSync('.vscode-test/paths.json').executablePath;
+// Where your extension lives on disk
+const EXT_PATH = path.join(__dirname, '..');
+// Where the sushi project lives which we open in the webview
+const PROJECT_PATH = path.join(__dirname, '..', '..', '..', 'examples', 'sushi');
+
+test('Lineage panel renders correctly', async () => {
+  // ➊ Launch VS Code as an Electron app with our extension loaded
+  const electronApp = await electron.launch({
+    executablePath: VS_CODE_EXE,
+    args: [
+      `--extensionDevelopmentPath=${EXT_PATH}`,
+      '--disable-workspace-trust',          // no modal prompt
+      '--disable-telemetry',
+      '--user-data-dir=/tmp/vscode-test',   // throwaway profile
+      `${PROJECT_PATH}`,
+    ],
+  });
+
+  // ➋ Grab the first window that appears (the Workbench)
+  const window = await electronApp.firstWindow();
+
+  // Wait for VS Code to be ready
+  await window.waitForLoadState('domcontentloaded');
+  await window.waitForLoadState('networkidle');
+
+  // ➌ Trigger our command exactly like a user would
+  await window.keyboard.press(process.platform === 'darwin' ? 'Meta+Shift+P' : 'Control+Shift+P');
+  await window.keyboard.type('Lineage: Focus On View');
+  await window.keyboard.press('Enter');
+
+  await new Promise(resolve => setTimeout(resolve, 5000));
+
+  // Wait for "Loaded SQLmesh Context" text to appear
+  const loadedContextText = window.locator('text=Loaded SQLmesh Context');
+  try {
+    await loadedContextText.waitFor({ timeout: 10000 });
+  } catch (error) {
+    throw new Error('Failed to find "Loaded SQLmesh Context" text within 5 seconds');
+  }
+
+  await electronApp.close();
+});