我有以下简单的汉堡菜单组件:
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
export class BurgerMenuOption {
key: string;
text: string;
}
@Component({
selector: 'app-burger-menu',
templateUrl: './burger-menu.component.html',
styleUrls: ['./burger-menu.component.scss']
})
export class BurgerMenuComponent implements OnInit {
@Input() options: BurgerMenuOption[];
@Output() optionSelected = new EventEmitter();
ngOnInit(): void {
}
selectOption(option: BurgerMenuOption) {
this.optionSelected.emit(option);
}
}
这是我的规格文件:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { BurgerMenuComponent } from './burger-menu.component';
import { MatIconModule } from "@angular/material/icon";
describe('BurgerMenuComponent', () => {
let component: BurgerMenuComponent;
let fixture: ComponentFixture<BurgerMenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BurgerMenuComponent ],
imports:[MatIconModule],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BurgerMenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should correctly render the passed @Input value', () => {
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('button')).toBeNull();
component.options = [{key: '1', text: 'test'}]
fixture.detectChanges();
expect(compiled.querySelector('button').textContent).toBe('test');
});
});
模板为:
<div ngbDropdown>
<mat-icon ngbDropdownToggle class="burger-menu">menu</mat-icon>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem *ngFor="let option of options" (click)="selectOption(option)">{{ option.text }}</button>
</div>
</div>
运行ng test时收到的错误消息是:
错误:'Spec'BurgerMenuComponent应该正确呈现传递的 @输入值'没有期望。'
但是,我在那里的两个期望语句不算作期望吗?它算什么是期望,什么不是期望?