VSCODE-98: Add webview tests and schema field type tooltip VSCODE-176 (#179)

Author: Anemy

.gitignore

@@ -5,5 +5,6 @@ node_modules
 *.vsix
 .DS_Store
 test-results.xml
+test-webview-results.xml
 constants.json
 .env

azure-pipelines.yml

@@ -57,7 +57,7 @@ steps:
     condition: succeededOrFailed()
     inputs:
       testRunner: JUnit
-      testResultsFiles: 'test-results.xml'
+      testResultsFiles: 'test*-results.xml'
       failTaskOnFailedTests: true
 
   - bash: |

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  roots: ['<rootDir>/src/test/suite/views/webview-app'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(less)$': 'jest-transform-stub'
+  },
+  reporters: [
+    'default',
+    ['jest-junit', {
+      outputName: 'test-webview-results.xml'
+    }]
+  ],
+  testRegex: '(/test/suite/views/webview-app/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFiles: ['<rootDir>/src/test/suite/views/webview-app/jest-setup.js']
+};

package-lock.json

@@ -48,7 +48,9 @@
     "watch:extension": "npm run compile:extension -- -watch",
     "watch:extension-bundles": "webpack --mode development --info-verbosity verbose --watch",
     "pretest": "npm run compile && cross-env MONGODB_VERSION=4.2.3 mongodb-runner start --port=27018",
-    "test": "cross-env NODE_OPTIONS=--no-force-async-hooks-checks xvfb-maybe node ./out/test/runTest.js",
+    "test": "npm run test-webview && npm run test-extension",
+    "test-extension": "cross-env NODE_OPTIONS=--no-force-async-hooks-checks xvfb-maybe node ./out/test/runTest.js",
+    "test-webview": "jest",
     "posttest": "mongodb-runner stop --port=27018",
     "vscode:prepublish": "npm run clean && npm run compile:keyfile && npm run compile:resources && webpack --mode production",
     "check": "mongodb-js-precommit './src/**/*{.ts}'",
@@ -818,7 +820,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@leafygreen-ui/toggle": "^3.0.1",
+    "@leafygreen-ui/toggle": "3.0.1",
     "@mongosh/browser-runtime-electron": "^0.4.2",
     "@mongosh/service-provider-server": "^0.4.2",
     "@mongosh/shell-api": "^0.4.2",
@@ -852,9 +854,10 @@
     "@types/chai-json-schema": "^1.4.5",
     "@types/debug": "^4.1.5",
     "@types/glob": "^7.1.1",
+    "@types/jest": "^26.0.14",
     "@types/keytar": "4.4.2",
-    "@types/mocha": "^7.0.1",
-    "@types/node": "^14.11.2",
+    "@types/mocha": "^8.0.3",
+    "@types/node": "^14.11.5",
     "@types/react": "^16.9.25",
     "@types/react-dom": "^16.9.5",
     "@types/sinon": "^9.0.1",
@@ -869,15 +872,20 @@
     "chai-json-schema": "^1.5.1",
     "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^6.8.0",
     "eslint-config-mongodb-js": "^5.0.3",
     "eslint-plugin-react": "^7.19.0",
     "glob": "^7.1.6",
+    "jest": "^26.5.2",
+    "jest-junit": "^12.0.0",
+    "jest-transform-stub": "^2.0.0",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "meow": "^6.0.1",
     "mkdirp": "^1.0.4",
-    "mocha": "^7.0.1",
+    "mocha": "^8.1.3",
     "mocha-junit-reporter": "^1.23.3",
     "mocha-multi": "^1.1.3",
     "mongodb-ace-autocompleter": "^0.4.11",
@@ -887,12 +895,14 @@
     "npm-run-all": "^4.1.5",
     "ora": "^4.0.3",
     "postcss-loader": "^3.0.0",
+    "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.0",
     "sinon-chai": "^3.5.0",
     "style-loader": "^1.1.3",
+    "ts-jest": "^26.4.1",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.6.2",
-    "typescript": "^3.9.7",
+    "typescript": "^4.0.3",
     "vsce": "^1.81.1",
     "vscode-test": "^1.3.0",
     "webpack": "^4.42.0",

package.json

@@ -708,6 +708,28 @@ export default class ConnectionController {
     return this._activeConnectionModel;
   }
 
+  public getConnectionStatusStringForConnection(connectionId: string): string {
+    if (
+      this.getActiveConnectionId() === connectionId
+    ) {
+      if (this.isDisconnecting()) {
+        return 'disconnecting...';
+      }
+
+      return 'connected';
+    }
+
+    if (
+      this.isConnecting() &&
+      this.getConnectingConnectionId() ===
+        connectionId
+    ) {
+      return 'connecting...';
+    }
+
+    return '';
+  }
+
   // Exposed for testing.
   public clearAllConnections(): void {
     this._connections = {};

src/connectionController.ts

@@ -13,6 +13,31 @@ import { getImagesPath } from '../extensionConstants';
 
 const log = createLogger('tree view collection folder');
 
+function getIconPath(
+  type: CollectionTypes,
+  isExpanded: boolean
+): { light: string; dark: string } {
+  const LIGHT = path.join(getImagesPath(), 'light');
+  const DARK = path.join(getImagesPath(), 'dark');
+
+  if (type === CollectionTypes.collection) {
+    if (isExpanded) {
+      return {
+        light: path.join(LIGHT, 'collection-folder-open.svg'),
+        dark: path.join(DARK, 'collection-folder-open.svg')
+      };
+    }
+    return {
+      light: path.join(LIGHT, 'collection-folder-closed.svg'),
+      dark: path.join(DARK, 'collection-folder-closed.svg')
+    };
+  }
+  return {
+    light: path.join(LIGHT, 'view-folder.svg'),
+    dark: path.join(DARK, 'view-folder.svg')
+  };
+}
+
 type CollectionModelType = {
   name: string;
   type: CollectionTypes;
@@ -117,12 +142,11 @@ export default class CollectionTreeItem extends vscode.TreeItem
         false, // Cache is not up to date.
         [] // Empty cache.
       );
-  }
 
-  get tooltip(): string {
-    return this._type === CollectionTypes.view
+    this.tooltip = collection.type === CollectionTypes.view
       ? 'Read only view'
-      : this.collectionName;
+      : collection.name;
+    this.iconPath = getIconPath(collection.type, isExpanded);
   }
 
   getTreeItem(element: CollectionTreeItem): CollectionTreeItem {
@@ -362,29 +386,4 @@ export default class CollectionTreeItem extends vscode.TreeItem
       );
     });
   }
-
-  get iconPath():
-    | string
-    | vscode.Uri
-    | { light: string | vscode.Uri; dark: string | vscode.Uri } {
-    const LIGHT = path.join(getImagesPath(), 'light');
-    const DARK = path.join(getImagesPath(), 'dark');
-
-    if (this._type === CollectionTypes.collection) {
-      if (this.isExpanded) {
-        return {
-          light: path.join(LIGHT, 'collection-folder-open.svg'),
-          dark: path.join(DARK, 'collection-folder-open.svg')
-        };
-      }
-      return {
-        light: path.join(LIGHT, 'collection-folder-closed.svg'),
-        dark: path.join(DARK, 'collection-folder-closed.svg')
-      };
-    }
-    return {
-      light: path.join(LIGHT, 'view-folder.svg'),
-      dark: path.join(DARK, 'view-folder.svg')
-    };
-  }
 }

src/explorer/collectionTreeItem.ts

@@ -14,6 +14,19 @@ enum ConnectionItemContextValues {
 }
 export { ConnectionItemContextValues };
 
+function getIconPath(isActiveConnection: boolean): { light: string; dark: string } {
+  const LIGHT = path.join(getImagesPath(), 'light');
+  const DARK = path.join(getImagesPath(), 'dark');
+
+  return isActiveConnection ? {
+    light: path.join(LIGHT, 'connection-active.svg'),
+    dark: path.join(DARK, 'connection-active.svg')
+  } : {
+    light: path.join(LIGHT, 'connection-inactive.svg'),
+    dark: path.join(DARK, 'connection-inactive.svg')
+  };
+}
+
 export default class ConnectionTreeItem extends vscode.TreeItem
   implements TreeItemParent, vscode.TreeDataProvider<ConnectionTreeItem> {
   contextValue = ConnectionItemContextValues.disconnected;
@@ -56,32 +69,14 @@ export default class ConnectionTreeItem extends vscode.TreeItem
     // Create a unique id to ensure the tree updates the expanded property.
     // (Without an id it treats this tree item like a previous tree item with the same label).
     this.id = `${connectionId}-${Date.now()}`;
-  }
 
-  get tooltip(): string {
-    return this._connectionController.getSavedConnectionName(this.connectionId);
-  }
-
-  get description(): string {
-    if (
-      this._connectionController.getActiveConnectionId() === this.connectionId
-    ) {
-      if (this._connectionController.isDisconnecting()) {
-        return 'disconnecting...';
-      }
-
-      return 'connected';
-    }
-
-    if (
-      this._connectionController.isConnecting() &&
-      this._connectionController.getConnectingConnectionId() ===
-        this.connectionId
-    ) {
-      return 'connecting...';
-    }
-
-    return '';
+    this.tooltip = connectionController.getSavedConnectionName(this.connectionId);
+    this.description = connectionController.getConnectionStatusStringForConnection(
+      this.connectionId
+    );
+    this.iconPath = getIconPath(
+      connectionController.getActiveConnectionId() === this.connectionId
+    );
   }
 
   getTreeItem(element: ConnectionTreeItem): ConnectionTreeItem {
@@ -174,27 +169,6 @@ export default class ConnectionTreeItem extends vscode.TreeItem
     return Object.values(this._childrenCache);
   }
 
-  get iconPath():
-    | string
-    | vscode.Uri
-    | { light: string | vscode.Uri; dark: string | vscode.Uri } {
-    const LIGHT = path.join(getImagesPath(), 'light');
-    const DARK = path.join(getImagesPath(), 'dark');
-
-    if (
-      this._connectionController.getActiveConnectionId() === this.connectionId
-    ) {
-      return {
-        light: path.join(LIGHT, 'connection-active.svg'),
-        dark: path.join(DARK, 'connection-active.svg')
-      };
-    }
-    return {
-      light: path.join(LIGHT, 'connection-inactive.svg'),
-      dark: path.join(DARK, 'connection-inactive.svg')
-    };
-  }
-
   onDidCollapse(): void {
     this.isExpanded = false;
     this.cacheIsUpToDate = false;

src/explorer/connectionTreeItem.ts

@@ -8,6 +8,16 @@ import CollectionTreeItem from './collectionTreeItem';
 import TreeItemParent from './treeItemParentInterface';
 import { getImagesPath } from '../extensionConstants';
 
+function getIconPath(): { light: string; dark: string } {
+  const LIGHT = path.join(getImagesPath(), 'light');
+  const DARK = path.join(getImagesPath(), 'dark');
+
+  return {
+    light: path.join(LIGHT, 'database.svg'),
+    dark: path.join(DARK, 'database.svg')
+  };
+}
+
 export default class DatabaseTreeItem extends vscode.TreeItem
   implements TreeItemParent, vscode.TreeDataProvider<DatabaseTreeItem> {
   contextValue = 'databaseTreeItem';
@@ -40,10 +50,9 @@ export default class DatabaseTreeItem extends vscode.TreeItem
     this.isExpanded = isExpanded;
     this.cacheIsUpToDate = cacheIsUpToDate;
     this._childrenCache = existingChildrenCache;
-  }
 
-  get tooltip(): string {
-    return this.databaseName;
+    this.iconPath = getIconPath();
+    this.tooltip = this.databaseName;
   }
 
   getTreeItem(element: DatabaseTreeItem): DatabaseTreeItem {
@@ -140,19 +149,6 @@ export default class DatabaseTreeItem extends vscode.TreeItem
     return Object.values(this._childrenCache);
   }
 
-  get iconPath():
-    | string
-    | vscode.Uri
-    | { light: string | vscode.Uri; dark: string | vscode.Uri } {
-    const LIGHT = path.join(getImagesPath(), 'light');
-    const DARK = path.join(getImagesPath(), 'dark');
-
-    return {
-      light: path.join(LIGHT, 'database.svg'),
-      dark: path.join(DARK, 'database.svg')
-    };
-  }
-
   onDidCollapse(): void {
     this.isExpanded = false;
     this.cacheIsUpToDate = false;