Commit acaa8fe

authored

docs: add async component example (testing-library#171)

1 parent 194f74f commit acaa8feCopy full SHA for acaa8fe

File tree

+43

-0

lines changed

+43

-0

lines changed

Lines changed: 16 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,16 @@`
	`1`	`+import { fakeAsync, tick } from '@angular/core/testing';`
	`2`	`+import { render, screen, fireEvent } from '@testing-library/angular';`
	`3`	`+`
	`4`	`+import { AsyncComponent } from './14-async-component';`
	`5`	`+`
	`6`	`+test('can use fakeAsync utilities', fakeAsync(async () => {`
	`7`	`+ await render(AsyncComponent);`
	`8`	`+`
	`9`	`+ const load = await screen.findByRole('button', { name: /load/i });`
	`10`	`+ fireEvent.click(load);`
	`11`	`+`
	`12`	`+ tick(10_000);`
	`13`	`+`
	`14`	`+ const hello = await screen.findByText('Hello world');`
	`15`	`+ expect(hello).toBeInTheDocument();`
	`16`	`+}));`

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+import { ApplicationInitStatus, Component, OnDestroy } from '@angular/core';`
	`2`	`+import { Subject } from 'rxjs';`
	`3`	`+import { delay, filter, mapTo } from 'rxjs/operators';`
	`4`	`+`
	`5`	`+@Component({`
	`6`	`+ selector: 'app-fixture',`
	`7`	+ template: `
	`8`	`+ <button (click)="load()">Load</button>`
	`9`	`+ <div *ngIf="data$ \| async as data">{{ data }}</div>`
	`10`	+ `,
	`11`	`+})`
	`12`	`+export class AsyncComponent implements OnDestroy {`
	`13`	`+ actions = new Subject<string>();`
	`14`	`+ data$ = this.actions.pipe(`
	`15`	`+ filter((x) => x === 'LOAD'),`
	`16`	`+ mapTo('Hello world'),`
	`17`	`+ delay(10_000),`
	`18`	`+ );`
	`19`	`+`
	`20`	`+ load() {`
	`21`	`+ this.actions.next('LOAD');`
	`22`	`+ }`
	`23`	`+`
	`24`	`+ ngOnDestroy() {`
	`25`	`+ this.actions.complete();`
	`26`	`+ }`
	`27`	`+}`

Comments

(0)