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

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

@ -17,6 +17,11 @@
// @ts-check // @ts-check
// This file is injected into the registry as text, no dependencies are allowed. // 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 '@angular/compiler';
import 'zone.js'; import 'zone.js';
import { import {
@ -81,14 +86,17 @@ const __pwOutputSubscriptionRegistry = new WeakMap();
/** @type {Map<string, import('@angular/core/testing').ComponentFixture>} */ /** @type {Map<string, import('@angular/core/testing').ComponentFixture>} */
const __pwFixtureRegistry = new Map(); 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) { async function __pwRenderComponent(component) {
let componentClass = component.type; let componentClass = component.type;
if (typeof componentClass === 'string') { if (typeof componentClass === 'string') {
const templateInfo = /** @type {TemplateInfo} */(component);
componentClass = defineComponent({ componentClass = defineComponent({
imports: templateInfo.imports,
selector: 'pw-template-component', selector: 'pw-template-component',
standalone: true, standalone: true,
template: componentClass 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'); 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"/>', { const component = await mount('<app-button title="Click"/>', {
imports: [ButtonComponent] 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"/>', { const component = await mount('<app-button [title]="title"/>', {
imports: [ButtonComponent], imports: [ButtonComponent],
props: { 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; let _message: string;
const component = await mount('<app-button (submit)="onSubmit()"/>', { const component = await mount('<app-button (submit)="onSubmit($event)"/>', {
imports: [ButtonComponent], imports: [ButtonComponent],
props: { props: {
title: 'Click', 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(); await expect(async () => {expect(_message).toBe('hello')}).toPass();
}) })