ionic g page xxx results in page where the test does not compile

[kensodemann]

1. create an Angular app from the starter (using the latest stuff merged for "standalone")
2. ionic g page foo-bar
3. npm test

The test for the new page will fail to compile:

> [email protected] test
> ng test

✔ Browser application bundle generation complete.

Error: src/app/foo-bar/foo-bar.page.spec.ts:8:14 - error TS2304: Cannot find name 'async'.

8   beforeEach(async(() => {

The problem is with the beforeEach. It is calling async like a function:

  beforeEach(async(() => {
    fixture = TestBed.createComponent(FooBarPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

The async is not actually needed in this case, so we could do:

  beforeEach(() => {
    fixture = TestBed.createComponent(FooBarPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

On another note, the beforeEach() for the generated pages (at least with the tabs starter) looks like this:

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [Tab1Page, IonicModule, ExploreContainerComponent],
    }).compileComponents();

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

The TestBed.configureTestingModule().compileComponents() is not technically required, but it does make a nice place to hang mocks, which is a very common need (or should be if ppl are doing unit testing correctly).

Example:

  beforeEach(async () => {
    initializeTestData();
    await TestBed.configureTestingModule({
      imports: [TeaPage],
    })
      .overrideProvider(TeaService, { useFactory: createTeaServiceMock })
      .overrideProvider(NavController, { useFactory: createNavControllerMock })
      .compileComponents();

    const tea = TestBed.inject(TeaService);
    (tea.getAll as jasmine.Spy).and.returnValue(of(teas));
    fixture = TestBed.createComponent(TeaPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

As such, having the TestBed.configureTestingModule() there, to begin with, is very handy for all but trivial or improperly tested pages. So perhaps being consistent with the current tabs starter and having that in there would overall make things easier for developers.