如何使用@Input 和@Output 以角度对Web 组件进行单元测试

问题描述

@Component({
  templateUrl: './mywebcomponent.component.html',styleUrls: ['./mywebcomponent.component.scss'],})
export class MyWebCompnent {
    
  @Output() errors = new EventEmitter<string[]>();


  constructor() {}


  @input() set mode(mode: string) {

    if (!mode) {

      this.errors.emit([MESSAGE.ERROR.MODE_required]);

      console.error([MESSAGE.ERROR.MODE_required]);

      return;
    }
 }

mywebcomponent.module.ts

这就是它被初始化的方式。

export class MyWebComponentModule {

  constructor(private injector: Injector) {
   
    const memory = createCustomElement(MyWebCompnent,{ injector: this.injector });

    if (!customElements.get('memory-tab')) {

      customElements.define('memory-tab',memory);

    }

  }

  ngdobootstrap() { }

单元测试

describe('My Web Component',() => {
  let component: MyWebComponent;
  let fixture: ComponentFixture<MyWebComponent>;
  let de: DebugElement;

  let testHostComponent: TestHostComponent;
  let testHostFixture: ComponentFixture<TestHostComponent>;

  beforeEach(async(() => {
    Testbed.configureTestingModule({
      declarations: [MyWebComponent,TestHostComponent],})
      .compileComponents();
  }));

   beforeEach(() => {
     fixture = Testbed.createComponent(MyWebComponent);
     component = fixture.componentInstance;
     de = fixture.debugElement;
     fixture.detectChanges();

     testHostFixture = Testbed.createComponent(TestHostComponent);
     testHostComponent = testHostFixture.componentInstance;
   });




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

    it('should throw an error msg if mode is not set',() => {
        // component.mode = undefined;
    
        //  testHostComponent.mode = undefined;
    
        testHostFixture.detectChanges();
    
        spyOn(component.errors,'next');
    
        expect(component.errors.next).toHaveBeenCalled();
      });


  //  Host Component

@Component({
    selector: `host-component`,template: `<memory-tab [mode]="mode"></memory-tab>`
  })

  class TestHostComponent {

    mode: string;
    constructor() { }
}

我得到的错误是，

如果没有设置模式，应该抛出一个错误消息 预期的间谍接下来有 被称为。错误：接下来的预期间谍已被调用。 在 ... ...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）