ionic-team / ionic-team/angular-toolkit
`ionic g page xxx` results in page where the test does not compile
- 主要語言
- 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.
貢獻指南
研究方向
檢查產生的 src/app/foo-bar/foo-bar.page.spec.ts,並將其中的 beforeEach 設定與 issue 中的 tabs starter 範例進行比較。在獨立的 Angular starter 應用程式中使用 npm test 重現失敗,然後確認產生的頁面測試能夠編譯並執行,同時保留預期的 TestBed 設定。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, typescript
- 領域
- testing, tooling
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100