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