diff --git a/packages/playwright-ct-angular/index.d.ts b/packages/playwright-ct-angular/index.d.ts index 6b8e11deda..b97bb64af2 100644 --- a/packages/playwright-ct-angular/index.d.ts +++ b/packages/playwright-ct-angular/index.d.ts @@ -49,9 +49,6 @@ export interface MountOptions { } export interface MountTemplateOptions extends MountOptions { - /** - * @deprecated 🚧 Work in progress. - */ imports?: Type[]; } @@ -64,9 +61,6 @@ interface MountResult extends Locator { } export interface ComponentFixtures { - /** - * @deprecated 🚧 Work in progress. - */ mount( template: string, options?: MountTemplateOptions diff --git a/packages/playwright-ct-angular/registerSource.mjs b/packages/playwright-ct-angular/registerSource.mjs index ada7aee01d..55f5446627 100644 --- a/packages/playwright-ct-angular/registerSource.mjs +++ b/packages/playwright-ct-angular/registerSource.mjs @@ -17,6 +17,11 @@ // @ts-check // This file is injected into the registry as text, no dependencies are allowed. +/** + * @typedef {{type: string} & import('./index').MountTemplateOptions} TemplateInfo + * @typedef {{type: import('@angular/core').Type} & import('./index').MountOptions | TemplateInfo} ComponentInfo + */ + import '@angular/compiler'; import 'zone.js'; import { @@ -81,14 +86,17 @@ const __pwOutputSubscriptionRegistry = new WeakMap(); /** @type {Map} */ const __pwFixtureRegistry = new Map(); + /** - * @param {{type: import('@angular/core').Type} & import('./index').MountOptions | {type: string} & import('./index').MountTemplateOptions } component + * @param {ComponentInfo} component */ async function __pwRenderComponent(component) { let componentClass = component.type; if (typeof componentClass === 'string') { + const templateInfo = /** @type {TemplateInfo} */(component); componentClass = defineComponent({ + imports: templateInfo.imports, selector: 'pw-template-component', standalone: true, template: componentClass diff --git a/tests/components/ct-angular/tests/template.spec.ts b/tests/components/ct-angular/tests/template.spec.ts index 2c1a86bc9b..50310a7e41 100644 --- a/tests/components/ct-angular/tests/template.spec.ts +++ b/tests/components/ct-angular/tests/template.spec.ts @@ -7,15 +7,15 @@ test('render a template', async ({ mount }) => { await expect(component.getByRole('heading')).toContainText('2'); }) -test.skip('render a template with child components', async ({ mount }) => { +test('render a template with child components', async ({ mount }) => { const component = await mount('', { imports: [ButtonComponent] }); - await expect(component.getByRole('button')).toContainText('Title'); + await expect(component.getByRole('button')).toContainText('Click'); }) -test.skip('render a template with inputs', async ({ mount }) => { +test('render a template with inputs', async ({ mount }) => { const component = await mount('', { imports: [ButtonComponent], props: { @@ -23,12 +23,12 @@ test.skip('render a template with inputs', async ({ mount }) => { } }); - await expect(component.getByRole('button')).toContainText('Title'); + await expect(component.getByRole('button')).toContainText('Click'); }) -test.skip('render a template with outputs', async ({ mount }) => { +test('render a template with outputs', async ({ mount }) => { let _message: string; - const component = await mount('', { + const component = await mount('', { imports: [ButtonComponent], props: { title: 'Click', @@ -38,5 +38,7 @@ test.skip('render a template with outputs', async ({ mount }) => { } }); + component.getByRole('button').click(); + await expect(async () => {expect(_message).toBe('hello')}).toPass(); }) \ No newline at end of file