bixi/packages/core/form/form.spec.ts

企业级中后台前端解决方案

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { BixiFormModule } from './form.module';
import { By } from '@angular/platform-browser';
import { FormBuilder, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing';
import { NzButtonModule, NzInputModule } from 'ng-zorro-antd';

describe('#@bixi/core bixi-form', () => {
  let fixture: ComponentFixture<TestComponent>;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BixiFormModule, FormsModule, ReactiveFormsModule, NzButtonModule, NzInputModule],
      declarations: [TestComponent],
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });


  it('# error messsage', () => {
    fixture.componentInstance.onSubmit();
    fixture.detectChanges();
    const errorDoms1 = fixture.debugElement.queryAll(By.css('.ant-form-item-has-error'));
    expect(errorDoms1.length).toBe(2);
    const inputDom = fixture.nativeElement.querySelector('input');
    inputDom.value = 'olivewind test';
    dispatchFakeEvent(inputDom, 'input');
    fixture.detectChanges();
    const errorDoms2 = fixture.debugElement.queryAll(By.css('.ant-form-item-has-error'));
    expect(errorDoms2.length).toBe(1);
  });

});


@Component({
  template: `
  <div style="padding: 20px; width: 40%">
    <form nz-form [formGroup]="form">
      <bixi-form-item required label="Username">
        <input nz-input formControlName="username">
      </bixi-form-item>
      <bixi-form-item required label="Password">
        <input nz-input type="password" formControlName="password">
      </bixi-form-item>
      <bixi-form-item>
        <button nz-button nzType="primary" (click)="onSubmit()">Submit</button>
      </bixi-form-item>
    </form>
  </div>
  `,
})
class TestComponent {
  form: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {
    this.form = this.fb.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required]]
    });
  }

  onSubmit() {
    // tslint:disable-next-line: forin
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty();
      this.form.controls[i].updateValueAndValidity();
    }
  }
}