Merge pull request #17 from qavajs/test-repository

added test explorer
added page object explorer

Author: AlexGalichenko

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the "qavajs" extension will be documented in this file.
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [0.6.0]
+
+- Addded test explorer support
+- Added page object tree view
+  
 ## [0.5.4]
 
 - Addded logic go invalidate import cache for page objects

README.md

@@ -4,7 +4,7 @@ This is extension based on Cucumber official plugin and enables support of qavaj
 
 ## Features
 
-- Run single scenario
+- VSCode Test Explorer
 - Template Autocomplete
 - Constants Autocomplete
 - Page Object Autocomplete

package-lock.json

@@ -2,7 +2,7 @@
   "name": "qavajs",
   "displayName": "qavajs",
   "description": "qavajs test automation framework vscode extension",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "engines": {
     "vscode": "^1.78.0"
   },
@@ -17,15 +17,48 @@
   "contributes": {
     "commands": [
       {
-        "command": "qavajs.execute",
-        "title": "qavajs run"
+        "command": "pageObject.refresh",
+        "title": "Refresh",
+        "icon": "$(timeline-refresh)"
+      },
+      {
+        "command": "pageObject.copy",
+        "title": "Copy Path",
+        "icon": "$(explorer-view-icon)"
       }
     ],
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "page-object",
+          "title": "qavajs",
+          "icon": "$(symbol-class)"
+        }
+      ]
+    },
+    "views": {
+      "page-object": [
+        {
+          "id": "pageObject",
+          "name": "Page Object",
+          "icon": "$(symbol-class)",
+          "contextualTitle": "page objects"
+        }
+      ]
+    },
     "menus": {
-      "editor/context": [
+      "view/title": [
+        {
+          "command": "pageObject.refresh",
+          "when": "view == pageObject",
+          "group": "navigation"
+        }
+      ],
+      "view/item/context": [
         {
-          "command": "qavajs.execute",
-          "when": "resourceExtname == .feature"
+          "command": "pageObject.copy",
+          "when": "view == pageObject",
+          "group": "inline"
         }
       ]
     },
@@ -95,6 +128,7 @@
   "repository": "https://github.com/qavajs/vscode.git",
   "scripts": {
     "vsce": "vsce package",
+    "prevsce": "npm run package",
     "vscode:prepublish": "npm run package",
     "compile": "webpack",
     "watch": "webpack --watch",
@@ -107,19 +141,19 @@
     "copy-wasms": "mkdir -p dist && cp node_modules/@cucumber/language-service/dist/*.wasm dist"
   },
   "devDependencies": {
-    "@types/mocha": "^10.0.4",
+    "@types/mocha": "^10.0.6",
     "@types/node": "^18.0.0",
     "@types/vscode": "^1.78.0",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vscode/test-electron": "^2.3.6",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vscode/test-electron": "^2.3.9",
     "@vscode/vsce": "^2.23.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "glob": "^10.3.10",
-    "mocha": "^10.2.0",
+    "mocha": "^10.3.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.2",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {

package.json

@@ -0,0 +1,115 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { importFile } from './importFile';
+
+export class PageObjectTreeDataProvider implements vscode.TreeDataProvider<PageObjectItem> {
+  constructor(private poPath: string) { }
+
+  private _onDidChangeTreeData: vscode.EventEmitter<PageObjectItem | undefined | null | void> = new vscode.EventEmitter<PageObjectItem | undefined | null | void>();
+  readonly onDidChangeTreeData: vscode.Event<PageObjectItem | undefined | null | void> = this._onDidChangeTreeData.event;
+
+  refresh(): void {
+    this._onDidChangeTreeData.fire();
+  }
+
+  getTreeItem(element: PageObjectItem): vscode.TreeItem {
+    return element;
+  }
+
+  getChildren(element?: PageObjectItem): Thenable<PageObjectItem[]> {
+    if (this.poPath && vscode.workspace.workspaceFolders) {
+      const cwd = vscode.workspace.workspaceFolders[0].uri.fsPath;
+      const absolutePoPath = path.join(cwd, this.poPath);
+      return importFile(absolutePoPath).then(po => {
+        if (po.default) po = po.default;
+        const data = typeof po === 'function' ? new po() : po;
+
+        if (element) {
+          const component = element.parent[element.label];
+          return this.getComponentProperties(component).map(
+            ([poKey, poValue]: [string, any]) => new PageObjectItem({
+              label: poKey, 
+              locator: poValue.selector,
+              parent: component,
+              isComponent: this.isComponent(poValue),
+              path: `${element.path} > ${this.normalizePath(poKey)}`,
+              isColleciton: poValue.isCollection
+          })
+          )
+        } else {
+          return this.getComponentProperties(data).map(
+            ([poKey, poValue]: [string, any]) => new PageObjectItem({
+              label: poKey, 
+              locator: poValue.selector,
+              parent: data, 
+              isComponent: this.isComponent(poValue),
+              path: this.normalizePath(poKey),
+              isColleciton: poValue.isCollection
+            })
+          )
+        }
+      });
+    }
+    return Promise.resolve([]);
+  }
+
+  getComponentProperties(obj: Object) {
+    return Object.entries(obj).filter(([prop]) => ![
+      'isCollection', 
+      'ignoreHierarchy',
+      'selector'
+    ].includes(prop))
+  }
+
+  isComponent(obj: Object) {
+    return this.getComponentProperties(obj).length > 0
+  }
+
+  normalizePath(label: string) {
+    return label.replace(/([A-Z])/g, ' $1').trim().replace(/\s+/g, ' ')
+  }
+}
+
+class PageObjectItem extends vscode.TreeItem {
+  public readonly label: string;
+  private locator: string;
+  public parent: any;
+  public isComponent: boolean;
+  public path: string;
+  public isColleciton: boolean;
+
+  constructor({
+    label, 
+    locator, 
+    parent, 
+    isComponent,
+    path,
+    isColleciton
+  }: {
+    label: string, 
+    locator: string, 
+    parent: any, 
+    isComponent: boolean,
+    path: string,
+    isColleciton: boolean
+  }) {
+    const collapsibleState = isComponent
+      ? vscode.TreeItemCollapsibleState.Collapsed
+      : vscode.TreeItemCollapsibleState.None;
+
+    super(label, collapsibleState);
+    this.label = label;
+    this.locator = locator;
+    this.parent = parent;
+    this.isComponent = isComponent;
+    this.description = this.locator;
+    this.path = path;
+    this.tooltip = this.path;
+    this.isColleciton = isColleciton;
+
+    this.iconPath = this.isComponent
+      ? new vscode.ThemeIcon('symbol-class')
+      : new vscode.ThemeIcon('symbol-interface');  
+  }
+
+}

src/PageObjectTreeDataProvider.ts

@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import poAutocomplete from './qavaAutocomplete';
-import executeCommand from './executeCommand';
+import testExplorer from './testExplorer';
+import pageObjectTreeView from './pageObjectTreeView';
 
 import { startEmbeddedServer } from './startEmbeddedServer'
 import { LanguageClient, LanguageClientOptions, ServerOptions } from 'vscode-languageclient/node'
@@ -11,8 +12,9 @@ let client: LanguageClient
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export async function activate(context: vscode.ExtensionContext) {
-	executeCommand(context);
+  testExplorer(context);  
 	poAutocomplete(context);
+  pageObjectTreeView(context);
 
 	const serverOptions: ServerOptions = async () =>
     startEmbeddedServer(

src/executeCommand.ts

@@ -0,0 +1,23 @@
+import * as vscode from 'vscode';
+import { PageObjectTreeDataProvider } from './PageObjectTreeDataProvider';
+
+export default async function activate(context: vscode.ExtensionContext) {
+    const config = vscode.workspace.getConfiguration('qavajs');
+    const poPath: string | undefined = config.get('pageObject');
+
+    vscode.window.registerTreeDataProvider(
+        'pageObject',
+        new PageObjectTreeDataProvider(poPath as string)
+    );
+
+    const treeDataProvider = new PageObjectTreeDataProvider(poPath as string);
+    vscode.window.createTreeView('pageObject', { treeDataProvider });
+
+    context.subscriptions.push(vscode.commands.registerCommand('pageObject.copy', (pageObjectItem) => {
+        return vscode.env.clipboard.writeText(pageObjectItem.path)
+    }));
+
+    context.subscriptions.push(vscode.commands.registerCommand('pageObject.refresh', () => {
+        return treeDataProvider.refresh();
+    }));
+}