角度测试无法读取未定义的属性“数据”

时间:2019-03-27 06:50:31

标签: angular unit-testing

我正在尝试为该组件编写测试用例,但由于无法读取未定义的属性“数据”,因此出现错误。我使用的是角度6。请查看deleteDomain()方法。我正在尝试为组件编写测试用例,但由于无法读取未定义的属性“数据”,因此出现错误。我使用的是角度6。请查看 export class GridRendererComponent implements ICellRendererAngularComp { public params: any; // Icons faEdit = faEdit; faTrashAlt = faTrashAlt; constructor(private router: Router, public dialog: MatDialog) {} agInit(params: any): void { this.params = params; } deleteDomain() { this.dialog.open(ConfirmDialogComponent, { panelClass: '_small-dialog', disableClose: true, position: { top: '50px' }, data: { title: 'Delete Domain', description: `Are you sure do you want to delete domain Contract ID: ${ this.params.data.contactId }?` } }); } } 方法。

这里是我的组件代码

     import { async, ComponentFixture, TestBed } from '@angular/core/testing';

    import { GridRendererComponent } from './grid-renderer.component';
    import { RouterTestingModule } from '@angular/router/testing';
    import { FeaturesModule } from '../../features.module';
    import { Routes, Router } from '@angular/router';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
    import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
    import { NAccessRequestComponent } from '../../n-access-request/n-access-request.component';

    const routes: Routes = [
      { path: 'n-access-request', component: NAccessRequestComponent },
    ];

    describe('GridRendererComponent', () => {
      let gridRendererComponent: GridRendererComponent;
      let dialog : MatDialog;
      let router: Router;

      beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [
            RouterTestingModule.withRoutes(routes),
            FeaturesModule,
            BrowserAnimationsModule
          ],
          declarations: [ ]
        })

        .compileComponents();
        router = TestBed.get(Router);
        router.initialNavigation();
      });

      beforeEach(() => {
        const fixture = TestBed.createComponent(GridRendererComponent);
        gridRendererComponent = fixture.componentInstance;
        fixture.detectChanges();
      });

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

      it('agInit', () => {
        let params = {
              "column" : "status"
               };
        gridRendererComponent.agInit(params);
        expect(gridRendererComponent.params).not.toBe(null);
      });


      it('approveRequest', () =>{
        let params = {
          "data" : {
            "contactId" : '5',
            }
           };
        spyOn(gridRendererComponent.dialog, 'open').and.returnValue(true);
        gridRendererComponent.deleteDomain();
        expect(gridRendererComponent.dialog.open).toHaveBeenCalled();
        expect(gridRendererComponent.params.data.contactId).not.toBe(null);
      });

    });

这是我尝试过的规格的以下代码

array_reduce

1 个答案:

答案 0 :(得分:0)

我发现您犯了很少的错误,再次质疑本身缺少信息。

首先:在declaration闭包内定义组件。我发现您要添加两个组件,GridRendererComponentConfirmDialogComponent

您不需要一开始就启动路由器导航。

// router = TestBed.get(Router);
// router.initialNavigation();

将您的spyOn方法更改为以下方法,

spyOn(gridRendererComponent.dialog, 'open');

由于您正在监视永远不会调用的方法,因此您无需在此处定义data对象。 因此也要删除最后一个断言。

// expect(gridRendererComponent.params.data.contactId).not.toBe(null);