From 40fe4ea066e9253f2382588caecda1aae8fc84d0 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Tue, 23 Jul 2024 20:43:23 +0200
Subject: [PATCH] docs: use on in docs (#469)

Closes #468
---
 .../src/app/examples/02-input-output.spec.ts  | 58 ++++++++++++++++++-
 .../22-signal-inputs.component.spec.ts        |  4 +-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/apps/example-app/src/app/examples/02-input-output.spec.ts b/apps/example-app/src/app/examples/02-input-output.spec.ts
index c193d3e..abc0066 100644
--- a/apps/example-app/src/app/examples/02-input-output.spec.ts
+++ b/apps/example-app/src/app/examples/02-input-output.spec.ts
@@ -7,6 +7,62 @@ test('is possible to set input and listen for output', async () => {
   const user = userEvent.setup();
   const sendValue = jest.fn();
 
+  await render(InputOutputComponent, {
+    componentInputs: {
+      value: 47,
+    },
+    on: {
+      sendValue,
+    },
+  });
+
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const sendControl = screen.getByRole('button', { name: /send/i });
+  const valueControl = screen.getByTestId('value');
+
+  expect(valueControl).toHaveTextContent('47');
+
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  expect(valueControl).toHaveTextContent('50');
+
+  await user.click(sendControl);
+  expect(sendValue).toHaveBeenCalledTimes(1);
+  expect(sendValue).toHaveBeenCalledWith(50);
+});
+
+test.skip('is possible to set input and listen for output with the template syntax', async () => {
+  const user = userEvent.setup();
+  const sendSpy = jest.fn();
+
+  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" />', {
+    imports: [InputOutputComponent],
+    on: {
+      sendValue: sendSpy,
+    },
+  });
+
+  const incrementControl = screen.getByRole('button', { name: /increment/i });
+  const sendControl = screen.getByRole('button', { name: /send/i });
+  const valueControl = screen.getByTestId('value');
+
+  expect(valueControl).toHaveTextContent('47');
+
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  expect(valueControl).toHaveTextContent('50');
+
+  await user.click(sendControl);
+  expect(sendSpy).toHaveBeenCalledTimes(1);
+  expect(sendSpy).toHaveBeenCalledWith(50);
+});
+
+test('is possible to set input and listen for output (deprecated)', async () => {
+  const user = userEvent.setup();
+  const sendValue = jest.fn();
+
   await render(InputOutputComponent, {
     componentInputs: {
       value: 47,
@@ -34,7 +90,7 @@ test('is possible to set input and listen for output', async () => {
   expect(sendValue).toHaveBeenCalledWith(50);
 });
 
-test('is possible to set input and listen for output with the template syntax', async () => {
+test('is possible to set input and listen for output with the template syntax (deprecated)', async () => {
   const user = userEvent.setup();
   const sendSpy = jest.fn();
 
diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
index 113d330..a05ea5b 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
@@ -55,8 +55,8 @@ test('output emits a value', async () => {
       greeting: 'Hello',
       name: 'world',
     },
-    componentOutputs: {
-      submit: { emit: submitFn } as any,
+    on: {
+      submit: submitFn,
     },
   });