ngModel value of select element as Ivy debugElement (unit test) remains empty in properties

Question

I am currently updating an application from angular 8 to 9. When I ran my unit test after the update, a set of test failed. Particularly the ones trying to retrieve the value of the select field with the help of the following helper function below.

export function getInpuElementPropertyValue(id: string, elementContainer: DebugElement): string | null {
    const element = elementContainer.query(By.css(id));
    return element.properties['value'];
} 

now the code is just returning empty string. If I really wanted to get the value, I could do the following

const elementContainer = fixture.debugElement;
        const id = 'select[name="entity"]';
        const element = elementContainer.query(By.css(id));
        console.log(element.attributes['ng-reflect-model']);

But I believe this code would be brittle to re-use because it targets only elements with ng-model property. Is there not a more generic way to do this (like the first helper function) to retrive the value of a select input that has an ngModel (served by an input property named 'managementEntity' of the current component). What I have noticed is that the properties of debugElement in angular 9 resembles that of the DOM API.

The html

<select class="form-control" name="entity" [(ngModel)]="managementEntity" (change)="onEntityChange()">
            <ng-template ng-template ngFor let-val [ngForOf]="entities">
                <option id="entityOption-{{val.key}}" [ngValue]="val.key">
                    {{val.value}}
                </option>
            </ng-template>
        </select>

test

describe('given entity and visa', () => {
    beforeEach(() => {
        component.managementEntity = 'Test Entity 1';
        component.handlerVisa = 'Test Manager 1';

        // This will trigger onInit()
        fixture.detectChanges();
    });        
    it('should have values selected', async() => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(getInpuElementPropertyValue('select[name="entity"]', debug)).toEqual(component.managementEntity);
            expect(getInpuElementPropertyValue('select[name="manager"]', debug)).toEqual(component.handlerVisa);
        });
    });

Answer 1

Can you try the following?

export function getInpuElementPropertyValue(id: string, elementContainer: DebugElement): string | null {
    // get the nativeElement (HTMLElement)
    const element = elementContainer.query(By.css(id)).nativeElement;
    console.log({ element }); // see what it logs
    // read its value property
    return element.value;
}