trouble unit testing reactive form fields in angular

Question

I'm learning Angular 2 and unit testing using @angular/cli 1.0.0-beta.30 and had a bit of success testing one aspect of a form field's validity, but not all. I'm using an inline template in my component for the time being to remove a layer of complexity for now (a form template in a separate file introduces asynchronicity, correct?).

The ngOnInit() defines a name property that includes the validators for "required" and "minLength". Currently an empty form field will correctly trigger the "required" validator but not the "minLength" validator. The name.errors array in the test does not contain any reference to required at all, name.errors['minLength'] returns undefined. Does minLength need to be handled asynchronously? I'm having trouble finding docs or examples that fit my problem.

// signup-form.component.ts
...
export class SignupFormComponent implements OnInit {

    user: FormGroup;

    constructor(private fb: FormBuilder) {
    }

    ngOnInit() {
        this.user = this.fb.group({
            name: ['', [Validators.required, Validators.minLength(2)]],
            account: this.fb.group({
                email: ['', Validators.required, Validators.pattern("[^ @]*@[^ @]*")],
                confirm: ['', Validators.required]
            })
        })
    }

    onSubmit({ value, valid }: { value: User, valid: boolean }) {
        console.log(value, valid);
    }

}

My test

// signup-form.component.spec.ts
import { SignupFormComponent } from './signup-form.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SignupFormComponent],
            imports: [
                ReactiveFormsModule,
                FormsModule
            ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(SignupFormComponent);
        component = fixture.componentInstance;
        component.ngOnInit();
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('form invalid when empty', () => {
        expect(component.user.valid).toBeFalsy();
    });

    it('name field validity', () => {
        let name = component.user.controls['name'];
        expect(name.valid).toBeFalsy();

        let errors = {};
        name.setValue("");
        errors = name.errors || {};
        expect(errors['required']).toBeTruthy(); // this works
        expect(errors['minLength']).toBeTruthy(); // this fails, "undefined"
    });

});

Vishal Hasnani · Accepted Answer · 2019-06-14 15:01:00Z

Answering your question

The name.errors['minLength'] returns undefined, Does minLength need to be handled asynchronously?

You can just check the form for a specific error

expect(form.control.hasError('emailInvalid', ['email'])).toBe(true);

Below is a complete test

// signup-form.component.spec.ts
import { SignupFormComponent } from './signup-form.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SignupFormComponent],
            imports: [
                ReactiveFormsModule,
                FormsModule
            ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(SignupFormComponent);
        component = fixture.componentInstance;
        component.ngOnInit();
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('form invalid when empty', () => {
        expect(component.user.valid).toBeFalsy();
    });

    it('name field validity', () => {
        let name = component.user.controls['name'];
        expect(name.valid).toBeFalsy();

        name.setValue("");
        expect(name.hasError('required')).toBeTruthy();

        name.setValue("A");
        expect(name.hasError('minLength')).toBeTruthy();
    });

});

ChrisMM · Accepted Answer · 2020-01-29 11:57:05Z

3

expect(name.hasError('minlength', ['minlength'])).toEqual(false);

Try this it worked for me

edited Jan 29, 2020 at 11:57

ChrisMM

10.1k19 gold badges41 silver badges60 bronze badges

answered Jan 29, 2020 at 11:29

anirudh talluri

811 gold badge2 silver badges12 bronze badges

Comments

Stephen · Accepted Answer · 2019-01-28 21:13:31Z

1

I believe it's because the validation key you're looking for is "minlength" non-camelCase, note the lower-case "l". I have personally run into this oddly named error property.

answered Jan 28, 2019 at 21:13

Stephen

1,4161 gold badge11 silver badges10 bronze badges

Comments

itsthetaste · Accepted Answer · 2018-05-13 21:44:59Z

0

expect(errors['minlength']).toBeTruthy();

answered May 13, 2018 at 21:44

itsthetaste

311 bronze badge

Comments

Sumit patel · Accepted Answer · 2019-03-01 05:15:11Z

0

'minLength' is handled in the same way as 'required' or any of the other Validators (e.g. maxLength, pattern).

Unless your signup-form.component.ts code is truncated, I believe that you are missing a couple of things.

Inside your FormBuilder, you need to subscribe to data changes. this.user.valueChanges.subscribe(data => this.onValueChanged(data));

Then you need to declare the onValueChanged function. Consult the Angular Form Validation cookbook for a generic onValueChanged function.

You'll also need to populate the formErrors object with the appropriate keys.

formErrors = {
  'name': ''
 }

And supply validationMessages.

validationMessages = {
  'name': {
    'required': 'Name is required.',
    'minlength': 'Name must be at least 2 characters long.'
  }
 }

edited Mar 1, 2019 at 5:15

Sumit patel

3,91111 gold badges38 silver badges65 bronze badges

answered Apr 21, 2017 at 19:25

Andy Lindsay

614 bronze badges

Comments

Laura · Accepted Answer · 2020-10-19 13:05:03Z

0

It is due to Validator.required priority, when such error exists - other validators are not even invoked and does not produce other errors. You need to set some incorrect value for testing that specific part :)

answered Oct 19, 2020 at 13:05

Laura

463 bronze badges

Collectives™ on Stack Overflow

trouble unit testing reactive form fields in angular

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related