Angular Page Object

page_object.ts

import { ComponentType } from '@angular/cdk/portal';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { DebugElement, InjectionToken } from '@angular/core';
import { ComponentFixture, TestBed, TestModuleMetadata } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Subject } from 'rxjs';

export class Page<T> {
    private _fixture: ComponentFixture<T>;
    constructor(
        private _component: ComponentType<T>,
        private moduleDef: TestModuleMetadata
    ) {
    }

    async setup(moduleDefOverrides: TestModuleMetadata = {}) {
        const def = {
            ...this.moduleDef,
        };
        def.providers = [
            ...(this.moduleDef.providers ?? []),
            ...(moduleDefOverrides.providers ?? [])
        ];
        await TestBed.configureTestingModule(def).compileComponents();
        return TestBed;
    }

    get fixture() {
        return this._fixture ?? (this._fixture = TestBed.createComponent(this._component));
    }

    get component() {
        return this.fixture.componentInstance;
    }

    get loader() {
        return TestbedHarnessEnvironment.loader(this.fixture);
    }

    byId<TElementType extends HTMLElement>(testid: string): ElementHarness<TElementType> {
        const debugElement = this.fixture.debugElement.query(By.css(`[data-testid='${ testid }']`));
        return new ElementHarness<TElementType>(debugElement);
    }

    inject<Y>(token: ComponentType<Y> | InjectionToken<Y>): Y {
        return this.fixture.debugElement.injector.get(token);
    }
}

class ElementHarness<ElementType extends HTMLElement> {
    nativeElement: ElementType = this.debugElement.nativeElement;
    constructor(private debugElement: DebugElement) {

    }

    trigger(eventName: string, data?: any) {
        this.debugElement.triggerEventHandler(eventName, data);
    }

    text() {
        return this.nativeElement.textContent;
    }

    html() {
        return this.nativeElement.innerHTML;
    }

    attribute(qualifiedName: string, value?: string) {
        if (value) {
            this.nativeElement.setAttribute(qualifiedName, value);
        } else {
            return this.nativeElement.getAttribute(qualifiedName);
        }
    }

    byId<TElementType extends HTMLElement>(testid: string): ElementHarness<TElementType> {
        const debugElement = this.debugElement.query(By.css(`[data-testid='${ testid }']`));
        return new ElementHarness<TElementType>(debugElement);
    }

    inject<Y>(token: ComponentType<Y> | InjectionToken<Y>): Y {
        return this.debugElement.injector.get(token);
    }

}