我希望能得到幫助，了解我的代碼方法有什么問題。我試圖模仿這個關于線束的教程中的動態
。我有以下Angular組件，它是一個直接的資料表（MatTable），與一個遠程服務系結。而不是GoT字符，它與系統角色一起作業，作為管理螢屏的一部分
<div class="pb-3">
<button class="btn btn-success" (click)=add()> Add</button>
</div>
<table mat-table [dataSource]="dataSourceRole" matSort class="mat-table w-100" >
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let dto">{{dto.roleId}}</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let dto">{{dto.description}}</td>
</ng-container>
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef> Created<th>
<td mat-cell *matCellDef="let dto">{{dto.created | date:'dd/MM/yyyy HH:mm'}</td>
</ng-container>
<ng-container matColumnDef="modified">
<th mat-header-cell *matHeaderCellDef> Modified</th>
<td mat-cell *matCellDef="let dto">{{dto.modified | date:'dd/MM/yyyy HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="bottoni">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let dto">
<按鈕mat-button（點擊）=edit(dto.roleId)>
<fa-icon icon="pencil-alt"></fa-icon>
</button>
<按鈕mat-button（點擊）=delete(dto.roleId)>
<fa-icon icon="recycle"></fa-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay" style="width: available;" ></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>
roles.component.ts
從'@angular/core'匯入 {Component, OnDestroy, OnInit, ViewChild}。
從'@angular/material/sort'中匯入{MatSort}。
從'@angular/material/table'中匯入{MatTableDataSource}。
import {Router} from '@angular/router';
從'src/app/services/model/role-dto'中匯入{RoleDto}。
從'src/app/services/role.service'中匯入 {RoleService}。
從 "rxjs "中匯入 {Subscription}。
@Component({
selector: 'app-roles',
templateUrl: './roles.component.html',
styleUrls: ['./roles.component.scss'] 。
})
export class RolesComponent implements OnInit, OnDestroy {
columnsToDisplay: string[] = ['id', 'description', 'created', 'modified', 'bottoni'] 。
dataSourceRole: MatTableDataSource<RoleDto> = new MatTableDataSource<RoleDto>([])。
@ViewChild(MatSort) sort! MatSort;
private roles$?: 訂閱。
constructor(private roleService: 角色服務。
private router: 路由器。
) {
this.dataSourceRole.sort = this.sort。
}
ngOnInit(): void {
this.getRoles();
}
ngOnDestroy() {
this.role$?.unsubscribe()。
}
getRoles(): void { //TODO: 如果需要，請取消訂閱。我在寫這篇文章時發現了這個問題
this.role$ = this.roleService.getRoles()
.訂閱({
next: rolesData => this.dataSourceRole.data = rolesData,
error: error => console.error(error),
});
}
edit(roleID: string): void {
this.router.navigate(['/roles', 'details', roleID])。
}
add(): void {
this.router.navigate(['/roles', 'new']);
}
delete(roleID: any): void {
this.roleService.deleteRole(roleID)
.訂閱({
下一個。_ => this.getRoles(),
error: error => console.error(error),
});
}
}
roles.component.spec.ts
從'@angular/core/testing'匯入 {ComponentFixture, fakeAsync, flush, TestBed}。
從'./roles.component'中匯入{RolesComponent}。
import {RoleService} from "././services/role.service";
import {BehaviorSubject, Subject} from "rxjs";
從"././services/model/role-dto "中匯入{RoleDto}。
從"@angular/cdk/testing "中匯入{HarnessLoader}。
從"@angular/cdk/testing/testbed "中匯入{TestbedHarnessEnvironment}。
從"@angular/material/table/testing "中匯入 {MatTableHarness}。
從"@angular/router/testing "中匯入 {RouterTestingModule}。
從"./form-role/form-role.component "中匯入{FormRoleComponent}。
從"@angular/router "中匯入{Router}。
import SpyObj = jasmine.SpyObj;
describe('RolesComponent', () => {
讓組件。RolesComponent;
let fixture: ComponentFixture<RolesComponent>。
讓roleService。角色服務。
let roleServiceSpy: SpyObj<RoleService>;
讓加載器。HarnessLoader;
let router: Router;
let returnedRoles = new Subject<RoleDto[]>(); //Explanation 1
beforeEach(() => {
roleServiceSpy = jasmine.createSpyObj(RoleService, ['getRoles', 'getRole', 'createRole', 'deleteRole', 'updateRole'] )。
roleService = roleServiceSpy as RoleService;
roleServiceSpy.getRoles.and.returnValue（returnRoles）。
});
beforeEach(async () => {
await TestBed.configureTestingModule({
宣告。[RolesComponent],
提供者。[
{provide: 角色服務，使用價值：角色服務}。
],
進口。[RouterTestingModule.withRoutes([
{
路徑：'角色/新'。
組件。FormRoleComponent
},
{
路徑: 'role/:id',
組件。FormRoleComponent
},
{
路徑：'角色'。
組件。RolesComponent,
},])]
})
.compileComponents()。
});
beforeEach(() => {
router = TestBed.injection(Router);
fixture = TestBed.createComponent(RolesComponent);
component = fixture.componentInstance;
fixture.detectChanges()。
loader = TestbedHarnessEnvironment.loader(fixture)。
});
afterEach(() => fixture.destroy())。
it('should create', () => {
expect(component).toBeTruthy()。
});
/**
*給定的
* RoleService.getRoles回傳3個角色
*
*當
* 組件被加載
*
* 然后
* 組件顯示3個資料行
* 行中包含與角色ID相匹配的文本，按其回傳順序排列
*/
it('should display the rows when data is present', async () => {
讓角色。RoleDto[] = [
{roleId: 'ADMIN', description: 'Admin role', created: new Date(), creator: 0, modified: new Date(), modifier: 0},
{roleId: 'USER', 描述: '用戶角色', created: new Date(), creator: 0, modified: new Date(), modifier: 0},
{roleId: 'READER', 描述：'讀者角色', created: new Date(), creator: 0, modified: new Date(), modifier: 0},
];
returnedRoles.next(role); //解釋1
fixture.detectChanges()。
let tableHarness = await loader.getHarness(MatTableHarness);
let rows = await tableHarness.getRows();
expect(rows.length).toBe(role.length); //Question
for (const row of rows) { //這是未經測驗的，可能是完全錯誤的
const index = rows.indexOf(row);
let text = (await row.getCellTextByIndex({columnName: 'ID'})).join(' ');
let expected: string = roles[index].roleId!
expect(text).toContain(expected)。
}
});
});
解釋1
我為使資料源作業而奮斗了幾個小時。在我第一次發布的測驗中，我簡單地模擬了getRoles()方法，以回傳Observable.of(thatArray)，但最后我在除錯時發現，ngOnInit被呼叫的時間非常之早。早到我沒有時間去模擬ngOnInit完成的方法以及它的回呼。
所以我決定回傳一個我可以從我的測驗中控制的Observable，它將在我呼叫next后觸發回呼。
問題
我的測驗代碼不作業。該組件在使用實時遠程服務器的實時應用程式中被呼叫時可以作業。在組件的測驗中，rows是一個空陣列。
我還嘗試了什么
？將Subject改為BehaviourSubject，最初回傳一個角色的陣列，但沒有任何改變（測驗結果為0行）。
使用 fakeAsync 也沒有改變。看起來線束測驗不需要它，因為它們都是異步的。
評論
我正在努力為我的編碼員提供關于正確使用自動化測驗的作業范例，我已經在我們將以老式的方式手動進行測驗。
uj5u.com熱心網友回復：
最后的問題是沒有匯入MatTableModule，也許還有MaterialModule。當我編輯這個問題時，我遇到了一些編譯問題，無法運行正確的測驗代碼。
一旦修好，所有的東西都作業了。修復方法是將MatTableModule和MaterialModule添加到TestBed
beforeEach(async () => {
await TestBed.configureTestingModule({
宣告。[RolesComponent],
提供者。[
{provide: 角色服務，使用價值：角色服務}。
],
進口。[
通用模塊。
AmlcFontAwesomeModule。
MaterialModule,
MatTableModule。
RouterTestingModule.withRoutes([
{
path: 'role/new',
組件。FormRoleComponent
},
{
路徑: 'role/:id',
組件。FormRoleComponent
},
{
路徑：'角色'。
組件。RolesComponent,
},])]
})
.compileComponents()。
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/328082.html
標籤：