chore(vscode): add e2e test

Author: benfdking

.github/workflows/pr.yaml

@@ -0,0 +1,37 @@
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  test-vscode-e2e:
+    env:
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.12'
+      - name: Install Python dependencies
+        run: make install-dev
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run CI
+        run: pnpm run ci
+      - name: Fetch VSCode
+        working-directory: vscode/extension
+        run: pnpm run fetch-vscode
+      - name: Run E2E tests
+        working-directory: vscode/extension
+        run: pnpm run test:e2e
+      - name: Upload test videos
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-videos
+          path: vscode/extension/test-videos/

vscode/extension/.gitignore

@@ -5,4 +5,5 @@ out
 *.vsix
 LICENSE
 src_react
-!src_react/.gitkeep
+!src_react/.gitkeep
+test-videos

vscode/extension/tests/hints.spec.ts

@@ -5,43 +5,41 @@ import os from 'os'
 import { startVSCode, SUSHI_SOURCE_PATH } from './utils'
 
 test('Model type hinting', async () => {
-    const tempDir = await fs.mkdtemp(
-        path.join(os.tmpdir(), 'vscode-test-sushi-'),
-    )
-    await fs.copy(SUSHI_SOURCE_PATH, tempDir)
-
-    try {
-        const { window, close } = await startVSCode(tempDir)
-
-        // Wait for the models folder to be visible
-        await window.waitForSelector('text=models')
-
-        // Click on the models folder
-        await window
-            .getByRole('treeitem', { name: 'models', exact: true })
-            .locator('a')
-            .click()
-
-        // Open the customers_revenue_by_day model
-        await window
-            .getByRole('treeitem', {
-                name: 'customer_revenue_by_day.sql',
-                exact: true,
-            })
-            .locator('a')
-            .click()
-
-        await window.waitForSelector('text=grain')
-        await window.waitForSelector('text=Loaded SQLMesh Context')
-
-        // Wait a moment for hints to appear
-        await window.waitForTimeout(500)
-
-        // Check if the hint is visible
-        expect(await window.locator('text="country code"::INT').count()).toBe(1)
-
-        await close()
-    } finally {
-        await fs.remove(tempDir)
-    }
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'vscode-test-sushi-'))
+  await fs.copy(SUSHI_SOURCE_PATH, tempDir)
+
+  try {
+    const { window, close } = await startVSCode(tempDir)
+
+    // Wait for the models folder to be visible
+    await window.waitForSelector('text=models')
+
+    // Click on the models folder
+    await window
+      .getByRole('treeitem', { name: 'models', exact: true })
+      .locator('a')
+      .click()
+
+    // Open the customers_revenue_by_day model
+    await window
+      .getByRole('treeitem', {
+        name: 'customer_revenue_by_day.sql',
+        exact: true,
+      })
+      .locator('a')
+      .click()
+
+    await window.waitForSelector('text=grain')
+    await window.waitForSelector('text=Loaded SQLMesh Context')
+
+    // Wait a moment for hints to appear
+    await window.waitForTimeout(500)
+
+    // Check if the hint is visible
+    expect(await window.locator('text="country code"::INT').count()).toBe(1)
+
+    await close()
+  } finally {
+    await fs.remove(tempDir)
+  }
 })

vscode/extension/tests/utils.ts

@@ -33,15 +33,7 @@ export const startVSCode = async (
   const userDataDir = await fs.mkdtemp(
     path.join(os.tmpdir(), 'vscode-user-data-'),
   )
-  const ciArgs = process.env.CI
-    ? [
-        '--disable-gpu',
-        '--headless',
-        '--no-sandbox',
-        '--disable-dev-shm-usage',
-        '--window-position=-10000,0',
-      ]
-    : []
+  const ciArgs = process.env.CI ? ['--window-position=-10000,0'] : []
   const args = [
     ...ciArgs,
     `--extensionDevelopmentPath=${EXT_PATH}`,
@@ -54,6 +46,7 @@ export const startVSCode = async (
   const electronApp = await electron.launch({
     executablePath: VS_CODE_EXE,
     args,
+    recordVideo: { dir: 'test-videos' },
   })
   const window = await electronApp.firstWindow()
   await window.waitForLoadState('domcontentloaded')