茉莉花角度组件未定义

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设置为测试平台，或者需要在测试平台中包含缺少的依赖项。

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

架构设置如下：

TestBed.configureTestingModule({
    declarations:[TestTableComponent],
    imports: [ReactiveFormsModule],
    schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();

请查看有关嵌套组件测试的官方文档

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