Jasmine Angular 组件未定义

Question

我对 Angular 7 有点陌生，对它的单元测试框架 Jasmine 完全陌生

所以我一直在关注 Jasmine 的文档以及一些教程。我有一个名为TestTableComponent 的组件。现在该组件有点硬编码。无论如何，我认为我面临的问题与组件本身几乎没有任何关系，所以我在这里不包括组件的代码。

我在test-table.component.spec.ts 中创建了一个测试类。代码如下：

// Required Imports have been made. Not including as unnecessary.

describe('TestTableComponent',  async() => 
{
let component: TestTableComponent;
let fixture: ComponentFixture<TestTableComponent>;
let de: DebugElement;


beforeEach(async(() => 
{
    TestBed.configureTestingModule({declarations:[TestTableComponent],
    imports: [ReactiveFormsModule]}).compileComponents();
}));
beforeEach(() =>
{
    fixture = TestBed.createComponent(TestTableComponent);
    component = fixture.componentInstance;

    de = fixture.debugElement;
})


it('should check if data is returned by the API')
{

    const result = await component.GetEmployees;
    expect(result).toBeDefined();
}
});

这里的问题是，当我执行ng test 时，它似乎运行基于此类的测试。在浏览器的控制台中，我收到一个错误（Jasmine 说1 component is pending）如下：

无法读取未定义的属性GetEmployees。

现在，这显然意味着TestTableComponent 永远不会被初始化。我只是想知道为什么？ beforeEach 没有被执行吗？如果是，那为什么component未定义？

更新：包括组件的代码

Test-table.component.ts

import { AfterViewInit, Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatPaginator, MatSort, MatTable, MatTableDataSource, MatDialogRef, Sort, ShowOnDirtyErrorStateMatcher } from '@angular/material';
import { MatDialog } from '@angular/material/dialog';
import { TestTableItem } from './test-table-datasource';
import { HttpClient, HttpParams } from '@angular/common/http';
import { UpdateModalDialogComponent } from '../update-modal-dialog/update-modal-dialog.component';
import { MessagePopUpComponent } from '../message-pop-up/message-pop-up.component';
@Component({
selector: 'app-test-table',
templateUrl: './test-table.component.html',
styleUrls: ['./test-table.component.css']
})
export class TestTableComponent implements AfterViewInit, OnInit {
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<TestTableItem>;
private myCollection: TestTableItem[] = [];

dataSource = new MatTableDataSource(this.myCollection);// Observable<TestTableItem>;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'fname', 'salary', 'age', 'image', 'actions'];
constructor(private http: HttpClient, private dialog:MatDialog) { }


ngOnInit() {

   this.GetAllEmployees();
 }

async GetAllEmployees()
{
 this.dataSource = await this.GetEmployees();
}
public async GetEmployees()
{
 this.myCollection = await this.http.get<TestTableItem[]>('http://localhost:22371/api/employee/GetEmployees/').toPromise();
return new MatTableDataSource(this.myCollection);

}

请注意，我没有将所有函数都包含在类中，因为这会使这篇文章变得不必要地大！

Answer 1

除了错误的it() 语法@Ethan 提到。您需要将 NO_ERRORS_SCHEMA 设置为您的 TestBed，或者您需要将缺少的依赖项包含到您的 TestBed 中。

我个人更喜欢NO_ERRORS_SCHEMA 方法，因为单元测试不需要测试某些第三方库是否正常工作，但这取决于你。这种方法通常被称为对组件进行浅层测试

架构设置如下：

TestBed.configureTestingModule({
    declarations:[TestTableComponent],
    imports: [ReactiveFormsModule],
    schemas: [NO_ERRORS_SCHEMA]

}).compileComponents();

请查看nested component tests的官方文档

Answer 2

你写错了it()函数语法，它应该带第一个参数是字符串描述，第二个参数是实现你的测试的回调：

it('should check if data is returned by the API', async(() =>{
    fixture.detectChanges();
    const result = component.GetEmployees();
    fixture.whenStable().then(()=>{
      expect(result).toBeDefined();
    })
}))