docs: revamp Angular docs to latest API (#111)

Author: timdeschryver

docs/angular-testing-library/intro.md

@@ -3,126 +3,84 @@ id: intro
 title: Angular Testing Library
 ---
 
-[`@angular-extensions/testing-library`][gh] is an [Angular][angular] adapter
-around `dom-testing-library`.
+🦔 [`@angular-extensions/testing-library`][gh] Simple and complete
+[Angular](https://angular.io) testing utilities that encourage good testing
+practices.
 
 ```bash
-npm install --save-dev @angular-extensions/testing-library
+npm install --save-dev angular-extensions/testing-library
 ```
 
-- [@angular-extensions/testing-library on GitHub][gh]
+- [`@angular-extensions/testing-library` on GitHub][gh]
 
 ## Usage
 
-Use the `createComponent` function to create the component and the Angular
-TestBed.
+counter.component.ts
 
-After this, you can use all of `dom-testing-library`'s `getBy`, `getAllBy`,
-`queryBy` and `queryAllBy` queries. See
-[here](dom-testing-library/api-queries.md) for more info.
-
-Besides the `dom-testing-library`'s queries, all of the events (e.g. `click`,
-`input`, ...) are also exposed. After every event, this library will run the
-Angular change detection. See [here](dom-testing-library/api-events.md) for more
-info.
+```typescript
+@Component({
+ selector: 'counter',
+ template: `
+ <button (click)="decrement()">-</button>
+ <span data-testid="count">Current Count: {{ counter }}</span>
+ <button (click)="increment()">+</button>
+ `,
+})
+export class CounterComponent {
+ @Input() counter = 0
 
-## Examples
+ increment() {
+ this.counter += 1
+ }
 
-> **Note**
->
-> There are two different ways to create a component, in both ways it's still
-> required to provide the Angular TestBed.
+ decrement() {
+ this.counter -= 1
+ }
+}
+```
 
-One way to create the component is via the component's selector:
+counter.component.spec.ts
 
 ```typescript
-test('a user can login', async () => {
- const {
- container,
- getByLabelText,
- getByText,
- input,
- submit,
- } = await createComponent<LoginFormComponent>('<login-form></login-form>', {
- declarations: [LoginFormComponent],
- imports: [ReactiveFormsModule],
- })
+import { render } from '@angular-extensions/testing-library'
+import CounterComponent from './counter.component.ts'
 
- const usernameNode = getByLabelText(/username/i)
- const passwordNode = getByLabelText(/password/i)
- const submitButtonNode = getByText(/submit/i)
- const formNode = container.querySelector('form')
+describe('Counter', () => {
+ test('should render counter', async () => {
+ const { getByText } = await render(CounterComponent, {
+ componentProperties: { counter: 5 },
+ })
 
- const fakeUser = { username: 'jackiechan', password: 'supersecurepassword' }
-
- input(usernameNode, {
- target: {
- value: fakeUser.username,
- },
+ expect(getByText('Current Count: 5'))
  })
 
- passwordNode.value = fakeUser.password
- input(passwordNode)
+ test('should increment the counter on click', async () => {
+ const { getByText, click } = await render(CounterComponent, {
+ componentProperties: { counter: 5 },
+ })
+
+ click(getByText('+'))
 
- submit(formNode)
+ expect(getByText('Current Count: 6'))
+ })
 })
 ```
 
-Another way to create the component is via the `object` syntax. The only
-difference is the setup of the component, the assertions remain the same. This
-can come in handy in order to provide more complex parameters or to use a spy to
-verify output events.
-
-```typescript
-test('a user can login', async () => {
- const login = {
- emit: jest.fn(),
- }
+## API
 
- const {
- container,
- getByLabelText,
- getByText,
- input,
- submit,
- } = await createComponent(
- {
- component: LoginFormComponent,
- parameters: {
- login,
- },
- },
- {
- declarations: [LoginFormComponent],
- imports: [ReactiveFormsModule],
- }
- )
-
- const usernameNode = getByLabelText(/username/i)
- const passwordNode = getByLabelText(/password/i)
- const submitButtonNode = getByText(/submit/i)
- const formNode = container.querySelector('form')
-
- const fakeUser = { username: 'jackiechan', password: 'supersecurepassword' }
-
- input(usernameNode, {
- target: {
- value: fakeUser.username,
- },
- })
+There is a small difference between `@angular-extensions/testing-library` and
+the `testing-library` family, in this library we also expose all of the events
+via the `render` function. This is done to trigger Angular's change detection
+after each interaction.
 
- passwordNode.value = fakeUser.password
- input(passwordNode)
+You can also import these event via `@angular-extensions/testing-library`, but
+the Angular's change detection will not be triggered automatically.
 
- submit(formNode)
+The same counts for all the queries provided by `dom-testing-library`, these are
+also re-exported and can be imported via `@angular-extensions/testing-library`.
 
- expect(handleLogin.emit).toHaveBeenCalledWith(fakeUser)
-})
+```typescript
+import { getByText, click } from '@angular-extensions/testing-library'
 ```
 
-Inside the project
-[tests folder](https://github.com/angular-extensions/testing-library/tree/master/projects/testing-library/tests)
-you can find some more simple tests.
-
-[gh]: https://github.com/angular-extensions/testing-library
-[angular]: https://angular.io/
+[gh]: https://github.com/testing-library/angular-testing-library