Angular2 Component: Testing form input value change

Question

I have a text input and i'm listening for the changes.

mycomponent.ts

ngOnInit() {
    this.searchInput = new Control();
    this.searchInput.valueChanges
        .distinctUntilChanged()
        .subscribe(newValue => this.search(newValue))
}
search(query) {
    // do something to search
}

mycomponent.html

<search-box>
    <input type="text" [ngFormControl]="searchInput" >
</search-box>

Running the application everything works fine, but i want to unit-test it.

So here's what i tried

mycomponent.spec.ts

beforeEach(done => {
    createComponent().then(fix => {
        cmpFixture = fix
        mockResponse()
        instance = cmpFixture.componentInstance
        cmpFixture.detectChanges();
        done();
    })
})
describe('on searching on the list', () => {
        let compiled, input
        beforeEach(() => {
            cmpFixture.detectChanges();
            compiled = cmpFixture.debugElement.nativeElement;
            spyOn(instance, 'search').and.callThrough()
            input = compiled.querySelector('search-box > input')
            input.value = 'fake-search-query'
            cmpFixture.detectChanges();
        })
        it('should call the .search() method', () => {
            expect(instance.search).toHaveBeenCalled()
        })
    })

Test fails as the .search() method is not called.

I guess i have to set the value in another way to have the test realize of the change but i really don't know how.

Anyone has ideas?

Andrius · Accepted Answer · 2017-07-05 11:41:49Z

26

It might be a little bit late, but it seems that your code is not dispatching input event after setting input element value:

// ...    
input.value = 'fake-search-query';
input.dispatchEvent(new Event('input'));
cmpFixture.detectChanges();
// ...

Updating input html field from within an Angular 2 test

edited Jul 5, 2017 at 11:41

answered Oct 15, 2016 at 11:01

Andrius

95715 silver badges23 bronze badges

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

Comments

kimamula · Accepted Answer · 2017-10-19 07:35:06Z

0

Triggering the value change of FormControl is as simple as:

cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);

answered Oct 19, 2017 at 7:35

kimamula

12.9k8 gold badges41 silver badges32 bronze badges

1 Comment

pesoklp13 Over a year ago

You are assuming that exposing input as public property is the right approach, but that is not.

TARJU · Accepted Answer · 2021-11-22 11:12:03Z

0

Custom component with @input, subscriptions, two way data binding

If you got a custom component you would need further changes in your application to be able to successfully unit test your application

have a look at the gist here this will give you some idea https://gist.github.com/AikoPath/050ad0ffb91d628d4b10ef81736af386/raw/846c7bcfc54be8cce78eba8d12015bf749b91eee/@ViewChild(ComponentUnderTestComponent).js

More over complete reading over here carefully otherwise you can easily get confused again - https://betterprogramming.pub/testing-angular-components-with-input-3bd6c07cfaf6

answered Nov 22, 2021 at 11:12

TARJU

2,0041 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular2 Component: Testing form input value change

3 Answers 3

Comments

1 Comment

Custom component with @input, subscriptions, two way data binding

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Custom component with @input, subscriptions, two way data binding

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related