如何解决如何使用@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 举报,一经查实,本站将立刻删除。