feat(ct): render Angular templates

sand4rt · Feb 23, 2024 · b794edd · b794edd
1 parent 497b786
commit b794edd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git 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
@@ -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 }) => {