ionic-team / ionic-team/angular-toolkit

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

未关闭
#487 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
73
派生
34
平均合并
6 分钟
30 天内合并 PR
5

描述

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.

贡献指南

打开贡献指南

调研方向

Inspect the generated src/app/foo-bar/foo-bar.page.spec.ts and compare its beforeEach setup with the tabs starter example in the issue. Reproduce the failure with npm test in a standalone Angular starter app, then verify that generated page tests compile and run while retaining the intended TestBed setup.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
testing, tooling
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。