Angular and Jasmine MAT_DIALOG_DATA "TypeError: ctx.currentRoles is undefined "

Question

我的任务是为我们团队正在开发的应用程序的组件编写 Karma/Jasmine 测试。我不是将我实际拥有的实际组件运行写入错误的人，到目前为止我还没有找到答案。

这是 deleteuser.component.ts 代码：

import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import {MatPaginator} from '@angular/material/paginator';
import {PCplanUser} from 'src/app/models/pcplanUser';
import {PCplanRole} from 'src/app/models/pcplanRole';

import { InitService } from 'src/app/services/pcplan/initializer.service';
import { TlsApiService } from 'src/app/services/api/user-apiservice';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormControl, FormBuilder, FormGroup} from '@angular/forms';


@Component({
  selector: 'app-deleteuser',
  templateUrl: './deleteuser.component.html',
  styleUrls: ['./deleteuser.component.scss'],
})

export class DeleteUserComponent implements OnInit, AfterViewInit  {

  name :string = this.data.fullname
  confirmdelete :string = "Confirm Delete"

  currentRoles: any;

  constructor(    
    public dialogRef: MatDialogRef<DeleteUserComponent>,
 
    @Inject(MAT_DIALOG_DATA) public data: any
    ) { 
        console.log('data passed in is:', this.data);
      }


    ngAfterViewInit(): void {
    }

    ngOnInit() {
      this.currentRoles = this.data.role.split(',');
    }

  
    onCancelClick(): void {
      this.dialogRef.close();
    }

    ConfirmDelete() {
      
    }

   
}

这是 deleteuser.component.spec.ts 的一些代码，我曾尝试过尝试获得一个好的测试但未成功。


import { DeleteUserComponent } from './deleteuser.component';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component } from '@angular/core';
import { of } from 'rxjs';

describe('DeleteUserComponent', () => {
  let component: DeleteUserComponent;
  let fixture: ComponentFixture<DeleteUserComponent>;
  let mockMatDialogRef, mockMAT_DIALOG_DATA;
  let currentRoles: any;


  /*@Component({
    selector: 'app-deleteuser',
    template: '<div></div>'
  })
  class fakeDeleteUserComponent{
    static data: string = 'Admin';
  } */ 

  beforeEach(async(() => {
    mockMAT_DIALOG_DATA = jasmine.createSpyObj(['role']);
    mockMAT_DIALOG_DATA.role = jasmine.createSpyObj(['split']);

    TestBed.configureTestingModule({
      declarations: [ DeleteUserComponent, fakeDeleteUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: MAT_DIALOG_DATA, useValue: mockMAT_DIALOG_DATA},
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DeleteUserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

使用当前的测试用例时出现此错误。

我试图在规范文件中定义 currentRoles，但它不起作用。到目前为止我所做的所有搜索都没有指出我的错误的答案。

如果您没有立即收到我的回复，那是因为我这周剩下的时间都在休假。

Answer 1

使用怎么样

  const mockDialogData= {
    role : {
      split: () => {} // or return whatever you want as a function
    }
  };

然后将其用作：

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [ DeleteUserComponent, fakeDeleteUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: MAT_DIALOG_DATA, useValue: mockDialogData}, // <-- use it here
      ]
    })
    .compileComponents();
  }));

让我知道这是否有效。

Answer 2

在与创建组件的队友交谈并自行进行一些实验后，我能够进行

的默认测试

  it('should create', () => {
    expect(component).toBeTruthy();
  });

问题是在基本的 beforeEach 语句中调用了一个 detectChanges()。但是，此组件设计为在打开时需要用户信息。

测试传递用户信息是我尚未进行的集成测试的一部分。

通过将 detectChanges 移动到我正在测试组件实际功能的任何测试，而不是在 beforeEach 中，我能够让测试通过。

额外的好处是学到了一些东西。

Angular and Jasmine MAT_DIALOG_DATA "TypeError: ctx.currentRoles is undefined "

Angular and Jasmine MAT_DIALOG_DATA "TypeError: ctx.currentRoles is undefined "

jasmine

typescript

karma-jasmine

angular