title: Angular 6 select input testing
body: <p>I have a problem with testing the select control in angular 6 and I am probably missing something obvious.</p>
  
  <p>I have such a select control.</p>
  
  <pre><code>&lt;select class="form-control form-control-light form-control-sm w-25 m-1" aria-label="Recent" [(ngModel)]="_selectedTenant"&gt;
  &lt;option *ngFor="let tenant of _tenants" [ngValue]="tenant.value"&gt;{{tenant.name}}&lt;/option&gt;
  </code></pre>
  
  <p></p>
  
  <p>It binds to pretty simple component.</p>
  
  <pre><code>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) =&gt; {
      this._tenants = tenants
      this._selectedTenant = this._tenants[0].value;
    },
    (error) =&gt; console.error(error)
  )}}
  </code></pre>
  
  <p>And my test class with this one failing test</p>
  
  <pre><code>describe('TopNavbarComponent', () =&gt; {
    let component: TopNavbarComponent;
    let fixture: ComponentFixture&lt;TopNavbarComponent&gt;;
  
    let translateService: TranslateService;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [FormsModule, TranslateModule.forRoot({
          loader: { provide: TranslateLoader, useClass: JsonTranslationLoader }
        })],
        declarations: [TopNavbarComponent],
        providers: [TranslateService]
      })
        .compileComponents();
  
      translateService = TestBed.get(TranslateService);
  
      translateService.currentLang = 'en';
  
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(TopNavbarComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
  it('should init after ngOnInit observables completes', fakeAsync(() =&gt; {
      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);
    }));
  </code></pre>
  
  <p>And yet last expect fails. Select value is never there, it always appears as ''. I tried attribute selectedOptions but its length is 0. </p>
  
  <p>I am unable to get this one value that supposed to be selected after setting _selectedTenant up in onInit that is bound to select with ngModel.</p>
  
  <p>I now that this question is probably trivial but I never found an answer anywhere why this might be happening.</p>
  
  <p>I am sure I will feel stupid after someone resolves this in like 1 minute after posting :(</p>
  
  <p>Nevertheless, thanks foryour help!</p>