如何为以下角度方法编写测试用例答案

【问题标题】：How to write Test cases for below angular method如何为以下角度方法编写测试用例
【发布时间】：2019-11-01 17:14:37
【问题描述】：

我已经创建了一个组件来打开我的自定义类型对话框，我只想为这个方法创建 Jasmine 单元测试用例。

export class OpenPopUpComponent implements OnInit {
    constructor(public dialog:NewCustomDialog) {}

    ngOnInit() {

    }

    openModel(){
        this.dialog.open(NewComponent,<NewCustomDialogConfig>{
            size: 'double',
            data: {
                title: 'New Dialog'
            }
        });
    }
}

【问题讨论】：

我给了你一些关于模拟外部依赖的指导。您的测试应该是开放模型上的组件，调用具有预期值的服务。尝试至少提供一些你的解决方案，即使它已经完成了一半。
你试过我的答案了吗？

标签： javascript angular typescript unit-testing karma-jasmine

【解决方案1】：

您不会测试对话框本身。您需要做的是模拟 NewCustomDialog 并将其作为注入提供。

在你的 spec.ts 中

beforeEach(() => {
  const spy = jasmine.createSpyObj('NewCustomDialog', ['open']);

  TestBed.configureTestingModule({
    // Provide (spy) dependency
    providers: [
      { provide: NewCustomDialog, useValue: {newCustomDialogSpy} }
    ]
  });
  // Inject both the service-to-test and its (spy) dependency
  masterService = TestBed.get(MasterService);
  valueServiceSpy = TestBed.get(ValueService);
});

然后您可以检查是否已使用参数（您期望的参数）调用了间谍。

【讨论】：

【解决方案2】：

单元测试的内涵是测试组件本身的特性，而不是开始测试不在component范围内的特性。所以，您无需测试 dialog.open，因为这应该在 NewCustomDialog 本身的单元测试中进行测试。

首先创建一个存根，您可以将其用作NewCustomDialog 的占位符，例如

export class NewCustomDialogStub{
   open(){ return null; }
   close(){ return null; }
   // and similar dummy methods which is required by "OpenPopUpComponent"
}

将此stub 作为useClass 注入providers，如下所示：

export class NewCustomDialogStub{
   open(){ return null; }
   close(){ return null; }
   // and similar dummy methods which is required by "OpenPopUpComponent"
}

describe('OpenPopUpComponent', () => {
  let component: OpenPopUpComponent;
  let fixture: ComponentFixture<OpenPopUpComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      declaration: [OpenPopUpComponent],
      providers: [
         { provide: NewCustomDialog, useClass: NewCustomDialogStub }
      ]
    }).compileComponents();
  });

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

   it('should be defined',()=>{
     expect(component).toBeDefined();
   })

   it('should call "open" method of dialog on calling openModel() ',()=>{
      spyon(component.dialog,'open').and.callThrough();
      component.openModel();
      expect(component.dialog.open).toHaveBeenCalled();
   })   
})

这是非常基本的测试，但如果您想了解更多关于编写测试的信息，请you can refer to this series of articles where I have covered almost all basic testing scenarios。检查文章底部的所有链接。我在这里使用的is this one

【讨论】：