Angular test if inputfield changed value correctly based on external input

Question

I have an inputfield that may take a value based on an optional httpQuery Parameter one can pass to the site. It is working properly however I'm unable to create a working test for it.

My Input field looks like this:

                <input class="form-control"
                       (focus)="inputFocusHandler('tenant')"
                       (blur)="inputBlurHandler('tenant')"
                       [type]="inputFieldsStepOne.tenant.type"
                       (input)="inputFocusHandler('tenant')"
                       (keyup)="updateTenantFilter($event)"
                       (keyup.arrowdown)="arrow('down')"
                       (keyup.arrowup)="arrow('up')"
                       (keyup.enter)="selectTenantWithKeyboard()"
                       (click)="clickOnInputField($event)"
                       [value]="selectedValueForDisplay"
                       id="tenant"
                       formControlName="tenant"
                       #tenantElement>

The logic to set the variable selectedValueForDisplay which is binded to the inputField looks like this:

    this.activatedRoute.queryParams.subscribe(params => {
        if (params["tenant"]){
            this.tenantFromUrl = params["tenant"]
        }
    })

    this.tenantService.allTenants.subscribe(async (tenants) => {
        if(this.tenantFromUrl){
            let filteredTenant = tenants.filter(/* some arguments*/)
            if(filteredTenant.length == 1){
                selectedValueForDisplay = filteredTenant.displayName
            }
        }
    })

And my testCase looks like this

describe('some tests', () => {
    let fixture
    let inputField
    beforeEach( () => {
        TestBed.overrideProvider(ActivatedRoute, {useValue: activatedRoute})
        fixture = TestBed.createComponent(TenantComponent)
    })

    it('change Input from QueryParam Test', async () => {
        await activatedRoute.setParams({tenant: 'dev'})
        await fixture.whenStable()
        await fixture.detectChanges()
        inputField = fixture.debugElement.query(By.css('#tenant')).nativeElement
        expect(inputField.value).toEqual('Development environment')
    })

})

The ActivatedRoute and the tenantService are mocked where I create the TestComponent with the TestBed.When I debug the test the variable selectedValueForDisplay is set to the expected value however the expect test fails with the error

Error: Expected '' to equal 'Development environment'.

Am I selecting the inputField incorrectly or am i missing some update statement or something on fixture? Kinda stuck on this for over a day and couldn't find anything that seems to fit.

score 0 · Answer 1 · answered Jul 04 '23 at 12:45

Maybe the order of fixture.whenStable() and fixture.detectChanges() need modification. Try the following:

it('change Input from QueryParam Test', async () => {
        await activatedRoute.setParams({tenant: 'dev'})
        await fixture.whenStable()
        // No need to await fixture.detectChanges(), it is synchronous
        fixture.detectChanges();
        // Add another fixture.whenStable() here
        await fixture.whenStable();
        inputField = fixture.debugElement.query(By.css('#tenant')).nativeElement
        expect(inputField.value).toEqual('Development environment')
    })

I say add another fixture.whenStable() due to some asynchronous form activity to finish before asserting: https://stackoverflow.com/a/41064232/7365461

Angular test if inputfield changed value correctly based on external input

1 Answers1