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