Question

我在角度6中测试选择控件时遇到问题，很可能缺少明显的东西。

我有这样一个选择控件。

<select class="form-control form-control-light form-control-sm w-25 m-1" aria-label="Recent" [(ngModel)]="_selectedTenant">
<option *ngFor="let tenant of _tenants" [ngValue]="tenant.value">{{tenant.name}}</option>

它绑定到非常简单的组件。

export class TopNavbarComponent implements OnInit {

 _currentLang: string;
 _tenants: Tenant[];
 _selectedTenant: string;

 constructor(private translate: TranslateService, private tenantService: TenantService) {
 }

 ngOnInit() {
   this._currentLang = this.translate.currentLang;

this.tenantService.getTenants().subscribe(
  (tenants) => {
    this._tenants = tenants
    this._selectedTenant = this._tenants[0].value;
  },
  (error) => console.error(error)
)}}

我的测试班没有通过这项测试

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

  let translateService: TranslateService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, TranslateModule.forRoot({
        loader: { provide: TranslateLoader, useClass: JsonTranslationLoader }
      })],
      declarations: [TopNavbarComponent],
      providers: [TranslateService]
    })
      .compileComponents();

    translateService = TestBed.get(TranslateService);

    translateService.currentLang = 'en';

  }));

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

it('should init after ngOnInit observables completes', fakeAsync(() => {
    const topnavElement: HTMLElement = fixture.nativeElement;
    const selectElement = topnavElement.querySelector('select');

    expect(selectElement.value).toEqual('');

    tick();
    fixture.detectChanges();

    expect(component._tenants).toBeTruthy();
    expect(component._tenants.length).toEqual(2);
    expect(component._selectedTenant).toEqual(component._tenants[0].value);

    fixture.detectChanges();

    console.log(selectElement);
    expect(selectElement.value).toEqual(component._selectedTenant);
  }));

但是最后的期望失败了。选择值从不存在，始终显示为“”。我尝试了属性selectedOptions，但其长度为0。

在用ngModel绑定选择的onInit中设置_selectedTenant之后，我无法获得应该选择的一个值。

我现在这个问题可能微不足道，但是我从未在任何地方找到答案，为什么会发生这种情况。

我敢肯定，有人在发布后大约一分钟内解决了这个问题，我会感到愚蠢：（

尽管如此，感谢您的帮助！

Answer 1

在测试dom的内容和值时，每次更新视图时（即执行dom之后），都应获取fixture.detectChanges()元素

在fixture.detectChanges()之后添加这两行

topnavElement = fixture.nativeElement;
selectElement = topnavElement.querySelector('select');

并使用let代替const，因为您将修改这些变量。

完整规格

it('should init after ngOnInit observables completes', fakeAsync(() => {
    let topnavElement: HTMLElement = fixture.nativeElement;
    let selectElement = topnavElement.querySelector('select');

    expect(selectElement.value).toEqual('');

    tick();
    fixture.detectChanges();

    expect(component._tenants).toBeTruthy();
    expect(component._tenants.length).toEqual(2);
    expect(component._selectedTenant).toEqual(component._tenants[0].value);

    fixture.detectChanges();

    // fetch dom elements again to get updated data
    topnavElement = fixture.nativeElement;
    selectElement = topnavElement.querySelector('select');

    console.log(selectElement);
    expect(selectElement.value).toEqual(component._selectedTenant);
  }));

Answer 2

我遇到了同样的问题，这对我有用：

expect(selectElement.getAttribute('ng-reflect-model')).toEqual(component._selectedTenant);

Angular 6选择输入测试

2 个答案: