Unit testing Component form submit empty values #187
Comments
|
Please address to stack overflow (for a quicker and better quality answer).
I can't see anything wrong with what you're doing. Perhaps a synchronicity
issue?
…On 4 Dec 2016 06:27, "Eric" ***@***.***> wrote:
I'm testing a simple component as a proof of concept, however i have
struggled to get the form to submit with set values for the input. On
submit, the action function is called with empty values. Not sure what i'm
missing. Tried various permuattions of dispatching input event, using the
TestUtils.EventFire - which doesn't fire the submit function, using
dispatchEvent
Here's the component class:
`export class PassCode {
pincode: number;
constructor(public navCtrl: NavController) {
}
logForm(value: any): number {
return value.first_digit +value.second_digit + value.third_digit + value.fourth_digit;// dummy return
}
}
`
Here's the form:
<form #form="ngForm" (ngSubmit)="logForm(form.value)"> <div
class="pincontainer"> <div class="pinpad"> <input type="number"
name='first_digit' ngModel required maxlength="1"> <input type="number"
name='second_digit' ngModel required maxlength="1"> <input type="number"
name='third_digit' ngModel required maxlength="1"> <input type="number"
name='fourth_digit' ngModel required maxlength="1"> </div> <div padding>
<button ion-button color="primary" block type="submit">Verify
Number</button> </div> </div> </form>
Here's the unit test
`import { ComponentFixture, async } from ***@***.***/core/testing';
import { By } from ***@***.***/platform-browser';
import { dispatchEvent } from ***@***.***/platform-browser/
testing/browser_util';
import { TestUtils } from '../../test';
import { PassCode } from './passcode.component';
let fixture: ComponentFixture = null;
let instance: any = null;
let firstInput: any;
let secondInput: any;
let thirdInput: any;
let fourthInput: any;
describe('Pages: PassCode', () => {
beforeEach(async(() => TestUtils.beforeEachCompiler([PassCode]).then(compiled
=> {
fixture = compiled.fixture;
instance = compiled.instance;
})));
it('should create the Passcode page', () => {
const element = fixture.debugElement.nativeElement;
//spyOn(instance, 'logForm').and.callThrough();
spyOn(instance, 'logForm');
fixture.detectChanges();
//console.log(element);
firstInput = element.querySelector('input[name=first_digit]');
firstInput.value = 1;
dispatchEvent(firstInput, 'input');
secondInput = element.querySelector('input[name=second_digit]');
secondInput.value = 2;
dispatchEvent(secondInput, 'input');
thirdInput = element.querySelector('input[name=third_digit]');
thirdInput.value = 3;
dispatchEvent(thirdInput, 'input');
fourthInput = element.querySelector('input[name=fourth_digit]');
fourthInput.value = 4;
dispatchEvent(fourthInput, 'input');
fixture.detectChanges();
//TestUtils.eventFire(element.querySelector('button[type=submit]'), 'click');
element.querySelector('button[type=submit]').click();
expect(instance.logForm).toHaveBeenCalledWith(1); //this is dummy to check what is submitted
});
});
`
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#187>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AG5tSF1PoTkWdTk0qpcDKih7oG7uFrhcks5rEfr9gaJpZM4LDckD>
.
|
|
In case someone has similar issues, i picked this up from deep recesses of angular changelog - goodness me this will make mw grow old! Since ngModel is now asynchronous, you have to use fixture.whenStable() as mentioned here angular/angular#10148. I also had to add jasmine done() to the test to deal with the asynchronous test. Hope this helps. |
|
@ekoome - thanks for posting the solution |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm testing a simple component as a proof of concept, however i have struggled to get the form to submit with set values for the input. On submit, the action function is called with empty values. Not sure what i'm missing. Tried various permuattions of dispatching input event, using the TestUtils.EventFire - which doesn't fire the submit function.
Here's the component class:
`export class PassCode {
pincode: number;
constructor(public navCtrl: NavController) {
}
logForm(value: any): number {
}
}`
Here's the form:
<form #form="ngForm" (ngSubmit)="logForm(form.value)"> <div class="pincontainer"> <div class="pinpad"> <input type="number" name='first_digit' ngModel required maxlength="1"> <input type="number" name='second_digit' ngModel required maxlength="1"> <input type="number" name='third_digit' ngModel required maxlength="1"> <input type="number" name='fourth_digit' ngModel required maxlength="1"> </div> <div padding> <button ion-button color="primary" block type="submit">Verify Number</button> </div> </div> </form>Here's the unit test:
`import { ComponentFixture, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { dispatchEvent } from '@angular/platform-browser/testing/browser_util';
import { TestUtils } from '../../test';
import { PassCode } from './passcode.component';
let fixture: ComponentFixture = null;
let instance: any = null;
let firstInput: any;
let secondInput: any;
let thirdInput: any;
let fourthInput: any;
describe('Pages: PassCode', () => {
beforeEach(async(() => TestUtils.beforeEachCompiler([PassCode]).then(compiled => {
fixture = compiled.fixture;
instance = compiled.instance;
})));
it('should create the Passcode page', () => {
const element = fixture.debugElement.nativeElement;
//spyOn(instance, 'logForm').and.callThrough();
spyOn(instance, 'logForm');
});
});`
The text was updated successfully, but these errors were encountered: