Angular 6 select input testing

Question

I have a problem with testing the select control in angular 6 and I am probably missing something obvious.

I have such a select control.

<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>

It binds to pretty simple component.

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)
)}}

And my test class with this one failing test

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);
  }));

And yet last expect fails. Select value is never there, it always appears as ''. I tried attribute selectedOptions but its length is 0.

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.

I now that this question is probably trivial but I never found an answer anywhere why this might be happening.

I am sure I will feel stupid after someone resolves this in like 1 minute after posting :(

Nevertheless, thanks foryour help!

nicolas.leblanc · Accepted Answer · 2018-07-09 17:53:19Z

1

I had the same issue, here's what worked for me:

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

edited Jul 9, 2018 at 17:53

answered Jul 6, 2018 at 15:35

nicolas.leblanc

6508 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakub Lasoń Over a year ago

This works however the attribute name right now is ng-reflect-model. Maybe it changed in one of angular versions?

Amit Chigadani · Accepted Answer · 2018-07-06 15:13:47Z

0

While testing dom contents and values, you should fetch the dom elements every time when your view gets updated (i.e after doing fixture.detectChanges())

Add these two lines after fixture.detectChanges()

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

And use let instead of const, because you will be modifying those variables.

full spec

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);
  }));

edited Jul 6, 2018 at 15:13

answered Jul 6, 2018 at 15:08

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

4 Comments

Jakub Lasoń Over a year ago

Unfortunately the result is exactly the same :( I kind of like this answer because it is a logical explanation but it does not work in this scenario. Value is still empty. Nicolas.leblanc's answer solves problem although the name of the attribute was changed to ng-reflect-model

Amit Chigadani Over a year ago

Yes that should definitely work. Not sure if querySelector being the problem. Can you try selectElement = fixture.debugElement.queryAll(By.css('select')); and then expect(selectElement.nativeElement.value).toEqual(component._selectedTenant);

Amit Chigadani Over a year ago

Sorry it has to be query() not queryAll().

Jakub Lasoń Over a year ago

Sorry still the same. Expected '' to be '1'

Collectives™ on Stack Overflow

Angular 6 select input testing

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related