From d91da7b795f596562acab05c5ef9a9fcaf390247 Mon Sep 17 00:00:00 2001
From: Younes Jaaidi <younes@marmicode.io>
Date: Fri, 23 Feb 2024 16:22:45 +0100
Subject: [PATCH] test(ct-angular): add tests for template rendering

---
 packages/playwright-ct-angular/index.d.ts     | 14 +++++++
 .../src/components/button.component.ts        |  2 +-
 .../components/ct-angular/tests/slots.spec.ts |  2 +-
 .../ct-angular/tests/template.spec.ts         | 42 +++++++++++++++++++
 4 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 tests/components/ct-angular/tests/template.spec.ts

diff --git a/packages/playwright-ct-angular/index.d.ts b/packages/playwright-ct-angular/index.d.ts
index 54a5822bd0..6b8e11deda 100644
--- a/packages/playwright-ct-angular/index.d.ts
+++ b/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>
diff --git a/tests/components/ct-angular/src/components/button.component.ts b/tests/components/ct-angular/src/components/button.component.ts
index 8e74ef0826..ab799244bb 100644
--- a/tests/components/ct-angular/src/components/button.component.ts
+++ b/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>
   `
diff --git a/tests/components/ct-angular/tests/slots.spec.ts b/tests/components/ct-angular/tests/slots.spec.ts
index 8b52342709..36ba30ffdb 100644
--- a/tests/components/ct-angular/tests/slots.spec.ts
+++ b/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');
diff --git a/tests/components/ct-angular/tests/template.spec.ts b/tests/components/ct-angular/tests/template.spec.ts
new file mode 100644
index 0000000000..4b748d3cb0
--- /dev/null
+++ b/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();
+})
\ No newline at end of file