Unit Testing Nested Components UI elements in Angular using Jasmine and Karma

Question

pseudo-code of my parentComponent html:

<mat-tab-group class="mat-elevation-z4">
<mat-tab label="OneBox">
<host-configuration [hostTemplate]="shareNodes"> 
</host-configuration>
</mat-tab>
</mat-tab-group>

I am creating an instance of child component using it's selector(host-configuration) to create form fields where user can give the values.

Code in childComponent(host-configuration) which will create UI form fields

 @Input()
  set hostTemplate(value: HostTemplate) {
    this.loadedTemplate = value ?? new HostTemplate();

    this.templateNameConfigItem.formControl.setValue(value.TemplateName);
    this.vmStubNameConfigItem.formControl.setValue(value.VMStubName);
    this.virtualApplianceConfigItem.formControl.setValue(value.VirtualAppliance);

    this.cpuCountConfigItem.formControl.setValue(value.Sizing.cpu_count);
    this.numOfCoresPerSocketConfigItem.formControl.setValue(value.Sizing.num_cores_per_socket);
    this.ramInMBConfigItem.formControl.setValue(value.Sizing.ram_mb);

    if (value.VMs.length > 0) {
      this.hostNameConfigItem.formControl.setValue(value.VMs[0]?.ComputerName);
      this.ipAddressConfigItem.formControl.setValue(value.VMs[0]?.Ip);
      this.macAddressConfigItem.formControl.setValue(value.VMs[0]?.Mac);
    }
    this.diskConfigurationItems.length = 0;
    for (const d of value.Disks) {
      this.diskConfigurationItems.push(new DiskConfigurationItems(d));
    }
  }

Now I want to test this particular UI form elements of child component (host-configuration) in parent component spec file?

Is there a way to do this , if yes could you please help me on how to do it ?

Could you try adding the `ChildComponent` to the `declarations` array of the parent's spec? And then the child component will actually be painted in the DOM. — AliF50, Jun 03 '21 at 19:53
I have already added in the declaration array of parent spec , but How do I access child's component form control ? Is it required to create a stub class of child component ? — Ranjan V, Jun 04 '21 at 05:05
I am on mobile but try 'const child = fixture.debugElement.query(By.directive(ChildComponent)).componentInstance:' console.log(child.form); — AliF50, Jun 04 '21 at 13:28
Whenever I try to access 2nd level (childComponent) from parent component spec , it is returning NULL — Ranjan V, Jun 16 '21 at 08:00

Unit Testing Nested Components UI elements in Angular using Jasmine and Karma

0 Answers0