angular: update angular API (#1413)

Author: timdeschryver

Diff for: docs/angular-testing-library/api.mdx

@@ -76,58 +76,40 @@ export async function render<WrapperType = WrapperComponent>(
 
 ## Component RenderOptions
 
-### `componentInputs`
 
-An object to set `@Input` properties of the component. Uses `setInput` to set
-the input property. Throws if the component property is not annotated with the
-`@Input` attribute.
+### `inputs`
 
-**default** : `{}`
+An object to set `@Input` or `input()` properties of the component.
 
-**example**:
+**default** : `{}`
 
 ```typescript
 await render(AppComponent, {
-  componentInputs: {
+  inputs: {
     counterValue: 10,
+    // explicitly define aliases using `aliasedInput`
+    ...aliasedInput('someAlias', 'someValue'),
   },
 })
 ```
 
-### `componentOutputs`
-
-An object to set `@Output` properties of the component.
-
-**default** : `{}`
-
-**example**:
-
-```typescript
-await render(AppComponent, {
-  componentOutputs: {
-    clicked: (value) => { ... }
-  }
-})
-```
-
-### `componentProperties`
+### `on`
 
-An object to set `@Input` and `@Output` properties of the component. Doesn't
-have a fine-grained control as `componentInputs` and `componentOutputs`.
+An object with callbacks to subscribe to `EventEmitters` and `Observables` of
+the component.
 
 **default** : `{}`
 
-**example**:
+```ts
+// using a manual callback
+const sendValue = (value) => { ... }
+// using a (jest) spy
+const sendValueSpy = jest.fn()
 
-```typescript
 await render(AppComponent, {
-  componentProperties: {
-    // an input
-    counterValue: 10,
-    // an output
-    send: (value) => { ... }
-    // a public property
-    name: 'Tim'
+  on: {
+    send: (value) => sendValue(value),
+    send: sendValueSpy
   }
 })
 ```
@@ -157,7 +139,8 @@ Set the defer blocks behavior.
 For more info see the
 [Angular docs](https://angular.io/api/core/testing/DeferBlockBehavior)
 
-**default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different from the Angular default of `DeferBlockBehavior.Playthrough`)
+**default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different
+from the Angular default of `DeferBlockBehavior.Playthrough`)
 
 **example**:
 
@@ -403,6 +386,64 @@ await render(AppComponent, {
 })
 ```
 
+
+### ~~`componentInputs`~~ (deprecated)
+
+An object to set `@Input` properties of the component. Uses `setInput` to set
+the input property. Throws if the component property is not annotated with the
+`@Input` attribute.
+
+**default** : `{}`
+
+**example**:
+
+```typescript
+await render(AppComponent, {
+  componentInputs: {
+    counterValue: 10,
+  },
+})
+```
+
+### ~~`componentOutputs`~~ (deprecated)
+
+An object to set `@Output` properties of the component.
+
+**default** : `{}`
+
+**example**:
+
+```typescript
+await render(AppComponent, {
+  componentOutputs: {
+    clicked: (value) => { ... }
+  }
+})
+```
+
+### ~~`componentProperties`~~ (deprecated)
+
+An object to set `@Input` and `@Output` properties of the component. Doesn't
+have a fine-grained control as `inputs` and `on`.
+
+**default** : `{}`
+
+**example**:
+
+```typescript
+await render(AppComponent, {
+  componentProperties: {
+    // an input
+    counterValue: 10,
+    // an output
+    send: (value) => { ... }
+    // a public property
+    name: 'Tim'
+  }
+})
+```
+
+
 ## `RenderResult`
 
 ### `container`
@@ -430,13 +471,15 @@ properties that are not defined are cleared.
 
 ```typescript
 const {rerender} = await render(Counter, {
-  componentInputs: {count: 4, name: 'Sarah'},
+  inputs: {count: 4, name: 'Sarah'},
 })
 
 expect(screen.getByTestId('count-value').textContent).toBe('4')
 expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
 
-await rerender({componentInputs: {count: 7}})
+await rerender({
+  inputs: {count: 7}
+})
 
 // count is updated to 7
 expect(screen.getByTestId('count-value').textContent).toBe('7')
@@ -449,13 +492,13 @@ input properties that aren't provided won't be cleared.
 
 ```typescript
 const {rerender} = await render(Counter, {
-  componentInputs: {count: 4, name: 'Sarah'},
+  inputs: {count: 4, name: 'Sarah'},
 })
 
 expect(screen.getByTestId('count-value').textContent).toBe('4')
 expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
 
-await rerender({componentInputs: {count: 7}, partialUpdate: true})
+await rerender({inputs: {count: 7}, partialUpdate: true})
 
 // count is updated to 7
 expect(screen.getByTestId('count-value').textContent).toBe('7')