diff --git a/packages/playwright-ct-angular/index.d.ts b/packages/playwright-ct-angular/index.d.ts index 92e774ee6b..29a43c4c77 100644 --- a/packages/playwright-ct-angular/index.d.ts +++ b/packages/playwright-ct-angular/index.d.ts @@ -25,7 +25,7 @@ import type { } from '@playwright/test'; import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { InlineConfig } from 'vite'; -import type { Type } from '@angular/core'; +import type { Provider, Type } from '@angular/core'; export type PlaywrightTestConfig = Omit, 'use'> & { use?: BasePlaywrightTestConfig['use'] & { @@ -43,6 +43,7 @@ type ComponentEvents = Record; export interface MountOptions { props?: Partial | Record, // TODO: filter props and handle signals + providers?: Provider[], slots?: ComponentSlots; on?: ComponentEvents; hooksConfig?: HooksConfig; diff --git a/packages/playwright-ct-angular/registerSource.mjs b/packages/playwright-ct-angular/registerSource.mjs index 546bc8851c..b9801b6c61 100644 --- a/packages/playwright-ct-angular/registerSource.mjs +++ b/packages/playwright-ct-angular/registerSource.mjs @@ -97,9 +97,9 @@ async function __pwRenderComponent(component) { if (__pwIsTemplate(component)) { const templateInfo = /** @type {TemplateInfo} */(component); componentClass = defineComponent({ - imports: templateInfo.imports, - selector: 'pw-template-component', standalone: true, + selector: 'pw-template-component', + imports: templateInfo.imports, template: templateInfo.type, })(class {}); } else { @@ -112,6 +112,7 @@ async function __pwRenderComponent(component) { TestBed.configureTestingModule({ imports: [componentClass], + providers: component.providers, }); await TestBed.compileComponents(); diff --git a/tests/components/ct-angular/tests/providers.spec.ts b/tests/components/ct-angular/tests/providers.spec.ts new file mode 100644 index 0000000000..476abc619b --- /dev/null +++ b/tests/components/ct-angular/tests/providers.spec.ts @@ -0,0 +1,9 @@ +import { InjectComponent, TOKEN } from "@/components/inject.component"; +import { expect, test } from "@playwright/experimental-ct-angular"; + +test('inject a token', async ({ mount }) => { + const component = await mount(InjectComponent, { + providers: [{ provide: TOKEN, useValue: { text: 'has been overwritten' }}] + }); + await expect(component).toHaveText('has been overwritten'); +});