Clash Royale CLAN TAG#URR8PPP

Angular2+ - TypeError: form.reset is not a function

This is a question carried over from Finding where and why [object ErrorEvent] is being thrown as a result of troubleshooting a different problem.

I am mocking an NgForm to pass into my test for a login screen, however upon passing in incorrect details I am using form.reset() to reset the whole thing.

form.reset()

I get the error TypeError: form.reset is not a function in my Jasmine

TypeError: form.reset is not a function

test.ts

describe('LoginComponent', () =>
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;

let mockAuthService;

const emptyForm = <NgForm>
valid: false,
value:
username: undefined,
password: undefined,

;

beforeEach(() =>
mockAuthService = createSpyObj(['login', 'logout']);

TestBed.configureTestingModule(
declarations: [LoginComponent],
imports: [FormsModule, HttpClientTestingModule, RouterTestingModule],
providers: [provide: AuthService, useValue: mockAuthService]
).compileComponents();

fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
);

it('should display username & password error message and not call login when passed nothing', () =>
component.onSubmit(emptyForm);

expect(component.errorMessage).toEqual('Missing credential: Username & Password');
expect(component.hideErrorMsg).toBeFalsy();
expect(mockAuthService.login).not.toHaveBeenCalled();
);



component.ts

onSubmit(form: NgForm) {
const formUser: string = form.value.username;
const formPass: string = form.value.password;

if (form.valid)
this.authService.login(formUser, formPass)
.subscribe(data =>
// Hide any error message that was previously shown
this.hideErrorMsg = true;
// Navigate to home page
this.router.navigate([this.returnUrl]);
, err =>
// Change & show error message
this.errorMessage = 'Either username or password were incorrect';
this.hideErrorMsg = false;
form.reset();
document.getElementById('username').focus();

);
else
// Change error message displayed to specific problem
if (!formUser && !formPass)
this.errorMessage = 'Missing credential: Username & Password';
else if (formUser && !formPass)
this.errorMessage = 'Missing credential: Password';
else if (!formUser && formPass)
this.errorMessage = 'Missing credential: Username';
else
this.errorMessage = 'Something has gone wrong...';

// Display the message
this.hideErrorMsg = false;



I have been advised that my mock doesn't include any sort of reset function which does make a certain amount of sense, however amending the const to the following still does not help the test pass...

const emptyForm = <NgForm>
reset: () => null,
resetForm: () => null,
valid: false,
value:
username: undefined,
password: undefined,

;


Error log:

zone.js:191 Uncaught TypeError: form.resetForm is not a function
at SafeSubscriber.eval [as _error] (VM497 login.component.ts:45)
at SafeSubscriber.__tryOrUnsub (VM505 Subscriber.js:205)
at SafeSubscriber.error (VM505 Subscriber.js:156)
at Subscriber._error (VM505 Subscriber.js:90)
at Subscriber.error (VM505 Subscriber.js:70)
at Observable.eval [as _subscribe] (VM574 throwError.js:6)
at Observable._trySubscribe (VM518 Observable.js:43)
at Observable.subscribe (VM518 Observable.js:29)
at LoginComponent.onSubmit (VM497 login.component.ts:35)
at UserContext.eval (VM687 login.component.spec.ts:78)


2 Answers
2

It appears that Karma was sending the error from the wrong test, or at least misdirecting me from the actual cause of the error.

After I placed resetForm: () => null into the correct mock-form then all is well.

resetForm: () => null

You should use the official resetForm() method as described here:

resetForm()

https://angular.io/api/forms/NgForm#resetForm

There is also no mention of reset() either.

reset()

resetForm is not a function

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.