test(ct-angular): add tests for template rendering

packages/playwright-ct-angular/index.d.ts

@@ -48,6 +48,13 @@ export interface MountOptions<HooksConfig extends JsonObject, Component> {
   hooksConfig?: HooksConfig;
 }
 
+export interface MountTemplateOptions<HooksConfig extends JsonObject, Component> extends MountOptions<HooksConfig, Component> {
+  /**
+  * @deprecated 🚧 Work in progress.
+  */
+  imports?: Type<unknown>[];
+}
+
 interface MountResult<Component> extends Locator {
   unmount(): Promise<void>;
   update(options: {
@@ -57,6 +64,13 @@ interface MountResult<Component> extends Locator {
 }
 
 export interface ComponentFixtures {
+  /**
+  * @deprecated 🚧 Work in progress.
+  */
+  mount<HooksConfig extends JsonObject, Component = unknown>(
+    template: string,
+    options?: MountTemplateOptions<HooksConfig, Component>
+  ): Promise<MountResult<Component>>;
   mount<HooksConfig extends JsonObject, Component = unknown>(
     component: Type<Component>,
     options?: MountOptions<HooksConfig, Component>

tests/components/ct-angular/src/components/button.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   standalone: true,
-  selector: 'button-component',
+  selector: 'app-button',
   template: `
   <button (click)="submit.emit('hello')">{{title}}</button>
   `

tests/components/ct-angular/tests/slots.spec.ts

@@ -14,7 +14,7 @@ test('render a default slot', async ({ mount }) => {
 test('render a component as slot', async ({ mount }) => {
   const component = await mount(DefaultSlotComponent, {
     slots: {
-      default: '<button-component title="Submit" />', // component is registered globally in /playwright/index.ts
+      default: '<app-button title="Submit" />', // component is registered globally in /playwright/index.ts
     },
   });
   await expect(component).toContainText('Submit');

tests/components/ct-angular/tests/template.spec.ts

@@ -0,0 +1,42 @@
+import { ButtonComponent } from "@/components/button.component";
+import { expect, test } from "@playwright/experimental-ct-angular"
+
+test.skip('render a template', async ({ mount }) => {
+  const component = await mount('<h1>Hello</h1>');
+
+  await expect(component.getByRole('heading')).toContainText('Hello');
+})
+
+test.skip('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');
+})
+
+test.skip('render a template with inputs', async ({ mount }) => {
+  const component = await mount('<app-button [title]="title"/>', {
+    imports: [ButtonComponent],
+    props: {
+      title: 'Click',
+    }
+  });
+
+  await expect(component.getByRole('button')).toContainText('Title');
+})
+
+test.skip('render a template with outputs', async ({ mount }) => {
+  let _message: string;
+  const component = await mount('<app-button (submit)="onSubmit()"/>', {
+    imports: [ButtonComponent],
+    props: {
+      title: 'Click',
+      onSubmit(message: string) {
+        _message = message;
+      }
+    }
+  });
+
+  await expect(async () => {expect(_message).toBe('hello')}).toPass();
+})