Add an e2e test for web and CI build step

Author: pderaaij

.github/workflows/ci.yml

@@ -74,3 +74,38 @@ jobs:
         uses: GabrielBB/[email protected]
         with:
           run: yarn test --stream
+
+  webtest:
+    name: Build and Test (web)
+    # strategy:
+    #   matrix:
+    #     os: [macos-12, ubuntu-22.04, windows-2022]
+    # runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-22.04
+    # env:
+    #   OS: ${{ matrix.os }}
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v1
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Restore Dependencies and VS Code test instance
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+            packages/foam-vscode/.vscode-test
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', 'packages/foam-vscode/src/test/run-tests.ts') }}-${{ secrets.CACHE_VERSION }}
+      - name: Install Dependencies
+        run: yarn
+      - name: Build Packages
+        run: yarn build
+      - name: Download required playwright browsers
+        run: yarn playwright install
+      - name: Run Tests
+        uses: GabrielBB/[email protected]
+        with:
+          run: yarn test:web

package.json

@@ -17,6 +17,7 @@
     "clean": "lerna run clean",
     "build": "lerna run build",
     "test": "yarn workspace foam-vscode test --stream",
+    "test:web": "yarn workspace foam-vscode test:web",
     "lint": "lerna run lint",
     "watch": "lerna run watch --concurrency 20 --stream"
   },

packages/foam-vscode/package.json

@@ -657,6 +657,8 @@
     "test:unit": "node ./out/test/run-tests.js --unit",
     "pretest:e2e": "yarn build",
     "test:e2e": "node ./out/test/run-tests.js --e2e",
+    "pretest:web": "tsc -p tsconfig.webTest.json && npm run compile-web",
+    "test:web": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=. --extensionTestsPath=out/web/test/web/index.js",
     "lint": "dts lint src",
     "clean": "rimraf out",
     "watch": "tsc --build ./tsconfig.json --watch",
@@ -679,7 +681,7 @@
     "@types/lodash": "^4.14.157",
     "@types/markdown-it": "^12.0.1",
     "@types/micromatch": "^4.0.1",
-    "@types/mocha": "^10.0.2",
+    "@types/mocha": "^10.0.6",
     "@types/node": "^13.13.52",
     "@types/picomatch": "^2.2.1",
     "@types/remove-markdown": "^0.1.1",
@@ -701,7 +703,7 @@
     "jest-extended": "^3.2.3",
     "markdown-it": "^12.0.4",
     "micromatch": "^4.0.2",
-    "mocha": "^10.2.0",
+    "mocha": "^10.3.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",

packages/foam-vscode/src/test/web/index.ts

@@ -0,0 +1,33 @@
+/*global mocha:readonly*/
+/*global __WebpackModuleApi:readonly*/
+
+// Imports mocha for the browser, defining the `mocha` global.
+require('mocha/mocha');
+
+export function run(): Promise<void> {
+  return new Promise((c, e) => {
+    mocha.setup({
+      ui: 'tdd',
+      reporter: undefined,
+    });
+
+    // Bundles all files in the current directory matching `*.test`
+    const importAll = (r: __WebpackModuleApi.RequireContext) =>
+      r.keys().forEach(r);
+    importAll(require.context('.', true, /\.webtest$/));
+
+    try {
+      // Run the mocha test
+      mocha.run(failures => {
+        if (failures > 0) {
+          e(new Error(`${failures} tests failed.`));
+        } else {
+          c();
+        }
+      });
+    } catch (err) {
+      console.error(err);
+      e(err);
+    }
+  });
+}

packages/foam-vscode/src/test/web/web-extension.webtest.ts

@@ -0,0 +1,11 @@
+/*global suite:readonly*/
+
+import * as assert from 'assert';
+import * as vscode from 'vscode';
+suite('Foam Web Extension Test Suite', () => {
+  vscode.window.showInformationMessage('Start all tests.');
+
+  test('Foam extension is loaded', () => {
+    assert.ok(vscode.extensions.getExtension('foam.foam-vscode'));
+  });
+});

packages/foam-vscode/src/web/features/preview/wikilink-embed.ts

@@ -1,3 +1,5 @@
+/*global markdownit:readonly*/
+
 import { ResourceParser } from 'packages/foam-vscode/src/core/model/note';
 import { FoamWorkspace } from 'packages/foam-vscode/src/core/model/workspace';
 

packages/foam-vscode/tsconfig.webTest.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
     "target": "ES2019",
     "outDir": "./out/web",
     "lib": ["ES2019"],
+    "sourceMap": true,
     "rootDir": "./src",
-    "strict": true,
+    "strict": true /* enable all strict type-checking options */,
     "skipLibCheck": true
   },
-  "include": ["./src/test/run-tests-web.ts"]
+  "include": ["./src/test/web/index.ts"]
 }

packages/foam-vscode/web/webpack.config.js

@@ -56,6 +56,9 @@ const webExtensionConfig = {
     ],
   },
   plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1, // disable chunks by default since web extensions must be a single bundle
+    }),
     new webpack.ProvidePlugin({
       process: 'process/browser', // provide a shim for the global `process` variable
     }),
@@ -67,5 +70,8 @@ const webExtensionConfig = {
     hints: false,
   },
   devtool: 'nosources-source-map', // create a source map that points to the original source file
+  infrastructureLogging: {
+    level: 'log', // enables logging required for problem matchers
+  },
 };
 module.exports = [webExtensionConfig];