Added extras project, added Services hooks and added onError listener for all hooks

@bellatrix/appium/tsconfig.json

@@ -3,10 +3,6 @@
     "baseUrl": "src",
     "rootDir": "src",
     "outDir": "lib",
-    "paths": {
-      "*": [ "@bellatrix/appium/*" ],
-      "@bellatrix/core/*": [ "../../core/src/*" ]
-    },
     "lib": [ "ESNext" ],
     "module": "esnext",
     "target": "esnext",
@@ -24,9 +20,6 @@
     "forceConsistentCasingInFileNames": true,
     "allowJs": false
   },
-  "references": [
-    { "path": "../core" }
-  ],
   "include": ["**/*.ts"],
   "exclude": ["node_modules"]
 }

@bellatrix/core/src/types/config.ts

@@ -45,7 +45,7 @@ export type BellatrixConfigurationOverride = BellatrixConfiguration
 //             "delayBeforeAction": 0
 //         },
 //         "executionSettings": {
-//             "browserAutomationTool": "playwright", // selenium, cypress
+//             "browserController": "playwright", // selenium, cypress
 //             "browser": "chrome", // firefox, safari, edge
 //             "headless": false,
 //             "executionType": "local" // remote

@bellatrix/extras/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@bellatrix/extras",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    "./hooks": "./src/hooks/index.ts",
+    "./plugins": "./src/plugins/index.ts"
+  },
+  "dependencies": {
+    "@bellatrix/core": "file:../core",
+    "@bellatrix/web": "file:../web"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

@bellatrix/web/src/components/hooks/DefaultWebComponentHooks.ts → @bellatrix/extras/src/hooks/ExtraWebHooks.ts

@@ -1,10 +1,10 @@
 import { WebComponentHooks } from '@bellatrix/web/components/utilities';
 import { Anchor, Button, CheckBox, ColorInput, DateInput, DateTimeInput, EmailField, FileInput, MonthInput, NumberInput, PasswordField, PhoneField, RangeInput, SearchField, Select, TextArea, TextField, TimeInput, UrlField, WebComponent, WeekInput } from '@bellatrix/web/components';
 
-export class DefaultWebComponentHooks {
+// TODO: maybe decouple it in different web-extras plugin so extras does not import @bellatrix/web too?
+export class ExtraWebHooks {
     static addComponentBDDLogging(): void {
-        const locale = Intl.DateTimeFormat().resolvedOptions().locale;// TODO: make it configurable
-        const shouldObfuscatePassword = true; // TODO: add as option in configuration
+        const locale = Intl.DateTimeFormat().resolvedOptions().locale; // TODO: add locale option in the config
 
         WebComponentHooks.addListenerTo(Anchor).before('click', (anchor) => console.log(`clicking ${anchor.componentName}`));
         WebComponentHooks.addListenerTo(Button).before('click', (button) => console.log(`clicking ${button.componentName}`));
@@ -17,7 +17,7 @@ export class DefaultWebComponentHooks {
         WebComponentHooks.addListenerTo(FileInput).before('upload', (fileInput, filePath) => console.log(`uploading '${filePath}' into ${fileInput.componentName}`));
         WebComponentHooks.addListenerTo(MonthInput).before('setMonth', (monthInput, year, month) => console.log(`setting ${monthInput} to ${new Date(year, month - 1).toLocaleDateString(locale, { month: 'long', year: 'numeric' })}`));
         WebComponentHooks.addListenerTo(NumberInput).before('setNumber', (numberInput, number) => console.log(`setting ${numberInput.componentName} to ${number}`));
-        WebComponentHooks.addListenerTo(PasswordField).before('setPassword', (passwordField, password) => console.log(`typing ${shouldObfuscatePassword ? '********' : password} into ${passwordField.componentName}`));
+        WebComponentHooks.addListenerTo(PasswordField).before('setPassword', (passwordField, _) => console.log(`typing '********' into ${passwordField.componentName}`));
         WebComponentHooks.addListenerTo(PhoneField).before('setPhone', (phoneField, phone) => console.log(`typing '${phone}' into ${phoneField.componentName}`));
         WebComponentHooks.addListenerTo(RangeInput).before('setValue', (rangeInput, value) => console.log(`setting ${rangeInput.componentName} to ${value}`));
         WebComponentHooks.addListenerTo(SearchField).before('setSearch', (searchField, search) => console.log(`typing '${search}' into ${searchField.componentName}`));
@@ -29,7 +29,8 @@ export class DefaultWebComponentHooks {
         WebComponentHooks.addListenerTo(TimeInput).before('setTime', (timeInput, hours, minutes, seconds) => console.log(`setting ${timeInput.componentName} to ${[hours, minutes, seconds].map(n => String(n ?? 0).padStart(2, '0')).join(':')}`));
         WebComponentHooks.addListenerTo(UrlField).before('setUrl', (urlField, url) => console.log(`typing '${url}' into ${urlField.componentName}`));
         WebComponentHooks.addListenerTo(WeekInput).before('setWeek', (weekInput, year, weekNumber) => console.log(`setting ${weekInput.componentName} to ${year}-W${weekNumber.toString().padStart(2, '0')}`));
-        WebComponentHooks.addListenerTo(WebComponent).before('scrollToVisible', (component) => console.log(`scrolling ${component} into view`));
-        WebComponentHooks.addListenerTo(WebComponent).before('hover', (component) => console.log(`hovering ${component}`)); // TODO: add focus method?
+        WebComponentHooks.addListenerTo(WebComponent).before('scrollIntoView', (component) => console.log(`scrolling ${component} into view`));
+        WebComponentHooks.addListenerTo(WebComponent).before('hover', (component) => console.log(`hovering ${component}`));
+        WebComponentHooks.addListenerTo(WebComponent).before('focus', (component) => console.log(`focusing ${component}`));
     }
 }

@bellatrix/extras/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './ExtraWebHooks';

@bellatrix/extras/src/plugins/LogLifecyclePlugin.ts

@@ -0,0 +1,13 @@
+import { Plugin } from '@bellatrix/core/infrastructure';
+import { TestMetadata } from '@bellatrix/core/test/props';
+
+export class LogLifecyclePlugin extends Plugin {
+    override async preBeforeTest(testMetadata: TestMetadata): Promise<void> {
+        console.log('\n==================================================================================\n' +
+            `starting test: ${testMetadata.suiteClass.name} > ${testMetadata.testMethod.name}\n`);
+    }
+
+    override async postAfterTest(_: TestMetadata): Promise<void> {
+        console.log('\n==================================================================================\n');
+    }
+}

@bellatrix/extras/src/plugins/index.ts

@@ -0,0 +1 @@
+export * from './LogLifecyclePlugin';

@bellatrix/extras/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "rootDir": "src",
+    "outDir": "lib",
+    "lib": [ "ESNext", "DOM" ],
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "noImplicitOverride": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "composite": true,
+    "sourceMap": true,
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": false
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}

@bellatrix/web/package.json

@@ -11,10 +11,12 @@
     "./infrastructure": "./src/infrastructure/index.ts",
     "./pages": "./src/pages/index.ts",
     "./pages/decorators": "./src/pages/decorators/index.ts",
-    "./infrastructure/browserautomationtools/core": "./src/infrastructure/browserautomationtools/core/index.ts",
-    "./infrastructure/browserautomationtools/playwright": "./src/infrastructure/browserautomationtools/playwright/index.ts",
-    "./infrastructure/browserautomationtools/selenium": "./src/infrastructure/browserautomationtools/selenium/index.ts",
+    "./infrastructure/browsercontroller/core": "./src/infrastructure/browsercontroller/core/index.ts",
+    "./infrastructure/browsercontroller/playwright": "./src/infrastructure/browsercontroller/playwright/index.ts",
+    "./infrastructure/browsercontroller/selenium": "./src/infrastructure/browsercontroller/selenium/index.ts",
     "./services": "./src/services/index.ts",
+    "./services/decorators": "./src/services/decorators/index.ts",
+    "./services/utilities": "./src/services/utilities/index.ts",
     "./plugins": "./src/plugins/index.ts",
     "./test": "./src/test/index.ts",
     "./types": "./src/types/index.ts",

@bellatrix/web/src/components/core/ComponentsList.ts

@@ -1,7 +1,7 @@
-import { BrowserAutomationTool } from '@bellatrix/web/infrastructure/browserautomationtools/core';
+import { BrowserController } from '@bellatrix/web/infrastructure/browsercontroller/core';
+import { resolveParentElement } from '@bellatrix/web/components/decorators';
 import { FindStrategy } from '@bellatrix/web/findstrategies';
 import { ServiceLocator } from '@bellatrix/core/utilities';
-import { resolveParentElement } from '../decorators/BellatrixWebComponent';
 import { ShadowRootContext, WebComponent } from '.';
 
 import type { Ctor } from '@bellatrix/core/types';
@@ -11,11 +11,11 @@ export class ComponentsList<T extends WebComponent> {
     private _foundAll: boolean = false;
     private _type: Ctor<T, ConstructorParameters<typeof WebComponent>>;
     private _findStrategy: FindStrategy;
-    private _driver: BrowserAutomationTool;
+    private _driver: BrowserController;
     private _parentComponent?: WebComponent | ShadowRootContext;
     private _componentName?: string;
 
-    constructor(type: Ctor<T, ConstructorParameters<typeof WebComponent>>, findStrategy: FindStrategy, driver: BrowserAutomationTool, parentComponent?: WebComponent | ShadowRootContext, componentName?: string) {
+    constructor(type: Ctor<T, ConstructorParameters<typeof WebComponent>>, findStrategy: FindStrategy, driver: BrowserController, parentComponent?: WebComponent | ShadowRootContext, componentName?: string) {
         this._type = type;
         this._findStrategy = findStrategy;
         this._driver = driver;
@@ -31,7 +31,7 @@ export class ComponentsList<T extends WebComponent> {
     async get(index: number): Promise<T>;
     async get(index?: number): Promise<T | T[]> {
         if (index === undefined && !this._foundAll) {
-            const searchContext = this._parentComponent ? await resolveParentElement(this._parentComponent) : ServiceLocator.resolve(BrowserAutomationTool);
+            const searchContext = this._parentComponent ? await resolveParentElement(this._parentComponent) : ServiceLocator.resolve(BrowserController);
             const elements = await searchContext.findElements(this._findStrategy.convert());
             const components = elements.map((element, index) => {
                 const findStrategy = this.cloneFindStrategyWithUpdatedIndex(this._findStrategy, index);

@bellatrix/web/src/components/core/ShadowRootContext.ts

@@ -1,15 +1,15 @@
-import { BrowserAutomationTool, WebElement } from '@bellatrix/web/infrastructure/browserautomationtools/core';
+import { BrowserController, WebElement } from '@bellatrix/web/infrastructure/browsercontroller/core';
 import { ComponentService } from '@bellatrix/web/services';
 
 import type { Ctor } from '@bellatrix/core/types';
 import { WebComponent } from '.';
 
 export class ShadowRootContext<DOMType extends ShadowRoot = ShadowRoot> {
     private _cachedElement: WebElement;
-    private _driver: BrowserAutomationTool;
+    private _driver: BrowserController;
     private _parentComponent: WebComponent | ShadowRootContext;
 
-    constructor(driver: BrowserAutomationTool, parentComponent: WebComponent | ShadowRootContext, cachedElement: WebElement) {
+    constructor(driver: BrowserController, parentComponent: WebComponent | ShadowRootContext, cachedElement: WebElement) {
         this._driver = driver;
         this._parentComponent = parentComponent;
         this._cachedElement = cachedElement;

@bellatrix/web/src/components/core/WebComponent.ts

@@ -1,4 +1,4 @@
-import { BrowserAutomationTool, WebElement } from '@bellatrix/web/infrastructure/browserautomationtools/core';
+import { BrowserController, WebElement } from '@bellatrix/web/infrastructure/browsercontroller/core';
 import { Validator, StringValidator, NumberValidator, UnknownValidator, BooleanValidator } from '@bellatrix/web/validators';
 import { BellatrixWebComponent } from '@bellatrix/web/components/decorators';
 import { FindStrategy } from '@bellatrix/web/findstrategies';
@@ -9,21 +9,21 @@ import type { Ctor, MethodNamesStartingWith } from '@bellatrix/core/types';
 import type { HtmlAttribute } from '@bellatrix/web/types';
 
 @BellatrixWebComponent
-export class WebComponent<HTMLType extends Element = Element> {
+export class WebComponent<HTMLType extends HTMLElement = HTMLElement> {
     private _cachedElement!: WebElement;
     private _wait: ComponentWaitService;
     private _findStrategy: FindStrategy;
-    private _driver: BrowserAutomationTool;
+    private _driver: BrowserController;
     private _parentComponent?: WebComponent | ShadowRootContext;
     private _componentName?: string;
 
-    constructor(findStrategy: FindStrategy, driver: BrowserAutomationTool, parentComponent?: WebComponent | ShadowRootContext, cachedElement?: WebElement, componentName?: string) {
+    constructor(findStrategy: FindStrategy, driver: BrowserController, parentComponent?: WebComponent | ShadowRootContext, cachedElement?: WebElement, componentName?: string) {
         this._findStrategy = findStrategy;
         this._driver = driver;
         this._parentComponent = parentComponent;
         this._cachedElement = cachedElement!;
         this._componentName = componentName;
-        this._wait = new ComponentWaitService(this);
+        this._wait = new ComponentWaitService(driver, this);
     };
 
     get wrappedElement(): WebElement {
@@ -50,6 +50,10 @@ export class WebComponent<HTMLType extends Element = Element> {
         await this.wrappedElement.hover();
     }
 
+    async focus(): Promise<void> {
+        await this.wrappedElement.focus();
+    }
+
     async getAttribute(name: HtmlAttribute): Promise<string> {
         return await this.wrappedElement.getAttribute(name);
     }
@@ -66,8 +70,8 @@ export class WebComponent<HTMLType extends Element = Element> {
         return await this.wrappedElement.isClickable();
     }
 
-    async scrollToVisible(): Promise<void> { // TODO: maybe rename to scrollIntoView?
-        return await this.wrappedElement.scrollToVisible();
+    async scrollIntoView(): Promise<void> {
+        return await this.wrappedElement.scrollIntoView();
     }
 
     async getOuterHtml(): Promise<string> {