mercredi 14 octobre 2020

Testing angular component with modal from ng-zorro-antd

I'm trying to test a simple component containing a modal with a form from the ng-zorro-antd module.

modal.component.html

<nz-modal nzWidth="33%" [(nzVisible)]="show" [nzTitle]="modalTitle"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="submitForm()"
          [nzFooter]="modalFooter">
  <ng-template #modalTitle>
    <div class="primary-col-text">Create partner</div>
  </ng-template>
  <form nz-form nzLayout="horizontal" [formGroup]="form" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="partnerName">Name</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <input id="partnerName" nz-input formControlName="partnerName"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>Phone number</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback >
        <input id="phoneNumber" nz-input formControlName="phoneNumber"/>
      </nz-form-control>
    </nz-form-item>
    <ng-template #modalFooter>
      <nz-form-item>
        <nz-form-control>
          <button nz-button (click)="resetForm($event)">Reset</button>
          <button nz-button id="submitPartnerButton" nzType="primary" [disabled]="!form.valid" (click)="submitForm()">Create
          </button>
        </nz-form-control>
      </nz-form-item>
    </ng-template>
  </form>
</nz-modal>

modal.component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent implements OnInit {
  @Input() show: boolean;
  @Output() handleSubmit: EventEmitter<any> = new EventEmitter<any>();
  @Output() handleClose: EventEmitter<any> = new EventEmitter<any>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit(): void {
    this.form = this.fb.group({
      partnerName: ['', [Validators.required]],
      phoneNumber: ['', [Validators.required]],
    });
  }

 
  handleCancel() {
    this.handleClose.emit();
  }

  submitPartner() {
  
    this.handleSubmit.emit({
      "name": this.form.get('partnerName').value,
      "phoneNumber": this.form.get('phoneNumber').value,
    });
    this.clearForm();
  }

   .....
  

}

In my test I'm passing the true to the @Input() show and expecting the form submit button to be accessible in fixture.nativeElement. Unfortunately the nativeElement contains an empty modal.

modal.spec.ts

import { async, ComponentFixture, TestBed } from "@angular/core/testing";

import { ModalComponent } from "./modal.component";
import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NzFormModule, NzModalModule } from "ng-zorro-antd";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

describe("ModalComponent", () => {
  let component: ModalComponent;
  let fixture: ComponentFixture<ModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ModalComponent],
      imports: [
        ReactiveFormsModule,
        FormsModule,
        NzFormModule,
        NzModalModule,
        BrowserAnimationsModule
      ],
      providers: [FormBuilder]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ModalComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
  }));

  it("should disable form with all fields empty", () => {
    component.show = true;
    fixture.detectChanges();
    console.log(fixture.nativeElement);
    const disabledSubmitButton = fixture.nativeElement.querySelector(
      'button [disabled="true"]'
    );

    expect(disabledSubmitButton).not.toBeNull();
  });
});

console.log(fixture.nativeElement) prints:

<div id="root-ng-internal-isolated-6" _nghost-a-c328="" ng-version="9.1.11">
<nz-modal _ngcontent-a-c328="" nzwidth="33%" ng-reflect-nz-width="33%" ng-reflect-nz-title="[object Object]" ng-reflect-nz-footer="[object Object]" ng-reflect-nz-visible="true">
   <!--container-->
</nz-modal>
<!--container-->
</div>

Is there a way to render the form inside the modal and access it via querySelector?

Aucun commentaire:

Enregistrer un commentaire