docs: use on in docs (#469)

Closes #468

Author: timdeschryver

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();
 

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,
     },
   });