chore(vscode): add integration test

Author: benfdking

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

@@ -80,13 +80,15 @@
     ]
   },
   "scripts": {
-    "ci": "pnpm run lint && pnpm run compile && pnpm run test",
+    "ci": "pnpm run lint && pnpm run compile",
     "compile-tests": "tsc -p . --outDir out",
     "watch-tests": "tsc -p . -w --outDir out",
-    "pretest": "pnpm run compile-tests && pnpm run compile && pnpm run lint",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "test": "vscode-test",
+    "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 +107,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 +117,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,21 @@
+import { defineConfig } from '@playwright/test'
+
+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,27 @@
+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,52 @@
+import { test, _electron as electron, expect } 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 () => {
+  const ciArgs = process.env.CI ? [
+    '--disable-gpu',
+    '--headless',
+    '--no-sandbox',
+    '--disable-dev-shm-usage',  // Prevents memory issues in Docker/CI
+    '--window-position=-10000,0', // Ensures window is off-screen
+  ] : [];
+  const args = [
+    ...ciArgs,
+    `--extensionDevelopmentPath=${EXT_PATH}`,
+    '--disable-workspace-trust',          // no modal prompt
+    '--disable-telemetry',
+    '--user-data-dir=/tmp/vscode-test',   // throwaway profile
+    `${PROJECT_PATH}`,
+  ];
+  const electronApp = await electron.launch({
+    executablePath: VS_CODE_EXE,
+    args,
+  });
+
+  // ➋ 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');
+
+  await expect(window.locator("text=lineage").first()).toBeVisible();
+
+  // ➌ 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');
+
+  // Wait for "Loaded SQLmesh Context" text to appear
+  const loadedContextText = window.locator('text=Loaded SQLmesh Context');
+  await expect(loadedContextText).toBeVisible({ timeout: 10000 });
+
+  await electronApp.close();
+});