web-dev-qa-db-ja.com

ボタンをチェックする方法が無効になっているか、角張っていませんか?

template driven formの単体テストケースを追加しようとしています。 submitボタンを確認する方法は、初期段階ではdisabledであり、ユーザーがすべての有効なenableを入力するとfieldになります。

こちらがフォームです

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

ユニットテストケース

https://stackblitz.com/edit/angular-testing-5m3qwm?file=app%2Fapp.component.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.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


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

  beforeEach(()=>{
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
  })

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

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


})

すべてのアップデート ?

5
user944513

次のコマンドを使用して、送信ボタンを取得できます。

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

それが無効になっているかどうかを確認するには、そのnativeElementを使用します。

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);
    })
  })
6
Flyii