From e024fba04ff98caf86a269384ecc2faec071c754 Mon Sep 17 00:00:00 2001
From: Younes Jaaidi <younes@marmicode.io>
Date: Fri, 23 Feb 2024 16:44:16 +0100
Subject: [PATCH] feat(ct-angular): render simple template

---
 .../playwright-ct-angular/registerSource.mjs  | 20 +++++++++++++------
 .../ct-angular/tests/template.spec.ts         |  6 +++---
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/playwright-ct-angular/registerSource.mjs b/packages/playwright-ct-angular/registerSource.mjs
index 2b6bbf856f..ada7aee01d 100644
--- a/packages/playwright-ct-angular/registerSource.mjs
+++ b/packages/playwright-ct-angular/registerSource.mjs
@@ -59,6 +59,9 @@ window.playwrightUnmount = async rootElement => {
   fixture.nativeElement.replaceChildren();
 };
 
+/**
+ * @param {{type: import('@angular/core').Type<unknown>} & import('./index').MountOptions | {type: string} & import('./index').MountTemplateOptions} component
+ */
 window.playwrightUpdate = async (rootElement, component) => {
   if (component.slots)
     throw new Error('Update slots is not supported yet');
@@ -79,13 +82,18 @@ const __pwOutputSubscriptionRegistry = new WeakMap();
 /** @type {Map<string, import('@angular/core/testing').ComponentFixture>} */
 const __pwFixtureRegistry = new Map();
 /**
- * @param {Component} component
+ * @param {{type: import('@angular/core').Type<unknown>} & import('./index').MountOptions | {type: string} & import('./index').MountTemplateOptions } component
  */
 async function __pwRenderComponent(component) {
-  const componentClass = component.type;
-  if (!componentClass)
-    throw new Error(`Unregistered component: ${componentClass}. Following components are registered: ${[...__pwRegistry.keys()]}`);
+  let componentClass = component.type;
 
+  if (typeof componentClass === 'string') {
+    componentClass = defineComponent({
+      selector: 'pw-template-component',
+      standalone: true,
+      template: componentClass
+    })(class {});
+  }
 
   const componentMetadata = reflectComponentType(componentClass);
   if (!componentMetadata?.isStandalone)
@@ -135,8 +143,8 @@ function __pwUpdateEvents(fixture, events = {}) {
     outputSubscriptionRecord[name]?.unsubscribe();
 
     const subscription = fixture.debugElement.children[0].componentInstance[
-      name
-    ].subscribe((event) => listener(event));
+        name
+    ].subscribe((/** @type {unknown} */ event) => listener(event));
 
     /* Store new subscription. */
     outputSubscriptionRecord[name] = subscription;
diff --git a/tests/components/ct-angular/tests/template.spec.ts b/tests/components/ct-angular/tests/template.spec.ts
index 4b748d3cb0..2c1a86bc9b 100644
--- a/tests/components/ct-angular/tests/template.spec.ts
+++ b/tests/components/ct-angular/tests/template.spec.ts
@@ -1,10 +1,10 @@
 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>');
+test('render a template', async ({ mount }) => {
+  const component = await mount('<h1>{{ 1 + 1 }}</h1>');
 
-  await expect(component.getByRole('heading')).toContainText('Hello');
+  await expect(component.getByRole('heading')).toContainText('2');
 })
 
 test.skip('render a template with child components', async ({ mount }) => {