angular - 如何使用 Jasmine 测试 MatSort

Question

我一直在试图弄清楚如何使用 MatSort 正确测试我的表格(使用 mat-table)。使用 ng serve 对我的表格进行排序可以正常工作，我已经能够单击其中一列的排序按钮，但是在我单击测试中的按钮后，我没有看到表格中的变化。任何建议或帮助将不胜感激!

table.component.ts 的片段

import { MatSort } from '@angular/material/sort';

export class tablecomponent implements OnInit, AfterViewInit{
 @ViewChild(MatSort, {static: true}) sort: MatSort;

ngOnInit(){
this.source = new MatTableDataSource(this.list);
this.source.sort = this.sort;
}
}

table.component.html 的片段

<table mat-table matSort [dataSource]="source">
<ng-container matColumnDef="column_a"
<th mat-header-cell *matHeaderCellDef mat-sort-header>column a</th>
<td mat-cell></td>
</table>

table-component.spec.ts 的片段

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { MatTableModule, MatTableDataSource, MatTable } from '@angular/material/table';
import { tableComponent } from './table.component';
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatToolbarModule} from '@angular/material/toolbar'; 
import {MatCardModule} from '@angular/material/card';
import { By } from '@angular/platform-browser';
import { MatSortModule, MatSortHeader, Sort, MatSort, SortDirection, MatSortHeaderIntl } from '@angular/material/sort';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CdkTableModule } from '@angular/cdk/table';

describe('CtableComponent', () => {
  let component: tableComponent;
  let fixture: ComponentFixture<tableComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ tableComponent],
      imports : [
        MatTableModule,
        MatCheckboxModule,
        MatToolbarModule,
        MatCardModule,
        MatSortModule,
        CdkTableModule,
        BrowserAnimationsModule
      ]
    })
    .compileComponents();
  }));

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

it('should show a sorted table', async(() => {
    component.ngOnInit();
    const compiled = fixture.debugElement.nativeElement;
    const table = compiled.querySelector('table');
    const button = compiled.querySelectorAll('button.mat-sort-header-button');
    component.list = TABLE_TEST_DATA.list;
    component.source = new MatTableDataSource<Con>(component.list);
    component.sort = new MatSort();
    component.source.sort = component.sort;
    fixture.detectChanges();

    button[0].click();
}

Answer 1

尝试这个:

it('should show a sorted table', async(() => {
    // no need to call ngOnInit, the last fixture.detectChanges(); will call ngOnInit for us
    // component.ngOnInit();
    const compiled = fixture.debugElement.nativeElement;
    const table = compiled.querySelector('table');
    const button = compiled.querySelectorAll('button.mat-sort-header-button');
    component.list = TABLE_TEST_DATA.list;
    component.source = new MatTableDataSource<Con>(component.list);
    component.sort = new MatSort();
    component.source.sort = component.sort;
    fixture.detectChanges();

    button[0].click();
    // after click on the first element, detect the changes to ensure sorting took place
    fixture.detectChanges();
    // your assertions, i.e. expect to see the first element being sorted in the table
}));