From 9a4245fc5df6b59539f9793626ce0e93d18c8bcc Mon Sep 17 00:00:00 2001
From: timdeschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Fri, 4 Dec 2020 10:39:33 +0100
Subject: [PATCH] docs: add async component example

---
 .../app/examples/14-async-component.spec.ts   | 16 +++++++++++
 .../app/examples/14-async-component.ts        | 27 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 apps/example-app/app/examples/14-async-component.spec.ts
 create mode 100644 apps/example-app/app/examples/14-async-component.ts

diff --git a/apps/example-app/app/examples/14-async-component.spec.ts b/apps/example-app/app/examples/14-async-component.spec.ts
new file mode 100644
index 00000000..6a2ca2e5
--- /dev/null
+++ b/apps/example-app/app/examples/14-async-component.spec.ts
@@ -0,0 +1,16 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { render, screen, fireEvent } from '@testing-library/angular';
+
+import { AsyncComponent } from './14-async-component';
+
+test('can use fakeAsync utilities', fakeAsync(async () => {
+  await render(AsyncComponent);
+
+  const load = await screen.findByRole('button', { name: /load/i });
+  fireEvent.click(load);
+
+  tick(10_000);
+
+  const hello = await screen.findByText('Hello world');
+  expect(hello).toBeInTheDocument();
+}));
diff --git a/apps/example-app/app/examples/14-async-component.ts b/apps/example-app/app/examples/14-async-component.ts
new file mode 100644
index 00000000..fbfd45ff
--- /dev/null
+++ b/apps/example-app/app/examples/14-async-component.ts
@@ -0,0 +1,27 @@
+import { ApplicationInitStatus, Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { delay, filter, mapTo } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-fixture',
+  template: `
+    <button (click)="load()">Load</button>
+    <div *ngIf="data$ | async as data">{{ data }}</div>
+  `,
+})
+export class AsyncComponent implements OnDestroy {
+  actions = new Subject<string>();
+  data$ = this.actions.pipe(
+    filter((x) => x === 'LOAD'),
+    mapTo('Hello world'),
+    delay(10_000),
+  );
+
+  load() {
+    this.actions.next('LOAD');
+  }
+
+  ngOnDestroy() {
+    this.actions.complete();
+  }
+}