feat: component filters

demo/test/fixtures/components/navigation-bar.component.ts

@@ -1,9 +1,9 @@
-import { Component } from "@iamkenos/kyoko/core";
+import { Component, LocatorFilters } from "@iamkenos/kyoko/core";
 
 export class NavigationBar extends Component {
 
-  constructor() {
-    super("//nav");
+  constructor(filters?: LocatorFilters) {
+    super("//nav", filters);
   }
 
   navItem = (text: string) => this.locator("//ul/li", { hasText: text });

demo/test/fixtures/pages/demo/demo.page.ts

@@ -6,6 +6,6 @@ export class DemoPage extends PageObject {
   title = "Demo Site";
 
   clickSection = () => this.page.locator("//div[contains(@class,'collapsible-header')][text()='Click']/..");
-  hSectionHeader = () => this.page.locator("//h5");
+  sectionHeader = () => this.page.locator("//h5");
   navBar = () => this.page.component(NavigationBar);
 }

src/cli/resources/fixtures/components/modal.component.ts

@@ -1,14 +1,15 @@
-import { Component } from "@iamkenos/kyoko/core";
+import { Component, LocatorFilters } from "@iamkenos/kyoko/core";
 
 export class Modal extends Component {
+
+  constructor(filters?: LocatorFilters) {
+    super("#ouibounce-modal", filters);
+  }
+
   title = () => this.locator("//*[contains(@class,'modal-title')]");
   body = () => this.locator("//*[contains(@class,'modal-body')]");
   footer = () => this.locator("//*[contains(@class,'modal-footer')]");
 
-  constructor() {
-    super("#ouibounce-modal");
-  }
-
   async close() {
     await this.footer().click();
   }

src/commands/locator/command/component.ts

@@ -1,10 +1,11 @@
 
-import type { Locator } from "@commands/locator/types";
-import type { Constructor } from "@common/types";
 import { GenericComponent } from "@core/component";
 
-export function component<T>(this: Locator, Component: Constructor<T>) {
-  const instance: any = new Component();
+import type { Locator, LocatorFilters } from "@commands/locator/types";
+import type { Constructor } from "@common/types";
+
+export function component<T>(this: Locator, Component: Constructor<T>, options?: LocatorFilters) {
+  const instance: any = new Component(options);
   const locator: any = this.locator(instance.root);
   return GenericComponent["create"](locator._selector, instance, locator) as T;
 }

src/commands/locator/types.ts

@@ -67,3 +67,5 @@ export interface Locator extends PlaywrightLocatorType, LocatorClassType {
   selectOption(...args: Parameters<typeof selectOption>): ReturnType<typeof selectOption>;
   uploadFiles(...args: Parameters<typeof uploadFiles>): ReturnType<typeof uploadFiles>;
 }
+
+export type LocatorFilters = Parameters<Locator["locator"]>[1];

src/commands/page/command/component.ts

@@ -1,7 +1,7 @@
-
+import type { LocatorFilters } from "@commands/locator/types";
 import type { Page } from "@commands/page/types";
 import type { Constructor } from "@common/types";
 
-export function component<T>(this: Page, Component: Constructor<T>) {
-  return new Component();
+export function component<T>(this: Page, Component: Constructor<T>, options?: LocatorFilters) {
+  return new Component(options);
 }

src/core/component.ts

@@ -2,19 +2,19 @@ import { Locator as LocatorClass } from "@commands/locator/locator";
 import { propertiesOf } from "@common/utils/object";
 
 import type { Locator as PlaywrightLocatorType } from "@playwright/test";
-import type { Locator } from "@commands/types";
+import type { Locator, LocatorFilters } from "@commands/types";
 import type { Constructor } from "@common/types";
 
 export class GenericComponent {
   private _selector: string;
 
-  constructor(selector: string) {
-    return GenericComponent.create(selector, this);
+  constructor(selector: string, options?: LocatorFilters) {
+    return GenericComponent.create(selector, this, undefined, options);
   }
 
-  private static create(selector: string, prototype: GenericComponent, from?: PlaywrightLocatorType) {
+  private static create(selector: string, prototype: GenericComponent, from?: PlaywrightLocatorType, options?: LocatorFilters) {
     const proto = Object.assign(Object.create(Object.getPrototypeOf(prototype)), prototype);
-    const source = from ? new LocatorClass(from) : _kyk_world.page.locator(selector);
+    const source = from ? new LocatorClass(from) : _kyk_world.page.locator(selector, options);
     const excluded = propertiesOf({}, proto);
     const extend = propertiesOf(source).filter(i => !excluded.includes(i)).concat("_selector");
     extend.forEach(i => proto[i] = source[i]);
@@ -23,9 +23,11 @@ export class GenericComponent {
   }
 
   private chain(from: Proto, instance?: GenericComponent) {
-    const delimiter = " >> ";
-    const target = from._selector.split(delimiter).at(-1);
-    const selector = this._selector.split(delimiter).filter(Boolean).concat(target).join(delimiter);
+    const source = this._selector.replace(this["__proto"]["_selector"], "");
+    const target = from._selector.split(" >> ").at(-1);
+    const selector = source
+      ? this["__proto"].locator(source).locator(target)["_selector"]
+      : this["__proto"].locator(target)["_selector"];
     const chained: any = instance ?? this;
     from._selector = selector;
     chained._selector = selector;
@@ -83,8 +85,8 @@ export class GenericComponent {
     return this.chain(getByTitle) as This<this>;
   }
 
-  component<T>(this: Component, Component: Constructor<T>) {
-    const instance: any = new Component();
+  component<T>(this: Component, Component: Constructor<T>, options?: LocatorFilters) {
+    const instance: any = new Component(options);
     const locator: any = this["__proto"].locator(instance.root);
     return this.chain(locator, instance) as T;
   }
@@ -108,4 +110,4 @@ export class GenericComponent {
 type This<T> = Component & T;
 type Proto = PlaywrightLocatorType & { _selector: string }
 export type Component = GenericComponent & Locator;
-export const Component: new (selector: string) => Component = GenericComponent as any;
+export const Component: new (selector: string, options?: LocatorFilters) => Component = GenericComponent as any;