Need help using spectator.keyboard.pressKey

[grosch]

I'm submitting a...

[X] Support request

Current behavior

I'm not understanding how to use the keyboard input methods. When using the keyboard routines the input field isn't being updated. I get an error from jasmine saying:

Expected '' to be 'a'.

Expected behavior

I'd expect the input's value to have the letter pressed.

Minimal reproduction of the problem with instructions

In a component I changed the HTML to just be <input> and then created this spec for it:

it('should ...', () => {
    spectator.detectChanges()

    const input = spectator.query('input') as HTMLInputElement
    expect(input).toBeDefined()

    spectator.focus(input)
    spectator.detectChanges()

    spectator.keyboard.pressKey('a')
    spectator.detectChanges()

    expect(input.value).toBe('a')
})

Environment

Angular version: 12.0.1
spectator: 8.0.1



Browser:
- [X ] Chrome (desktop) version 91.0.4472.124
 
For Tooling issues:
- Node version: v12.19.0
- Platform:  Windows 10

Others:

[NetanelBasal]

https://github.com/ngneat/spectator/blob/ac40000dfa6665468e24e22607351e90c3805501/projects/spectator/test/events/events.component.spec.ts

[grosch]

@NetanelBasal Thanks for the pointer, and apologies for what are probably silly questions as I learn how to use your awesome library properly. I'm still not seeing expected results. In the below simple example, after pressing the 'a' key, I would expect to see the ngModel bound to the value, but it's always blank, and if I query the value of the input itself, that's also blank.

import {Component} from '@angular/core'
import {FormsModule} from '@angular/forms'
import {createComponentFactory} from '@ngneat/spectator/jest'
import {HomeComponent} from './home.component'

@Component({template: '<input [(ngModel)]="model">'})
class TestComponent {
    model = ''
}

describe('HomeComponent', () => {
    const createComponent = createComponentFactory({
        component: TestComponent,
        imports: [FormsModule]
    })

    it('should ...', () => {
        const spectator = createComponent()
        spectator.keyboard.pressKey('a', 'input')
        expect(spectator.component.model).toBe('a')
    })
})

[NetanelBasal]

See if this helps: #22

[grosch]

I switched to it being a waitForAsync test with the whenStable() call. Still didn't work. However, when I switched it from spectator.keyboard.pressKey to spectator.typeInElement, then it works.