ng g c generates a test file using async instead of waitForAsync

[Yohandah]

Command (mark with an x)

• [ ] new
• [ ] build
• [ ] serve
• [ ] test
• [ ] e2e
• [x] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] extract-i18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

no

Description

async was deprecated replaced by waitForAsync but ng generate component uses async instead of waitForAsync

🔬 Minimal Reproduction

• ng g c MyComponent
• open the spec file

🌍 Your Environment

Angular CLI: 11.0.1
Node: 12.13.1
OS: win32 x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.801.3
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@angular/pwa                    0.901.12
@schematics/angular             9.1.12
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

Yes I actually have a question, why does it generates a test file that is like this :

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(YohanComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

When the docs (https://angular.io/guide/testing-components-scenarios#calling-compilecomponents) specifies you should do this (wrap into a then) :

beforeEach(waitForAsync(() => {
  TestBed
      .configureTestingModule({
        declarations: [BannerComponent],
      })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(BannerComponent);
        component = fixture.componentInstance;
      });
}));

[alan-agius4]

The async keyword there is the JavaScript native async and is not to be confused with the deprecated async Angular helper.

[Yohandah]

@alan-agius4 no it does generate the test file with the async helper !

[alan-agius4]

Looks like some of your workspace dependencies are miss aligned and outdated.

@schematics/angular             9.1.12
@angular-devkit/architect       0.801.3
@angular/pwa                    0.901.12

The root cause of the above is that either you are directly depending on the above packages when you shouldn’t or a 3rd party dependency is causing this behaviour.

[Yohandah]

Indeed. Thanks for pointing that out. I will close this irrelevant issue and try to figure that out.

I do have the following in my package.json ...

"@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.1100.1",
    "@angular-devkit/core": "~11.0.1",
    "@angular-devkit/schematics": "~11.0.1",

[alan-agius4]

Typically only @angular-devkit/build-angular and @angular/cli should be added as a dependency.

That is unless you are developing custom builders and schematics.

You can install the un-needed packages using:

npm uninstall @angular-devkit/architect @angular/pwa @angular-devkit/core @angular-devkit/schematics @schematics/angular

[Yohandah]

@alan-agius4

I am using PWA and I use this in angular.json because otherwise it generates using simple quotes while my project uses double quotes.

"schematics": {
    "@ionic/angular-toolkit:component": {
      "prefix": "app",
      "styleext": "scss",
      "lintFix": true
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app",
      "lintFix": true
    },
    "@schematics/angular:pipe": {
      "lintFix": true
    },
    "@schematics/angular:class": {
      "lintFix": true
    },
    "@schematics/angular:module": {
      "lintFix": true
    },
    "@schematics/angular:service": {
      "lintFix": true
    }
  }

I'm going to try and look why my project uses schematics v9 even if it's specified to 11.0 in my package.json

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}