WebComponent BDD Logging Update

@bellatrix/runner/bellatrix.js

@@ -175,7 +175,7 @@ switch (config.frameworkSettings.testSettings.testFramework) {
         const tsPathsEsmLoaderPath = new URL(import.meta.resolve('ts-paths-esm-loader')).pathname;
         const cliPath = findFilePath([ 'node_modules/playwright/cli.js' ]);
 
-        const cliArgs = [ cliPath, 'test' /* ', --ui' TODO: make it an option */ ];
+        const cliArgs = [ cliPath, 'test' ];
 
         switch (reporter) {
             case 'json': {
@@ -198,6 +198,8 @@ switch (config.frameworkSettings.testSettings.testFramework) {
             case 'xunit': throw new Error('Playwright does not have xUnit reporter');
         }
 
+        // cliArgs.push('--ui'); // TODO: make it an option
+
         spawnSync('node', cliArgs, {
             stdio: 'inherit',
             env: {

@bellatrix/web/package.json

@@ -6,6 +6,7 @@
     "./components": "./src/components/index.ts",
     "./components/decorators": "./src/components/decorators/index.ts",
     "./components/utilities": "./src/components/utilities/index.ts",
+    "./components/hooks": "./src/components/hooks/index.ts",
     "./findstrategies": "./src/findstrategies/index.ts",
     "./infrastructure": "./src/infrastructure/index.ts",
     "./pages": "./src/pages/index.ts",

@bellatrix/web/src/components/advanced/RangeInput.ts

@@ -3,12 +3,12 @@ import { WebComponent } from '@bellatrix/web/components';
 
 @BellatrixWebComponent
 export class RangeInput extends WebComponent<HTMLInputElement> {
-    async getRange(): Promise<number> {
+    async getValue(): Promise<number> {
         return this.evaluate(el => el.valueAsNumber);
     }
 
-    async setRange(range: number): Promise<void> {
-        await this.evaluate(el => el.value = `${range}`);
+    async setValue(value: number): Promise<void> {
+        await this.evaluate(el => el.value = String(value));
     }
 
     async isAutoComplete(): Promise<boolean> {
@@ -38,8 +38,4 @@ export class RangeInput extends WebComponent<HTMLInputElement> {
     async getStep(): Promise<number> {
         return parseFloat(await this.getAttribute('step'));
     }
-
-    async getValue(): Promise<string> {
-        return await this.getAttribute('value');
-    }
 }

@bellatrix/web/src/components/advanced/TimeInput.ts

@@ -7,8 +7,8 @@ export class TimeInput extends WebComponent<HTMLInputElement> {
         return await this.getValue();
     }
 
-    async setTime(hours: number, minutes: number): Promise<void> {
-        await this.evaluate(el => el.value = `${hours}:${minutes}:00`);
+    async setTime(hours: number, minutes: number, seconds: number = 0): Promise<void> {
+        await this.evaluate(el => el.value = `${hours}:${minutes}:${seconds}`);
     }
 
     async getMax(): Promise<string> {

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

@@ -66,7 +66,7 @@ export class WebComponent<HTMLType extends Element = Element> {
         return await this.wrappedElement.isClickable();
     }
 
-    async scrollToVisible(): Promise<void> {
+    async scrollToVisible(): Promise<void> { // TODO: maybe rename to scrollIntoView?
         return await this.wrappedElement.scrollToVisible();
     }
 

@bellatrix/web/src/components/hooks/DefaultWebComponentHooks.ts

@@ -0,0 +1,35 @@
+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 {
+    static addComponentBDDLogging(): void {
+        const locale = Intl.DateTimeFormat().resolvedOptions().locale;// TODO: make it configurable
+        const shouldObfuscatePassword = true; // TODO: add as option in configuration
+
+        WebComponentHooks.addListenerTo(Anchor).before('click', (anchor) => console.log(`clicking ${anchor.componentName}`));
+        WebComponentHooks.addListenerTo(Button).before('click', (button) => console.log(`clicking ${button.componentName}`));
+        WebComponentHooks.addListenerTo(ColorInput).before('setColor', (colorInput, color) => console.log(`setting '${color}' into ${colorInput.componentName}`));
+        WebComponentHooks.addListenerTo(CheckBox).before('check', (checkBox) => console.log(`checking ${checkBox.componentName}`));
+        WebComponentHooks.addListenerTo(CheckBox).before('uncheck', (checkBox) => console.log(`unchecking ${checkBox.componentName}`));
+        WebComponentHooks.addListenerTo(DateInput).before('setDate', (dateInput, date) => console.log(`setting ${dateInput.componentName} to ${date.toLocaleDateString(locale)}`));
+        WebComponentHooks.addListenerTo(DateTimeInput).before('setTime', (dateTimeInput, dateTime) => console.log(`setting ${dateTimeInput.componentName} to ${dateTime.toLocaleString()}`));
+        WebComponentHooks.addListenerTo(EmailField).before('setEmail', (emailField, email) => console.log(`typing '${email}' into ${emailField.componentName}`));
+        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(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}`));
+        WebComponentHooks.addListenerTo(Select).before('selectByText', (select, text) => console.log(`selecting '${text}' from ${select.componentName}`));
+        WebComponentHooks.addListenerTo(Select).before('selectByIndex', (select, index) => console.log(`selecting index ${index} from ${select.componentName}`));
+        WebComponentHooks.addListenerTo(Select).before('selectByValue', (select, value) => console.log(`selecting value="${value}" from ${select.componentName}`));
+        WebComponentHooks.addListenerTo(TextArea).before('setText', (textArea, text) => console.log(`typing '${text}' into ${textArea.componentName}`));
+        WebComponentHooks.addListenerTo(TextField).before('setText', (textField, text) => console.log(`typing '${text}' into ${textField.componentName}`));
+        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?
+    }
+}

@bellatrix/web/src/components/hooks/index.ts

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

example/tests/ProductPurchaseTests.test.ts

@@ -1,14 +1,14 @@
 import { Test, TestClass } from '@bellatrix/web/test';
 import { WebTest } from '@bellatrix/web/infrastructure';
-import { Anchor, Button } from '@bellatrix/web/components';
+import { Button } from '@bellatrix/web/components';
+import { DefaultWebComponentHooks } from '@bellatrix/web/components/hooks';
 import { MainPage, CartPage, CheckoutPage, PurchaseInfo } from '../src/pages';
-import { WebComponentHooks } from '@bellatrix/web/components/utilities';
 
 @TestClass
-class ProductPurchaseTests extends WebTest {
+export class ProductPurchaseTests extends WebTest {
     override async configure(): Promise<void> {
         await super.configure();
-        WebComponentHooks.addListenerTo(Button).before('click', button => console.log(`clicking ${button.componentName}`));
+        DefaultWebComponentHooks.addComponentBDDLogging();
     }
 
     override async afterEach() {