[AXON-32] (WIP) Use of RedHat UI testing framework vscode-extension-t…

…ester

* Simple working example
* clean up mocha config, add dependency to package.json
* clean tsconfig. Change test to a positive verificaiton. Note: I saw some flakes here
* Reduce flakes. Don't get the y/n question
* [AXON-32] compiling typescript tests manually
* ts test work
* lint
* normal test should ignore ui-tests

.gitignore

@@ -15,4 +15,6 @@ TEMP-*
 .yalc
 yalc.lock
 .env
-coverage
+coverage
+.test-extensions/
+generated/

.mocharc.js

@@ -0,0 +1,8 @@
+// increase default test case timeout to 5 seconds
+module.exports = {
+	"timeout": 5000,
+	// For further investigation
+	// "extension": ["ts"],
+	// "exit": true,
+	// "require": ["ts-node/register"],
+};

jest.config.js

@@ -10,6 +10,7 @@ module.exports = {
         ],
     },
     transformIgnorePatterns: ['/node_modules/'],
+    testPathIgnorePatterns: ['/node_modules/', '<rootDir>/src/ui-test/'],
     verbose: true,
     setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
     // coverage configuration

package.json

@@ -35,7 +35,7 @@
         "Other"
     ],
     "activationEvents": [
-        "*"
+        "onStartupFinished"
     ],
     "extensionDependencies": [
         "vscode.git",
@@ -53,6 +53,7 @@
         "format": "prettier --write . --log-level warn",
         "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
         "lint:fix": "eslint --fix ./src --ext .js,.jsx,.ts,.tsx",
+        "compile:ui-test": "tsc --project tsconfig.ui-test.json",
         "compile": "npm run clean && npm run compile:react && npm run compile:extension",
         "compile:extension": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production --config webpack.extension.prod.js",
         "compile:react": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production --config webpack.react.prod.js",
@@ -62,6 +63,7 @@
         "extension:package": "npm run extension:clean && vsce package --baseContentUrl https://raw.githubusercontent.com/atlassian/atlascode/main/ --allow-star-activation",
         "extension:install": "npm run extension:package && code --install-extension ./atlascode-*.vsix --force",
         "test": "jest",
+        "test:ui": "npm run compile:ui-test && extest run-tests './generated/ui-test/*.test.js' --code_version max --code_settings ui-test-settings.json --extensions_dir .test-extensions",
         "devcompile": "npm-run-all --parallel devcompile:react devcompile:extension",
         "devcompile:react": "webpack --mode development --config webpack.react.dev.js",
         "devcompile:extension": "webpack --mode development --config webpack.extension.dev.js",
@@ -1466,6 +1468,7 @@
         "@babel/core": "^7.25.0",
         "@stylistic/eslint-plugin-js": "^2.8.0",
         "@types/analytics-node": "^3.1.7",
+        "@types/chai": "^4",
         "@types/deep-equal": "^1.0.1",
         "@types/escape-string-regexp": "^1.0.0",
         "@types/filesize": "^4.1.0",
@@ -1504,6 +1507,7 @@
         "ajv-formats": "^3.0.1",
         "autoprefixer": "^10.4.20",
         "babel-loader": "^9.2.1",
+        "chai": "^4",
         "cross-env": "^7.0.2",
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.0",
@@ -1539,6 +1543,7 @@
         "tsconfig-paths-webpack-plugin": "^3.2.0",
         "typescript": "^5.4.0 <5.5.0",
         "vsce": "^2.15.0",
+        "vscode-extension-tester": "^8.10.0",
         "vue": "^3.2.23",
         "webpack": "^5",
         "webpack-cli": "^5.1.4",

src/ui-test/dummy.test.ts

@@ -0,0 +1,21 @@
+// import the webdriver and the high level browser wrapper
+import { assert } from 'chai';
+import { before, VSBrowser, WebDriver } from 'vscode-extension-tester';
+
+// Create a Mocha suite
+describe('My Test Suite', () => {
+    let browser: VSBrowser;
+    let driver: WebDriver;
+
+    // initialize the browser and webdriver
+    before(async () => {
+        browser = VSBrowser.instance;
+        driver = browser.driver;
+    });
+
+    // test whatever we want using webdriver, here we are just checking the page title
+    it('My Test Case', async () => {
+        const title = await driver.getTitle();
+        assert.isTrue(title === 'Getting Started' || title === 'Walkthrough: Setup VS Code');
+    });
+});

tsconfig.ui-test.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "outDir": "generated/ui-test",
+        "module": "CommonJS",
+        "target": "es6",
+        "lib": ["esnext", "dom"],
+        "skipDefaultLibCheck": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react",
+        "moduleResolution": "node",
+        "rootDir": "src/ui-test",
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "ignoreDeprecations": "5.0",
+        "noUnusedLocals": true,
+        "typeRoots": ["node_modules/@types", "src/typings/"]
+    },
+    "include": ["src/ui-test/**/*"],
+}

ui-test-settings.json

@@ -0,0 +1,8 @@
+{
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "workbench.editor.enablePreview": true,
+    "git.autoRepositoryDetection": false,
+    "terminal.integrated.sendKeybindingsToShell": true,
+    "workbench.remoteIndicator.showExtensionRecommendations": false,
+    "extensions.ignoreRecommendations": true
+}