ionic-team / ionic-team/angular-toolkit

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

Offen
#487 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
73
Forks
34
Ø Merge
6 Min.
Gemergte PRs (30 T.)
5

Beschreibung

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:

```
> ng-test@0.0.1 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:

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

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

```typescript
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:

```typescript
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:**

```typescript
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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.