Question

我正在尝试测试添加到项目中的新代码。它允许用户选择页面上的选项卡，并在刷新时将页面加载到同一选项卡上。我正在使用localstorage执行此操作。

我遇到的问题是无法设置selectedIndex的{{1}}的测试。

在mat-tab的html中，我有一个事件处理程序（undefined）：

selectedTabChange

在组件中我有

<mat-tab-group
  [selectedIndex]="selectedTab.value"
  (selectedIndexChange)="selectedTab.setValue($event)"
  (selectedTabChange)="handleMatTabChange($event)"
>
  <mat-tab label="Tab 1">
    <div *ngIf="selectedTab.value === 0"> ... </div>
  </mat-tab>

  <mat-tab label="Tab 2">
    <div *ngIf="selectedTab.value === 1"> ... </div>
  </mat-tab>

  <mat-tab label="Tab 3">
    <div *ngIf="selectedTab.value === 2"> ... </div>
  </mat-tab>

</mat-tab-group>

测试：

检查是否定义了ViewChild，但它是@ViewChild(MatTabGroup) tabGroup: MatTabGroup; ngAfterViewInit() { const index = Number(localStorage.getItem('userTabLocation')) || 0; this.tabGroup.selectedIndex = index; } handleMatTabChange(event: MatTabChangeEvent) { localStorage.setItem('userTabLocation', String(event.index)); }。

undefined

我在其他一些测试中也得到了

it('Should have `ViewChild` variable defined', () => {
  expect(component.tabGroup).toBeDefined();
});

我尝试过的事情：

我读了这篇非常有帮助的文章https://blog.angularindepth.com/angular-unit-testing-viewchild-4525e0c7b756

由于我的查看子对象是MatTabGroup，所以我不知道如何对它进行存根，因此上述文章并没有太大帮助。我尝试了这个，但是却打破了更多的测试：

TypeError: Cannot set property 'selectedIndex' of undefined

   99 |   }
  100 | 
> 101 |   ngAfterViewInit() {
      |   ^
  102 |     const index = Number(localStorage.getItem('userTabLocation')) || 0;
  103 |     this.tabGroup.selectedIndex = index;

我已经像这样将MatTabGroup添加到了提供程序中，但并没有帮助：

component.tabGroup = TestBed.createComponent(MatTabGroup).componentInstance as MatTabGroup;

我已经像这样将useValues添加到具有matTabGroup的提供程序中，但这也无济于事：

TestBed.configureTestingModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
      {
         provide: MatTabGroup,
      }],
}).compileComponents();

我已经将TestBed.configureTestingModule({ imports: [ ... ], declarations: [ ... ], providers: [ { provide: MatTabGroup, useValues: { selectedIndex: 0, } }], }).compileComponents();添加到了导入中，也没有运气：
```
MatTabsModule
```
但这会导致以下错误：
```
TestBed.configureTestingModule({
      imports: [ MatTabsModule ],
      declarations: [ ... ],
}).compileComponents();
```
（EDIT）：之所以发生这种情况，是因为我也正在导入Template parse errors: More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: MatTab,MatTab ("。

有什么想法吗？真的卡在这上面。

谢谢。

如何嘲笑@ViewChild MatTabGroup？

0 个答案: