I am trying to add unit test cases of template driven form. How to check submit button is disabled at initial stage and enable when when user enter all valid field .

Here is form

ponent.html

Unit test case

ponent.spec.ts

import { ComponentFixture, TestBed,async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement }  from '@angular/core';
import { AppComponent } from './appponent';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


//
describe('AppComponent', () => {
   let fixture ,ponent,debugElement; 
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports:      [ BrowserModule, FormsModule ],
      declarations: [
        AppComponent
      ],
    })pileComponents();
  }));

  beforeEach(()=>{
     fixture = TestBed.createComponent(AppComponent);
     ponent = fixtureponentInstance;
  })

  xdescribe('initial state of form',()=>{

    it('form is invalide button is disable',()=>{
    // fixture.detectChanges();
   //   debugElement = fixture.debugElement;
   //   expect(true).toBe(true)
    })
  })


})

Any update ?

I am trying to add unit test cases of template driven form. How to check submit button is disabled at initial stage and enable when when user enter all valid field .

Here is form

https://stackblitz./edit/angular-a8q2zr?file=src%2Fapp%2Fapp.ponent.html

Unit test case

https://stackblitz./edit/angular-testing-5m3qwm?file=app%2Fapp.ponent.spec.ts

import { ComponentFixture, TestBed,async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement }  from '@angular/core';
import { AppComponent } from './app.ponent';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


//
describe('AppComponent', () => {
   let fixture ,ponent,debugElement; 
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports:      [ BrowserModule, FormsModule ],
      declarations: [
        AppComponent
      ],
    }).pileComponents();
  }));

  beforeEach(()=>{
     fixture = TestBed.createComponent(AppComponent);
     ponent = fixture.ponentInstance;
  })

  xdescribe('initial state of form',()=>{

    it('form is invalide button is disable',()=>{
    // fixture.detectChanges();
   //   debugElement = fixture.debugElement;
   //   expect(true).toBe(true)
    })
  })


})

Any update ?

• javascript
• angular
• jasmine
• karma-jasmine

• it's not easy to test template driven forms, it's better to use model driven forms they are easy to test – Fateh Mohamed Commented May 27, 2018 at 12:57
• @fetch mohamed yes model driven is easy , but I want to know how I will test template driven form – user944513 Commented May 27, 2018 at 12:59
• It's a little dirty but you can use setItnterval and inside it, check whether your form is valid or not, if valid, call clearInterval and continue ... – Hamid Hosseini Commented May 27, 2018 at 13:02

1 Answer 1

You can get the submit-button by using:

fixture.debugElement.query(By.css('input[type=submit]'))

and to check if it is disabled you use the nativeElement of it:

describe('initial state of form',()=>{

    it('form is invalide button is disable',()=>{
      let submitEL: DebugElement = fixture.debugElement.query(By.css('input[type=submit]'));
      expect(submitEL.nativeElement.disabled).toBe(true);
    })
  })