docs(aio): Testing example app doesn't work since Angular 8

🐞 bug report

Is this a regression?

Yes, it wasn’t present in the latest 7 release (see below)

Description

https://angular.io/guide/testing#support-more-macrotasks describes a way to support more macro tasks, the Canvas example is even used in the sample app that you can download at the top of that same page (source code: https://github.com/angular/angular/blob/master/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts).

I noticed that the example app doesn’t allow to run ng test (due to missing tsconfig file), so I was working on fixing that in order to send in PR to patch it. Once I managed to run ng test successfully (as in: the tests are extecuted), I noticed that 3 tests failed. I fixed 2 of them (we can discuss the reasons of their failure in the PR once it’s up as I think it’s unrelated to what I’ll be describing here), but I can’t seem to resolve the 3th test (which I will describe in the reproduction steps below). I noticed that the code to support the macro tasks isn’t working properly anymore.

I’m not sure this is an issue with Angular or an issue with ZoneJS. Maybe it’s not even an issue and we can fix this easily by updating the docs’ tests. In that case I’ll be happy to fix it as part of the PR I’m finishing.

As I noticed @JiaLiPassion created this test initially (https://github.com/angular/angular/pull/21669), and, if I remember correctly, also added this functionality into zonejs, I wanted to check if you might have any idea what has been changed in zonejs that would break this test?

🔬 Minimal Reproduction (issue in the docs)

• Open the Angular repo locally
• checkout master
• cd into aio and run yarn build
• cd into aio/content/examples/testing and run yarn test

3 tests should fail. You can ignore the No test scheduler initialized for now, I’ve managed to resolve this locally by patching the exampleZipper but this issue is only about the one that’s failing with the following message:

chrome 74.0.3729 (Linux 0.0.0) CanvasComponent should be able to generate blob data from canvas FAILED
    Error: Expected undefined to be greater than 0.
        at <Jasmine>
        at UserContext.<anonymous> (src/app/shared/canvas.component.spec.ts:24:26)
        at UserContext.<anonymous> (home/frederik/Development/github/frederikprijck/angular/aio/tools/examples/shared/node_modules/zone.js/dist/zone-testing.js:1493:1)
        at ZoneDelegate.invoke (home/frederik/Development/github/frederikprijck/angular/aio/tools/examples/shared/node_modules/zone.js/dist/zone-evergreen.js:359:1)

🔬 Minimal Reproduction (underlying issue isolated from the docs)

As it was easier for me to swap dependency versions to find the issue, I isolated the issue in an empty cli project:

• Create a new @angular/cli 8 project
• Add this component https://github.com/angular/angular/blob/master/aio/content/examples/testing/src/app/shared/canvas.component.ts and this test https://github.com/angular/angular/blob/master/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts to the project
• run ng test

The tests should fail with:

chrome 74.0.3729 (Linux 0.0.0) CanvasComponent should be able to generate blob data from canvas FAILED
    Error: Expected undefined to be greater than 0.
        at <Jasmine>
        at UserContext.<anonymous> (src/app/shared/canvas.component.spec.ts:24:26)
        at UserContext.<anonymous> (home/frederik/Development/github/frederikprijck/angular/aio/tools/examples/shared/node_modules/zone.js/dist/zone-testing.js:1493:1)
        at ZoneDelegate.invoke (home/frederik/Development/github/frederikprijck/angular/aio/tools/examples/shared/node_modules/zone.js/dist/zone-evergreen.js:359:1)

If we do the same, but for an @angular/cli 7 project, the test works fine. Once we upgrade zone to 0.9.1 (which is the version used when using @angular/cli 8) in an Angular 7 project, the tests fail.

It’s also broken with zone.js 0.9.0 but works fine with 0.8.29.

This might be a regression in zonejs, however I’m not that familiar with zonejs so I was hoping to hear @JiaLiPassion 's opinion on this.

🔥 Exception or Error

Test is not succeeding.

🌍 Your Environment

I’ve tested this with Angular 7 and 8, on Linux (Elementary OS) and Windows 10.

[JiaLiPassion]

@frederikprijck, sure I will check it.

[JiaLiPassion]

@kapunahelewong, thanks, in the new version of zone.js, we removed the zone-patch-canvas from the zone.js bundle, which is a breaking change, I didn’t realize it, we may need to put it back or add import 'zone.js/dist/zone-patch-canvas' in src/polyfills.ts.