angular-testing-library icon indicating copy to clipboard operation
angular-testing-library copied to clipboard

signal-based inputs and componentInputs type

Open xfh opened this issue 1 year ago • 0 comments

Hi

I started migrating some components to signal based input and model functions. Unfortunately, that causes typing issues. RenderComponentOptions declares componentInputs?: Partial<ComponentType> | { [alias: string]: unknown };, which resolves the types as InputSignal or similar.

Would you accept a helper type to unwrap the value of signals? I think this should do the trick:

type ComponentInput<T> = {
    [P in keyof T]?: T[P] extends Signal<infer U>
        ? Partial<U> // If the property is a Signal, apply Partial to the inner type
        : Partial<T[P]>; // Otherwise, apply Partial to the property itself
};

This doesn't help much when using the render function directly, because of the type union for the aliases. But when using a setup function we can declare an input property without the aliases and benefit from better type support. E.g.

function setup(
    componentInputs: ComponentInput<PagesComponent>,
): Promise<RenderResult<PagesComponent>> {
    return render(PagesComponent, {
        componentInputs
    });
}

Obviously, I can do all this without a change in angular-testing-library. I just thought it might become a common issue with growing adoption of signal inputs and wanted to share my workaround.

xfh avatar Jun 26 '24 15:06 xfh