I have a county drop down. There is a default value. User can select a country. On change it will redirect user to correct country page. Which is working.

However, I am trying to unit test default value in select box. but I keep getting empty string/value selectEl.nativeElement.value to be ''. Any one have any ideas why?

// locale-ponent.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { cultures} from '../../../config/config';

@Component({
  selector: 'app-locale',
  templateUrl: './localeponent.html',
  styleUrls: ['./localeponent.scss']
})
export class LocaleComponent {

  cultures = cultures;

  constructor() {}

  onLocaleChange(locale) {
    const str = window.location.href.replace(new RegExp(`/${this.cultures.default}/`), `/${locale}/`);
    window.location.assign(str);
  }
}


  // localeponent.spec.ts

  beforeEach(() => {
    fixture = TestBed.createComponent(LocaleComponent);
    ponent = fixtureponentInstance;
    ponent.cultures = {
      default: 'en-ca',
      supported_cultures: [
        { "name": "United States", "code": "en-us" },
        { "name": "Canada (English)", "code": "en-ca" },
        { "name": "Canada (Français)", "code": "fr-ca" }
      ]
    }
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(ponent).toBeTruthy();
  });

  it('should select the correct flag/locale by default', () => {
    fixture.detectChanges();
    const selectEl = fixture.debugElement.query(By.css('select'))
    console.log(selectEl)
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(selectEl.nativeElement.value).toEqual('en-ca');
    });

  });


<!-- localeponent.html -->

<label class="locale locale--footer">
  <div class="locale__custom-select locale__custom-select__button locale__custom-select__ff-hack">
    <select [ngModel]="cultures.default" (ngModelChange)="onLocaleChange($event)">
      <option *ngFor="let locale of cultures.supported_cultures" [ngValue]="locale.code">{{locale.name}}</option>
    </select>
  </div>
</label>

I have a county drop down. There is a default value. User can select a country. On change it will redirect user to correct country page. Which is working.

However, I am trying to unit test default value in select box. but I keep getting empty string/value selectEl.nativeElement.value to be ''. Any one have any ideas why?

// locale-ponent.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { cultures} from '../../../config/config';

@Component({
  selector: 'app-locale',
  templateUrl: './locale.ponent.html',
  styleUrls: ['./locale.ponent.scss']
})
export class LocaleComponent {

  cultures = cultures;

  constructor() {}

  onLocaleChange(locale) {
    const str = window.location.href.replace(new RegExp(`/${this.cultures.default}/`), `/${locale}/`);
    window.location.assign(str);
  }
}


  // locale.ponent.spec.ts

  beforeEach(() => {
    fixture = TestBed.createComponent(LocaleComponent);
    ponent = fixture.ponentInstance;
    ponent.cultures = {
      default: 'en-ca',
      supported_cultures: [
        { "name": "United States", "code": "en-us" },
        { "name": "Canada (English)", "code": "en-ca" },
        { "name": "Canada (Français)", "code": "fr-ca" }
      ]
    }
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(ponent).toBeTruthy();
  });

  it('should select the correct flag/locale by default', () => {
    fixture.detectChanges();
    const selectEl = fixture.debugElement.query(By.css('select'))
    console.log(selectEl)
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(selectEl.nativeElement.value).toEqual('en-ca');
    });

  });


<!-- locale.ponent.html -->

<label class="locale locale--footer">
  <div class="locale__custom-select locale__custom-select__button locale__custom-select__ff-hack">
    <select [ngModel]="cultures.default" (ngModelChange)="onLocaleChange($event)">
      <option *ngFor="let locale of cultures.supported_cultures" [ngValue]="locale.code">{{locale.name}}</option>
    </select>
  </div>
</label>

• javascript
• angular
• unit-testing
• typescript
• jasmine

Share Improve this question Follow asked Jun 5, 2017 at 14:55 MonteCristoMonteCristo 1,55022 gold badges2121 silver badges4444 bronze badges 1

• 1 How'd you go with this one? – Des Horsley Commented Dec 9, 2017 at 2:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

"Calling detectChanges() inside whenStable()" will populate the dropdown.

fixture.whenStable().then(() => {
  fixture.detectChanges();
  expect(selectEl.nativeElement.value).toEqual('en-ca');
});

You try this:

fixture.detectChanges();
const selectEl = fixture.debugElement.query(By.css('select'))
console.log(selectEl);
fixture.detectChanges();
fixture.whenStable();
expect(selectEl.nativeElement.value).toEqual('en-ca');