docs: fix docs and associated code snippets for enabling more macro tasks in fakeAsync() (#35778)

In the `testing` guide, there is a section discussing configuring
`fakeAsync()` to handle more macro tasks (e.g.
`HTMLCanvasElement#toBlob()`).

Previously, the corresponding code snippets (some of which were
hard-coded in the guide) were incorrect/incomplete and the associated
tests were broken. This was discovered while enabling docs examples unit
tests in #34374.

This commit fixes the code snippets and associated tests and ensures the
examples used in the guide come from an example app (i.e. are not
hard-coded).

Note: The docs examples unit tests are currently not run on CI. This
will be fixed in #34374.

PR Close #35778

aio/content/examples/testing/src/app/shared/canvas.component.spec.ts

@@ -1,6 +1,21 @@
+// #docplaster
+// #docregion without-toBlob-macrotask
 import { TestBed, async, tick, fakeAsync } from '@angular/core/testing';
 import { CanvasComponent } from './canvas.component';
+
 describe('CanvasComponent', () => {
+  // #enddocregion without-toBlob-macrotask
+  // #docregion enable-toBlob-macrotask
+  beforeEach(() => {
+    window['__zone_symbol__FakeAsyncTestMacroTask'] = [
+      {
+        source: 'HTMLCanvasElement.toBlob',
+        callbackArgs: [{ size: 200 }],
+      },
+    ];
+  });
+  // #enddocregion enable-toBlob-macrotask
+  // #docregion without-toBlob-macrotask
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
@@ -8,20 +23,16 @@ describe('CanvasComponent', () => {
       ],
     }).compileComponents();
   }));
-  beforeEach(() => {
-    window['__zone_symbol__FakeAsyncTestMacroTask'] = [
-      {
-        source: 'HTMLCanvasElement.toBlob',
-        callbackArgs: [{ size: 200 }]
-      }
-    ];
-  });
+
   it('should be able to generate blob data from canvas', fakeAsync(() => {
     const fixture = TestBed.createComponent(CanvasComponent);
+    const canvasComp = fixture.debugElement.componentInstance;
+
     fixture.detectChanges();
+    expect(canvasComp.blobSize).toBe(0);
+
     tick();
-    const app = fixture.debugElement.componentInstance;
-    expect(app.blobSize).toBeGreaterThan(0);
+    expect(canvasComp.blobSize).toBeGreaterThan(0);
   }));
 });
-
+// #enddocregion without-toBlob-macrotask

aio/content/examples/testing/src/app/shared/canvas.component.ts

@@ -1,25 +1,32 @@
+// #docplaster
+// #docregion import-canvas-patch
+// Import patch to make async `HTMLCanvasElement` methods (such as `.toBlob()`) Zone.js-aware.
+// Either import in `polyfills.ts` (if used in more than one places in the app) or in the component
+// file using `HTMLCanvasElement` (if it is only used in a single file).
+import 'zone.js/dist/zone-patch-canvas';
+// #enddocregion import-canvas-patch
+// #docregion main
 import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'sample-canvas',
-  template: '<canvas #sampleCanvas width="200" height="200"></canvas>'
+  template: '<canvas #sampleCanvas width="200" height="200"></canvas>',
 })
 export class CanvasComponent implements AfterViewInit {
-  blobSize: number;
+  blobSize = 0;
   @ViewChild('sampleCanvas') sampleCanvas: ElementRef;
 
-  constructor() { }
-
   ngAfterViewInit() {
-    const canvas = this.sampleCanvas.nativeElement;
+    const canvas: HTMLCanvasElement = this.sampleCanvas.nativeElement;
     const context = canvas.getContext('2d');
-    if (context) {
-      context.clearRect(0, 0, 200, 200);
-      context.fillStyle = '#FF1122';
-      context.fillRect(0, 0, 200, 200);
-      canvas.toBlob((blob: any) => {
-        this.blobSize = blob.size;
-      });
-    }
+
+    context.clearRect(0, 0, 200, 200);
+    context.fillStyle = '#FF1122';
+    context.fillRect(0, 0, 200, 200);
+
+    canvas.toBlob(blob => {
+      this.blobSize = blob.size;
+    });
   }
 }
+// #enddocregion main