首页 > 解决方案 > 使用 Jasmine 和 Karma 在 Angular 中对嵌套组件 UI 元素进行单元测试

问题描述

我的 parentComponent html 的伪代码:

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

我正在使用它的选择器(主机配置)创建子组件的实例,以创建用户可以提供值的表单字段。

childComponent(host-configuration) 中的代码将创建 UI 表单字段

 @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));
    }
  }

现在我想在父组件规范文件中测试子组件(主机配置)的这个特定 UI 表单元素?

有没有办法做到这一点,如果是的话,你能帮我看看怎么做吗?

标签: jasminekarma-runnerangular-unit-test

解决方案


推荐阅读