test(ct): test non-event-emitter outputs

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

@@ -0,0 +1,17 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, Output, inject } from "@angular/core";
+import { Subject, finalize } from "rxjs";
+
+@Component({
+  standalone: true,
+  template: `OutputComponent`,
+})
+export class OutputComponent {
+  @Output() answerChange = new Subject().pipe(
+    /* Detect when observable is unsubscribed from, 
+     * and set a global variable `hasUnsubscribed` to true. */
+    finalize(() => ((this._window as any).hasUnsubscribed = true))
+  );
+
+  private _window = inject(DOCUMENT).defaultView;
+}

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

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-angular';
 import { ButtonComponent } from '@/components/button.component';
+import { OutputComponent } from '@/components/output.component';
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
   const messages: string[] = [];
@@ -14,3 +15,22 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 });
+
+test('unsubscribe from events when the component is unmounted', async ({
+  mount,
+  page,
+}) => {
+  test.skip(true, '🚧 work in progress');
+  const component = await mount(OutputComponent, {
+    on: {
+      answerChange: () => {},
+    },
+  });
+
+  await component.unmount();
+
+  /* Check that the output observable had been unsubscribed from
+   * as it sets a global variable `hasUnusbscribed` to true
+   * when it detects unsubscription. Cf. OutputComponent. */
+  expect(await page.evaluate(() => (window as any).hasUnsubscribed)).toBe(true);
+});