add standalone component example (#1132)

Author: timdeschryver

docs/angular-testing-library/api.mdx

@@ -133,6 +133,22 @@ await render(AppComponent, {
 })
 ```
 
+### `ɵcomponentImports`
+
+A collection of imports to override a standalone component's imports with.
+
+**default** : `undefined`
+
+**example**:
+
+```typescript
+await render(AppComponent, {
+    ɵcomponentImports: [
+        MockChildComponent
+    ]
+})
+```
+
 ### `detectChanges`
 
 Will call `detectChanges` when the component is compiled

docs/angular-testing-library/examples.mdx

@@ -56,16 +56,77 @@ describe('Counter', () => {
 })
 ```
 
+## With Standalone Components
+
+Angular Testing Library can also test your standalone components.
+In fact, it even becomes easier because you don't have to set up the whole Angular TestBed.
+This was previously only [possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
+
+Let's migrate the counter component to a standalone component, and let's take a look at how this affects the test.
+
+```ts title="counter.component.ts"
+@Component({
+  selector: 'counter',
+  template: `
+    <button (click)="decrement()">-</button>
+    <span data-testid="count">Current Count: {{ counter }}</span>
+    <button (click)="increment()">+</button>
+  `,
+  standalone: true,
+})
+export class CounterComponent {
+  @Input() counter = 0
+
+  increment() {
+    this.counter += 1
+  }
+
+  decrement() {
+    this.counter -= 1
+  }
+}
+```
+
+Just as you would've expected, this doesn't affect the test cases.
+Writing tests for standalone components remains the same as for "regular" components.
+
+```ts title="counter.component.spec.ts"
+import {render, screen, fireEvent} from '@testing-library/angular'
+import {CounterComponent} from './counter.component.ts'
+
+describe('Counter', () => {
+  test('should render counter', async () => {
+    await render(CounterComponent, {
+      componentProperties: {counter: 5},
+    })
+
+    expect(screen.getByText('Current Count: 5')).toBeInTheDocument()
+  })
+
+  test('should increment the counter on click', async () => {
+    await render(CounterComponent, {
+      componentProperties: {counter: 5},
+    })
+
+    fireEvent.click(screen.getByText('+'))
+
+    expect(screen.getByText('Current Count: 6')).toBeInTheDocument()
+  })
+})
+```
+
+To override the an import of a standalone component for your component test, you can use the [`ɵcomponentImports` property](api.mdx#ɵcomponentImports]).
+
+## More examples
+
 More examples can be found in the
 [GitHub project](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples).
 These examples include:
 
 - `@Input` and `@Output` properties
-- (Reactive) Forms
-- Integration with NgRx (mock) Store
-- And
-  [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
+- Forms
+- Integration with services
+- And [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
 
 If you're looking for an example that isn't on the list, please feel free to
-create a
-[new issue](https://github.com/testing-library/angular-testing-library/issues/new).
+create a [new issue](https://github.com/testing-library/angular-testing-library/issues/new).