Skip to content

docs(angular): add standalone component example #1132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions docs/angular-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
73 changes: 67 additions & 6 deletions docs/angular-testing-library/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).