Simplify & add E2E in CI job

Author: charlespwd

.github/workflows/ci.yml

@@ -31,6 +31,30 @@ jobs:
       - name: Check formatting
         run: yarn format:check
 
+  e2e:
+    runs-on: ubuntu-latest
+    name: E2E tests
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          submodules: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: 20
+          cache: "yarn"
+          cache-dependency-path: "yarn.lock"
+
+      - name: Install the packages
+        run: yarn install --frozen-lockfile --ignore-engines
+
+      - name: Build the code
+        run: yarn build
+
+      - name: Run the E2E tests
+        run: yarn test:e2e
+
   tests:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 30

package.json

@@ -35,6 +35,7 @@
     "postrelease": "yarn --cwd packages/prettier-plugin-liquid prerelease",
     "reset": "find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' +",
     "test": "vitest",
+    "test:e2e": "yarn test:e2e:browser",
     "test:e2e:browser": "yarn --cwd packages/vscode-extension test:web",
     "theme-check": "node packages/theme-check-node/dist/cli.js",
     "type-check": "yarn workspaces run type-check"

packages/vscode-extension/package.json

@@ -54,10 +54,9 @@
     "test": "vitest",
     "pretest:web": "[ -d .tmp/dawn ] || git clone --depth 1 https://github.com/Shopify/dawn.git .tmp/dawn",
     "build:test": "webpack --config webpack.test.config.js --mode development",
-    "build:test:debug": "WATCH_MODE=1 DEBUG_DELAY=10000 webpack --config webpack.test.config.js --mode development",
     "build:test:watch": "WATCH_MODE=1 webpack --config webpack.test.config.js --mode development --watch",
-    "test:web": "yarn build && yarn build:test && vscode-test-web --browserType=chromium --headless --extensionDevelopmentPath=. --extensionTestsPath=./dist/browser/test/suite/index.js .tmp/dawn",
-    "test:web:debug": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=. --extensionTestsPath=./dist/browser/test/suite/index.js .tmp/dawn",
+    "test:web": "yarn build:test && vscode-test-web --headless --extensionDevelopmentPath=. --extensionTestsPath=./dist/browser/test/suite/index.js .tmp/dawn",
+    "test:web:watch": "vscode-test-web --open-devtools --extensionDevelopmentPath=. --extensionTestsPath=./dist/browser/test/suite/index.js .tmp/dawn",
     "type-check:test": "tsc --project test/tsconfig.json --noEmit",
     "type-check": "tsc --noEmit"
   },

packages/vscode-extension/test/README.md

@@ -37,6 +37,16 @@ yarn test:web
 yarn build:test
 ```
 
+## Watch mode
+
+```
+# terminal 1
+yarn build:test:watch
+
+# terminal 2 (refresh for changes, no hmr)
+yarn test:web:watch
+```
+
 ## Adding Tests
 
 ### Browser Tests

packages/vscode-extension/test/browser/suite/index.ts

@@ -3,7 +3,7 @@ require('mocha/mocha');
 
 export async function run(): Promise<void> {
   // Debug delay: allows attaching debugger before tests run
-  const delay = process.env.DEBUG_DELAY ? parseInt(process.env.DEBUG_DELAY, 10) : 0;
+  const delay = process.env.WATCH_MODE ? 5000 : 0;
   if (delay > 0) {
     console.log(`[DEBUG] Waiting ${delay}ms for debugger attachment...`);
     await new Promise((r) => setTimeout(r, delay));