Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ct-angular): render template with child components

Browse source
This commit is contained in:
Younes Jaaidi 2024-02-23 17:23:31 +01:00
parent e024fba04f
commit fdf8595dfc
No known key found for this signature in database
GPG key ID: 3126C5717BDF3241
3 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/playwright-ct-angular/index.d.ts vendored
View file

@ -49,9 +49,6 @@ export interface MountOptions<HooksConfig extends JsonObject, Component> {
}
export interface MountTemplateOptions<HooksConfig extends JsonObject, Component> extends MountOptions<HooksConfig, Component> {
/**
* @deprecated 🚧 Work in progress.
*/
imports?: Type<unknown>[];
}
@ -64,9 +61,6 @@ interface MountResult<Component> extends Locator {
}
export interface ComponentFixtures {
/**
* @deprecated 🚧 Work in progress.
*/
mount<HooksConfig extends JsonObject, Component = unknown>(
template: string,
options?: MountTemplateOptions<HooksConfig, Component>

10
packages/playwright-ct-angular/registerSource.mjs
View file

@ -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<unknown>} & import('./index').MountOptions | TemplateInfo} ComponentInfo
*/
import '@angular/compiler';
import 'zone.js';
import {
@ -81,14 +86,17 @@ const __pwOutputSubscriptionRegistry = new WeakMap();
/** @type {Map<string, import('@angular/core/testing').ComponentFixture>} */
const __pwFixtureRegistry = new Map();
/**
* @param {{type: import('@angular/core').Type<unknown>} & 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

14
tests/components/ct-angular/tests/template.spec.ts
View file

@ -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('<app-button title="Click"/>', {
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('<app-button [title]="title"/>', {
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('<app-button (submit)="onSubmit()"/>', {
const component = await mount('<app-button (submit)="onSubmit($event)"/>', {
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();
})