extended-component-object.ts

extended-component-object.ts

// ./objects/base/component-object-base.ts

export interface IComponentObjectConfig {
  featureName?: string;
  visibleOnMobile: boolean;
  visibleOnDesktop: boolean;
}

export abstract class ComponentObjectBase {
  componentName: string;
  element: string;
  elementToRender: string;
  componentConfig: IComponentObjectConfig = {
    visibleOnDesktop: true,
    visibleOnMobile: true,
  };

  constructor(parentSelector: string, skipParentSelector?: boolean) {
    // Properties of a ComponentObject that do not represent an element, so they don't need a parent selector injected
    const IGNORE_PROPERTIES = ['componentName', 'componentConfig'];

    // This Proxy will prefix the Page (parent) Selector to all selectors defined on implementing classes
    return new Proxy(this, {
      get: (oTarget, key: string) => {
        if (
          oTarget.hasOwnProperty(key) &&
          !skipParentSelector &&
          !IGNORE_PROPERTIES.includes(key) &&
          typeof oTarget[key] === 'string'
        ) {
          if (!parentSelector) {
            console.warn(`Feature ${this.element} has no parentSelector`);
            return oTarget[key];
          }

          return `${parentSelector} ${oTarget[key]}`;
        }

        return oTarget[key];
      },
    });
  }

  render = async () => {
    if (!this.element || !this.elementToRender) {
      throw new Error('please define an element and elementToRender to check if the feature was rendered');
    }

    const shouldRender = await this.shouldRender();
    if (!shouldRender) {
      return;
    }

    const errorMessage = `${this.componentName} did not render`;
    const lastRenderedElement = await $(`${this.element} ${this.elementToRender}`);
    await lastRenderedElement.waitForExist(20000, false, errorMessage);
  };

  shouldRender = async () => {
    if (!this.componentConfig.visibleOnMobile || !this.componentConfig.visibleOnDesktop) {
      const windowSize = (await browser.getWindowSize()) as any;
      const mobileBreakPoint = 576;
      const isMobile = windowSize.width < mobileBreakPoint;

      if (isMobile && !this.componentConfig.visibleOnMobile) {
        return false;
      }

      if (!isMobile && !this.componentConfig.visibleOnDesktop) {
        return false;
      }
    }

    return true
  }
}