Как проверить MatSort с жасмином - PullRequest
Новая
       8

Как проверить MatSort с жасмином

0 голосов
/ 09 марта 2020

Я пытался выяснить, как правильно проверить мою таблицу (использует mat-table) с помощью MatSort. Сортировка моей таблицы работает нормально с помощью 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.spe c .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();
}

1 Ответ

0 голосов
/ 09 марта 2020

Попробуйте это: 

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
}));
...