Question

我正在努力测试md-hint（V4.0.0）表单上angular元素的行为。据我所知，我使用的方法应该有用，我不明白为什么不这样做。

出于演示的目的，我创建了一个小样本组件，如下所示：

测试-MD-input.component.html：

<form [formGroup]="form">
  <md-input-container>
    <input mdInput formControlName="testControl">
    <md-placeholder>A Test Input Control</md-placeholder>
    <md-hint id="hint" *ngIf="form.controls.testControl.dirty && form.controls.testControl.errors?.pattern">I am hinting</md-hint>
  </md-input-container>
</form>

测试-MD-hint.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-test-md-hint',
  templateUrl: './test-md-hint.component.html',
  styleUrls: ['./test-md-hint.component.css']
})
export class TestMdHintComponent implements OnInit {

  form: FormGroup;

  constructor() { }

  ngOnInit() {

    this.form = new FormGroup({
      testControl: new FormControl(null, [
        Validators.pattern('match-me')
      ])
    });
  }

}

测试-MD-input.component.spec.ts：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { TestMdHintComponent } from './test-md-hint.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TestMdHintComponent],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

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


  let form: DebugElement;
  let input: DebugElement;
  let hint: DebugElement;
  beforeEach(() => {
    form = fixture.debugElement.query(By.css('form'));
    input = fixture.debugElement.query(By.css('input'));
    hint = fixture.debugElement.query(By.css('md-hint'));
  });

  // passes as expected  
  it('finds the input', () => {
    expect(input).not.toBeNull();
    expect(input.nativeElement.getAttribute('formControlName'))
      .toBe('testControl');
  });

  // passes as expected  
  it('starts with no hints', () => {
    expect(hint).toBeNull();
  });

  // passes as expected  
  it('displays no hint when all is okay', () => {
    input.nativeElement.value = 'match-me';
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    hint = fixture.debugElement.query(By.css('md-hint'));
    expect(hint).toBeNull();
  });

  // fails, not as expected  
  it('displays a hint when required', () => {
    input.nativeElement.value = 'no-match';
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    hint = fixture.debugElement.query(By.css('md-hint'));
    expect(hint).not.toBeNull();

    console.log(component.form.value);
    // above yields { testControl: null }, not { testControl: 'no-match' } as expected
    // seems to indicate dispatched event not being caught
    // which would explain why hint is not being found
  });

});

所有规格都按预期通过，除了最后一个，我认为应该通过。

我已尝试在whenStable中包含断言，但这没有任何区别，据我所知，在这种情况下不应该要求。

任何人都可以对此有所了解吗？

Answer 1

对于那些感兴趣的人，我发现了我的问题。我无法将ReactiveFormsModule导入我的测试，这是一种疏忽，因为我正在从SharedModule导入并重新导出它。

无法在测试中捕获@ angular / material md-hint

1 个答案: