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()函数语法，它的第一个参数是字符串说明，第二个参数是实现测试的回调：

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

Answer 2

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

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

模式设置如下：

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

}).compileComponents();

请查看nested component tests

上的官方文档

茉莉花角组件未定义

2 个答案: